倏忽一年：回顧點評前端 2019 重大事件、趨勢

本文回顧和點評 2019 年前端領域發生的所有重大事件、新聞和趨勢，並展望 2020。

2019 年流行前端框架和庫的 NPM 下載趨勢

React 又一次成為年度最受歡迎的庫，並且仍處於增長狀態；而 jQuery 拿到了令人意想不到的第二名；緊隨其後的是 Angular 和 Vue，它們都擁有熱情的開發人員組成的龐大用戶群。

這一年來 Svelte 雖然吸引了很多關注，但它離廣泛普及還有很長的路要走。

WebAssembly 成為繼 HTML、CSS 和 JavaScript 之後的第四大 Web 語言

經歷了相對平靜的一年後，WebAssembly 在 12 月初迎來重大新聞——W3C 聯盟正式將其推薦為一種 Web 語言。
https://www.w3.org/2019/12/pressrelease-wasm-rec.html.en

自 2017 年 WebAssembly 發佈以來，它已經收穫了廣泛的關注並得到快速推廣。在過去幾年中，我們看到它推出了 1.0 版本規範，而且幾乎所有主流瀏覽器都開始支持 WebAssembly。

WebAssembly 在 2019 年的另一件大事是字節碼聯盟的成立，其宗旨是“通過合作實施標準和提議新標準，為 WebAssembly 在瀏覽器之外的世界開拓一片新天地”。
https://bytecodealliance.org/articles/announcing-the-bytecode-alliance

我們仍在等待 WebAssembly 真正站穩腳跟並全面普及！而隨著 WebAssembly 一次又一次的更新，應該說我們現在愈加接近這個目標了。毫無疑問，W3C 聲明是使 WebAssembly 獲得企業認可的關鍵一步，並且我們需要繼續降低 WebAssembly 的門檻，使其更易於構建產品。

TypeScript 使用率激增

2019 年是 TypeScript 之年。TypeScript 不僅成為了在 JS 代碼中添加數據類型的事實選擇，而且許多開發人員會經常在個人項目和工作中，用它來代替普通的 JavaScript。

在 2019 年初發布的 StackOverflow 調查中，TypeScript 與 Python 並列最受歡迎語言次席，僅次於 Rust。在 2020 年初將發佈的新調查中，如果我們看到 TypeScript 的排名再進一步，應該也不會有什麼奇怪。
https://insights.stackoverflow.com/survey/2019#most-loved-dreaded-and-wanted

TypeScript 已經席捲了整個 Web 開發世界——前端和後端皆是如此。一些開發人員認為 TS 只是跟風炒作的產物，覺得它會步 CoffeeScript 後塵；但 TypeScript 已被證明可以解決 JS 開發人員面臨的一大核心問題，而且它的使用率看來只增不減。

TypeScript 與所有主流文本編輯器的集成，為 Web 開發人員提供了更好的開發體驗。JavaScript 開發人員將 TypeScript 視為一種工具，它可以減少錯誤，還可以通過（提供自帶描述的）類型和對象接口更輕鬆地讀取代碼。

值得注意的是，TypeScript 在 2019 年的 NPM 下載量超越了 React，其流行程度可見一斑。此外，它的下載量也比 Flow 和 Reason 等競爭對手高得多。

TypeScript 和 React 解決的是完全不同的問題，因此這並不是一場較量，只是為了告訴大家 TypeScript 有多麼受歡迎。

TypeScript v3.0 於 2018 年末發佈，而在 2019 年它已發佈到了 3.7 版，其中包括更新的 ECMAScript 功能，例如可選鏈和 nullish 運算符，以及類型檢查功能的相關改進等。

React 繼續保持領先地位，開發人員已經離不開 hooks 了

Vue 和 Angular 擁有熱情的用戶群體，Vue 在 GitHub 上拿到的星星甚至比 React 還多，但考慮個人和專業項目中的使用率時，React 仍繼續保持著領先地位。

在 2018 年末，React 團隊引入了 hooks。2019 年，hooks 席捲了 React 世界，絕大多數開發人員都將其作為管理狀態和組件生命週期的首選方式。這一年下來，有關 hooks 的文章數不勝數，使用模式也穩定了下來，而最具分量的 React 包也構建了自定義 hooks 來公開它們的庫功能。

