由于我們所處生態(tài)系統(tǒng)的快速發(fā)展，我們更傾向于花時(shí)間嘗試比較新的發(fā)明并在互聯(lián)網(wǎng)上進(jìn)行討論。IT業(yè)得到經(jīng)久不息的發(fā)展熱情，其中前端開發(fā)毫無(wú)疑問占據(jù)舉足輕重的地位。

新年到，相信前端開發(fā)將成為2020年技術(shù)領(lǐng)域熱門的學(xué)科之一。

[[311942]]

在過(guò)去，前端開發(fā)人員只要了解一些HTML、CSS或jQuery，就可以創(chuàng)建交互式網(wǎng)站。

而如今的開發(fā)，需要更廣泛且不斷變化的一系列技能，有各種工具、庫(kù)和框架亟待掌握，同時(shí)要不斷地投資個(gè)人教育。

最近幾年，ReactJS、VueJS和Svelte等新型軟件庫(kù)和框架相繼出現(xiàn)，它們利用JavaScript來(lái)推動(dòng)主要的Web應(yīng)用程序快速發(fā)展。

本文旨在為前端開發(fā)人員應(yīng)該在2020年關(guān)注什么提供一些指導(dǎo)，從而提高水平，不管你是剛?cè)腴T編程的新手還是有一定經(jīng)驗(yàn)的人。

1. 代碼編輯器/IDEs

與2019年一樣，微軟的VS Code將成為2020年大多數(shù)前端工程師的首選編輯器。

它幾乎具備跟IDE一樣的功能，例如代碼補(bǔ)全和高亮，并且可通過(guò)擴(kuò)展市場(chǎng)進(jìn)行無(wú)限延伸。

尤其是它的市場(chǎng)讓VS Code脫穎而出。下面是作為前端開發(fā)人員的一些重要擴(kuò)展內(nèi)容：

• JavaScript (ES6) code snippets
• npm
• Prettier
• CSS Peek
• Vetur
• ESLint
• Live Sass Compiler
• Debugger for Chrome
• Live Server
• Beautify

這些是很酷的例子。VS Code還有更多有待于挖掘，如果你尚未使用它，建議去嘗試一下。

2.測(cè)試

未經(jīng)過(guò)測(cè)試的代碼不應(yīng)產(chǎn)出。

盡管對(duì)個(gè)人項(xiàng)目不進(jìn)行任何測(cè)試似乎更加方便，但在商業(yè)環(huán)境和企業(yè)環(huán)境下工作時(shí)必須進(jìn)行測(cè)試。因此，對(duì)于任何開發(fā)人員而言，最好盡可能在開發(fā)工作中加入測(cè)試環(huán)節(jié)。

測(cè)試用例可以作如下區(qū)分：

單元測(cè)試

單獨(dú)測(cè)試單個(gè)組件或函數(shù)。

集成測(cè)試

測(cè)試組件之間的交互。

端間測(cè)試

在瀏覽器中測(cè)試功能完善的用戶流。

測(cè)試方法還有很多，例如手動(dòng)測(cè)試和快照測(cè)試等。如果想升任到高級(jí)開發(fā)人員或者打算在具有一定開發(fā)標(biāo)準(zhǔn)的大型企業(yè)工作，就應(yīng)該努力提高測(cè)試技能。

3.軟技能

軟技能的學(xué)習(xí)經(jīng)常被忽視卻對(duì)開發(fā)人員極為重要。

盡管它有助于理解技術(shù)層面的內(nèi)容，但是知道如何進(jìn)行團(tuán)隊(duì)溝通也同樣重要。如果決心從事技術(shù)方面的職業(yè)或者打算升任，應(yīng)該培養(yǎng)以下的軟技能：

• 共情
• 溝通
• 團(tuán)隊(duì)合作
• 平易近人和樂于助人
• 耐心
• 開放的心態(tài)
• 解決問題的能力
• 責(zé)任感
• 創(chuàng)造力
• 時(shí)間管理

永遠(yuǎn)記?。焊呒?jí)開發(fā)人員最重要的成果是培養(yǎng)更多的高級(jí)開發(fā)人員。

4. JAMstack

術(shù)語(yǔ)JAMstack 代表著JavaScript(在客戶端上運(yùn)行—例如React、Vue或VanillaJS)、API(服務(wù)器端處理是抽象的，其通過(guò)JavaScript訪問HTTPS)、markup(在部署時(shí)預(yù)構(gòu)建的模塊化標(biāo)記)三者。

這是構(gòu)建具有更好性能的網(wǎng)站和apps的一種方式—降低擴(kuò)展成本、提高安全性和更好的開發(fā)體驗(yàn)。

