毫無疑問，前端開發(fā)會是 2020 年技術領域最熱門的專業(yè)之一。

在過去，前端領域的開發(fā)人員只要了解一些 HTML、CSS，也許還有 jQuery，就足以創(chuàng)建交互式網站了;但是今天，他們需要面對廣泛而不斷變化的生態(tài)系統(tǒng)，開發(fā)多種多樣的技能;他們需要掌握眾多工具、庫和框架;并且他們還要不斷投資自身來學習新的知識。

[[317767]]

最近幾年涌現(xiàn)了一系列基于 JavaScript 的優(yōu)秀庫和框架新品，如 ReactJS、VueJS 和 Svelte 等;它們?yōu)橹髁?Web 應用程序帶來了強大的動力。

本文希望為你提供一些指導，幫助你在 2020 年提升自己的前端開發(fā)水平；無論你是新手還是有不少經驗的老鳥，這篇文章都值得一讀。

1. 框架

2020 年，我們可能會看到 Facebook 的 ReactJS 與社區(qū)驅動的 VueJS 之間的對決。目前，React 在 GitHub 上擁有 140,000 星，而 Vue 甚至拿到了 153,000 星。相比之下，Angular 這樣的項目只有 53,000 個星。

在 2019 年，React(藍線)、Vue(紅線)、Angular(黃線)和 Svelte(綠線)的搜索趨勢也能為這一假設提供佐證——其中 Vue 略高于 React。Angular 在搜索量方面差的很遠，Svelte 則在這個對決中幾乎沒有存在感。

因此在 2020 年，使用或希望使用 JavaScript 框架的前端開發(fā)人員應將 React 和 Vue 作為他們的主要選擇。如果你正在處理大型企業(yè)項目，則 Angular 也是可行之選。

如果你想了解有關這些框架的更多信息，請查看下列重要資源：

• React
• Vue.js

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

靜態(tài)站點生成器融合了服務端渲染(對于 SEO 來說非常重要，也會影響初始加載時間)和單頁應用程序的能力。

如今，許多項目即使不需要服務端渲染也選擇了一種 SSG，因為 Next 或 Nuxt 之類的解決方案具有很多便捷的功能，例如 markdown 支持、模塊打包器和集成的測試運行器等。

如果你很重視前端開發(fā)工作，則應仔細研究以下項目，并嘗試獲得一些實踐經驗：

• 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(在部署時預構建的模板標記)。

這是一種構建性能更好的網站和應用的方法——降低擴展成本、提供更高的安全性并提供更好的開發(fā)體驗。

盡管這些術語本身并不是什么新鮮事物，但它們有自己的共同點——它們不依賴 Web 服務器。因此，依賴一個 Ruby 或 Node.js 后端，或使用服務端 CMS(例如 Drupal 或 WordPress)構建站點的單體應用就不是用 JAMstack 構建的。

如果你要使用 JAMstack，下面是一些最佳實踐：

(1) 整個項目都在一個 CDN 上提供服務

由于 JAMstack 不需要服務器，因此整個項目都可以通過一個 CDN 提供服務，從而釋放出無與倫比的速度和性能。

(2) 一切都放在 Git 中

所有人都應該能夠從一個 Git 存儲庫克隆整個項目，而無需數(shù)據(jù)庫或復雜的設置。

(3) 自動化構建

你可以完美地自動構建，因為所有標記都是預構建的——例如使用 webhooks 或云服務預構建標記。

(4) 原子部署

為了在大型項目中重新部署數(shù)百或數(shù)千個文件時避免出現(xiàn)不一致的狀態(tài)，原子部署將等待所有文件上傳，然后再進行更改。

(5) 即時緩存失效

當站點上線時，必須確保 CDN 可以處理即時緩存清除任務，以使更改可見。

像 Netlify 或 Zeit 這樣的著名主機都支持 JAMstack 應用程序，還有很多大公司使用它們?yōu)橛脩籼峁┏錾捏w驗。

作為一名前端開發(fā)人員，你絕對會想在 2020 年學習使用 JAMstack。如果你想了解有關 JAMstacks 的更多信息，這里有一些很棒的資源：

