2017 年，前端開發(fā)繼續(xù)飛速發(fā)展。以下是在過去的一年中非常值得關(guān)注的一些事件和趨勢(shì)整理，主要參考了國(guó)內(nèi)外的一些報(bào)道和文章，希望能對(duì)大家在思考 2018 年的趨勢(shì)和走向上有所幫助。

1、React 16 和 MIT 許可證

2017 年，React 繼續(xù)在前端領(lǐng)域占據(jù)主導(dǎo)地位，備受期待的 React 16 也正式發(fā)布。該版本包含可實(shí)現(xiàn)異步 UI 渲染的 fiber 架構(gòu)，以及更便捷的錯(cuò)誤管理。不過，React 更引人關(guān)注的并不是其新特性，而是開源許可證的更改。因?yàn)楹芏嗥髽I(yè)拒絕使用BSD+專利許可模式，F(xiàn)acebook 經(jīng)過最終的權(quán)衡，決定放棄這種模式，并采用了對(duì)用戶友好的 MIT 許可證。同時(shí)，Jest、Flow、Immutable.js 和 GraphQL 等項(xiàng)目也更改為了 MIT 許可證。

>> 相關(guān)閱讀推薦：

2、下一代 Web 應(yīng)用模型 — PWA

PWA（Progressive Web App）是 Google 于 2016 年提出的概念，2017 年已被迅速采用。PWA 旨在增強(qiáng) Web 體驗(yàn)，可顯著提高加載速度、可離線工作、可被添加至主屏、全屏執(zhí)行、推送通知消息等等。這些特性將使得 Web 應(yīng)用漸進(jìn)式接近原生 App。

>> 相關(guān)閱讀：

3、Yarn 快速普及，NPM 跟上腳步

Facebook 與 Exponent、 Google 和 Tilde 合作開發(fā)的 Yarn 在 2016 年 10 月發(fā)布以后，迅速躥紅。Yarn 可以看做是對(duì) NPM 缺失的一些關(guān)鍵特性的補(bǔ)充，能夠更快速地安裝軟件包和管理依賴關(guān)系，并且可以在跨機(jī)器或者無網(wǎng)絡(luò)的安全環(huán)境中保持代碼的一致性。據(jù)悉，Yarn 下載量目前已超過 10 億次（每月下載量達(dá)到 125 萬次）。Yarn 的成功，使得 NPM 在 5.0 版本中也加入了上述的這些特性。

>> 相關(guān)閱讀：

4、WebAssembly 受主流瀏覽器支持

WebAssembly（wasm）在今年受到了所有主流瀏覽器的支持，包括 Chrome、Firefox、Safari 和 Edge 。wasm 源于 Mozilla 發(fā)起的 Asm.js 項(xiàng)目，用于補(bǔ)充 JavaScript，其本地解碼速度比 JS 解析快得多，讓高性能的 Web 應(yīng)用在瀏覽器上運(yùn)行成為可能，比如視頻游戲、計(jì)算機(jī)輔助設(shè)計(jì)、視頻和圖像編輯、科學(xué)可視化等等。而且由于 wasm 字節(jié)碼（Bytecode）較一般程序代碼小許多倍，意謂著這項(xiàng)標(biāo)準(zhǔn)可節(jié)省移動(dòng)設(shè)備的使用帶寬，有助于改善網(wǎng)頁(yè)加載速度，且字節(jié)碼更適合瀏覽器讀取。wasm 還提供了一個(gè) JavaScript API，為前端開發(fā)人員提供了一個(gè)更容易的切入點(diǎn)。

>> 相關(guān)閱讀：

5、Angular 發(fā)布了 v4，以及……v5

由于采用語義化版本控制，Angular 在今年跨越了兩個(gè)大版本：于 3 月 23 日 發(fā)布的 Angular 4 以及于 11 月 1 日 發(fā)布的 Angular 5。Angular 4 優(yōu)化了視圖引擎、減少代碼體積；Angular 5 中包含了一些用戶期待已久的改進(jìn)，像是編譯器的改進(jìn)，能更快的構(gòu)建/重建；新的 @angular/service-worker 包能夠更好的構(gòu)建漸進(jìn)式 Web 應(yīng)用程序。

>> 相關(guān)閱讀：

