VS Code 成主宰、Vue備受熱捧！2020 前端開發趨勢指南

前端在生產和開發中佔據着愈來愈重要的地位，PC 端、手機端、桌面端、智能手錶端等等設備都離不開前端的身影。本文將圍繞框架、編程語言、工具、React、Vue 等方面，全面回顧 2019 年前端與 Web 開發的大事。

如下爲譯文：

在過去的一年中，前端開發再次加快了發展的速度，本文總結了2019年以來的全部大事、新聞和趨勢。

1. 2019年流行前端框架和庫的NPM下載

React 再次榮登前端流行庫的榜首，且用戶的數量仍在增加，而 jQuery 出乎意料地保住了第二名的位置。緊隨其後的是 Angular 和 Vue，一大批飽含熱情的開發人員爲兩者奠基了強大的用戶基礎。去年，Svelte 收到了不少關注，但還在爲得到更多采用而努力。

2. WebAssembly 成爲了繼 HTML、CSS 和 JavaScript 以後的第四大Web語言

通過一年的平靜以後，12月初 WebAssembly 出現了一些重大新聞：W3C聯盟正式推薦其爲Web語言。（萬維網聯盟（W3C）是互聯網主要的國際標準組織。）

自2017年發佈以來，WebAssembly 引發了普遍的關注，並且採用也迅速增加。在過去的幾年中，咱們看到了WebAssembly 創建了1.0規範，並且全部主流瀏覽器都開始支持WebAssembly。

2019年，還有一則 WebAssembly 的新聞：字節碼聯盟（Bytecode Alliance）成立，該聯盟旨在經過協做實施標準和提出新標準，以完善 WebAssembly 在瀏覽器以外的生態。

咱們仍在等待 WebAssembly 真正站穩腳跟，並大面積普及。隨着 WebAssembly 每次的更新，咱們離這個目標愈來愈近。毫無疑問，W3C的聲明是讓各個公司合法使用 WebAssembly 的重要一步，咱們須要繼續下降使用 WebAssembly 的入門門檻，讓其更方便構建產品。

3. TypeScript 的使用激增：許多開發人員爲之傾倒

2019年是 TypeScript 之年。TypeScript 不只成爲了在JS代碼中添加類型時的最佳選擇，並且許多開發人員在我的項目和工做中對它的喜好超過了普通的 JavaScript。

在2019年初發布的StackOverflow調查中，TypeScript 與 Python 並列第二，成爲了最受歡迎的語言，僅次於 Rust。若是在2020年初發布的最新的調查中看到 TypeScript 更上一層樓也不足爲奇。

TypeScript 已經開始蠶食Web開發世界——前端和後端皆如此。有些開發人員曾經認爲TypeScript 的興起只不過是暫時的，並且他們還認爲它會重蹈 Coffeescript的覆轍，但事實證實 TypeScript 能夠解決JS開發人員的核心問題，並且其使用率彷佛愈來愈高。

TypeScript 與全部主流文本編輯器的集成爲Web開發人員提供了更好的開發體驗。JavaScript 開發人員將 TypeScript 視爲一種工具：它能夠減小錯誤，同時因爲其提供的文檔說明類型和對象接口，代碼閱讀起來更爲輕鬆。

值得注意的是，2019年 TypeScript 的NPM下載流行度超過了 React。此外，它的下載量也遠遠超過了 Flow 和 Reason 等競爭對手。

TypeScript 和 React 解決的是徹底不一樣的問題，所以不該該直接將兩者進行比較。下圖只是爲了展現 TypeScript 的受歡迎程度。

TypeScript v3.0 於 2018年底發佈，2019年發佈到了3.7版，其中包括 ECMAScript 功能的更新，例如Optional Chaining、nullish operator以及對類型檢查功能的改進。

4. React 繼續保持領先，開發人員爲鉤子傾倒

雖然 Vue 和 Angular 擁有大一批飽含熱情的用戶，Vue 在 GitHub 上的給星數甚至超過了 React，但在我的和專業項目中，React 繼續保持領先地位。