• JAMstack(https://jamstack.org/)
• JAMstack WTF(https://jamstack.wtf/)
• “剛接觸 JAMstack?你需要了解的一切入門知識”(https://snipcart.com/blog/jamstack)

4. PWA

漸進式 Web 應用程序(PWA)絕對是 2020 年的熱門話題。越來越多的公司選擇使用 PWA 取代原生應用，從而為用戶提供豐富的移動體驗。

PWA 都很可靠(即時加載，無需連接互聯(lián)網即可工作)、速度飛快(流暢的動畫，對用戶交互的快速響應)，并能提供吸引人的體驗(類似原生應用的感受，出色的用戶體驗)。

它們利用服務 worker 提供脫機功能，并利用一個 web-app 清單文件提供全屏體驗。

構建一個漸進式 Web 應用的原因可能包括：

• 可以從瀏覽器添加到用戶的主屏幕
• 即使沒有互聯(lián)網也能正常工作
• 支持網絡推送通知以增強用戶參與度
• 利用谷歌的 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 提供了無狀態(tài)服務器之類的出色概念，一直被認為是設計 Web API 的事實標準，但由于訪問這些 RESTful API 的客戶端的變化速度太快，這些相對笨拙的 API 越來越顯得不夠靈活了。

GraphQL 由 Facebook 開發(fā)，旨在解決開發(fā)人員在處理 Restful API 時面臨的一些具體問題。

使用 REST API 時，開發(fā)人員可以從具有一個特定目的的多個端點(例如一個 /users/端點或一個 /tours//location 端點)中獲取數(shù)據(jù)，進而收集數(shù)據(jù)。

使用 GraphQL 時的工作機制有所不同。開發(fā)人員會將一個查詢與他們的數(shù)據(jù)需求一起發(fā)送到一個 GraphQL 服務器上。然后，服務器將返回帶有所有對應數(shù)據(jù)的一個 JSON 對象。

使用 GraphQL 的另一個好處是它使用了強類型系統(tǒng)。GraphQL 服務器上的所有內容都是使用 GraphQLschema 定義語言(SDL)，通過一個 schema 定義的。創(chuàng)建 schema 后，前端和后端開發(fā)人員就可以彼此獨立地工作，因為他們都了解了已定義的數(shù)據(jù)結構。

如果你想了解有關 GraphQL 的更多信息，請查看以下重要資源：

• GraphQL
• 怎樣開始 GraphQL(https://www.howtographql.com/)
• “GraphQL Content API 入門”(https://www.contentful.com/developers/docs/tutorials/general/graphql/)
• “GraphQL：一種數(shù)據(jù)查詢語言”(https://engineering.fb.com/core-data/graphql-a-data-query-language/)

6. 代碼編輯器 /IDE

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

它提供了很像 IDE 的功能，例如代碼完成和高亮顯示，并且可以通過其擴展市場來獲得幾乎無限的擴展能力。

其中擴展市場是讓 VS Code 如此出色的最大功臣。以下是為前端開發(fā)人員準備的一些出色擴展：

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

這些是一些很酷的例子。在 VS Code 中還有很多值得探索的內容，因此如果你還沒用過，我建議你嘗試一下。

7. 測試未經測試的代碼不應被投入生產環(huán)境

在你的個人項目中，似乎不做任何測試是很方便的，但在商業(yè)和企業(yè)環(huán)境中工作時必須進行測試。因此對于任何開發(fā)人員而言，最好盡量將測試集成到開發(fā)工作流程中。

測試用例可以分為以下幾類：

• 單元測試：在隔離環(huán)境中測試單個組件或函數(shù)。
• 集成測試：測試組件之間的交互。
• 端到端測試：在瀏覽器中測試完整功能的用戶流。

還有更多測試方法，例如手動測試、快照測試等。如果你想升任高級開發(fā)人員職位，或打算在具備一些開發(fā)標準的大型公司工作，則應嘗試提升自己的測試技能。

8. 純凈代碼

能夠編寫干凈的代碼是一項很棒的技能，許多組織都對此提出了很高的要求。如果你想從開發(fā)人員的職位升級為高級開發(fā)人員，則應該好好學習純凈代碼的理念。

簡潔的代碼應該是優(yōu)雅且易讀的。它們應該專注于某個目標，你應該做到這一點。所有測試均運行在純凈代碼中。它們不應包含重復項，應盡量減少實體(例如類、方法和函數(shù))的使用。

想要編寫純凈代碼，開發(fā)人員應做的一些事情是：

• 為變量、類、方法和函數(shù)創(chuàng)建有意義的名稱;
• 函數(shù)應該很小并且應該盡可能減少參數(shù);
• 根本不需要注釋——代碼本身就應該說明一切。

如果你想了解有關純凈代碼檢查的更多信息，請閱讀 Robert C. Martin 的書籍和帖子。

9. Git

毫無疑問，Git 是當今 Web 開發(fā)中版本控制的標準。對于每位前端工程師而言，了解基本的 Git 概念和工作流程是非常重要的，這樣才能在各種規(guī)模的團隊中高效工作。

下面是你應該知道的一些流行的 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 進行開發(fā)協(xié)作”(https://www.edureka.co/blog/how-to-use-github/);
• GitHub。

10. 軟技能

對于開發(fā)人員來說，經常被忽視但確實非常重要的是一點就是獲取一些軟技能。

雖然了解事物的技術層面是很有用的，但知道如何在團隊中交流也同樣重要。如果你很在乎自己的技術生涯，并且 / 或者打算升任高級職位，那么你應該發(fā)展自己的以下軟技能：

• 同理心
• 交流
• 團隊合作
• 平易近人和樂于助人
• 耐心
• 開放的思想
• 解決問題的理念
• 負責任
• 創(chuàng)造力
• 時間管理

永遠記住：高級開發(fā)人員最重要的交付物是更高級的開發(fā)人員。

小結

在本文中，我向大家展示了前端開發(fā)人員應在 2020 年嘗試學習、改進或掌握的 10 項重要內容。

這份清單并不是要無所不包，但希望它能給你帶來一些的靈感——如何選擇就是你的事情了!