本文是我對中文版 risingstars2016 的整理，而本人就是中文版的譯者，首發(fā)于知乎專欄 前端周刊。共 21384 字，讀完需 30 分鐘，速讀需 5 分鐘。長江后浪推前浪，如果你能花 30 分鐘讀完我 6 個小時翻譯的內(nèi)容，相信你不會被后浪拍死在沙灘上，對 2017 該學(xué)什么有個清晰的認識。近幾年 JS 社區(qū)創(chuàng)新和演化的速度是有目共睹的，幾個月前比較時髦的技術(shù)很可能現(xiàn)在已經(jīng)過時了。2016 已經(jīng)過去，你有沒有擔(dān)心錯過了什么重要的內(nèi)容？在這篇調(diào)查報告中我們會為你解讀社區(qū)的主流趨勢。

我們將從數(shù)量上來分析哪些項目 2016 年獲得比較多的關(guān)注，具體的做法是比較各項目 2016 年在 Github 上新增 star 的數(shù)量。

回顧 2015 年：React 無疑占據(jù)了統(tǒng)治地位，而 Redux 則在眾多牛毛的 Flux 實現(xiàn)中脫穎而出。那么 2016 年哪些項目最受開發(fā)者關(guān)注呢？

目錄

最受歡迎項目

前端框架

Node.js 框架

React 項目模板

移動開發(fā)

編譯工具

構(gòu)建工具

測試框架

IDE

靜態(tài)網(wǎng)站生成器

1. 最受歡迎項目

仔細觀察 2016 年排名前 10 的項目，你就能對 WEB 社區(qū)的演化方向有個直觀的把握，概括如下：

• 3 個 UI 框架：Vue.JS, React and Angular 2
• 1 個新的 Node.js 包管理器：Yarn
• 創(chuàng)建桌面應(yīng)用的首選：Electron
• 創(chuàng)建 react 新項目的首選：Create React App
• 1 個移動開發(fā)框架：React Native
• 最受歡迎的 CSS 工具箱：Bootstrap
• 函數(shù)式編程風(fēng)格的狀態(tài)管理庫：Redux
• 強大兼具靈活的繪圖庫：D3

上面這些項目覆蓋的領(lǐng)域，無疑證明了 JS 的通用性，印證了那句話：能被 JS 編寫的，遲早都會被 JS 編寫。

2016 年的最佳項目是... ?

Vue.JS 2016 年新增超過 25000 個 star，意味著平均每天新增 72 個 star，超過了所有同類項目的流行速度，比如 React 和 Angular。 采用 Virtual DOM 來增強性能的 Vue.JS v2 于 2016 年 10 月發(fā)布。

Vue.JS 已經(jīng)被不少大公司用在了生產(chǎn)環(huán)境中，比如中國最大的電子商務(wù)網(wǎng)站里巴巴，所以你可以將 Vue.JS 作為一個安全的選擇。

圍繞著 Vue.JS 的社區(qū)生態(tài)也日趨成熟，包括路由庫（vue-router）和狀態(tài)管理庫（Vuex）。 Vue.JS 兼具了 React 和 Angular 1 兩者的優(yōu)點，其中 React 的基本思想是組件式開發(fā)，而 Angular 1 是模板增強。

2. 前端框架

前端框架的百花齊放也許是出現(xiàn) JS 疲勞 的原因所在，新的框架、工具和庫層出不窮，把創(chuàng)新的車輪推向前進。

概括來講，前端框架可以分為兩大類：

• 大而全的框架，包括創(chuàng)建現(xiàn)代 WEB 應(yīng)用的所有功能特性，比如路由、數(shù)據(jù)獲取、狀態(tài)管理，典型項目有：Angular 1、Angular 2、Ember 和 Aurelia。
• 小而美、聚焦在 UI 層面的解決方案，典型項目有 React、Vue.JS、Inferno...

前文中我們已經(jīng)探討了排名第 1 的項目 Vue.JS，下面來看看其他競爭者：

React 及其競爭者

React 排名第 2，所有開發(fā)者都知道 React 有著龐大的社區(qū)和完整的生態(tài)系統(tǒng)。