2018年底，React團隊引入了鉤子。2019年，鉤子吞噬了 React 世界，絕大多數開發人員都將其做爲管理狀態和組件生命週期的首選方式。2019年中有關鉤子的文章層出不窮，這方面的模式開始走向穩固，重要的 React 包都開始利用自定義鉤子來導出其函數庫的功能。

鉤子提供了一種經過簡潔的語法管理功能組件的狀態和生命週期的方法。另外，React 提供了構建自定義鉤子的功能，咱們能夠利用這個功能建立可重用的代碼和共享的邏輯，而無需建立高階組件或使用render props。

5. React核心團隊重點關注開發人員的經驗和工具，提升生產力

在React v16.8 添加了大量鉤子以後，其後的大多數更改都相對較小，2019年發佈的最新版本爲16.14版。

在發佈了大量鉤子以後，React 團隊隨後將工做重點轉移到經過提供更多工具來改善開發人員的工做。實際上，開發人員的經驗是2019年 React 大會的主要主題。React 大會的主要發言人及 React 團隊經理 Tom Occhino 表示，開發人員的經驗主要依賴於三個方面：下降入門的門檻、提升生產率和改善擴展能力。下面讓咱們來看一看爲了支持這三方面，React 團隊發佈了哪些功能和計劃：

• 全新版本的 React DevTools
• 全新的 React 性能分析工具
• 建立了 React App v3
• 測試工具的更新
• Suspense
• 併發模式（即將推出）
• Facebook 使用的 CSS-in-JS（即將推出）
• 漸進/選擇性頁面hydration（即將進行）
• React 核心層面支持可訪問性（即將發佈）

咱們相信，良好的開發人員體驗能帶來良好的用戶體驗，所以這對每一個人都有益。有關即將發佈的 React 功能，請點擊以下連接（https://youtu.be/uXEEL9mrkAQ）觀看2019年 React 大會上Yuzhi Zheng的發言。

6. Vue爲版本3發行作準備，使用量繼續增加

Vue 的採用率可能還沒有達到最高，但其擁有一大批熱情高漲的用戶。Vue 借鑑了 React 和Angular 的精華，同時還進行了簡化。它的另外一個巨大的賣點是：更開放，不像React（Facebook）或 Angular（Google）同樣受大公司的控制。

Vue 最大的新聞是即將發佈的3.0版本，alpha 版有望在第四季度末發佈。2019年，Vue 2.x僅在年初收到了一些更新，由於大多數的工做都投入到了v3版本中。

雖然今年發佈的版本很少，但這並不意味着Vue 沒有太多大事發生。當 Evan You 向大衆徵集有關 v3 的建議時，這個版本的變更在社區引起了普遍的爭論，請見 Reddit 和 Hacker News等網站。

激怒 Vue 開發人員的關鍵問題是對框架API的全面改革。可是，在強烈反對以後，有人指出這次API的變動與 Vue 2 徹底兼容。雖然許多開發人員仍在關注該版本的發行，但他們聲稱這些改動可能會讓他們考慮 Svelte，由於他們擔憂 Vue 與 React 太相像。儘管社區中仍有許多人對此表示關注，但在他們等待發布的過程當中，喧雜聲彷佛已平息。

除了上述有爭論的變動外，Vue 3 還包含其餘重大變化：

• 組合API
• 全局mount/配置API的改動
• Fragments
• 時間切片支持（實驗性）
• 多個v模型
• Portal
• 新的自定義指令API
• 反應性的
• 虛擬DOM重寫
• 靜態props hoising
• 鉤子 API（實驗性）
• slot生成優化（父和子組件的單獨渲染）
• 更好地支持 TypeScript 

有關Vue的發佈（https://youtu.be/ANtSWq-zI0s），今年另外一個值得注意的是CLI的第4版，主要集中在基礎工具的更新上。

7. Angular發佈版本8和9，以及新的Ivy編譯/渲染管道

