近幾年 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 應用變得空前的容易，比如下面這些解決方案：
Now
Webtask.io
Stdlib
類似於 Gomix 的項目則把 Node.js 的門檻降到不能再低，只要通過瀏覽器簡單的點擊拖拽就都能輕而易舉的編寫和分享 Node.js 代碼。
那麼，如果想創建一個 WEB 應用，我們該選哪個框架呢？
Express
Express 已經成爲開發 Node.js WEB 應用的標準框架，大多數工程師都很熟悉他的設計思想（極簡的內核，但能讓你用各種中間件來擴展他的功能）。
Koa
Koa，設計思想非常類似 Express，區別在於它是使用 ES6 中的 generator 編寫的，這種寫法解決了大家所熟知的回調地獄 問題。
Feathers
Feathers，是用來實現面向服務架構的一種靈活的解決方案，非常適合創建 Node.js 微服務。
Nodal
Nodal，用來創建基於 PostgreSQL 的無狀態的、分佈式的服務。
Keystone
Keystone，是我所知的快速搭建基於 MongoDB 的管理後臺的最佳解決方案，Keystone.js 基於數據模型的定義即可自動生成後臺界面，支持常見的增刪改查操作和靈活的數據過濾。
Sails
Sails，是一個全能的 MVC 框架，主要是受到 Ruby on Rails 啓發，他已經存在很長時間，支持各種數據庫，不管是 SQL 還是 No-SQL。
Loopback
Loopback，內置了很多特性的成熟框架，支持基於 token 的認證，支持各種數據庫。 Loopback 的“殺手鐗”功能是 API 瀏覽器，該功能能讓開發者用非常直觀的方式查看所有的 API 接口，如果你需要創建 API 服務的話，它無疑是個很好的選擇。
4. React 項目模板
React 是非常棒的 UI 庫，但是基於現代 WEB 應用開發工作流創建 React 應用時仍然需要大量的配置才能把所有的部分拼湊到一起，如何創建一個“真實”的 React 應用呢？各種 React 項目模板（boilerplates）和啓動工具箱（starter kits）就是來解決這個問題的，典型的有下面幾個：
Create React App
Facebook 開源的，輕量級的解決方案，使用 Create React App 創建 React 應用非常的簡單。Create React App 的作者 Dan Abramov (也是 Redux 的作者，目前供職於 Facebook) 在功能豐富和簡單可靠之間取得了很好的平衡，沒有酷炫的樣式解決方案 (僅需純粹的 CSS) ，沒有服務端渲染，但是 React 應用開發的其他方面都渾然一體，開發者體驗也非常棒。
相比於同類工具，如果你使用了 Create React App，它會成爲你項目的依賴，所有的黑科技都是不可見的，你只能看到你自己的應用代碼，你可以隨時更新這個依賴。
React boilerplate
React boilerplate 則包含了 React 應用所需的一切，包括 Redux 以及基於 Web Worker 實現的離線功能。使用它可以創建“漸進式 Web 應用”（亦稱“PWA”），如果想了解更多 PWA 的知識，可以閱讀 Nicolás Bevacqua 的 這篇文章。
Next.js
Next.js, 由來自 Zeit 的 busy folks 創建，支持服務端渲染，可以用來創建 universal 應用（或者“同構應用”），直白點說，這種應用的前後端可以運行相同的代碼。
5. 移動開發
JS 的通用性是毋庸置疑的，現如今可以用 WEB 工程師非常熟悉的技術（HTML、JS、CSS）構建 Native 移動應用。下面是幾個典型的解決方案：
React Native
使用 React Native，可以用類似於 React 思路，用同一份代碼構建出支持 iOS 和 Android 平臺的、真正的 Native 應用，想了解如何構建跨平臺的更多內容？建議閱讀這篇教程。
其他基於 Cordova 的方案多使用 Webview 來渲染頁面，相比於 Native 應用運行時性能會大打折扣，不過，開發者那種 “Write Once Run Everywhere” 的夢想終於成真了！
Ionic
Ionic 是 “hybird” 應用開發領域的先鋒，底層基於 Cordova 來訪問移動設備的系統功能，社區和生態系統非常成熟。
NativeScript
NativeScript 和 React Native 的目標是相同的，即基於 WEB 技術構建 Native 應用，其核心分爲兩部分：NativeScript 內核，NativeScript + Angular 2。
展望未來...
Weex 是 2017 年需要密切留意的項目，他是基於 Vue.JS 的、用來創建跨平臺移動應用的框架。
6. 編譯工具
我們這裏討論的是把其他語言或者 JS 變體編譯（Compiler）或轉換成（Transpiler）標準 JS 代碼的工具，這些工具生產出來的代碼可以在瀏覽器或者 Node.js 環境中執行。
最常見的場景是，這類編譯工具能夠讓開發者使用 ES6 語法編寫代碼，而不用擔心瀏覽器支持情況。
TypeScript
最具潛力的編譯工具可能是 TypeScript 了，它爲 JS 帶來了類似於 Java 和 C# 的靜態類型，而 Angular 2 完全使用 TypeScript 的事實讓他看起來更誘人，當然關於在 JS 使用靜態類型的討論有很多，建議閱讀下面這兩篇文章來做出自己的決定：
你可能不需要 TypeScript
TypeScript 入門手冊
Babel
Babel + webpack 已經成了 ES6 代碼轉換、React 模板編譯的標準工具組合，Babel 最初是用來編譯 ES6 的，但得益於他的插件系統，如今儼然已經演化成一個用途廣泛，幾乎能實現各種代碼轉換的工具。
Flow
Flow 並不是一個編譯工具，它只是一個基於 JS 代碼標記的靜態類型檢查工具，也就是說，使用 Flow 時需要在代碼中添加各種註釋來註明需要的數據類型，關於 Flow 的使用，可以閱讀這篇文章。
Flow 在很多 Facebook 項目的源代碼中都有使用，而 Facebook 已經成爲開源社區的重要玩家，開源了React、React Native、Flux、Immutable、Jest 等衆多的項目，相信你明白這意味着什麼。
CoffeeScript
CoffeeScript 的簡潔語法大量借鑑了 Python 和 Ruby 的語言特性，過去幾年曾經是最受歡迎的編譯器，但 2016 年很多開發者從 CoffeeScript 轉向了 ES6 + Babel 組合。
7. 構建工具
2016 年“構建過程”似乎成了 WEB 項目的標配，如果一個 WEB 應用沒有構建過程則是難以想象的事情，在構建過程中通常你需要做編譯模板、靜態資源合併壓縮之類的事情，以爲生產環境做好準備。
Webpack
Webpack 是構建單頁應用（SPA）的主要工具，它和 React 生態結合的非常好，最新發布的 Webpack 2 帶來了不少非常有前景的改進，具體可以閱讀這裏。
Gulp
Gulp 是一個通用的任務運行工具，可以在任何和文件系統打交道的自動化流程中使用，可以認爲它並不是Webpack 和 Browserify 的直接競爭者。
和 Grunt 類似，Gulp 的主要角色是任務管理，你可以讓它壓縮合並代碼，但是它不會幫你處理 JS 模塊化問題，而 Webpack 和 Browserify 是可以的。
當然了，Gulp 可以和 Webpack 結合起來使用，即使開發者傾向於使用 npm script 也是可以的，實際上很多開發者就是這麼做的。
Browserify
Browserify 因爲非常簡單，在 Node.js 工程師羣體中比較受歡迎。簡單來說，它把多個 Node.js 的包作爲輸入，然後輸出單個編譯後的文件。相比而言，Webpack 在 WEB 應用打包方面考量更多，更適合現代的 WEB 開發工作流。
展望未來...
2017 年需要留意的模塊打包工具是 rollup，它強調的是性能，基於 ES6 的模塊規範，並且支持 Tree Shaking 這種黑科技，構建產生的結果只包含實際業務邏輯用到的代碼，而不是簡單的文件合併。
8. 測試框架
相比於流行了很久的測試框架 Jasmine 和 Mocha，2016 年出現了 2 個更新的、並有很多人使用的測試框架：AVA 和 Jest。
AVA
AVA 由非常高產的 Sindre Sorhus 開發和維護，其標榜的重點是性能和 ES6，能夠並行的運行測試。AVA 的語法非常類似 Tape 和 Node-tap。
Jest
Jest，又一個 Facebook 開源項目，最近幾個月引起了大量的開發者注意，在 React 社區更加流行，並且越來越多的人開始遷移到 Jest，可以閱讀這個故事，2017 年 Jest 極有可能成爲最受歡迎的測試框架。
Jest 內置了非常強大的 Mock 特性，而其他的測試框架通常需要依賴第三方的 Mock 包，比如 Sinon.JS。
9. IDE
說到 IDE（集成開發環境，Integrated Development Environment），令人振奮的是最受歡迎的 2 款 IDE 都是用 WEB 技術開發的開源項目。
Visual Studio Code
微軟的 Visual Studio Code 在 WEB 開發者羣體中非常受歡迎，因爲他提供了非常棒的 TypeScript 和 Node.js 集成，部分開發者甚至特別提到 Visual Studio Code 的智能感知功能極大的提高了開發效率。現在把微軟和開源放在一起，終於不那麼違和了。
Atom
Atom 由 Github 開源，使用 Electron 構建，在受歡迎程度上並沒有落後 Visual Studio Code 太多，關於 Atom 的一個有趣事實是，他所使用的主要語言是 CoffeeScript。
10. 靜態網站生成器
靜態網站生成器（SSG）是指能夠生成一大坨 HTML、CSS、JS 文件方便你快速部署到簡單的 WEB 服務器上而不用安裝和配置數據庫的工具。就像 Gatsby 所標榜的：
像 1995 年那樣構建網站。
靜態網站的特點是速度快、健壯性高、容易維護。
靜態網站如此流行的重要原因是市面上有很多非常好用並且免費的靜態網站託管解決方案，比如：
Github pages
Gitlab pages
Netlify
Surge
Now static
Hexo
2016 年最流行的靜態網站生成工具是 Hexo，他有點類似於 Workdpress 這樣的 CMS 系統，可以用來方便的創建博客網站，他還有很多其他的特性，比如國際化插件。
Gatsby
新玩家 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 篇。
本文是對中文版 risingstars2016 的整理