以下為我在知乎問題「2017年前端有什么樣變化？即將來臨的2018有什么樣的期待？」下的回答，稍作整理分享給大家。如有遺漏歡迎在評論中指出。原文如下：

在即將過去的2017年里，我們回顧：

逃不過的三大框架

1. React 繼續在前端領域占據著主導地位，并在 2017 年發布了最受期待的版本之一 - React 16。 它包含了可以實現異步 UI 渲染的 fiber 架構。通過提供包括錯誤邊界在內的很多其他特性。但 React 在這一年中所取得最重要的成就不是它推出的新特性，而是修改了它的開源協議：BSD 協議 -> MIT 協議。除此外，Jest、Flow、Immutable.js 和 GraphQL 授權也都改為 MIT 協議。

2. Angular 市場占有率持續下滑（相較于 React ），發布了V4 （3月23日）以及 V5 （11月2日），在 V4 中看到了 Angular Universal  成為官方項目的一部分以及 Angular Animation 從核心包中被抽離出來，V5 中則對 PWA 支持進行了改進、對編譯器優化達到更快地構建等。

3. 即便 React 獲得了巨大成功，Vue（作者尤雨溪）也仍然越來越受歡迎。該框架提供了非常友好、簡單的 API，是 React 的主要替代方案之一。它已經被包括 GitLab 在內的大公司所采用，該公司回顧了在過去的一年里使用該框架的故事。

注：上圖為三大框架過去一年中在 NPM 的下載量對比圖，以下類似的框架/包對比圖均采用 npmtrends 一年內下載量進行對比，同時附有 GitHub 上 star/fork 等狀態信息。

ECMAScript

• 在一個詳盡的提案過程結束之后，六月份發布了 ECMAScript 規范的2017年版本，其中包括一些開創性的功能，如異步功能，共享內存和原子操作（atomic operations）。其中，共享內存將使 JavaScript 中的高性能并行計算更容易處理，而且效率更高。擁有共享內存的并行架構對于任何想用 WebGL 和 web worker 創建游戲的人來說都是巨大的誘惑。

• 該版本在2017年12月已經被所有主流瀏覽器所支持，Edge 表示將從 v16 版本開始對這些功能進行支持。由于 Node 不支持 web worker，所以他們也沒有對共享內存的支持，但他們正在重新思考該項決定。

WebAssembly

• 所有主流瀏覽器現在都支持 WebAssembly，五月份 Chrome 開始支持，Firefox 則是從三月份就開始支持，Edge 是十月份。 Safari 則在第十一次發布中開始支持。Chrome for Android 和 Safari Mobile 也支持 WebAssembly。詳情可以參考 WebAssembly support now shipping in all major browsers – The Mozilla Blog

Progressive Web Apps

• 我們一直在尋找彌補 web 和其他客戶端之間體驗差距上的解決方案。Google 一直主導通過將 web 應用轉換為 Progressive Web Apps(PWA) 來增強它的能力，而這一方法在 2017 年迅速獲得采用。一個 PWA 應用利用現代瀏覽器技術來提供更像移動應用程序的 web 體驗。它提供了改進的性能和離線體驗，以及以前僅可用于移動的功能，例如推送通知。 PWA 的基礎是一個 manifest.json 文件和對 service workers 的利用。詳情見 Progressive Web Apps: Great Experiences Everywhere (Google I/O ‘17)。

包管理器

• Bower 市場占有率持續下降，它的***一次發布在2016年11月，之后官方正式推薦用戶使用 NPM 用于管理前端項目中的軟件包。

• NPM 自從最初發布以來已經有了相當長的一段時間，但它仍然缺少一些關鍵特性，而這正是 Yarn 希望補充的。Yarn 的主要貢獻是包緩存，一個確保確定性構建的鎖文件，并行操作以及依賴關系。這些功能非常成功，以致于 NPM 在其 5.0 版本中實現了它們。Yarn 下載量超過 10 億次（目前每月下載量達到了 125 萬次）并擁有驚人的 29000 多個 GitHub stars。即使你沒在使用 Yarn，JavaScript 的包管理整體上由于 Yarn 的發布也得到了顯著地提升 。

• 針對 Yarn 的出現， NPM 回擊以 v5 版本的發布，這個版本顯著提高了性能（包括上述的 Yarn 發布的功能） 。

樣式布局

1. 網格布局最終被 CSS 采納為標準，瀏覽器也正在快速地采用它。過去，網格系統在 CSS 中曾被 tables、float、flex 以及 inline-block 實現過。

2. 2017 年見證了 styled-components（由 Max Stoiber、Glen Maddern 和 Phil Plückthun 創建） 在流行程度上逐漸占據主導地位。Emotion（由 Kye Hohenberger 創建）是***的 JavaScript 庫之一，但它已經被迅速采用。另一個可選方案是 glamorous（由 PayPal、Kent C. Dodds 和一群熱情的貢獻者創建），它封裝了 glamor 庫。

3. 在過去的幾年里，像SASS，Less和Stylus這樣的CSS預處理器已經流行起來。PostCSS 于2014年推出，而在2017年真正火爆起來，成為目前***的 CSS 預處理器。