Angular 剛愎自用的哲學爲它贏得了龐大的用戶羣。因爲 Angular 是一個「霸道總裁」式的框架，所以它要求開發人員以 Angular 的方式行事，同時也爲開發人員提供了全部必要的工具。

這能夠避免許多有關引入哪些庫和依賴項的爭論，而這些爭議是 React 應用構建團隊中可能須要面對的問題。它還要求開發人員使用 TypeScript 編寫應用程序。因爲大多數抉擇已被確立，所以各個公司將其視爲一個不錯的選擇，由於開發人員能夠專一於構建產品，而沒必要花費時間考慮軟件包。

2019年，Angular 發佈了版本8，而且還發布了一個新的渲染器/編譯流水線——名叫 Ivy。Ivy 最大的好處在於構建的包更小，但它提供了許多其餘巨大的改進。目前，Ivy 是 Angular 9 以前的可選功能。版本8中值得注意的更新包括：

• 現代JavaScript的差分加載
• 默認支持的 Ivy 預覽
• Angular Router 的向後兼容性
• 改進後的Web Worker包
• 默認支持的使用狀況分享
• 依賴關係更新

2019年12月期間，Angular 團隊爲版本9的發佈作好了準備，該版本將於2019年末或2020年初正式發佈。Angular 9的最大變化是 Ivy 成爲了標準渲染器。有關Angular 9的更多詳細信息，請參照以下視頻（https://youtu.be/5wmWtgr7LQ0）。

8. 可訪問性和國際化變得愈來愈重要

Web應該對全部人開放，且人人可訪問，前端世界一直很是重視這一點。自2015年開始 JavaScript 和 Web 獲得了快速發展以後，模式和框架終於獲得了鞏固。現在的形式更爲穩定，所以開發人員能夠將更多的精力放在可以將應用本地化以及方便更多人訪問的工具上，努力打造更好的Web環境。咱們應該爲咱們所取得的進展感到自豪，可是咱們還有很長的路要走。

可訪問性（Accessibility，簡稱A11y）：讓儘量多的人使用你的網站，傳統上咱們認爲這是關於殘疾人的，但實際上它也涵蓋了其餘羣體，好比使用移動設備的人羣，那些網絡鏈接緩慢的人羣。—— MDN

國際化（Internationalization，簡稱i18n）是對應用程序、規範文檔的設計和開發，以確保這些應用和規範等能夠更好更容易地適應不一樣文化、地區、語言的用戶。—— W3C

注：Accessibility被簡稱爲A11y是由於首字母「A」和最後一個字母「y」之間有11個字母。

9. ES2019新功能

今年，ECMAScript（JavaScript 的規範）也發表了年度更新，且 ES2019 版本中添加了以下新功能：

• Object.fromEntries()
• String.trimStart()和 String.trimEnd()
• JSON.stringify中 unicode的處理改善
• Array.flat()
• Array.flatMap()
• try/catch綁定
• Symbol.description

儘管ES2019進行了一些重大更新，但即將到來的 ES2020 擁有 ES6 / ES2015 以來最使人期待的功能：

• 私有類屬性
• Optional Chaining：obj.field?.maybe?.exists
• nullish coalescing：item ?? 'use this only if item is null/undefined'
• BigInts

10. Flutter 日新月異地發展，做爲構建跨平臺移動應用的另外一個絕佳選擇向 React Native 發起了挑戰

React Native 推出兩年後，Flutter才發佈，但 Flutter 的發展很是迅速。Flutter 在GitHub上斬獲了 80,500顆星，幾乎遇上了 React Native 的83,000顆星，照此情形 Flutter 很快就過超越 React Native。

鑑於 Flutter 沒有開發社區的推波助瀾（React Web開發人員推進了React Native的發展），因此如此迅速的發展實在使人另眼相看。Flutter 正在努力打造最優秀的的跨平臺移動框架。

11. Node.js 基金會與 JS 基金會合併成立 OpenJS 基金會：Node版本12遵循了年度長期支持發佈策略

