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