本文是我對中文版 risingstars2016 的整理，而本人就是中文版的譯者，首發於知乎專欄 前端週刊。共 21384 字，讀完需 30 分鐘，速讀需 5 分鐘。長江後浪推前浪，如果你能花 30 分鐘讀完我 6 個小時翻譯的內容，相信你不會被後浪拍死在沙灘上，對 2017 該學什麼有個清晰的認識。近幾年 JS 社群創新和演化的速度是有目共睹的，幾個月前比較時髦的技術很可能現在已經過時了。2016 已經過去，你有沒有擔心錯過了什麼重要的內容？在這篇調查報告中我們會為你解讀社群的主流趨勢。
我們將從數量上來分析哪些專案 2016 年獲得比較多的關注，具體的做法是比較各專案 2016 年在 Github 上新增 star 的數量。
回顧 2015 年：React 無疑佔據了統治地位，而 Redux 則在眾多牛毛的 Flux 實現中脫穎而出。那麼 2016 年哪些專案最受開發者關注呢？
目錄
- 最受歡迎專案
- 前端框架
- Node.js 框架
- React 專案模板
- 移動開發
- 編譯工具
- 構建工具
- 測試框架
- IDE
- 靜態網站生成器
1. 最受歡迎專案
仔細觀察 2016 年排名前 10 的專案，你就能對 WEB 社群的演化方向有個直觀的把握，概括如下：
- 3 個 UI 框架：Vue.JS, React and Angular 2
- 1 個新的 Node.js 包管理器：Yarn
- 建立桌面應用的首選：Electron
- 建立 react 新專案的首選：Create React App
- 1 個移動開發框架：React Native
- 最受歡迎的 CSS 工具箱：Bootstrap
- 函數語言程式設計風格的狀態管理庫：Redux
- 強大兼具靈活的繪相簿：D3
上面這些專案覆蓋的領域，無疑證明了 JS 的通用性，印證了那句話：能被 JS 編寫的，遲早都會被 JS 編寫。
2016 年的最佳專案是... ?
Vue.JS 2016 年新增超過 25000 個 star，意味著平均每天新增 72 個 star，超過了所有同類專案的流行速度，比如 React 和 Angular。 採用 Virtual DOM 來增強效能的 Vue.JS v2 於 2016 年 10 月釋出。
Vue.JS 已經被不少大公司用在了生產環境中，比如中國最大的電子商務網站裡巴巴，所以你可以將 Vue.JS 作為一個安全的選擇。
圍繞著 Vue.JS 的社群生態也日趨成熟，包括路由庫（vue-router）和狀態管理庫（Vuex）。 Vue.JS 兼具了 React 和 Angular 1 兩者的優點，其中 React 的基本思想是元件式開發，而 Angular 1 是模板增強。
2. 前端框架
前端框架的百花齊放也許是出現 JS 疲勞 的原因所在，新的框架、工具和庫層出不窮，把創新的車輪推向前進。
概括來講，前端框架可以分為兩大類：
- 大而全的框架，包括建立現代 WEB 應用的所有功能特性，比如路由、資料獲取、狀態管理，典型專案有：Angular 1、Angular 2、Ember 和 Aurelia。
- 小而美、聚焦在 UI 層面的解決方案，典型專案有 React、Vue.JS、Inferno...
前文中我們已經探討了排名第 1 的專案 Vue.JS，下面來看看其他競爭者：
React 及其競爭者
React 排名第 2，所有開發者都知道 React 有著龐大的社群和完整的生態系統。
React 設計思想非常流行，受 React 啟發而誕生了大量類 React 專案，這些專案繼承 React 優點的同時有非常大的改進，比如各種能提高效能和縮短構建時間的瘦身版本。
Inferno 在類 React 專案中是最受歡迎的，它自己則標榜是所有競爭者中效能最快的。
Preact 也是一個非常不錯的選擇，它也有不錯的生態，比如各種腳手架、路由，甚至還有一個 compact 模組讓任何能在 React 環境執行的庫在 Preact 中執行。
Angular 1 和 Angular 2
Angular 專案已經被拆分成兩個倉庫，因為 Angular 2 幾乎是 Angular 1 的全面重寫，雖然兩者在部分概念上是相同的。
Angular 2 全部用 TypeScript 編寫，這樣它利用 ES6 語法特性提供了現代的、全面的 WEB 框架。
Angular 1 (在 Github 上稱作 "AngularJS") 目前仍然被大量的專案使用，目測會持續流行一段時間。
此外，不得不提的 Ember, 雖然社群和生態都很大，但是沒有排到前 10 名。
整體來看，相比於那些開箱即用的大而全的框架，開發者更青睞自己組合使用那些小而美的輕量級解決方案，因為這樣給了他們更大的自由度。
3. Node.js 框架
2016 年建立和部署 Node.js 應用變得空前的容易，比如下面這些解決方案：
類似於 Gomix 的專案則把 Node.js 的門檻降到不能再低，只要通過瀏覽器簡單的點選拖拽就都能輕而易舉的編寫和分享 Node.js 程式碼。
那麼，如果想建立一個 WEB 應用，我們該選哪個框架呢？
Express 已經成為開發 Node.js WEB 應用的標準框架，大多數工程師都很熟悉他的設計思想（極簡的核心，但能讓你用各種中介軟體來擴充套件他的功能）。
Koa，設計思想非常類似 Express，區別在於它是使用 ES6 中的 generator 編寫的，這種寫法解決了大家所熟知的回撥地獄 問題。
Feathers，是用來實現面向服務架構的一種靈活的解決方案，非常適合建立 Node.js 微服務。
Nodal，用來建立基於 PostgreSQL 的無狀態的、分散式的服務。
Keystone，是我所知的快速搭建基於 MongoDB 的管理後臺的最佳解決方案，Keystone.js 基於資料模型的定義即可自動生成後臺介面，支援常見的增刪改查操作和靈活的資料過濾。
Sails，是一個全能的 MVC 框架，主要是受到 Ruby on Rails 啟發，他已經存在很長時間，支援各種資料庫，不管是 SQL 還是 No-SQL。
Loopback，內建了很多特性的成熟框架，支援基於 token 的認證，支援各種資料庫。 Loopback 的“殺手鐗”功能是 API 瀏覽器，該功能能讓開發者用非常直觀的方式檢視所有的 API 介面，如果你需要建立 API 服務的話，它無疑是個很好的選擇。
4. React 專案模板
React 是非常棒的 UI 庫，但是基於現代 WEB 應用開發工作流建立 React 應用時仍然需要大量的配置才能把所有的部分拼湊到一起，如何建立一個“真實”的 React 應用呢？各種 React 專案模板（boilerplates）和啟動工具箱（starter kits）就是來解決這個問題的，典型的有下面幾個：
Facebook 開源的，輕量級的解決方案，使用 Create React App 建立 React 應用非常的簡單。Create React App 的作者 Dan Abramov (也是 Redux 的作者，目前供職於 Facebook) 在功能豐富和簡單可靠之間取得了很好的平衡，沒有酷炫的樣式解決方案 (僅需純粹的 CSS) ，沒有服務端渲染，但是 React 應用開發的其他方面都渾然一體，開發者體驗也非常棒。
相比於同類工具，如果你使用了 Create React App，它會成為你專案的依賴，所有的黑科技都是不可見的，你只能看到你自己的應用程式碼，你可以隨時更新這個依賴。
React boilerplate 則包含了 React 應用所需的一切，包括 Redux 以及基於 Web Worker 實現的離線功能。使用它可以建立“漸進式 Web 應用”（亦稱“PWA”），如果想了解更多 PWA 的知識，可以閱讀 Nicolás Bevacqua 的 這篇文章。
Next.js, 由來自 Zeit 的 busy folks 建立，支援服務端渲染，可以用來建立 universal 應用（或者“同構應用”），直白點說，這種應用的前後端可以執行相同的程式碼。
5. 移動開發
JS 的通用性是毋庸置疑的，現如今可以用 WEB 工程師非常熟悉的技術（HTML、JS、CSS）構建 Native 移動應用。下面是幾個典型的解決方案：
使用 React Native，可以用類似於 React 思路，用同一份程式碼構建出支援 iOS 和 Android 平臺的、真正的 Native 應用，想了解如何構建跨平臺的更多內容？建議閱讀這篇教程。
其他基於 Cordova 的方案多使用 Webview 來渲染頁面，相比於 Native 應用執行時效能會大打折扣，不過，開發者那種 “Write Once Run Everywhere” 的夢想終於成真了！
Ionic 是 “hybird” 應用開發領域的先鋒，底層基於 Cordova 來訪問移動裝置的系統功能，社群和生態系統非常成熟。
NativeScript 和 React Native 的目標是相同的，即基於 WEB 技術構建 Native 應用，其核心分為兩部分：NativeScript 核心，NativeScript + Angular 2。
展望未來...
Weex 是 2017 年需要密切留意的專案，他是基於 Vue.JS 的、用來建立跨平臺移動應用的框架。
6. 編譯工具
我們這裡討論的是把其他語言或者 JS 變體編譯（Compiler）或轉換成（Transpiler）標準 JS 程式碼的工具，這些工具生產出來的程式碼可以在瀏覽器或者 Node.js 環境中執行。
最常見的場景是，這類編譯工具能夠讓開發者使用 ES6 語法編寫程式碼，而不用擔心瀏覽器支援情況。
最具潛力的編譯工具可能是 TypeScript 了，它為 JS 帶來了類似於 Java 和 C# 的靜態型別，而 Angular 2 完全使用 TypeScript 的事實讓他看起來更誘人，當然關於在 JS 使用靜態型別的討論有很多，建議閱讀下面這兩篇文章來做出自己的決定：
Babel + webpack 已經成了 ES6 程式碼轉換、React 模板編譯的標準工具組合，Babel 最初是用來編譯 ES6 的，但得益於他的外掛系統，如今儼然已經演化成一個用途廣泛，幾乎能實現各種程式碼轉換的工具。
Flow 並不是一個編譯工具，它只是一個基於 JS 程式碼標記的靜態型別檢查工具，也就是說，使用 Flow 時需要在程式碼中新增各種註釋來註明需要的資料型別，關於 Flow 的使用，可以閱讀這篇文章。
Flow 在很多 Facebook 專案的原始碼中都有使用，而 Facebook 已經成為開源社群的重要玩家，開源了 React、React Native、 Flux、Immutable、Jest 等眾多的專案，相信你明白這意味著什麼。
CoffeeScript 的簡潔語法大量借鑑了 Python 和 Ruby 的語言特性，過去幾年曾經是最受歡迎的編譯器，但 2016 年很多開發者從 CoffeeScript 轉向了 ES6 + Babel 組合。
7. 構建工具
2016 年“構建過程”似乎成了 WEB 專案的標配，如果一個 WEB 應用沒有構建過程則是難以想象的事情，在構建過程中通常你需要做編譯模板、靜態資源合併壓縮之類的事情，以為生產環境做好準備。
Webpack 是構建單頁應用（SPA）的主要工具，它和 React 生態結合的非常好，最新發布的 Webpack 2 帶來了不少非常有前景的改進，具體可以閱讀這裡。
Gulp 是一個通用的任務執行工具，可以在任何和檔案系統打交道的自動化流程中使用，可以認為它並不是 Webpack 和 Browserify 的直接競爭者。
和 Grunt 類似，Gulp 的主要角色是任務管理，你可以讓它壓縮合並程式碼，但是它不會幫你處理 JS 模組化問題，而 Webpack 和 Browserify 是可以的。
當然了，Gulp 可以和 Webpack 結合起來使用，即使開發者傾向於使用 npm script 也是可以的，實際上很多開發者就是這麼做的。
Browserify 因為非常簡單，在 Node.js 工程師群體中比較受歡迎。簡單來說，它把多個 Node.js 的包作為輸入，然後輸出單個編譯後的檔案。相比而言，Webpack 在 WEB 應用打包方面考量更多，更適合現代的 WEB 開發工作流。
展望未來...
2017 年需要留意的模組打包工具是 rollup，它強調的是效能，基於 ES6 的模組規範，並且支援 Tree Shaking 這種黑科技，構建產生的結果只包含實際業務邏輯用到的程式碼，而不是簡單的檔案合併。
8. 測試框架
相比於流行了很久的測試框架 Jasmine 和 Mocha，2016 年出現了 2 個更新的、並有很多人使用的測試框架：AVA 和 Jest。
AVA 由非常高產的 Sindre Sorhus 開發和維護，其標榜的重點是效能和 ES6，能夠並行的執行測試。AVA 的語法非常類似 Tape 和 Node-tap。
Jest，又一個 Facebook 開源專案，最近幾個月引起了大量的開發者注意，在 React 社群更加流行，並且越來越多的人開始遷移到 Jest，可以閱讀這個故事，2017 年 Jest 極有可能成為最受歡迎的測試框架。
Jest 內建了非常強大的 Mock 特性，而其他的測試框架通常需要依賴第三方的 Mock 包，比如 Sinon.JS。
9. IDE
說到 IDE（整合開發環境，Integrated Development Environment），令人振奮的是最受歡迎的 2 款 IDE 都是用 WEB 技術開發的開源專案。
微軟的 Visual Studio Code 在 WEB 開發者群體中非常受歡迎，因為他提供了非常棒的 TypeScript 和 Node.js 整合，部分開發者甚至特別提到 Visual Studio Code 的智慧感知功能極大的提高了開發效率。現在把微軟和開源放在一起，終於不那麼違和了。
Atom 由 Github 開源，使用 Electron 構建，在受歡迎程度上並沒有落後 Visual Studio Code 太多，關於 Atom 的一個有趣事實是，他所使用的主要語言是 CoffeeScript。
10. 靜態網站生成器
靜態網站生成器（SSG）是指能夠生成一大坨 HTML、CSS、JS 檔案方便你快速部署到簡單的 WEB 伺服器上而不用安裝和配置資料庫的工具。就像 Gatsby 所標榜的：
像 1995 年那樣構建網站。
靜態網站的特點是速度快、健壯行高、容易維護。
靜態網站如此流行的重要原因是市面上有很多非常好用並且免費的靜態網站託管解決方案，比如：
2016 年最流行的靜態網站生成工具是 Hexo，他有點類似於 Workdpress 這樣的 CMS 系統，可以用來方便的建立部落格網站，他還有很多其他的特性，比如國際化外掛。
新玩家 Gatsby 是一個比較有趣的解決方案，相比於競爭者優秀的地方在於：它使用 React 生態系統來生成靜態檔案，可以組合 React Component、Markdown 和服務端渲染來完成靜態網站生成讓他更強大。
總結和展望
雖然 2016 年出現了“JS 疲勞”，也發生了戲劇性的事件(如 "leftpad 門")，但總體來講 2016 年對 JS 社群來說是非常重要的一年，部分專案在 2016 年崛起，如 Vue.JS 和 React Native，還有些黑馬專案 2016 年誕生，如 Yarn 和 Create React App。
我們談論了 2016 年 Github 上最受矚目的開源專案，但是真正重要的是開發者的滿意度，如果你想就這個話題有更量化的認識，建議去看看 Sacha Greif 的調查 State of JavaScript，該調查收集了超過 9000 份問卷。
接下來該思考 2017 年了，哪些將會持續獲得開發者的青睞？哪些會成為新星呢？下面是我精選的 10 個我 2016 年比較欣賞，並且 2017 年會繼續保持增長的專案或創意：
- Vue.JS：還在快速增長階段
- Electron
- Create React App
- React Native
- Gatsby (你瀏覽的這個頁面就是用它來構建的)
- Yarn：快速、可靠並且安全的依賴管理工具，可以直接替代 npm，建議閱讀文章 yarn vs npm
- PWA（Progressive Web Applications）漸進式 WEB 應用
- Node.js 微服務的一站式部署和執行解決方案，比如 Now
- Node.js 的進化：最新版本對 ES6 語法的支援已經非常好了
- 最後是 GraphQL：我身邊不少朋友說這會是一個大的進步
感謝你花時間閱讀本文，可以盡情把本文分享出去，有疑問可以到 Github 上發起 Issue 或直接聯絡我們。
One More Thing
想看更多優質技術文章，請訂閱本專欄：前端週刊，發文頻率每週 1~2 篇。