React 設(shè)計思想非常流行，受 React 啟發(fā)而誕生了大量類 React 項目，這些項目繼承 React 優(yōu)點的同時有非常大的改進，比如各種能提高性能和縮短構(gòu)建時間的瘦身版本。

Inferno 在類 React 項目中是最受歡迎的，它自己則標(biāo)榜是所有競爭者中性能最快的。

Preact 也是一個非常不錯的選擇，它也有不錯的生態(tài)，比如各種腳手架、路由，甚至還有一個 compact 模塊讓任何能在 React 環(huán)境運行的庫在 Preact 中運行。

Angular 1 和 Angular 2

Angular 項目已經(jīng)被拆分成兩個倉庫，因為 Angular 2 幾乎是 Angular 1 的全面重寫，雖然兩者在部分概念上是相同的。

Angular 2 全部用 TypeScript 編寫，這樣它利用 ES6 語法特性提供了現(xiàn)代的、全面的 WEB 框架。

Angular 1 (在 Github 上稱作 "AngularJS") 目前仍然被大量的項目使用，目測會持續(xù)流行一段時間。

此外，不得不提的 Ember, 雖然社區(qū)和生態(tài)都很大，但是沒有排到前 10 名。

整體來看，相比于那些開箱即用的大而全的框架，開發(fā)者更青睞自己組合使用那些小而美的輕量級解決方案，因為這樣給了他們更大的自由度。

3. Node.js 框架

2016 年創(chuàng)建和部署 Node.js 應(yīng)用變得空前的容易，比如下面這些解決方案：

• Now
• Webtask.io
• Stdlib

類似于 Gomix 的項目則把 Node.js 的門檻降到不能再低，只要通過瀏覽器簡單的點擊拖拽就都能輕而易舉的編寫和分享 Node.js 代碼。

那么，如果想創(chuàng)建一個 WEB 應(yīng)用，我們該選哪個框架呢？

Express

Express 已經(jīng)成為開發(fā) Node.js WEB 應(yīng)用的標(biāo)準(zhǔn)框架，大多數(shù)工程師都很熟悉他的設(shè)計思想（極簡的內(nèi)核，但能讓你用各種中間件來擴展他的功能）。

Koa

Koa，設(shè)計思想非常類似 Express，區(qū)別在于它是使用 ES6 中的 generator 編寫的，這種寫法解決了大家所熟知的回調(diào)地獄 問題。

Feathers

Feathers，是用來實現(xiàn)面向服務(wù)架構(gòu)的一種靈活的解決方案，非常適合創(chuàng)建 Node.js 微服務(wù)。

Nodal

Nodal，用來創(chuàng)建基于 PostgreSQL 的無狀態(tài)的、分布式的服務(wù)。

Keystone

Keystone，是我所知的快速搭建基于 MongoDB 的管理后臺的最佳解決方案，Keystone.js 基于數(shù)據(jù)模型的定義即可自動生成后臺界面，支持常見的增刪改查操作和靈活的數(shù)據(jù)過濾。

Sails

Sails，是一個全能的 MVC 框架，主要是受到 Ruby on Rails 啟發(fā)，他已經(jīng)存在很長時間，支持各種數(shù)據(jù)庫，不管是 SQL 還是 No-SQL。

Loopback

Loopback，內(nèi)置了很多特性的成熟框架，支持基于 token 的認證，支持各種數(shù)據(jù)庫。 Loopback 的“殺手锏”功能是 API 瀏覽器，該功能能讓開發(fā)者用非常直觀的方式查看所有的 API 接口，如果你需要創(chuàng)建 API 服務(wù)的話，它無疑是個很好的選擇。

4. React 項目模板

React 是非常棒的 UI 庫，但是基于現(xiàn)代 WEB 應(yīng)用開發(fā)工作流創(chuàng)建 React 應(yīng)用時仍然需要大量的配置才能把所有的部分拼湊到一起，如何創(chuàng)建一個“真實”的 React 應(yīng)用呢？各種 React 項目模板（boilerplates）和啟動工具箱（starter kits）就是來解決這個問題的，典型的有下面幾個：