4. 另一方面，在 2017 年，主要的進步來自 CSS-in-JS 的明顯改進與采用，其中所有樣式都是通過代碼而不是樣式表進行構建的。目前還不清楚這是否將成為前端社區的最終方向，但這是目前***的方法。

5. PostCSS 仍然是***的 CSS 預處理器，但是很多都在切換到 CSS-in-JS 解決方案。

注：評論中有同學談到 PostCSS 是后處理器，根據定義，CSS 后處理器是對 CSS 進行處理，并最終生成 CSS 的 預處理器，它屬于廣義上的 CSS 預處理器。由于本人回答時的定位以及參考的文獻中所指，故這里不做細分，認定 PostCSS 為預處理器。細致的同學可以做進一步的細分。

工程模塊化工具

1. Webpack 2 于今年2月份發布。 它帶來了諸如 ES6 模塊（不再需要 Babel 轉換 import 語句）和 tree shaking （消除了打包中未使用的代碼）等重要功能。 此后不久，V3 發布了一個名為“scope hoisting”的功能，將所有的 webpack 模塊放入一個單獨的 JavaScript 包中，從而大大縮小了它的尺寸。

2. 7月份，Webpack 團隊從 Mozilla 開源支持計劃獲得了一筆贈款，以便為 WebAssembly 提供***的支持。

3. Parcel 作為一個有趣的項目，在短短十天內便在 GitHub 上獲得了 10000 個 star。 它主要通過利用多個 CPU 內核和一個高效的文件系統緩存來實現。 它還基于抽象語法樹進行操作，而不像 Webpack 使用字符串。

4. 除此外，Rollup 的發展也不容小覷。4月 React 團隊從 Gulp 切換到了 Rollup 進行開發。除此外，Webpack 團隊也推薦在某些方面使用 Rollup 而不是 Webpack。

TypeScript

• JavaScript 中缺少類型一直是很多人的抱怨所在。為了解決這些問題，TypeScript 出現。它由微軟創建，TypeScript - JavaScript that scales.JavaScript 中缺少類型一直是很多人的抱怨所在。為了解決這些問題，TypeScript 出現。它由微軟創建，由于其出色的表現贏得了很多 JavaScript 開發者的追捧，而 Flow 提供了一種在不需要激進的重構下更為靈活的方式來引入類型，后者是 Facebook 的成果。

應用狀態管理

• Redux 仍然作為 React 項目推薦的狀態管理解決方案，并在 2017年獲得了五倍的增長速度（NPM 下載量）。

• Mobx 成長的也很快，并被一些高利潤公司所使用，例如 IBM，美國銀行以及 Lyft。

• 除此外，MobX 團隊正在努力，希望在新項目—— mobx-state-tree（MST） 中結合 Redux 和 MobX 的優點。

GraphQL

• GraphQL 似乎在 REST 之上迅速占據了一席之地，Samer Buna 甚至聲稱 REST 已經死亡。GitHub 已經使用 GraphQL 編寫了***版本的 API，與此同時為了使 GraphQL 對所有開發人員可用，許多公司正在開發產品，例如 Johannes Schickling 開發的 Graphcool框架。

靜態網站生成方案

• 2017 見證了靜態網站卷土重來。像 Gatsby 這樣的框架使您能夠使用 React 和其他現代工具構建靜態網站。不是每個網站都需要或應該成為一個復雜的現代 web 應用。由于采用與預構建標記（原文 prebuilt markup），靜態網站生成方案使你獲得服務器端渲染的好處和***的速度。如果你正在尋找一個很好的例子，React 官方文檔就是用 Gatsby 構建的。

在即將到來的2018年中，我們期待：

• 基于組件應用中的樣式是否是組織 CSS 的***方式？有關該內容的討論或許會激化。

• 越來越多的公司采用具有統一代碼庫的移動端解決方案，如 React Native，Flutter 或 Weex 。

• 因為離線能力和無縫的移動端體驗，web 變得更加原生，再加上蘋果對 Service Worker 的表態 Release Notes for Safari Technology Preview 46， PWA 在2018年可能會被全面支持。

• WebAssembly 可以取得長足的進步，提供一個更好的 web 體驗。

• GraphQL 正在并繼續挑戰 REST。

• 由于不再有對開源協議上的爭議，React 強化了它的地位。

• Flow 和 TypeScript 采取更強大的舉措，使 JavaScript 更具結構。

• 虛擬現實使用類似 A-Frame、React VR 和 Google VR 這樣的庫正在向前邁進。

• 人們使用區塊鏈和 web3.js（由 Marek Kotewicz 和 Fabian Vogelsteller 創建）構建了一些非常酷的應用程序。

• 構建方案的持續發展，Webpack ，Rollup 以及后起之秀 Parcel 等在構建方案份額中扮演這一種合久必分、分久必合的輪回。

本答案在撰寫過程中參考了以下內容：

1. Frontend in 2017: The important parts

2. A recap of front-end development in 2017

基于第二篇參考文章的譯文已經翻譯成中文，感興趣的同學也可以點擊以下鏈接查看。