盡管這些術(shù)語(yǔ)本身不是新鮮事物，但它們都有一個(gè)共同點(diǎn)—即不依賴網(wǎng)站服務(wù)器。因此，如果單片應(yīng)用程序依賴于Ruby或Node.js后端，或者依賴由服務(wù)器端CMS(例如Drupal 或WordPress)構(gòu)建的網(wǎng)站，那么它便不是使用JAMstack構(gòu)建而成。

如果想使用JAMstack，以下有一些優(yōu)秀實(shí)踐：

整個(gè)項(xiàng)目由CDN提供服務(wù)

由于不需要任何服務(wù)器，整個(gè)項(xiàng)目可通過(guò)CDN獲取服務(wù)，解鎖無(wú)與倫比的速度和性能。

一切都存在于Git

每個(gè)人應(yīng)該能夠從Git repo上復(fù)制整個(gè)項(xiàng)目，而無(wú)需數(shù)據(jù)庫(kù)或者復(fù)雜的設(shè)置。

自動(dòng)構(gòu)建

你可以完美地進(jìn)行自動(dòng)構(gòu)建，因?yàn)樗械臉?biāo)記是預(yù)先構(gòu)建的—例如，webhooks或云服務(wù)的使用。

原子化部署

為了避免在大型項(xiàng)目中重新部署成百上千的文件而造成的不一致狀態(tài)，原子化部署等到所有文件上傳后，才進(jìn)行更改。

即時(shí)緩存失效

當(dāng)網(wǎng)站運(yùn)行時(shí)，必須確保CDN能夠處理即時(shí)緩存清除，以使更改可見。

著名的Netlify、Zeit等主機(jī)都支持JAMstack應(yīng)用，大公司使用它們?yōu)橛脩籼峁┏錾捏w驗(yàn)。

作為一名前端開發(fā)人員，一定有在2020年想要弄清楚的事。如果想要進(jìn)一步了解JAMstacks，下面是一些不錯(cuò)的資源：

• JAMstack
• JAMstack WTF
• “New to JAMstack? Everything You Need to Know to Get Started”

5.靜態(tài)站點(diǎn)生成器

靜態(tài)站點(diǎn)生成器結(jié)合了服務(wù)器端的渲染功能(對(duì)SEO和初始加載時(shí)間都非常重要)和單頁(yè)應(yīng)用程序。

如今，許多項(xiàng)目即使不需要服務(wù)器端渲染，也會(huì)選擇SSG，因?yàn)镹ext 或 Nuxt這類解決方案具有便捷的功能，例如Markdown編輯器支持、模塊捆綁和集成測(cè)試運(yùn)行器等。

如果你是認(rèn)真對(duì)待前端開發(fā)，應(yīng)該仔細(xì)研究以下項(xiàng)目，并嘗試從中獲得一些實(shí)踐經(jīng)驗(yàn)：

• Next (基于React)
• Nuxt (基于Vue)
• Gatsby (基于React)
• Gridsome (基于Vue)

盡管還有很多，但這些可能會(huì)是2020年比較受歡迎的。如果想要了解更多，可以查閱這些資源：

• Next.js
• Nuxt.js
• Gatsby
• Gridsome

6. 漸進(jìn)式網(wǎng)絡(luò)應(yīng)用(PWA)

漸進(jìn)式網(wǎng)絡(luò)應(yīng)用(PWA)絕對(duì)會(huì)成為2020年的熱點(diǎn)。越來(lái)越多的公司選擇PWAs取代本機(jī)應(yīng)用程序，為用戶提供豐富的移動(dòng)體驗(yàn)。

PWAs具有可靠(即時(shí)下載，無(wú)需網(wǎng)絡(luò)連接)、快速(流暢的動(dòng)畫，對(duì)用戶交互的快速響應(yīng))和高度參與感(本機(jī)應(yīng)用程序感受，出色的用戶體驗(yàn))的特點(diǎn)。

它們利用服務(wù)人員提供離線功能，以及利用web-app清單文件提供全屏體驗(yàn)。

構(gòu)建漸進(jìn)式網(wǎng)絡(luò)應(yīng)用的理由如下：

• 可以從瀏覽器添加到用戶的主屏幕
• 即使沒有網(wǎng)絡(luò)連接也能正常工作
• 支持網(wǎng)絡(luò)推送通知，從而提高用戶參與度
• 使用谷歌的Lighthouse功能

如果想了解關(guān)于PWAs的更多信息，可以隨時(shí)查閱這些附加資源：

• Progressive Web Apps
• “Your First Progressive Web App”

7.框架