Create React App

Facebook 開源的，輕量級的解決方案，使用 Create React App 創(chuàng)建 React 應(yīng)用非常的簡單。Create React App 的作者 Dan Abramov (也是 Redux 的作者，目前供職于 Facebook) 在功能豐富和簡單可靠之間取得了很好的平衡，沒有酷炫的樣式解決方案 (僅需純粹的 CSS) ，沒有服務(wù)端渲染，但是 React 應(yīng)用開發(fā)的其他方面都渾然一體，開發(fā)者體驗也非常棒。

相比于同類工具，如果你使用了 Create React App，它會成為你項目的依賴，所有的黑科技都是不可見的，你只能看到你自己的應(yīng)用代碼，你可以隨時更新這個依賴。

React boilerplate

React boilerplate 則包含了 React 應(yīng)用所需的一切，包括 Redux 以及基于 Web Worker 實現(xiàn)的離線功能。使用它可以創(chuàng)建“漸進式 Web 應(yīng)用”（亦稱“PWA”），如果想了解更多 PWA 的知識，可以閱讀 Nicolás Bevacqua 的 這篇文章。

Next.js

Next.js, 由來自 Zeit 的 busy folks 創(chuàng)建，支持服務(wù)端渲染，可以用來創(chuàng)建 universal 應(yīng)用（或者“同構(gòu)應(yīng)用”），直白點說，這種應(yīng)用的前后端可以運行相同的代碼。

5. 移動開發(fā)

JS 的通用性是毋庸置疑的，現(xiàn)如今可以用 WEB 工程師非常熟悉的技術(shù)（HTML、JS、CSS）構(gòu)建 Native 移動應(yīng)用。下面是幾個典型的解決方案：

React Native

使用 React Native，可以用類似于 React 思路，用同一份代碼構(gòu)建出支持 iOS 和 Android 平臺的、真正的 Native 應(yīng)用，想了解如何構(gòu)建跨平臺的更多內(nèi)容？建議閱讀這篇教程。

其他基于 Cordova 的方案多使用 Webview 來渲染頁面，相比于 Native 應(yīng)用運行時性能會大打折扣，不過，開發(fā)者那種 “Write Once Run Everywhere” 的夢想終于成真了！

Ionic

Ionic 是 “hybird” 應(yīng)用開發(fā)領(lǐng)域的先鋒，底層基于 Cordova 來訪問移動設(shè)備的系統(tǒng)功能，社區(qū)和生態(tài)系統(tǒng)非常成熟。

NativeScript

NativeScript 和 React Native 的目標(biāo)是相同的，即基于 WEB 技術(shù)構(gòu)建 Native 應(yīng)用，其核心分為兩部分：NativeScript 內(nèi)核，NativeScript Angular 2。

展望未來...

Weex 是 2017 年需要密切留意的項目，他是基于 Vue.JS 的、用來創(chuàng)建跨平臺移動應(yīng)用的框架。

6. 編譯工具

我們這里討論的是把其他語言或者 JS 變體編譯（Compiler）或轉(zhuǎn)換成（Transpiler）標(biāo)準(zhǔn) JS 代碼的工具，這些工具生產(chǎn)出來的代碼可以在瀏覽器或者 Node.js 環(huán)境中執(zhí)行。

最常見的場景是，這類編譯工具能夠讓開發(fā)者使用 ES6 語法編寫代碼，而不用擔(dān)心瀏覽器支持情況。

TypeScript

最具潛力的編譯工具可能是 TypeScript 了，它為 JS 帶來了類似于 Java 和 C# 的靜態(tài)類型，而 Angular 2 完全使用 TypeScript 的事實讓他看起來更誘人，當(dāng)然關(guān)于在 JS 使用靜態(tài)類型的討論有很多，建議閱讀下面這兩篇文章來做出自己的決定：

• 你可能不需要 TypeScript
• TypeScript 入門手冊

Babel

