2017年，React 繼續在前端領域佔據主導地位，備受期待的 React 16 也正式釋出。該版本包含可實現非同步 UI 渲染的 fiber 架構，以及更便捷的錯誤管理。

不過，React 更引人關注的不是其新特性，而是開源許可證的更改。Facebook 放棄了導致很多企業拒絕使用其開源專案的 BSD+專利許可模式，並採用了對使用者友好的 MIT 許可證。同時，Jest、Flow、Immutable.js 和 GraphQL 等專案也更改為了 MIT 許可證。

• React 16.0.0 釋出，去除專利條款，改用 MIT 許可證：https://www.oschina.net/news/89089/react-16-0-0

• Facebook 被集體“聲討”，要求更改 ReactJS 許可：https://www.oschina.net/news/87076/facebook-reactjs-license

2、下一代 Web 應用模型 — PWA

PWA（Progressive Web App）是 Google 於 2016 年提出的概念，2017 年已被迅速採用。PWA 旨在增強 Web 體驗，可顯著提高載入速度、可離線工作、可被新增至主屏、全屏執行、推送通知訊息等等。這些特性將使得 Web 應用漸進式接近原生 App。

• 您的第一個 Progressive Web App：https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/?hl=zh-cn

• Chrome Web App 已被谷歌幹掉 未來將主推 PWA：https://www.oschina.net/news/91277/google-removes-chrome-apps-from-chrome-web-store

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

Facebook 與 Exponent、 Google 和 Tilde 合作開發的 Yarn 在2016年10月釋出以後，迅速躥紅。Yarn 可以看做是對 NPM 缺失的一些關鍵特性的補充，能夠更快速地安裝軟體包和管理依賴關係，並且可以在跨機器或者無網路的安全環境中保持程式碼的一致性。據悉，Yarn 下載量目前已超過10億次（每月下載量達到125萬次）。

Yarn 的成功，使得 NPM 在 5.0 版本中也加入了上述的這些特性。

• npm v5.0.0 正式釋出，改進了穩定性：https://www.oschina.net/news/85338/npm-5-0-0-released

• Facebook 新推 Yarn，或取代 npm 客戶端：https://www.oschina.net/news/78072/yarn-a-new-package-manager-for-java

4、WebAssembly 受主流瀏覽器支援

WebAssembly （wasm）在今年受到了所有主流瀏覽器的支援，包括 Chrome、Firefox、Safari 和 Edge 。wasm 源於 Mozilla 發起的 Asm.js 專案，用於補充 Java，其本地解碼速度比 JS 解析快得多，讓高效能的 Web 應用在瀏覽器上執行成為可能，比如視訊遊戲、計算機輔助設計、視訊和影象編輯、科學視覺化等等。

而且由於 wasm 位元組碼（Bytecode）較一般程式程式碼小許多倍，意謂著這項標準可節省移動裝置的使用頻寬，有助於改善網頁載入速度，且位元組碼更適合瀏覽器讀取。

wasm 還提供了一個Java API，為前端開發人員提供了一個更容易的切入點。

• 主流瀏覽器都加入了 WebAssembly 支援：https://www.oschina.net/news/90591/popular-browsers-add-webassembly

• 搶先一步，Rust 構建版支援直接編譯 WebAssembly：https://www.oschina.net/news/91079/rust-gets-direct-webassembly-compilation

5、Angular 釋出了 v4，以及……v5

由於採用語義化版本控制，Angular 在今年跨越了兩個大版本：於 3月23日 釋出的 Angular 4 以及於 11月1日 釋出的 Angular 5。Angular 4 優化了檢視引擎、減少程式碼體積；Angular 5 中包含了一些使用者期待已久的改進，像是編譯器的改進，能更快的構建/重建；新的 @angular/service-worker 包能夠更好的構建漸進式 Web 應用程式。

• Angular 5.0.0 釋出，Web 前端框架：https://www.oschina.net/news/90170/angular-5-0-0

• Angular 4.0.0 正式版釋出， Web 前端框架：https://www.oschina.net/news/83195/angular-4-0-0-released

• 沒有 Angular 3 ，Angular 4 計劃2017年3月釋出：https://www.oschina.net/news/82842/angular-4-plan-to-released-by-3-22

6、Vue.js 繼續流行

既然說到了 React ，說到了 Angular ，自然不能落下 Vue 。2017年，Vue 依然越來越受歡迎，該框架提供基於元件的架構，是 React 在因許可證問題被抵制時的主要替代方案之一。它已經被包括 GitLab 在內的許多大型公司採用，在 Stack Overflow 上的關注度居高不下。

• Vue.js 框架成為 WordPress 棄用 React 後的最佳選擇：https://www.oschina.net/news/88935/vue-js-be-the-best-choice-for-wordpress

• 翻譯 | 我們為什麼以及是如何從 Angular.js 遷移到 Vue.js ？：https://www.oschina.net/translate/why-and-how-we-migrated-from-angularjs-to-vuejs

7、CSS-in-JS 在爭議中沉澱

React 的出現，打破了以前“關注點分離”的網頁開發原則，因其採用元件結構，元件強制要求把 HTML、CSS、Java 寫在一起。隨著 React 的走紅和元件模式深入人心，這種”關注點混合”的新寫法逐漸成為主流。表面上，React 的寫法是 HTML、CSS、Java 混合在一起。實際上並不是，其實是用 Java 在寫 HTML 和 CSS，React 是在 Java 裡面實現了對 HTML 和 CSS 的封裝。

由於 CSS 的封裝非常弱，導致了一系列的第三方庫，用來加強 React 的 CSS 操作，它們統稱為 CSS in JS，意思就是使用 JS 語言寫 CSS。

CSS in JS 的出現帶來了很多爭議，有不少人認為是在重複造輪子，或者說是沒有找到其優勢。CSS-IN-JS 是不是未來的方向我們暫且不議，但其在2017年已得到明顯的採用。

8、靜態網站捲土重來

2017 ，靜態網站捲土重來。Gatsby等框架使你能夠使用 React 和其他現代工具構建靜態網站。不是每個網站都需要或應該是一個複雜的現代 Web 應用，靜態網站生成器能夠提供的伺服器端渲染和無與倫比的速度，正式其優勢所在。

靜態網站生成器還引發了另一個被稱為 JAMStack 的趨勢：“Java，APIs，Markup”。 JAMStack 使用相同的靜態預構建 HTML 檔案以及可重複使用的 API 和 Java 來處理請求/響應週期內的任何動態程式設計，旨在提供更好的效能，更高的安全性，更低的擴充套件成本和更優的開發人員體驗。

9、GraphQL 繼續挑戰 REST

雖然很多人認為 GraphQL 在2017年依然沒有火起來，但不可否認的是 GraphQL 已逐漸佔據了一席之地。不再管理多個端點並獲取不必要的資料，GraphQL 允許客戶端宣告式地定義所需的資料，並從單個端點檢索所有資料。這也正式它在剛出現時被認為是革命性的 API 工具的原因，因為它可以讓客戶端在請求中指定希望得到的資料，而不像傳統的 REST 那樣只能呆板地在服務端進行預定義。

10、Type 和 Flow 受追捧

2017年，Type 受到了很多 Java 開發者的追捧。Type 由微軟建立，也是新版 Angular 採用的語言，其強型別正式優勢所在。 而 Flow 則提供了一種更加靈活的方式來引入型別，而不需要進行重構。