Hooks 提供了一種方法，可以使用簡單簡潔的語法來管理函數式組件中的組件狀態和生命週期。另外，React 提供了構建自定義 hooks 的能力，這使我們能夠創建可複用的代碼和共享邏輯，而無需創建高階組件或使用渲染 props。

React 核心團隊開始專注改進開發體驗和工具

在 React v16.8 中加入 hooks 這一重大改進之後，React 之後版本的多數更改都相對較小。到了 2019 年末，版本更新到了 16.14。

hooks 的重大改進發布之後，React 團隊開始轉移重心，希望提供更多工具來改善開發體驗。實際上，開發體驗正是 React Conf 2019 的主題。ReactConf 的主講人，React 團隊經理 Tom Occhino 表示，開發體驗植根於以下三件事：准入門檻低、生產率高和擴展能力強。我們來看看 React 團隊為此發佈了哪些內容或有哪些計劃：

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

人們相信，良好的開發體驗也將帶來良好的用戶體驗。下面是 React Conf 2019 大會上 Yuzhi Zheng 的演講，談到了即將發佈的 React 功能。
https://youtu.be/uXEEL9mrkAQ

Vue 準備發佈 3.0 版，採用率持續增長

Vue 可能還沒迎來自己採用率的巔峰，但不得不承認它擁有最熱情的用戶群。人們說 Vue 汲取了 React 和 Angular 的長處，同時更加簡單易用。它的另一大賣點是更加開放，不像 React（Facebook）或 Angular（谷歌）那樣受到大公司的控制。

Vue 的最大新聞是即將發佈的 3.0 版本，alpha 版本有望在第四季度末發佈。在 2019 年，Vue 2.x 僅在年初獲得了少量更新，因為主要工作都放在了 v3 版本的開發上。

雖說 Vue 在今年發佈的版本不多，但發生的事情卻不算少。當 Evan You 發佈 v3 的 RFC 時，新版的更改在社區中引發激烈爭論。

激怒 Vue 開發人員的關鍵問題是對框架 API 的全面修訂。但在反對聲浪之後，據稱 API 更改將完全是附加的，並且對 Vue 2 向後兼容。許多開發人員聲稱，如果新版的這些更改無法令人滿意的話，他們可能會考慮轉向 Svelte，因為他們擔心 Vue 會越來越像 React 了。不過儘管社區中仍有許多人對此表示關注，但現在大家還是在靜待新版的正式發佈。

除了上述爭議之外， Vue 3 還將帶來許多重大改進：

• Composition API
• 全局掛載 / 配置 API 更改
• Fragments
• 時間切片支持（實驗性）
• 多個 v-models
• Portals
• 新的自定義指令 API
• 改進響應性
• 虛擬 DOM 重寫
• 靜態 props hoising
• 一個 hooks API（實驗性）
• 插槽生成優化（父子組件的單獨渲染）
• 更好的 TypeScript 支持

今年另一個值得關注的 Vue 更新是 CLI 的第 4 版，其更新主要集中在基礎工具上。

https://youtu.be/ANtSWq-zI0s

Angular 發佈第 8、第 9 版，以及新的 Ivy 編譯 / 渲染管道

Angular 的固執（opinionated）理念幫助它贏得了龐大用戶群。由於 Angular 是一個強固執框架，因此它要求開發人員以 Angular 的方式行事，並且為開發人員提供了所有必要的工具。

這種理念消除了許多爭議，人們不用再操心該將哪些庫和依賴項帶入項目，相反構建 React 應用的團隊就可能會出現這類問題。Angular 還要求開發人員使用 TypeScript 編寫應用程序。由於大多數選擇已經確定好了，因此很多公司將其視為一個不錯的選擇，因為它使開發人員可以專注構建產品，而不必花費時間考慮該用哪個包。

在 2019 年，Angular 發佈了第 8 版，並且還發布了一個新的渲染器 / 編譯管道，稱為 Ivy。Ivy 的最大好處是較小的打包尺寸，除此之外還提供了許多很棒的改進。目前，Ivy 是 Angular 9 之前的可選功能。這篇文章詳細介紹了第 8 版中發佈的功能，其中值得關注的更新有：

