在過(guò)去，前端領(lǐng)域的開(kāi)發(fā)人員只要了解一些 HTML、CSS，也許還有 jQuery，就足以創(chuàng)建交互式網(wǎng)站了；但是今天，他們需要面對(duì)廣泛而不斷變化的生態(tài)系統(tǒng)，開(kāi)發(fā)多種多樣的技能；他們需要掌握眾多工具、庫(kù)和框架；并且他們還要不斷投資自身來(lái)學(xué)習(xí)新的知識(shí)。下面就跟大家分享2020年Web前端需要掌握的10個(gè)關(guān)鍵技能 。
最近幾年涌現(xiàn)了一系列基于 JavaScript 的優(yōu)秀庫(kù)和框架新品，如 ReactJS、VueJS 和 Svelte 等；它們?yōu)橹髁?Web 應(yīng)用程序帶來(lái)了強(qiáng)大的動(dòng)力。
本文希望為你提供一些指導(dǎo)，幫助你在 2020 年提升自己的前端開(kāi)發(fā)水平；無(wú)論你是新手還是有不少經(jīng)驗(yàn)的老鳥(niǎo)，這篇文章都值得一讀。
1. 框架
2020 年，我們可能會(huì)看到 Facebook 的 ReactJS 與社區(qū)驅(qū)動(dòng)的 VueJS 之間的對(duì)決。目前，React 在 GitHub 上擁有 140,000 星，而 Vue 甚至拿到了 153,000 星。相比之下，Angular 這樣的項(xiàng)目只有 53,000 個(gè)星。
在 2019 年，React（藍(lán)線(xiàn)）、Vue（紅線(xiàn)）、Angular（黃線(xiàn)）和 Svelte（綠線(xiàn)）的搜索趨勢(shì)也能為這一假設(shè)提供佐證——其中 Vue 略高于 React。Angular 在搜索量方面差的很遠(yuǎn)，Svelte 則在這個(gè)對(duì)決中幾乎沒(méi)有存在感。
2020年需要學(xué)習(xí)的10個(gè)前端關(guān)鍵技能
因此在 2020 年，使用或希望使用 JavaScript 框架的前端開(kāi)發(fā)人員應(yīng)將 React 和 Vue 作為他們的主要選擇。如果你正在處理大型企業(yè)項(xiàng)目，則 Angular 也是可行之選。
如果你想了解有關(guān)這些框架的更多信息，請(qǐng)查看下列重要資源：
React
Vue.js
2. 靜態(tài)站點(diǎn)生成器
靜態(tài)站點(diǎn)生成器融合了服務(wù)端渲染（對(duì)于 SEO 來(lái)說(shuō)非常重要，也會(huì)影響初始加載時(shí)間）和單頁(yè)應(yīng)用程序的能力。
如今，許多項(xiàng)目即使不需要服務(wù)端渲染也選擇了一種 SSG，因?yàn)?Next 或 Nuxt 之類(lèi)的解決方案具有很多便捷的功能，例如 markdown 支持、模塊打包器和集成的測(cè)試運(yùn)行器等。
如果你很重視前端開(kāi)發(fā)工作，則應(yīng)仔細(xì)研究以下項(xiàng)目，并嘗試獲得一些實(shí)踐經(jīng)驗(yàn)：
Next（基于 React）
Nuxt（基于 Vue）
Gatsby（基于 React）
Gridsome（基于 Vue）
這些可能是 2020 年最熱門(mén)的項(xiàng)目，當(dāng)然選項(xiàng)還有很多。如果你想了解關(guān)于它們的更多信息，請(qǐng)查看這些資源：
Next.js
Nuxt.js
Gatsby
Gridsome
3.JAMstack
術(shù)語(yǔ) JAMstack 代表 JavaScript（在客戶(hù)端上運(yùn)行，例如 React、Vue 或 VanillaJS）、API（服務(wù)端進(jìn)程通過(guò) JavaScript 經(jīng)由 HTTPS 抽象并訪問(wèn)）和 markup（在部署時(shí)預(yù)構(gòu)建的模板標(biāo)記）。
這是一種構(gòu)建性能更好的網(wǎng)站和應(yīng)用的方法——降低擴(kuò)展成本、提供更高的安全性并提供更好的開(kāi)發(fā)體驗(yàn)。
盡管這些術(shù)語(yǔ)本身并不是什么新鮮事物，但它們有自己的共同點(diǎn)——它們不依賴(lài) Web 服務(wù)器。因此，依賴(lài)一個(gè) Ruby 或 Node.js 后端，或使用服務(wù)端 CMS（例如 Drupal 或 WordPress）構(gòu)建站點(diǎn)的單體應(yīng)用就不是用 JAMstack 構(gòu)建的。
如果你要使用 JAMstack，下面是一些最佳實(shí)踐：
整個(gè)項(xiàng)目都在一個(gè) CDN 上提供服務(wù)
由于 JAMstack 不需要服務(wù)器，因此整個(gè)項(xiàng)目都可以通過(guò)一個(gè) CDN 提供服務(wù)，從而釋放出無(wú)與倫比的速度和性能。
一切都放在 Git 中
所有人都應(yīng)該能夠從一個(gè) Git 存儲(chǔ)庫(kù)克隆整個(gè)項(xiàng)目，而無(wú)需數(shù)據(jù)庫(kù)或復(fù)雜的設(shè)置。
自動(dòng)化構(gòu)建
你可以完美地自動(dòng)構(gòu)建，因?yàn)樗袠?biāo)記都是預(yù)構(gòu)建的——例如使用 webhooks 或云服務(wù)預(yù)構(gòu)建標(biāo)記。
原子部署
為了在大型項(xiàng)目中重新部署數(shù)百或數(shù)千個(gè)文件時(shí)避免出現(xiàn)不一致的狀態(tài)，原子部署將等待所有文件上傳，然后再進(jìn)行更改。
即時(shí)緩存失效
當(dāng)站點(diǎn)上線(xiàn)時(shí)，必須確保 CDN 可以處理即時(shí)緩存清除任務(wù)，以使更改可見(jiàn)。
像 Netlify 或 Zeit 這樣的著名主機(jī)都支持 JAMstack 應(yīng)用程序，還有很多大公司使用它們?yōu)橛脩?hù)提供出色的體驗(yàn)。
作為一名前端開(kāi)發(fā)人員，你絕對(duì)會(huì)想在 2020 年學(xué)習(xí)使用 JAMstack。如果你想了解有關(guān) JAMstacks 的更多信息，這里有一些很棒的資源：
JAMstack（https://jamstack.org/）
JAMstack WTF（https://jamstack.w t f/）
“剛接觸 JAMstack？你需要了解的一切入門(mén)知識(shí)”（https://snipcart.com/blog/jamstack）
4.PWA
漸進(jìn)式 Web 應(yīng)用程序（PWA）絕對(duì)是 2020 年的熱門(mén)話(huà)題。越來(lái)越多的公司選擇使用 PWA 取代原生應(yīng)用，從而為用戶(hù)提供豐富的移動(dòng)體驗(yàn)。
PWA 都很可靠（即時(shí)加載，無(wú)需連接互聯(lián)網(wǎng)即可工作）、速度飛快（流暢的動(dòng)畫(huà)，對(duì)用戶(hù)交互的快速響應(yīng)），并能提供吸引人的體驗(yàn)（類(lèi)似原生應(yīng)用的感受，出色的用戶(hù)體驗(yàn)）。
它們利用服務(wù) worker 提供脫機(jī)功能，并利用一個(gè) web-app 清單文件提供全屏體驗(yàn)。
構(gòu)建一個(gè)漸進(jìn)式 Web 應(yīng)用的原因可能包括：
可以從瀏覽器添加到用戶(hù)的主屏幕
即使沒(méi)有互聯(lián)網(wǎng)也能正常工作
支持網(wǎng)絡(luò)推送通知以增強(qiáng)用戶(hù)參與度
利用谷歌的 Lighthouse 功能
如果你想了解有關(guān) PWA 的更多信息，請(qǐng)隨時(shí)查看以下資源：
漸進(jìn)式 Web 應(yīng)用（https://developers.google.com/web/progressive-web-apps）
“你的第一個(gè)漸進(jìn)式 Web 應(yīng)用”（https://codelabs.developers.google.com/codelabs/your-first-pwapp/#0）
5.GraphQL
GraphQL 是當(dāng)前最熱門(mén)的話(huà)題之一，并且絕對(duì)是你在 2020 年需要學(xué)習(xí)或提升的事物。
盡管 REST 提供了無(wú)狀態(tài)服務(wù)器之類(lèi)的出色概念，一直被認(rèn)為是設(shè)計(jì) Web API 的事實(shí)標(biāo)準(zhǔn)，但由于訪問(wèn)這些 RESTful API 的客戶(hù)端的變化速度太快，這些相對(duì)笨拙的 API 越來(lái)越顯得不夠靈活了。
GraphQL 由 Facebook 開(kāi)發(fā)，旨在解決開(kāi)發(fā)人員在處理 Restful API 時(shí)面臨的一些具體問(wèn)題。
使用 REST API 時(shí)，開(kāi)發(fā)人員可以從具有一個(gè)特定目的的多個(gè)端點(diǎn)（例如一個(gè) /users/端點(diǎn)或一個(gè) /tours//location 端點(diǎn)）中獲取數(shù)據(jù)，進(jìn)而收集數(shù)據(jù)。
使用 GraphQL 時(shí)的工作機(jī)制有所不同。開(kāi)發(fā)人員會(huì)將一個(gè)查詢(xún)與他們的數(shù)據(jù)需求一起發(fā)送到一個(gè) GraphQL 服務(wù)器上。然后，服務(wù)器將返回帶有所有對(duì)應(yīng)數(shù)據(jù)的一個(gè) JSON 對(duì)象。
使用 GraphQL 的另一個(gè)好處是它使用了強(qiáng)類(lèi)型系統(tǒng)。GraphQL 服務(wù)器上的所有內(nèi)容都是使用 GraphQLschema 定義語(yǔ)言（SDL），通過(guò)一個(gè) schema 定義的。創(chuàng)建 schema 后，前端和后端開(kāi)發(fā)人員就可以彼此獨(dú)立地工作，因?yàn)樗麄兌剂私饬艘讯x的數(shù)據(jù)結(jié)構(gòu)。
如果你想了解有關(guān) GraphQL 的更多信息，請(qǐng)查看以下重要資源：
GraphQL
怎樣開(kāi)始 GraphQL（https://www.howtographql.com/）
“GraphQL Content API 入門(mén)”（https://www.contentful.com/developers/docs/tutorials/general/graphql/）
“GraphQL：一種數(shù)據(jù)查詢(xún)語(yǔ)言”（https://engineering.fb.com/core-data/graphql-a-data-query-language/）
6. 代碼編輯器 /IDE
與 2019 年一樣，微軟的 VS Code 將在 2020 年成為大多數(shù)前端工程師的首選編輯器。
它提供了很像 IDE 的功能，例如代碼完成和高亮顯示，并且可以通過(guò)其擴(kuò)展市場(chǎng)來(lái)獲得幾乎無(wú)限的擴(kuò)展能力。
其中擴(kuò)展市場(chǎng)是讓 VS Code 如此出色的最大功臣。以下是為前端開(kāi)發(fā)人員準(zhǔn)備的一些出色擴(kuò)展：
JavaScript (ES6) code snippets
npm
Prettier
CSS Peek
Vetur
ESLint
Live Sass Compiler
Debugger for Chrome
Live Server
Beautify
這些是一些很酷的例子。在 VS Code 中還有很多值得探索的內(nèi)容，因此如果你還沒(méi)用過(guò)，我建議你嘗試一下。
7. 測(cè)試
未經(jīng)測(cè)試的代碼不應(yīng)被投入生產(chǎn)環(huán)境。
在你的個(gè)人項(xiàng)目中，似乎不做任何測(cè)試是很方便的，但在商業(yè)和企業(yè)環(huán)境中工作時(shí)必須進(jìn)行測(cè)試。因此對(duì)于任何開(kāi)發(fā)人員而言，最好盡量將測(cè)試集成到開(kāi)發(fā)工作流程中。
測(cè)試用例可以分為以下幾類(lèi)：
單元測(cè)試
在隔離環(huán)境中測(cè)試單個(gè)組件或函數(shù)。
集成測(cè)試
測(cè)試組件之間的交互。
端到端測(cè)試
在瀏覽器中測(cè)試完整功能的用戶(hù)流。
還有更多測(cè)試方法，例如手動(dòng)測(cè)試、快照測(cè)試等。如果你想升任高級(jí)開(kāi)發(fā)人員職位，或打算在具備一些開(kāi)發(fā)標(biāo)準(zhǔn)的大型公司工作，則應(yīng)嘗試提升自己的測(cè)試技能。
8. 純凈代碼
能夠編寫(xiě)干凈的代碼是一項(xiàng)很棒的技能，許多組織都對(duì)此提出了很高的要求。如果你想從開(kāi)發(fā)人員的職位升級(jí)為高級(jí)開(kāi)發(fā)人員，則應(yīng)該好好學(xué)習(xí)純凈代碼的理念。
簡(jiǎn)潔的代碼應(yīng)該是優(yōu)雅且易讀的。它們應(yīng)該專(zhuān)注于某個(gè)目標(biāo)，你應(yīng)該做到這一點(diǎn)。所有測(cè)試均運(yùn)行在純凈代碼中。它們不應(yīng)包含重復(fù)項(xiàng)，應(yīng)盡量減少實(shí)體（例如類(lèi)、方法和函數(shù)）的使用。
想要編寫(xiě)純凈代碼，開(kāi)發(fā)人員應(yīng)做的一些事情是：
為變量、類(lèi)、方法和函數(shù)創(chuàng)建有意義的名稱(chēng)；
函數(shù)應(yīng)該很小并且應(yīng)該盡可能減少參數(shù)；
根本不需要注釋——代碼本身就應(yīng)該說(shuō)明一切。
如果你想了解有關(guān)純凈代碼檢查的更多信息，請(qǐng)閱讀 Robert C. Martin 的書(shū)籍和帖子。
9.Git
毫無(wú)疑問(wèn)，Git 是當(dāng)今 Web 開(kāi)發(fā)中版本控制的標(biāo)準(zhǔn)。對(duì)于每位前端工程師而言，了解基本的 Git 概念和工作流程是非常重要的，這樣才能在各種規(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
這些命令可以提高工作效率，熟悉它們當(dāng)然是很好的；但是前端工程師還應(yīng)該學(xué)習(xí) Git 的基本概念。以下是一些適合你的資源：
“解釋 Git 的基本概念以及如何使用 GitHub”（https://thepilcrow.net/explaining-basic-concepts-git-and-github/）；
“如何使用 GitHub——使用 GitHub 進(jìn)行開(kāi)發(fā)協(xié)作”（https://www.edureka.co/blog/how-to-use-github/）；
GitHub。
10. 軟技能
對(duì)于開(kāi)發(fā)人員來(lái)說(shuō)，經(jīng)常被忽視但確實(shí)非常重要的是一點(diǎn)就是獲取一些軟技能。
雖然了解事物的技術(shù)層面是很有用的，但知道如何在團(tuán)隊(duì)中交流也同樣重要。如果你很在乎自己的技術(shù)生涯，并且 / 或者打算升任高級(jí)職位，那么你應(yīng)該發(fā)展自己的以下軟技能：
同理心
交流
團(tuán)隊(duì)合作
平易近人和樂(lè)于助人
耐心
開(kāi)放的思想
解決問(wèn)題的理念
負(fù)責(zé)任
創(chuàng)造力
時(shí)間管理
永遠(yuǎn)記?。焊呒?jí)開(kāi)發(fā)人員最重要的交付物是更高級(jí)的開(kāi)發(fā)人員。
小結(jié)
在本文中，展示了前端開(kāi)發(fā)人員應(yīng)在 2020 年嘗試學(xué)習(xí)、改進(jìn)或掌握的 10 項(xiàng)重要內(nèi)容。
這份清單并不是要無(wú)所不包，但希望它能給你帶來(lái)一些的靈感——如何選擇就是你的事情了！
聯(lián)系客服