6、Vue.js 繼續(xù)流行

既然說到了 React ，說到了 Angular ，自然不能落下 Vue 。2017 年，Vue 依然越來越受歡迎，該框架提供基于組件的架構(gòu)，是 React 在因許可證問題被抵制時(shí)的主要替代方案之一。它已經(jīng)被包括 GitLab 在內(nèi)的許多大型公司采用，在 Stack Overflow 上的關(guān)注度居高不下。

>> 相關(guān)閱讀：

7、CSS-in-JS 在爭(zhēng)議中沉淀

React 的出現(xiàn)，打破了以前“關(guān)注點(diǎn)分離”的網(wǎng)頁(yè)開發(fā)原則，因其采用組件結(jié)構(gòu)，組件強(qiáng)制要求把 HTML、CSS、JavaScript 寫在一起。隨著 React 的走紅和組件模式深入人心，這種” 關(guān)注點(diǎn)混合” 的新寫法逐漸成為主流。表面上，React 的寫法是 HTML、CSS、JavaScript 混合在一起。實(shí)際上并不是，其實(shí)是用 JavaScript 在寫 HTML 和 CSS，React 是在 JavaScript 里面實(shí)現(xiàn)了對(duì) HTML 和 CSS 的封裝。由于 CSS 的封裝非常弱，導(dǎo)致了一系列的第三方庫(kù)，用來加強(qiáng) React 的 CSS 操作，它們統(tǒng)稱為 CSS in JS，意思就是使用 JS 語言寫 CSS。

CSS in JS 的出現(xiàn)帶來了很多爭(zhēng)議，有不少人認(rèn)為是在重復(fù)造輪子，或者說是沒有找到其優(yōu)勢(shì)。CSS-IN-JS 是不是未來的方向我們暫且不議，但其在 2017 年已得到明顯的采用。

8、靜態(tài)網(wǎng)站卷土重來

2017 ，靜態(tài)網(wǎng)站卷土重來。  等框架使你能夠使用 React 和其他現(xiàn)代工具構(gòu)建靜態(tài)網(wǎng)站。不是每個(gè)網(wǎng)站都需要或應(yīng)該是一個(gè)復(fù)雜的現(xiàn)代 Web 應(yīng)用，靜態(tài)網(wǎng)站生成器能夠提供的服務(wù)器端渲染和無與倫比的速度，正式其優(yōu)勢(shì)所在。

靜態(tài)網(wǎng)站生成器還引發(fā)了另一個(gè)被稱為 JAMStack 的趨勢(shì)：“JavaScript，APIs，Markup”。 JAMStack 使用相同的靜態(tài)預(yù)構(gòu)建 HTML 文件以及可重復(fù)使用的 API 和 JavaScript 來處理請(qǐng)求/響應(yīng)周期內(nèi)的任何動(dòng)態(tài)編程，旨在提供更好的性能，更高的安全性，更低的擴(kuò)展成本和更優(yōu)的開發(fā)人員體驗(yàn)。

9、GraphQL 繼續(xù)挑戰(zhàn) REST

雖然很多人認(rèn)為 GraphQL 在 2017 年依然沒有火起來，但不可否認(rèn)的是 GraphQL 已逐漸占據(jù)了一席之地。不再管理多個(gè)端點(diǎn)并獲取不必要的數(shù)據(jù)，GraphQL 允許客戶端聲明式地定義所需的數(shù)據(jù)，并從單個(gè)端點(diǎn)檢索所有數(shù)據(jù)。這也正式它在剛出現(xiàn)時(shí)被認(rèn)為是革命性的 API 工具的原因，因?yàn)?它可以讓客戶端在請(qǐng)求中指定希望得到的數(shù)據(jù)，而不像傳統(tǒng)的 REST 那樣只能呆板地在服務(wù)端進(jìn)行預(yù)定義。

10、TypeScript 和 Flow 受追捧

2017 年，TypeScript 受到了很多 JavaScript 開發(fā)者的追捧。TypeScript 由微軟創(chuàng)建，也是新版 Angular 采用的語言，其強(qiáng)類型正式優(yōu)勢(shì)所在。 而 Flow 則提供了一種更加靈活的方式來引入類型，而不需要進(jìn)行重構(gòu)。