• 現代 JavaScript 的差異加載
• 可選 Ivy 預覽
• Angular 路由向後兼容性
• 改進的 Web Worker 打包
• 可選的使用狀況分享
• 依賴項更新

在 2019 年 12 月，Angular 團隊開始準備發佈第 9 版，可能會在 2019 年底或 2020 年初正式發佈。 Angular 9 的最大變化是 Ivy 成為了標準渲染器。觀看下面的 YouTube 視頻可瞭解有關 Angular 9 的更多信息。
https://youtu.be/5wmWtgr7LQ0

可訪問性（a11y）和國際化（i18n）變得越來越重要

Web 應該對所有人開放，讓所有人使用。前端業界一直將這一目標視為頭等大事。自 2015 年以來，JavaScript 和 Web 的發展如此之快，相關模式和框架也終於穩定了下來。現在各種事物都更穩定了，開發人員就可以將更多的精力放在那些幫助應用本地化、改善應用可訪問性的工具上面了，從而讓所有人都能體驗到更加美好的 Web 世界。我們應該為我們所取得的進展感到自豪，但是前面還有很長的路要走。

可訪問性：“讓儘可能多的人使用你的網站——我們傳統上認為這是關於殘疾人的特性，但實際上它也涵蓋了其他群體，比如使用移動設備的人群和那些網絡連接較緩慢的人群。”——MDN

國際化：“在設計 / 開發你的內容、應用程序和規範等事物時，確保其適合，或者可以輕鬆適應來自任何文化、地區或使用任何語言的用戶”——W3C

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 以來最受期待的特性：

• 私有類字段
• 可選鏈——obj.field?.maybe?.exists
• nullish 合併——item ?? ‘use this only if item is null/undefined’
• BigInts

Flutter 爆發式增長，開始挑戰 React Native 地位

Flutter 的發佈比 React Native 晚了兩年，但前者很快就站穩了腳跟。Flutter 在 GitHub 中拿到的星幾乎快趕上 React Native 了，目前是 80.5k 對 83k；按這個趨勢，超過 RN 指日可待。

考慮到 Flutter 並沒有像 React Native 那樣，擁有 React Web 開發人員那樣龐大的開發社區來幫助自身成長，這樣的成績就更令人驚訝。Flutter 正在成為最佳的跨平臺移動框架。

OpenJS Foundation 成立，Node 12 發佈

為了支持 JavaScript 生態系統並加速發展這種語言，Node.js 基金會和 JS 基金會合併成立了 OpenJS 基金會。新的基金會希望社區在一箇中立的實體支持下協作和發展，這個實體現在託管 31 個開源項目，包括 Node、jQuery 和 Webpack。這一行動被認為對整個 JS 社區都有正面影響，並得到了谷歌、IBM 和微軟等大型科技公司的支持。

Node 今年發佈了第 12 版，也是一個長期支持版本（LTS），支持週期截至 2023 年 4 月。Node12 提供了許多新特性、安全更新和性能改進。一些值得關注的更新包括對 import/export 語句的原生支持、私有類字段、與 V8 Engine 7.4 版的兼容性、對 TLS 1.3 的支持以及新增的診斷工具等。

Svelte 發佈第 3 版，吸引更多關注

Svelte 設法在擁擠不堪的前端框架世界中找到自己的位置。但正如我們在本文開頭所看到的那樣，它的努力還沒能轉化為大規模的現實使用率。對 Svelte 來說，最好的總結就是“簡單而強大”。Svelte 網站上指出了三點優勢：

• 寫的代碼更少
• 沒有虛擬 DOM
• 真正的響應性

Svelte 試圖將其大部分工作轉移到編譯步驟，而不是放到瀏覽器中的運行時上。Svelte 具有基於組件的架構，可編譯為純 HTML 和標準 JavaScript，同時還承諾減少樣板代碼。它使用響應式編程來直接更新 DOM，而不是使用虛擬 DOM。

Svelte 通過做減法的方式，為前端領域提供了一些新穎而令人興奮的東西。在 2020 年，觀察 Svelte 的成長和發展將是一件很有趣的事情，希望我們能看到一些大規模應用的案例，看看它是如何與 React、Vue 和 Angular 等大塊頭對手競爭的。
https://youtu.be/AdNJ3fydeao

靜態站點活力依舊，開發人員開始使用 JAMStack

