本文是我對中文版 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 應用變得空前的容易，比如下面這些解決方案：

• 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 篇。

總結

以上是生活随笔為你收集整理的2016 年崛起的 JS 项目的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。