Babel webpack 已經(jīng)成了 ES6 代碼轉(zhuǎn)換、React 模板編譯的標(biāo)準(zhǔn)工具組合，Babel 最初是用來編譯 ES6 的，但得益于他的插件系統(tǒng)，如今儼然已經(jīng)演化成一個用途廣泛，幾乎能實現(xiàn)各種代碼轉(zhuǎn)換的工具。

Flow

Flow 并不是一個編譯工具，它只是一個基于 JS 代碼標(biāo)記的靜態(tài)類型檢查工具，也就是說，使用 Flow 時需要在代碼中添加各種注釋來注明需要的數(shù)據(jù)類型，關(guān)于 Flow 的使用，可以閱讀這篇文章。

Flow 在很多 Facebook 項目的源代碼中都有使用，而 Facebook 已經(jīng)成為開源社區(qū)的重要玩家，開源了 React、React Native、 Flux、Immutable、Jest 等眾多的項目，相信你明白這意味著什么。

CoffeeScript

CoffeeScript 的簡潔語法大量借鑒了 Python 和 Ruby 的語言特性，過去幾年曾經(jīng)是最受歡迎的編譯器，但 2016 年很多開發(fā)者從 CoffeeScript 轉(zhuǎn)向了 ES6 Babel 組合。

7. 構(gòu)建工具

2016 年“構(gòu)建過程”似乎成了 WEB 項目的標(biāo)配，如果一個 WEB 應(yīng)用沒有構(gòu)建過程則是難以想象的事情，在構(gòu)建過程中通常你需要做編譯模板、靜態(tài)資源合并壓縮之類的事情，以為生產(chǎn)環(huán)境做好準(zhǔn)備。

Webpack

Webpack 是構(gòu)建單頁應(yīng)用（SPA）的主要工具，它和 React 生態(tài)結(jié)合的非常好，最新發(fā)布的 Webpack 2 帶來了不少非常有前景的改進，具體可以閱讀這里。

Gulp

Gulp 是一個通用的任務(wù)運行工具，可以在任何和文件系統(tǒng)打交道的自動化流程中使用，可以認為它并不是 Webpack 和 Browserify 的直接競爭者。

和 Grunt 類似，Gulp 的主要角色是任務(wù)管理，你可以讓它壓縮合并代碼，但是它不會幫你處理 JS 模塊化問題，而 Webpack 和 Browserify 是可以的。

當(dāng)然了，Gulp 可以和 Webpack 結(jié)合起來使用，即使開發(fā)者傾向于使用 npm script 也是可以的，實際上很多開發(fā)者就是這么做的。

Browserify

Browserify 因為非常簡單，在 Node.js 工程師群體中比較受歡迎。簡單來說，它把多個 Node.js 的包作為輸入，然后輸出單個編譯后的文件。相比而言，Webpack 在 WEB 應(yīng)用打包方面考量更多，更適合現(xiàn)代的 WEB 開發(fā)工作流。

展望未來...

2017 年需要留意的模塊打包工具是 rollup，它強調(diào)的是性能，基于 ES6 的模塊規(guī)范，并且支持 Tree Shaking 這種黑科技，構(gòu)建產(chǎn)生的結(jié)果只包含實際業(yè)務(wù)邏輯用到的代碼，而不是簡單的文件合并。

8. 測試框架

相比于流行了很久的測試框架 Jasmine 和 Mocha，2016 年出現(xiàn)了 2 個更新的、并有很多人使用的測試框架：AVA 和 Jest。

AVA

AVA 由非常高產(chǎn)的 Sindre Sorhus 開發(fā)和維護，其標(biāo)榜的重點是性能和 ES6，能夠并行的運行測試。AVA 的語法非常類似 Tape 和 Node-tap。

Jest

Jest，又一個 Facebook 開源項目，最近幾個月引起了大量的開發(fā)者注意，在 React 社區(qū)更加流行，并且越來越多的人開始遷移到 Jest，可以閱讀這個故事，2017 年 Jest 極有可能成為最受歡迎的測試框架。

Jest 內(nèi)置了非常強大的 Mock 特性，而其他的測試框架通常需要依賴第三方的 Mock 包，比如 Sinon.JS。

9. IDE