隨著諸如 Gatsby 之類的框架愈加流行，諸如 Netlify 之類的靜態網站託管快速增長，以及無數無頭 CMS 公司的湧現，靜態網站證明了它們將成為 Web 不可或缺的一部分。

靜態站點將舊式 Web 與新的工具、庫和更新結合在一起，提供了無與倫比的體驗。我們能使用像 React 這樣的現代庫來構建我們的站點，然後在構建時將它們編譯成靜態 HTML 頁面。由於所有頁面現在都是預先構建的，因此無需服務器時間就可以根據請求將它們與數據混合在一起——這些頁面可以立即提供服務，並可以利用在全球 CDN 中緩存的優勢，使內容儘可能接近你的用戶。

靜態站點使用的一種流行編程模式是 JAMStack （JavaScript、API 和 Markup）。這是一種靜態 /SPA 混合方法，其中頁面是靜態提供的，但在客戶端上更像是 SPA，使用 API​​和用戶交互來發展 UI 狀態。

PWA 迎來更快的增長和更多的使用率

靜態網站是獲得高速產品的一種方法，但是它們並不適合所有應用——另一個上佳選擇是 PWA（漸進式 Web 應用）。 PWA 允許你在瀏覽器中緩存資源，以使頁面立即響應並提供脫機支持。另外，它們允許後臺 workers 提供原生功能，例如通知推送。

甚至有人聲稱 PWA 可以取代原生移動應用。無論結果如何，可以肯定的是 PWA 將在很長一段時間裡成為企業構建產品的重要途徑。

前端工具鏈變得非常好用了

多年來，前端開發人員一直在抱怨對 JavaScript 的審美疲勞，但我們已經逐漸看到，開源項目維護人員的不懈努力正在減輕這種審美疲勞。

以前，如果我們要構建一個 SPA，則必須使用 Bower 或 NPM 引入我們自己的依賴項，學會如何使用 Browserify 或 Webpack 來編譯它，從頭開始編寫 Express 服務器，並通過繁瑣的庫更新維護我們的應用。

這種痛苦我們已經承受了很多年，但現在我們已經發展出了最活躍、最發達的軟件包生態系統。有一些工具可以幫助我們抽象出構建應用程序時令人痛苦的部分——Create React App、Vue CLI、Angular CLI、用於靜態站點的 Gatsby，用於 React Native 移動應用的 Expo、用於 SSR 應用程序的 Next/Nuxt，用於創建我們服務器的生成器、無需為 GraphQL 編寫服務器的 Hasura，自動生成 TypeScript 類型的 GraphQL Code Generator，越來越簡化的 Webpack——不管我們有怎樣的需求，都有對應的工具可以幫助我們從繁重的勞動中解放出來。

也許現在我們有了工具鏈審美疲勞？

GraphQL 繼續受到開發人員喜愛

GraphQL 有望解決傳統的基於 REST 的應用程序面臨的許多問題。開發人員很快就愛上了 GraphQL，技術公司也終於開始使用它了。GitHub 幾年前用 GraphQL 編寫了它的最新 API，還有許多組織也在跟上步伐。

GraphQL 應用是數據驅動的，而不是端點驅動的，從而允許客戶端聲明所需的確切數據，並從服務器接收相應的 JSON 響應。GraphQL API 提供了一個架構，用於記錄所有數據及其類型，從而使開發人員可以全面瞭解 API。

由於 GraphQL API 提供了完全類型化的 schema，因此它也可以與使用 TypeScript 的應用程序很好地集成在一起。使用諸如 GraphQL Code Generator 之類的工具時，它可以讀取我們客戶端代碼中的查詢，並將其與 schema 匹配，以提供會在整個應用程序中流動的 TypeScript 類型。

在過去的一年中，GraphQL 的下載量增長了一倍以上，而 Apollo 則開始成為使用最廣泛的框架。

CSS-in-JS 勢頭強勁

Web 開發的前進方向似乎是要在 JavaScript 下統一一切，而 CSS-in-JS 的推廣就體現了這種趨勢；它是用 JavaScript 字符串創建樣式的方法。