爲了支持 JavaScript 生態系統並加速語言的發展，Node.js 基金會與 JS 基金會合併成立了 OpenJS 基金會。該基金會表示，但願經過中立的組織推動協做和發展，現在他們託管了31個開源項目，包括 Node、jQuery 和 Webpack。這一舉動爲整個JS社區帶來了積極的影響，並獲得了Google、IBM和微軟等大公司的支持。

今年，Node發佈了版本12，該版本遵循長期支持（LTS）策略，能夠一直到2023年4月。Node12提供了許多新功能、安全更新和性能改進。一些值得注意的更新包括 import/export 語句的原生支持、私有類屬性、兼容V8 Engine 7.四、對TLS 1.3的支持以及其餘診斷工具。

12. 隨着版本3的發佈Svelte 得到了關注，但在採用方面依然落後

Svelte 在競爭異常激勵的前端框架世界中，找到了本身的躋身之道。可是，正如咱們在本文開頭的介紹，Svelte 尚未獲得大量的實際應用。總的來講，Svelte「簡單而強大」。Svelte 網站代表了其三大優勢：

• 須要編寫的代碼量更少
• 沒有虛擬DOM
• 真正的響應式編程

Svelte 嘗試將大部分工做轉移到編譯過程當中，減小運行時在瀏覽器中進行的工做。Svelte 具備基於組件的體系結構，可編譯爲純 HTML 和原始 JavaScript，同時也承諾減小樣板代碼。它使用響應式編程來直接更新DOM，而不是利用虛擬的DOM。

Svelte 爲前端領域帶來了耳目一新的感受——即提供更少的功能。2020年，Svelte 的成長和發展很讓人欣慰，但願咱們可以得到一些實際的例子，證實它確實可以與 React、Vue 和Angular 等強大的競爭對手一較高低。

相關視頻： https://youtu.be/AdNJ3fydeao

*13. 靜態網站的使用仍在持續，開發人員開始採用 JAMStack*

隨着 Gatsby 等框架利用率的提升，Netlify 等負責託管靜態網站的公司也獲得了快速增加，因而無數headless CMS公司相繼出現，靜態網站證實了本身是Web不可或缺的一部分。

靜態網站將舊網站與新興的工具、庫和更新結合在一塊兒，提供了無與倫比的體驗。咱們可以使用 React 等現代庫來構建咱們的網站，而後在構建時將它們編譯成靜態 HTML 頁面。因爲全部頁面都是預先構建的，所以服務器不須要花費時間利用請求中的數據渲染頁面，這些頁面能夠當即提供，並利用CDN中全局緩存的優點，儘量迅速地將頁面提供給用戶。

靜態網站使用的一種流行的編程模式是 JAMStack。這是一種結合了靜態/ SPA的方式，這些頁面都是靜態提供的，可是一旦進入客戶端，就會被當成SPA——經過API和用戶交互來推動UI的狀態。

*14. PWA的增加和採用有所增長*

雖然靜態網站的速度無人能及，但也並不是適合全部應用，另外一個絕佳的選擇是 PWA（漸進式Web應用程序）。咱們能夠利用 PWA 在瀏覽器中緩存資源，以確保頁面的當即響應與離線支持。此外，在 PWA 方式中，後臺工做人員還能夠提供推送通知等原生功能。

甚至有人聲稱 PWA 能夠取代原生移動應用。不管最終結果將如何，毫無疑問，在很長一段時間內 PWA 將影響各大公司構建產品的主要方式。

*15. 前端的工具愈來愈優秀*

近幾年來，前端開發人員老是抱怨厭倦了 JavaScript， 可是咱們也慢慢看到，開源項目維護人員的不懈努力減輕了人們對 JavaScript 的厭倦。

之前，若是咱們想構建SPA，則必須利用 Bower 或 NPM 引入依賴關係，還要掌握如何利用 Browserify 或 Webpack 進行編譯，從零開始編寫 Express 服務器，並在庫發生更新時維護咱們的應用。

