VS Code 成主宰、Vue 備受熱捧！2019 前端開發趨勢必讀

視學演算法發表於2020-04-06

Vue前端

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

作者 | Trey Huffine

譯者 | 彎月，責編 | 郭芮

出品 | CSDN（ID：CSDNnews）

以下為譯文：

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

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

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

VS Code 成主宰、Vue 備受熱捧！2019 前端開發趨勢必讀

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 的入門門檻，讓其更方便構建產品。

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

2019年是 TypeScript 之年。TypeScript 不僅成為了在JS程式碼中新增型別時的最佳選擇，而且許多開發人員在個人專案和工作中對它的喜愛超過了普通的 JavaScript。

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

VS Code 成主宰、Vue 備受熱捧！2019 前端開發趨勢必讀

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

TypeScript 與所有主流文字編輯器的整合為Web開發人員提供了更好的開發體驗。JavaScript 開發人員將 TypeScript 視為一種工具：它可以減少錯誤，同時由於其提供的文件說明型別和物件介面，程式碼閱讀起來更為輕鬆。

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

TypeScript 和 React 解決的是完全不同的問題，因此不應該直接將二者進行比較。下圖只是為了展示 TypeScript 的受歡迎程度。

VS Code 成主宰、Vue 備受熱捧！2019 前端開發趨勢必讀

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

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

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

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

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

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的發言。

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版，主要集中在基礎工具的更新上。

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）。

可訪問性和國際化變得越來越重要

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

可訪問性（Accessibility，簡稱A11y）：讓儘可能多的人使用你的網站，傳統上我們認為這是關於殘疾人的，但實際上它也涵蓋了其他群體，比如使用移動裝置的人群，那些網路連線緩慢的人群。—— MDN

國際化（Internationalization，簡稱i18n）是對應用程式、規範文件的設計和開發，以確保這些應用和規範等可以更好更容易地適應不同文化、地區、語言的使用者。—— W3C

注：Accessibility被簡稱為A11y是因為首字母“A”和最後一個字母“y”之間有11個字母。

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

Flutter 突飛猛進地發展，作為構建跨平臺移動應用的另一個絕佳選擇向 React Native 發起了挑戰

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

鑑於 Flutter 沒有開發社群的推波助瀾（React Web開發人員推動了React Native的發展），所以如此迅速的發展實在令人刮目相看。Flutter 正在努力打造最優秀的的跨平臺移動框架。

VS Code 成主宰、Vue 備受熱捧！2019 前端開發趨勢必讀

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.4、對TLS 1.3的支援以及其他診斷工具。

隨著版本3的釋出Svelte 獲得了關注，但在採用方面依然落後

Svelte 在競爭異常激勵的前端框架世界中，找到了自己的躋身之道。但是，正如我們在本文開頭的介紹，Svelte 還沒有得到大量的實際應用。總的來說，Svelte“簡單而強大”。Svelte 網站表明了其三大優點：

需要編寫的程式碼量更少
沒有虛擬DOM
真正的響應式程式設計

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

Svelte 為前端領域帶來了耳目一新的感覺——即提供更少的功能。2020年，Svelte 的成長和發展很讓人欣慰，希望我們能夠獲得一些實際的例子，證明它確實能夠與 React、Vue 和Angular 等強大的競爭對手一較高低。

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

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

隨著 Gatsby 等框架利用率的提高，Netlify 等負責託管靜態網站的公司也得到了快速增長，於是無數headless CMS公司相繼出現，靜態網站證明了自己是Web不可或缺的一部分。

靜態網站將舊網站與新興的工具、庫和更新結合在一起，提供了無與倫比的體驗。我們能夠使用 React 等現代庫來構建我們的網站，然後在構建時將它們編譯成靜態 HTML 頁面。由於所有頁面都是預先構建的，因此伺服器不需要花費時間利用請求中的資料渲染頁面，這些頁面可以立即提供，並利用CDN中全域性快取的優勢，儘可能迅速地將頁面提供給使用者。

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

PWA的增長和採用有所增加

雖然靜態網站的速度無人能及，但也並非適合所有應用，另一個絕佳的選擇是 PWA（漸進式Web應用程式）。我們可以利用 PWA 在瀏覽器中快取資源，以確保頁面的立即響應與離線支援。此外，在 PWA 方式中，後臺工作人員還可以提供推送通知等原生功能。

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

前端的工具越來越優秀

近幾年來，前端開發人員總是抱怨厭倦了 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不斷得到簡化等等，我們總能找到工具幫我們減輕繁重的工作。

也許現在我們開始厭倦了工具了？

GraphQL深受開發人員的喜愛，並在科技公司中得到進一步的採用

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

GraphQL 應用程式是資料驅動的（不是端點驅動），因此客戶端可以宣告所需的確切資料，從伺服器接收相應的JSON響應。GraphQL API提供的文件記錄了所有的資料及其型別，幫助開發人員更全面地瞭解API。

由於GraphQL API 提供了完全型別化的架構，因此它也可以與 TypeScript 應用程式很好地整合。GraphQL 可以通過 GraphQL Code Generator 等工具讀取客戶端程式碼中的查詢，並將其與架構進行匹配，以提供在整個應用程式中流動的 TypeScript 型別。

在過去的一年中，GraphQL 的下載量增加了一倍，而 Apollo 也開始朝著使用最廣泛的框架邁進。

VS Code 成主宰、Vue 備受熱捧！2019 前端開發趨勢必讀

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 file
const 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 庫，而且它們還將持續快速增長。

VS Code 成主宰、Vue 備受熱捧！2019 前端開發趨勢必讀

VS Code是文字編輯器市場上的主宰

開發人員對於IDE /文字編輯器充滿了熱情，他們會沒完沒了地爭論為什麼自己的編輯器才是最佳選擇。然而，前端開發人員不約而同地選擇了 VS Code。VS Code 是一款開源編輯器，它提供的外掛為開發人員提供了無與倫比的體驗。

根據“2018年JS的狀況調查”（地址：https://2018.stateofjs.com/other-tools/），文字編輯器的使用情況如下（2019年的調查釋出時，下圖將被更新）：

VS Code 成主宰、Vue 備受熱捧！2019 前端開發趨勢必讀

Webpack 5 已進入測試階段且即將釋出

Webpack 已成為所有現代 JavaScript 工具鏈的核心元件，而且也是最常用的構建工具。Webpack 一直在提高效能和可用性，努力為開發人員提供更好的工具。Webpack 5 主要側重於以下幾個方面：

通過持久快取提高構建效能；
通過更好的演算法和預設值來改善長期快取；
清理內部模式，同時不會引發任何重大變動。

Jest 放棄 Flow，轉投 TypeScript 的懷抱

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

2019年Chrome 釋出了穩定版本 72–78

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

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

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

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