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

在即將過(guò)去的2017年里，我們回顧：

逃不過(guò)的三大框架

1. React 繼續(xù)在前端領(lǐng)域占據(jù)著主導(dǎo)地位，并在 2017 年發(fā)布了最受期待的版本之一 - React 16。 它包含了可以實(shí)現(xiàn)異步 UI 渲染的 fiber 架構(gòu)。通過(guò)提供包括錯(cuò)誤邊界在內(nèi)的很多其他特性。但 React 在這一年中所取得最重要的成就不是它推出的新特性，而是修改了它的開源協(xié)議：BSD 協(xié)議 -> MIT 協(xié)議。除此外，Jest、Flow、Immutable.js 和 GraphQL 授權(quán)也都改為 MIT 協(xié)議。

2. Angular 市場(chǎng)占有率持續(xù)下滑（相較于 React ），發(fā)布了V4 （3月23日）以及 V5 （11月2日），在 V4 中看到了 Angular Universal  成為官方項(xiàng)目的一部分以及 Angular Animation 從核心包中被抽離出來(lái)，V5 中則對(duì) PWA 支持進(jìn)行了改進(jìn)、對(duì)編譯器優(yōu)化達(dá)到更快地構(gòu)建等。

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

注：上圖為三大框架過(guò)去一年中在 NPM 的下載量對(duì)比圖，以下類似的框架/包對(duì)比圖均采用 npmtrends 一年內(nèi)下載量進(jìn)行對(duì)比，同時(shí)附有 GitHub 上 star/fork 等狀態(tài)信息。

ECMAScript

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

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

WebAssembly

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

Progressive Web Apps

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

包管理器

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

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

• 針對(duì) Yarn 的出現(xiàn)， NPM 回?fù)粢?v5 版本的發(fā)布，這個(gè)版本顯著提高了性能（包括上述的 Yarn 發(fā)布的功能） 。

樣式布局

1. 網(wǎng)格布局最終被 CSS 采納為標(biāo)準(zhǔn)，瀏覽器也正在快速地采用它。過(guò)去，網(wǎng)格系統(tǒng)在 CSS 中曾被 tables、float、flex 以及 inline-block 實(shí)現(xiàn)過(guò)。

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

3. 在過(guò)去的幾年里，像SASS，Less和Stylus這樣的CSS預(yù)處理器已經(jīng)流行起來(lái)。PostCSS 于2014年推出，而在2017年真正火爆起來(lái)，成為目前***的 CSS 預(yù)處理器。

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

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

注：評(píng)論中有同學(xué)談到 PostCSS 是后處理器，根據(jù)定義，CSS 后處理器是對(duì) CSS 進(jìn)行處理，并最終生成 CSS 的 預(yù)處理器，它屬于廣義上的 CSS 預(yù)處理器。由于本人回答時(shí)的定位以及參考的文獻(xiàn)中所指，故這里不做細(xì)分，認(rèn)定 PostCSS 為預(yù)處理器。細(xì)致的同學(xué)可以做進(jìn)一步的細(xì)分。

工程模塊化工具

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

2. 7月份，Webpack 團(tuán)隊(duì)從 Mozilla 開源支持計(jì)劃獲得了一筆贈(zèng)款，以便為 WebAssembly 提供***的支持。

3. Parcel 作為一個(gè)有趣的項(xiàng)目，在短短十天內(nèi)便在 GitHub 上獲得了 10000 個(gè) star。 它主要通過(guò)利用多個(gè) CPU 內(nèi)核和一個(gè)高效的文件系統(tǒng)緩存來(lái)實(shí)現(xiàn)。 它還基于抽象語(yǔ)法樹進(jìn)行操作，而不像 Webpack 使用字符串。

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

TypeScript

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

應(yīng)用狀態(tài)管理

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

• Mobx 成長(zhǎng)的也很快，并被一些高利潤(rùn)公司所使用，例如 IBM，美國(guó)銀行以及 Lyft。

• 除此外，MobX 團(tuán)隊(duì)正在努力，希望在新項(xiàng)目—— mobx-state-tree（MST） 中結(jié)合 Redux 和 MobX 的優(yōu)點(diǎn)。

GraphQL

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

靜態(tài)網(wǎng)站生成方案

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

在即將到來(lái)的2018年中，我們期待：

• 基于組件應(yīng)用中的樣式是否是組織 CSS 的***方式？有關(guān)該內(nèi)容的討論或許會(huì)激化。

• 越來(lái)越多的公司采用具有統(tǒng)一代碼庫(kù)的移動(dòng)端解決方案，如 React Native，F(xiàn)lutter 或 Weex 。

• 因?yàn)殡x線能力和無(wú)縫的移動(dòng)端體驗(yàn)，web 變得更加原生，再加上蘋果對(duì) Service Worker 的表態(tài) Release Notes for Safari Technology Preview 46， PWA 在2018年可能會(huì)被全面支持。

• WebAssembly 可以取得長(zhǎng)足的進(jìn)步，提供一個(gè)更好的 web 體驗(yàn)。

• GraphQL 正在并繼續(xù)挑戰(zhàn) REST。

• 由于不再有對(duì)開源協(xié)議上的爭(zhēng)議，React 強(qiáng)化了它的地位。

• Flow 和 TypeScript 采取更強(qiáng)大的舉措，使 JavaScript 更具結(jié)構(gòu)。

• 虛擬現(xiàn)實(shí)使用類似 A-Frame、React VR 和 Google VR 這樣的庫(kù)正在向前邁進(jìn)。

• 人們使用區(qū)塊鏈和 web3.js（由 Marek Kotewicz 和 Fabian Vogelsteller 創(chuàng)建）構(gòu)建了一些非?？岬膽?yīng)用程序。

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

本答案在撰寫過(guò)程中參考了以下內(nèi)容：

1. Frontend in 2017: The important parts

2. A recap of front-end development in 2017

基于第二篇參考文章的譯文已經(jīng)翻譯成中文，感興趣的同學(xué)也可以點(diǎn)擊以下鏈接查看。