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

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

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

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

1.代碼編輯器/IDEs

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

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

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

·JavaScript(ES6)codesnippets

·npm

·Prettier

·CSSPeek

·Vetur

·ESLint

·LiveSassCompiler

·DebuggerforChrome

·LiveServer

·Beautify

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

2.測試

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

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

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

單元測試

單獨測試單個組件或函數(shù)。

集成測試

測試組件之間的交互。

端間測試

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

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

3.軟技能

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

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

·共情

·溝通

·團隊合作

·平易近人和樂于助人

·耐心

·開放的心態(tài)

·解決問題的能力

·責(zé)任感

·創(chuàng)造力

·時間管理

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

4.JAMstack

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

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

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

如果想使用JAMstack，以下有一些最佳實踐：

整個項目由CDN提供服務(wù)

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

一切都存在于Git

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

自動構(gòu)建

你可以完美地進(jìn)行自動構(gòu)建，因為所有的標(biāo)記是預(yù)先構(gòu)建的—例如，webhooks或云服務(wù)的使用。

原子化部署

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

即時緩存失效

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

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

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

·JAMstack

·JAMstackWTF

·“NewtoJAMstack?EverythingYouNeedtoKnowtoGetStarted”

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

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

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

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

·Next(基于React)

·Nuxt(基于Vue)

·Gatsby(基于React)

·Gridsome(基于Vue)

盡管還有很多，但這些可能會是2021年最受歡迎的。如果想要了解更多，可以查閱這些資源：

·Next.js

·Nuxt.js

·Gatsby

·Gridsome

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

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

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

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

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

·可以從瀏覽器添加到用戶的主屏幕

·即使沒有網(wǎng)絡(luò)連接也能正常工作

·支持網(wǎng)絡(luò)推送通知，從而提高用戶參與度

·使用谷歌的Lighthouse功能

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

·ProgressiveWebApps

·“YourFirstProgressiveWebApp”

7.框架

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

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

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

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

·React

·Vue.js

8.GraphQL

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

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

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

開發(fā)人員通過從RESTAPIsRESTAPIs中提取基于特定目的創(chuàng)建的多個端點—例如/users/<id>端點或者/tours/<id>/location端點，來收集數(shù)據(jù)。

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

使用GraphQL的另一優(yōu)勢是它使用強類型系統(tǒng)。GraphQL上所有內(nèi)容都是通過GraphQL模式定義語言（SDL）來進(jìn)行模式定義的。模式一旦創(chuàng)建，前端和后端開發(fā)人員就可以彼此獨立工作，因為他們都知道定義的數(shù)據(jù)結(jié)構(gòu)。

9.整潔代碼

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

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

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

·為變量、類、方法和函數(shù)創(chuàng)建有意義的名稱

·函數(shù)應(yīng)該短小，其參數(shù)也盡可能地少。

·完全不需要注釋—代碼應(yīng)該說明一切

10.Git

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

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

·gitconfig

·gitinit

·gitclone

·gitstatus

·gitadd

·gitcommit

·gitpush

·gitpull

·gitbranch

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