多年來，咱們經歷了不少痛苦，但現在咱們造就了最活躍、最發達的軟件包生態系統。咱們有不少工具能夠幫助咱們抽象化構建應用程序中最痛苦的部分：建立 React 應用、Vue CLI、Angular CLI、用於靜態網站的Gatsby、用於 React Native 移動應用的Expo、用於SSR應用程序的Next / Nuxt、用於建立服務器的生成器、免卻爲GraphQL編寫服務器的Hasura、使用 GraphQL 代碼生成器自動生成 TypeScript 類型、Webpack不斷獲得簡化等等，咱們總能找到工具幫咱們減輕繁重的工做。

也許如今咱們開始厭倦了工具了？

*16. GraphQL深受開發人員的喜好，並在科技公司中獲得進一步的採用*

GraphQL 有望解決傳統的基於 REST 的應用程序面臨的許多問題。GraphQL 很快就得到了開發人員的喜好，而各大科技公司也紛紛開始採用它。幾年前，GitHub 用 GraphQL 編寫了它的最新API，許多其餘組織也在作出了一樣的變革。

GraphQL 應用程序是數據驅動的（不是端點驅動），所以客戶端能夠聲明所需的確切數據，從服務器接收相應的JSON響應。GraphQL API提供的文檔記錄了全部的數據及其類型，幫助開發人員更全面地瞭解API。

因爲GraphQL API 提供了徹底類型化的架構，所以它也能夠與 TypeScript 應用程序很好地集成。GraphQL 能夠經過 GraphQL Code Generator 等工具讀取客戶端代碼中的查詢，並將其與架構進行匹配，以提供在整個應用程序中流動的 TypeScript 類型。

在過去的一年中，GraphQL 的下載量增長了一倍，而 Apollo 也開始朝着使用最普遍的框架邁進。

*17. CSS-in-JS的發展勢不可擋*

Web開發的發展大有讓 JavaScript 一統天下的趨勢，CSS-in-JS 的採用充分體現了這一點，由於這些CSS樣式都是使用 JavaScript 字符串建立的。

在這種方式下，咱們能夠經過  import/export ，利用常規的 JavaScript 語法共享樣式和依賴項。因爲CSS-in-JS組件能夠將 props 插入到樣式字符串中，所以簡化了動態樣式。如前所述，Facebook 甚至認爲 CSS-in -JS 可能會成爲前端的將來，並即將發佈本身的庫。

下面是一個經典的 CSS 與 CSS-in-JS 的示例。若是用普通CSS處理動態樣式，那麼你必須管理組件中的類名稱，並根據 state/props 進行更新。並且你還須要爲每種變化創建一個CSS類：

// Component JS fileconst MyComp = ({ isActive }) => {  const className = isActive ? 'active' : 'inactive';  return <div className={className}>HI</div>}// CSS file.active { color: green; }.inactive { color: red; }

在 CSS-in -JS 中，你再也不須要管理CSS類。你只須要將 props 傳遞給樣式化的組件，而它會利用聲明式的語法處理動態樣式。這些代碼更爲簡潔，並且由CSS管理基於 props 的動態樣式後，咱們就能夠將樣式與 React 相分離。實際的代碼讀起來與正常的 React 和 JavaScript 代碼並沒有二樣：

const Header = styled.div`  color: ${({ isActive }) => isActive ? 'green' : 'red'};`;const MyComp = ({ isActive }} => (  <Header isActive={isActive}>HI</Header>)

styled-components 和 emotion 是 CSS-in-JS 的兩個主要庫，並且2019年 emotion 的下載超過了 styled-components。從增加幅度來看，這兩個庫遙遙領先於其餘 CSS-in-JS 庫，並且它們還將持續快速增加。

*18. VS Code是文本編輯器市場上的主宰*

開發人員對於IDE /文本編輯器充滿了熱情，他們會沒完沒了地爭論爲何本身的編輯器纔是最佳選擇。然而，前端開發人員不約而同地選擇了 VS Code。VS Code 是一款開源編輯器，它提供的插件爲開發人員提供了無與倫比的體驗。

