前端領域2017年有哪些變化，2018年又有怎樣的期待？
以下為我在知乎問題「2017年前端有什么樣變化？即將來臨的2018有什么樣的期待？」下的回答，稍作整理分享給大家。如有遺漏歡迎在評論中指出。原文如下：
在即將過去的2017年里，我們回顧：
逃不過的三大框架
-
React 繼續在前端領域占據著主導地位，并在 2017 年發布了最受期待的版本之一 - React 16。 它包含了可以實現異步 UI 渲染的 fiber 架構。通過提供包括錯誤邊界在內的很多其他特性。但 React 在這一年中所取得最重要的成就不是它推出的新特性，而是修改了它的開源協議：BSD 協議 -> MIT 協議。除此外，Jest、Flow、Immutable.js 和 GraphQL 授權也都改為 MIT 協議。
-
Angular 市場占有率持續下滑（相較于 React ），發布了V4 （3月23日）以及 V5 （11月2日），在 V4 中看到了 Angular Universal 成為官方項目的一部分以及 Angular Animation 從核心包中被抽離出來，V5 中則對 PWA 支持進行了改進、對編譯器優化達到更快地構建等。
-
即便 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 發布的功能） 。
樣式布局
-
網格布局最終被 CSS 采納為標準，瀏覽器也正在快速地采用它。過去，網格系統在 CSS 中曾被
tables、float、flex以及inline-block實現過。 -
2017 年見證了 styled-components（由 Max Stoiber、Glen Maddern 和 Phil Plückthun 創建） 在流行程度上逐漸占據主導地位。Emotion（由 Kye Hohenberger 創建）是***的 JavaScript 庫之一，但它已經被迅速采用。另一個可選方案是 glamorous（由 PayPal、Kent C. Dodds 和一群熱情的貢獻者創建），它封裝了 glamor 庫。
-
在過去的幾年里，像SASS，Less和Stylus這樣的CSS預處理器已經流行起來。PostCSS 于2014年推出，而在2017年真正火爆起來，成為目前***的 CSS 預處理器。
-
另一方面，在 2017 年，主要的進步來自 CSS-in-JS 的明顯改進與采用，其中所有樣式都是通過代碼而不是樣式表進行構建的。目前還不清楚這是否將成為前端社區的最終方向，但這是目前***的方法。
-
PostCSS 仍然是***的 CSS 預處理器，但是很多都在切換到 CSS-in-JS 解決方案。
注：評論中有同學談到 PostCSS 是后處理器，根據定義，CSS 后處理器是對 CSS 進行處理，并最終生成 CSS 的 預處理器，它屬于廣義上的 CSS 預處理器。由于本人回答時的定位以及參考的文獻中所指，故這里不做細分，認定 PostCSS 為預處理器。細致的同學可以做進一步的細分。
工程模塊化工具
-
Webpack 2 于今年2月份發布。 它帶來了諸如 ES6 模塊（不再需要 Babel 轉換 import 語句）和 tree shaking （消除了打包中未使用的代碼）等重要功能。 此后不久，V3 發布了一個名為“scope hoisting”的功能，將所有的 webpack 模塊放入一個單獨的 JavaScript 包中，從而大大縮小了它的尺寸。
-
7月份，Webpack 團隊從 Mozilla 開源支持計劃獲得了一筆贈款，以便為 WebAssembly 提供***的支持。
-
Parcel 作為一個有趣的項目，在短短十天內便在 GitHub 上獲得了 10000 個 star。 它主要通過利用多個 CPU 內核和一個高效的文件系統緩存來實現。 它還基于抽象語法樹進行操作，而不像 Webpack 使用字符串。
-
除此外，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 等在構建方案份額中扮演這一種合久必分、分久必合的輪回。
本答案在撰寫過程中參考了以下內容：
-
Frontend in 2017: The important parts
-
A recap of front-end development in 2017
基于第二篇參考文章的譯文已經翻譯成中文，感興趣的同學也可以點擊以下鏈接查看。