說到 IDE（集成開發(fā)環(huán)境，Integrated Development Environment），令人振奮的是最受歡迎的 2 款 IDE 都是用 WEB 技術(shù)開發(fā)的開源項目。

Visual Studio Code

微軟的 Visual Studio Code 在 WEB 開發(fā)者群體中非常受歡迎，因為他提供了非常棒的 TypeScript 和 Node.js 集成，部分開發(fā)者甚至特別提到 Visual Studio Code 的智能感知功能極大的提高了開發(fā)效率。現(xiàn)在把微軟和開源放在一起，終于不那么違和了。

Atom

Atom 由 Github 開源，使用 Electron 構(gòu)建，在受歡迎程度上并沒有落后 Visual Studio Code 太多，關(guān)于 Atom 的一個有趣事實是，他所使用的主要語言是 CoffeeScript。

10. 靜態(tài)網(wǎng)站生成器

靜態(tài)網(wǎng)站生成器（SSG）是指能夠生成一大坨 HTML、CSS、JS 文件方便你快速部署到簡單的 WEB 服務(wù)器上而不用安裝和配置數(shù)據(jù)庫的工具。就像 Gatsby 所標(biāo)榜的：

像 1995 年那樣構(gòu)建網(wǎng)站。

靜態(tài)網(wǎng)站的特點是速度快、健壯行高、容易維護。

靜態(tài)網(wǎng)站如此流行的重要原因是市面上有很多非常好用并且免費的靜態(tài)網(wǎng)站托管解決方案，比如：

• Github pages
• Gitlab pages
• Netlify
• Surge
• Now static

Hexo

2016 年最流行的靜態(tài)網(wǎng)站生成工具是 Hexo，他有點類似于 Workdpress 這樣的 CMS 系統(tǒng)，可以用來方便的創(chuàng)建博客網(wǎng)站，他還有很多其他的特性，比如國際化插件。

Gatsby

新玩家 Gatsby 是一個比較有趣的解決方案，相比于競爭者優(yōu)秀的地方在于：它使用 React 生態(tài)系統(tǒng)來生成靜態(tài)文件，可以組合 React Component、Markdown 和服務(wù)端渲染來完成靜態(tài)網(wǎng)站生成讓他更強大。

總結(jié)和展望

雖然 2016 年出現(xiàn)了“JS 疲勞”，也發(fā)生了戲劇性的事件(如 "leftpad 門")，但總體來講 2016 年對 JS 社區(qū)來說是非常重要的一年，部分項目在 2016 年崛起，如 Vue.JS 和 React Native，還有些黑馬項目 2016 年誕生，如 Yarn 和 Create React App。

我們談?wù)摿?2016 年 Github 上最受矚目的開源項目，但是真正重要的是開發(fā)者的滿意度，如果你想就這個話題有更量化的認識，建議去看看 Sacha Greif 的調(diào)查 State of JavaScript，該調(diào)查收集了超過 9000 份問卷。

接下來該思考 2017 年了，哪些將會持續(xù)獲得開發(fā)者的青睞？哪些會成為新星呢？下面是我精選的 10 個我 2016 年比較欣賞，并且 2017 年會繼續(xù)保持增長的項目或創(chuàng)意：

• Vue.JS：還在快速增長階段
• Electron
• Create React App
• React Native
• Gatsby (你瀏覽的這個頁面就是用它來構(gòu)建的)
• Yarn：快速、可靠并且安全的依賴管理工具，可以直接替代 npm，建議閱讀文章 yarn vs npm
• PWA（Progressive Web Applications）漸進式 WEB 應(yīng)用
• Node.js 微服務(wù)的一站式部署和運行解決方案，比如 Now
• Node.js 的進化：最新版本對 ES6 語法的支持已經(jīng)非常好了
• 最后是 GraphQL：我身邊不少朋友說這會是一個大的進步

感謝你花時間閱讀本文，可以盡情把本文分享出去，有疑問可以到 Github 上發(fā)起 Issue 或直接聯(lián)系我們。

One More Thing

想看更多優(yōu)質(zhì)技術(shù)文章，請訂閱本專欄：前端周刊，發(fā)文頻率每周 1~2 篇。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。