根據「2018年JS的情況調查」（地址：https://2018.stateofjs.com/ot...），文本編輯器的使用狀況以下（2019年的調查發佈時，下圖將被更新）：

*19. Webpack 5 已進入測試階段且即將發佈*

Webpack 已成爲全部現代 JavaScript 工具鏈的核心組件，並且也是最經常使用的構建工具。Webpack 一直在提升性能和可用性，努力爲開發人員提供更好的工具。Webpack 5 主要側重於如下幾個方面：

• 經過持久緩存提升構建性能；
• 經過更好的算法和默認值來改善長期緩存；
• 清理內部模式，同時不會引起任何重大變更。

*20. Jest 放棄 Flow，轉投 TypeScript 的懷抱*

Facebook 維護着流行的測試庫 Jest 和 Flow，後者是 TypeScript 的競爭對手。2019年初，Facebook 大膽聲明 Jest 將放棄Flow，轉投 TypeScript 的懷抱。這進一步代表 TypeScript 已成爲輸入 JavaScript 代碼的標準選擇，2020年及之後 TypeScript 的使用會進一步增長。

*21. 2019年Chrome 發佈了穩定版本 72–78*

Chrome 快速迭代的步伐從未停歇，他們正在迅速爲Web和開發工具添加新功能。2019年，Chrome 發佈了7個穩定版本，其中包括Beta版7九、dev版80和canary版81。

過去一年中有關 Chrome 的重大新增功能，請參照以下連接：https://en.wikipedia.org/wiki..._Chrome_version_history?source=post_page-----1e7d07966d6c----------------------

*22. 微軟 Edge 瀏覽器移至 Chromium，並建立了新的標誌*

對 Web開發人員來講，IE及其後續的 Edge 就是個笑話，它們令開發人員苦不堪言。這款瀏覽器在Web功能實現方面一直落後於他人，而且衆所周知，爲其編寫跨瀏覽器兼容的代碼簡直就是災難。爲了贏得開發人員，微軟決定選擇使用Google的開源 Chromium 引擎。2019年中期，這項變動已進入beta階段。

*23. Facebook 發佈了 Hermes，這是面向 Android 的 JavaScript 解析器，用於改進 React Native*

Facebook 認爲 Android JavaScript 引擎的速度不夠快，因此他們創建了本身的引擎。Facebook全力支持 React Native，此舉代表爲了確保其在全部平臺上都能儘量有效地工做，他們願意作出必要的調整。

24. 2020年的預測

• 隨着代碼拆分和 PWA 的進一步使用，性能仍然是Web最關鍵的方面。
• WebAssembly 會愈來愈普及，並獲得實際採用和應用於產品中。
• 新興創業公司和新項目都會採用 GraphQL，而其餘公司也會紛紛從 REST 向 GraphQL 遷移。
• TypeScript 將成爲新興創業公司和項目的默認選擇。
• 咱們有望看到沒有服務器且構建在區塊鏈之上的真實應用，這會讓Web更加開放。
• CSS-in-JS可能取代普通的CSS，會成爲默認的樣式設置方式。
• 「無代碼」應用愈來愈流行。隨着AI的改進和應用抽象層的增長，構建應用程序會愈來愈容易。2020年，咱們有望看到無需編寫代碼便可建立應用的重大轉變。
• Flutter 可能會取代 React Native，成爲構建跨平臺移動應用的最佳方式。
• Svelte 將會用於更多實際項目。
• Deno（Node 建立者構建的 TypeScript 運行時）將投入實際使用。
• AR / VR 將取得巨大進步，其中包括使用A-Frame、React VR 和 Google VR 等庫，並改進瀏覽器中原生的 AR / VR 工具。
• 容器化（例如Docker、Kubernetes）的影響在前端開發中愈來愈廣泛。

---

往期

高效的編碼：個人VS Code設置

127個經常使用的JS代碼片斷，每段代碼花30秒就能看懂（四）