2020年，我們可能會(huì)看到Facebook的ReactJS和社區(qū)驅(qū)動(dòng)的VueJS之間的對(duì)決。目前，React在GitHub上擁有140,000星(用戶評(píng)價(jià))，而Vue擁有更多，達(dá)到了153,000星，而Angular只有53,000星。

2019年React(藍(lán)線)、Vue(紅線)、Angular(黃線)和Svelte(綠線)的搜索量支持這一假設(shè)——Vue的搜索量稍微高于React。相比之下，Angular的搜索量無(wú)法趕超，而Svelte在這一比較中完全不占一席之地。

因此在2020年，使用JavaScript框架或想要使用它的前端開發(fā)人員應(yīng)該將React 和 Vue作為首選。如果正在進(jìn)行大型的企業(yè)項(xiàng)目，Angular是一個(gè)有效選擇。

如果想要進(jìn)一步了解這些框架，以下的資源非常好：

• React
• Vue.js

8. GraphQL

GraphQL是當(dāng)前比較熱門的話題之一，也絕對(duì)是在2020年需要學(xué)習(xí)或提高的技能。

盡管REST通過(guò)提供無(wú)狀態(tài)服務(wù)器之類的不錯(cuò)概念，一直被理所當(dāng)然地認(rèn)為是設(shè)計(jì)web APIs的標(biāo)準(zhǔn)。但談及跟上不斷變化的客戶訪問時(shí)，RESTfulAPIs逐漸被認(rèn)為不是那么靈活。

GraphQL由Facebook開發(fā)，旨在解決開發(fā)人員使用Restful APIs時(shí)面臨的問題。

開發(fā)人員通過(guò)從REST APIsREST APIs中提取基于特定目的創(chuàng)建的多個(gè)端點(diǎn)—例如/users/端點(diǎn)或者/tours//location端點(diǎn)，來(lái)收集數(shù)據(jù)。

GraphQL的使用將以不同的方式展開。開發(fā)人員會(huì)根據(jù)他們的數(shù)據(jù)請(qǐng)求向GraphQL服務(wù)器發(fā)送查詢。然后服務(wù)器將返回帶有全部相應(yīng)數(shù)據(jù)的JSON對(duì)象。

使用GraphQL的另一優(yōu)勢(shì)是它使用強(qiáng)類型系統(tǒng)。GraphQL上所有內(nèi)容都是通過(guò)GraphQL模式定義語(yǔ)言(SDL)來(lái)進(jìn)行模式定義的。模式一旦創(chuàng)建，前端和后端開發(fā)人員就可以彼此獨(dú)立工作，因?yàn)樗麄兌贾蓝x的數(shù)據(jù)結(jié)構(gòu)。

9. 整潔代碼

能夠編寫整潔代碼是一項(xiàng)重要的技能而且許多企業(yè)對(duì)它的需求很高。如果想從開發(fā)員的位置升到高級(jí)開發(fā)員，應(yīng)該認(rèn)真學(xué)習(xí)整潔代碼的概念。

整潔代碼應(yīng)該是優(yōu)雅且易于閱讀的。應(yīng)該注意的是它應(yīng)重點(diǎn)突出。所有的測(cè)試均以整潔代碼運(yùn)行。它們不包含重復(fù)項(xiàng)，也應(yīng)該盡量減少諸如類、方法和函數(shù)等實(shí)體的使用。

整潔代碼開發(fā)人員應(yīng)該進(jìn)行如下操作：

• 為變量、類、方法和函數(shù)創(chuàng)建有意義的名稱
• 函數(shù)應(yīng)該短小，其參數(shù)也盡可能地少。
• 完全不需要注釋—代碼應(yīng)該說(shuō)明一切

如果想了解關(guān)于整潔代碼的更多信息，請(qǐng)查閱RobertC. Martin的書籍和帖子。

10. Git

毫無(wú)疑問，Git是如今網(wǎng)站開發(fā)中版本控制的標(biāo)準(zhǔn)。對(duì)于每位前端開發(fā)人員而言，了解Git的基本概念和工作流程是非常重要的，這有助于保證他們?cè)诟鞣N規(guī)模團(tuán)隊(duì)中的工作效率。

下面是應(yīng)該了解的一些流行Git命令：

• git config
• git init
• git clone
• git status
• git add
• git commit
• git push
• git pull
• git branch

了解這些命令可以提高效率，這總是不錯(cuò)的。但前端工程師還應(yīng)該學(xué)習(xí)Git背后的基本概念。

以上就是小芯整理的，2020年前端開發(fā)人員應(yīng)該努力學(xué)習(xí)、提高或掌握的10件重要的事。