這使我們可以通過 import/export 來使用常規 JavaScript 語法共享樣式和依賴項。由於 CSS-in-JS 組件可以將 props 插入其樣式字符串中，因此它還簡化了動態樣式。如前所述，Facebook 甚至可能將 CSS-in-JS 視為前端的未來，並將發佈他們自己的庫。

以下是經典 CSS 與 CSS-in-JS 的對比示例。要使用常規 CSS 處理動態樣式，你必須管理組件中的類名稱並根據 state/props 來更新它。對於每個變體，你還需要一個 CSS 類：

複製代碼

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

使用 CSS-in-JS，你不用再管理 CSS 類。你只需將 props 傳遞給樣式化的組件，它會使用聲明性語法處理動態樣式。代碼更加簡潔了，而且允許 CSS 管理基於 props 的動態樣式後，我們對樣式和 React 的關注點分離也更為清晰了。現在，所有內容看起來都像是常規的 React 和 JavaScript 代碼：

複製代碼

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

CSS-in-JS 的兩大庫分別是 styled-components 和 emotion，後者在 2019 年的下載量超越了前者。這兩個庫遙遙領先於其他 CSS-in-JS 選項，看起來它們將繼續快速增長。

開發人員對自己的 IDE/ 文本編輯器充滿熱情，並且經常會爭論誰的選擇是最好的。但在前端領域，開發人員幾乎一致選擇 VS Code 作為他們的編輯器。VS Code 是一個開源編輯器，它提供許多插件來創造極為出色的開發體驗。

下面是 2019 年 JS 現狀調查統計的文本編輯器使用率：

Webpack 5 進入測試階段，並即將發佈

Webpack 已成為幾乎所有現代 JavaScript 工具鏈的核心組件，並且是最常用的構建工具。Webpack 一直在提升其性能和可用性，從而改善開發體驗。在第 5 版中，Webpack 著重於以下幾點：

• 通過持久緩存提升構建性能
• 使用更好的算法和默認值來改進長期緩存
• 清理內部模式，但不會造成重大更改

Jest 從 Flow 轉向 TypeScript

Facebook 維護著流行的測試庫 Jest 和 Flow，後者是 TypeScript 的競爭對手。他們在 2019 年初發表了大膽聲明，選擇將 Jest 從 Flow 遷移到 TypeScript。這進一步表明 TypeScript 已成為類型化 JavaScript 的標準選擇，並且在 2020 年及以後的使用率會不斷增長。

Chrome 在 2019 年發佈 72–78 穩定版

Chrome 繼續快速迭代，迅速向 Web 和開發工具中添加新功能。在 2019 年，我們看到 Chrome 發佈了 7 個穩定版本，還有 79 Beta 版，80 dev 版和 81 canary 版。查看下面的 Wiki 可以瞭解過去一年中 Chrome 的重要新增功能。
https://en.wikipedia.org/wiki/Google_Chrome_version_history?source=post_page1e7d07966d6c

Microsoft Edge 瀏覽器遷移至 Chromium 上，換上新 Logo

Internet Explorer 及其後繼者 Edge 對 Web 開發人員來說就是個笑話，更糟的是使用它們的體驗令人痛苦不堪。微軟的瀏覽器在 Web 特性實現方面一直落後於人，並且很難為其編寫跨瀏覽器兼容的代碼。作為開發人員的重大勝利，微軟已經選擇轉向谷歌的開源 Chromium 引擎。到了 2019 年中，此更改已進入 beta 階段。

Facebook 發佈 Hermes，用於改進 React Native

Facebook 認為 Android JavaScript 引擎的速度不夠快，因此他們打造了自己的引擎。Facebook 正在全力支持 React Native，此舉表明他們願意做出必要的調整，以使其在所有平臺上都能發揮最大效能。

對 2020 年的預測

• 隨著代碼拆分和 PWA 的進一步普及，性能仍然會是 Web 上最重要的指標。
• WebAssembly 愈加流行，開始實際應用，並被用在現實產品中。
• GraphQL 在新的創業公司和新項目的使用率上超過 REST，也會有越來越多的成熟公司向它遷移。
• 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）的影響在前端流程中變得越來越普遍。

原文鏈接：

https://levelup.gitconnected.com/a-recap-of-frontend-development-in-2019-1e7d07966d6c

閱讀更多 InfoQ 的文章

關鍵字: TypeScript Stack 文本編輯