摘要：在年成為最大贏家，贏得了實現(xiàn)的風(fēng)暴之戰(zhàn)。和他的競爭者位列第二沒有前端開發(fā)者可以忽視和它的生態(tài)系統(tǒng)。他的殺手級特性是探測功能，通過檢查任何用戶的功能，以直觀的方式讓開發(fā)人員檢查所有端點。

本文轉(zhuǎn)載自：眾成翻譯
譯者：zxhycxq
鏈接：http://www.zcfy.cc/article/2410
原文：https://risingstars2016.js.org/

【譯者注：】因格式問題，圖片相關(guān)的內(nèi)容，請參照英文原文：https://risingstars2016.js.org/

JavaScript 社區(qū)在創(chuàng)新方面全速前進(jìn)，幾個月后，曾經(jīng)的趨勢就會過時。

2016 已經(jīng)結(jié)束了,你可能會想自己錯過了一些重要的東西？別擔(dān)心,我們正回顧一下主要的趨勢。

讓我們看看 by the numbers 這個在2016年推動的項目，它比較了在過去12個月，Github上 增加 的 stars 數(shù)量。

在 2015年, React 成為最大贏家 ， Flux 贏得了Flux實現(xiàn)的風(fēng)暴之戰(zhàn)。

誰是2016年JavaScript后起之秀呢？

1. 2016最流行的項目

2. 前端框架

3. Node.js 框架

4. React Boilerplates

5. Mobile

6. 編譯器

7. 構(gòu)建工具

8. 測試框架

9. IDE

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

下面的圖表對比了在過去12個月中，GitHub上 增加的 stars。

我們分析了來自bestof.js.org （關(guān)于web平臺的最佳項目清單）的項目。

通過檢查去年中最火的10個項目，你可以得到一個很好的關(guān)于2016年Web開發(fā)環(huán)境是怎么樣的回顧，你會發(fā)現(xiàn)：

3個 UI 框架: Vue.JS, React 和 Angular 2

一個新的 node.js 包管理器: Yarn

構(gòu)建桌面應(yīng)用的領(lǐng)先解決方案: Electron

快速開始一個新 React 項目的方案A Create React App

移動框架: React Native

最有名的 CSS 工具包: Bootstrap

基于函數(shù)式的狀態(tài)管理庫 : Redux

一個強大而又靈活的圖標(biāo)庫: D3

它講述了很多關(guān)于JavaScript在2016年無所不在和用途廣泛的事。

Vue.JS 去年在 Github 上獲得了超過25,000 個stars, 這意味著一天72個stars，這比包括React和Angular在內(nèi)的其他框架都多。

vue 2, 利用虛擬DOM的性能,在去年十月份發(fā)布。

Vue.JS 被一些大公司（包括阿里巴巴-中國最大的電子商務(wù)公司）在生產(chǎn)中使用，所以，你可以認(rèn)為這是一個安全的選擇。

它已經(jīng)擁有相當(dāng)成熟的生態(tài)系統(tǒng)，包括 router (vue-router) 和一個狀態(tài)管理庫 (Vuex).

看起來 Vue.JS 集 React (組件方法)和 AngularJS (由框架特色增強的html代碼模板)于一身.

前端框架類應(yīng)該對 JavaScript 疲勞 負(fù)有一定責(zé)任。
看起來，每個月一個新的競爭者出現(xiàn)并發(fā)出自己的聲音，推動創(chuàng)新的步伐！

確切地說，在這個類別中，混合了兩種類別的項目

包含所有功能的全能框架,創(chuàng)建現(xiàn)代web應(yīng)用(路由, 數(shù)據(jù)獲取, 狀態(tài)管理). AngularJS, Angular 2, Ember 或者 Aurelia 均屬此類別。

UI層更輕的解決方案, 如 React, Vue.JS, Inferno...

我們已經(jīng)注意到Vue.JS(總體第一),讓我們看下其他的競爭者。

React 位列第二,沒有前端開發(fā)者可以忽視React和它的生態(tài)系統(tǒng)。

React 是如此地受歡迎，以至于它鼓舞了眾多其他庫意圖取其精華，去其糟粕，旨在提高瀏覽器的性能和構(gòu)建時間。

Inferno 是這個類別中最流行的項目,它聲稱是最快的可替代React的項目。

在我們的排名中，緊跟 Inferno 之后， Preact也是一個良好的React 替代品。
它的生態(tài)系統(tǒng)相當(dāng)成熟，例如，具有離線功能的模板、路由、模塊，以至于你可以在你的項目中使用任何你Preact項目里面的已存在的React庫。

Angular 項目分為2 個庫，因為 Angular 2重寫了Angular 1，盡管一些概念保持相同。

Angular 2 用TypeScript編寫，利用ES6 實現(xiàn)現(xiàn)代化、徹底的框架。

AngularJS是1.x的分支, 它仍然在許多項目中使用，并將在一段時間內(nèi)保持流行。

值得注意的是 Ember, 盡管有強大的生態(tài)系統(tǒng)和社區(qū)，依然未進(jìn)入前10.

如此看來, 與其選擇”開箱即用“的包含所有特征的框架，
開發(fā)者們在2016年 ，更加喜歡選擇他們自己的解決方案，”按菜單點菜“。

在2016年，使用以下解決方案創(chuàng)建和部署node.js應(yīng)用程序從未如此簡單

Now

Webtask.io

Stdlib

像Gomix項目更是降低了Node.js的世界的門檻，
使得任何人都可以輕松地從瀏覽器中“點點點”書寫和分享node.js代碼。

那么問題來了，如果你想開發(fā)一個web程序，應(yīng)該選擇哪個框架呢？

當(dāng)你使用 node.js 構(gòu)建Web應(yīng)用開發(fā)，Express經(jīng)常被考慮為事實上的web服務(wù)器。它的（一個簡單的核心，你可以使用中間件件擴展）哲學(xué)為大多數(shù)node.js 開發(fā)者所熟悉。

Koa這些接近于 Express。但它用ES6 生成器構(gòu)建，避免有時被稱為回調(diào)地獄的問題。

Feathers是一種創(chuàng)建“面向服務(wù)”的體系結(jié)構(gòu)的非常靈活的解決方案。
這是創(chuàng)建一個Node.js微服務(wù)不錯的選擇。

Nodal 框架的目標(biāo)是無狀態(tài)和分布式服務(wù)連接到PostgreSQL數(shù)據(jù)庫。

Keystone是我所知得到一個管理客戶端運行的最佳解決方案之一 ，
目的是管理從MongoDB數(shù)據(jù)庫來的內(nèi)容。
管理界面從模型自動生成，具有所有CRUD操作和友好的過濾器。

Sails是一個完整的MVC框架。
受Ruby on Rails的啟發(fā)（因此名為Sails!）.他已經(jīng)問世很長時間了。
可以和任何類型的數(shù)據(jù)庫使用，SQL或no-SQL。

Loopback是一個有很多的內(nèi)置功能，包括需要token驗證的權(quán)限和連接到任何數(shù)據(jù)庫的另一個成熟的框架。

他的殺手級特性是 API 探測功能，通過檢查任何用戶token的功能，以直觀的方式讓開發(fā)人員檢查所有API端點。
如果你必須構(gòu)建一個API，這絕對是一個不錯的選擇。

React 是一個偉大的 UI 庫，但使用React和現(xiàn)代Web開發(fā)工作流工具需要大量的配置。
那么如何開始創(chuàng)建一個真實世界的應(yīng)用程序呢？
這是 React "模板生成器" 和其他的“初學(xué)者工具包”給出的答案···

Facebook 通過提供一個輕松的叫做創(chuàng)建 React App方法實現(xiàn)需要，
這是使得啟動一個新 React 項目非常方便。

Dan Abramov （Redux的創(chuàng)造者，現(xiàn)在在Facebook工作）做了一項偉大的工作：
找到簡單和特征之間的正確平衡。
例如，沒有花哨的樣式解決方案（只是簡單的CSS），沒有服務(wù)器端渲染，
但一切都被很好的打包，開發(fā)體驗非常棒。

與其競爭者的主要區(qū)別是，如果使用Create React App，它將成為項目的依賴項，
所有的黑科技都是隱藏的，你看到的只是你的應(yīng)用程序代碼。
您可以隨時升級依賴關(guān)系，它不只是一個開始。

名為React的樣板文件有您需要的一模板生成器切，
包括Redux和一些友好的離線功能，很好地利用了web工作者的技術(shù)優(yōu)勢。

它讓開發(fā)人員創(chuàng)建名為漸進(jìn)式web應(yīng)用（或PWA）的Web應(yīng)用程序：
使用名為Service Worker的技術(shù)運行的離線Web應(yīng)用程序，
閱讀來自 Nicolás Bevacqua的這篇文章 .

Next.js由忙碌的Zeit人員創(chuàng)建，具有服務(wù)器端渲染特性，
可用于創(chuàng)建通用應(yīng)用程序（或同構(gòu)應(yīng)用程序，如我們在2015年所說），
亦即，在代碼客戶端和服務(wù)器端用差不多的代碼運行應(yīng)用程序。

JavaScript無處不在，你可以使用已知的web開發(fā)技術(shù) (HTML, JavaScript, CSS)構(gòu)建原生移動應(yīng)用。

通過React Native，在同樣的代碼基礎(chǔ)上，你可以構(gòu)建IOS和Android原生移動應(yīng)用，
使用React開發(fā)人員熟悉的概念。
想了解更多關(guān)于構(gòu)建IOS和Android應(yīng)用，閱讀這個教程

其他解決方案,基于 Cordova,依賴Webview來渲染屏幕，并且不如原生解決方案高效。
"一次編寫，到處運行"... 開發(fā)者夢想成真了!

Ionic 是混合應(yīng)用理念的先鋒，在底層，它基于Cordova來訪問移動設(shè)備功能。
它非常成熟，有著強大的生態(tài)系統(tǒng)。

NativeScript旨在實現(xiàn)與React Native相同的目標(biāo)（使用Web技術(shù)構(gòu)建真正的移動應(yīng)用程序）。 它有兩種風(fēng)格，NativeScript Core和NativeScript + Angular 2

一個在2017年密切關(guān)注的項目: Weex,
一個構(gòu)建在Vue.JS之上的移動跨平臺UI框架。

我們在這里談?wù)撋扇魏握Z言（或JavaScript的超集）的JavaScript的編譯器（或“transpilers”）。
他們將代碼轉(zhuǎn)換為瀏覽器（或node.js）可以執(zhí)行的“標(biāo)準(zhǔn)JavaScript”代碼。

例如，編譯器允許開發(fā)人員使用最新版本的JavaScript（ES6）編寫代碼，而不必?fù)?dān)心瀏覽器支持。

最流行的轉(zhuǎn)譯器是 TypeScript,它帶給web開發(fā)者來自java和c#的靜態(tài)類型。
事實上， Angular 2使用TypeScript 增加了更多的特性。
這兒有關(guān)于在js中使用類型的利弊，閱讀這兩篇文章，提出你自己的觀點。

你也不并不需要 TypeScript

TypeScript: the missing introduction

Babel與Webpack一起，幾乎成為編譯ES5代碼和標(biāo)準(zhǔn)JavaScript中的庫（如React（JSX））所使用的模板的標(biāo)準(zhǔn)。
最初創(chuàng)建的編譯ES6，它成為一個更通用的工具，可以完成任何代碼轉(zhuǎn)換，感謝這個插件系統(tǒng)。

Flow不是一個編譯器，它只是一個靜態(tài)類型檢測工具，用來“標(biāo)注”JavaScript代碼。
在代碼中使用Flow只是增加對于意料之中類型的注釋（閱讀這里更多關(guān)于使用Flow寫模塊）

它使用Facebook內(nèi)部的源代碼項目，（React，React Native，F(xiàn)lux，Immutable，Jest等）Facebook成為開源世界的主演之一。
這意味深長。

CoffeeScript和其精簡的語法，受 Python 和Ruby 語法啟發(fā)，但它在2016年不太流行，
大量的開發(fā)者通過使用Babel從 CoffeeScript 轉(zhuǎn)移到ES6。

在 2016年,我們很難想象一個沒有任何構(gòu)建過程的Web應(yīng)用。
通常需要一個構(gòu)建過程來編譯模板和優(yōu)化資源，以便在生產(chǎn)環(huán)境中運行Web應(yīng)用程序。

Webpack 是被用來構(gòu)建單頁應(yīng)用的主要工具，在React生態(tài)系統(tǒng)中運行，
新發(fā)布的版本2帶有一些有前途的增強功能（查看本文介紹 introduction）

Gulp Gulp是一個通用的任務(wù)運行器，可以用來處理任何形式的自動化過程包括文件系統(tǒng)，因此它不是Webpack或Browserify的直接競爭者。

類似于 Grunt,Gulp通過聚合工作：你可以要求它壓縮和合并一系列資源，但它不會像Webpack或Browserify那樣自己處理模塊化的JavaScript。

然而，它可以很好地與webpack，即使開發(fā)人員傾向于使用npm腳本。

Browserify,由于其簡單的特性，通常深受node.js開發(fā)者的喜愛。

基本上，它需要幾個node.js包作為輸入，并為瀏覽器生成一個單一的“構(gòu)建”文件作為輸出。
但是，似乎像Webpack一樣的工具，更適合Web應(yīng)用工作流。

在2017年應(yīng)該關(guān)注的模塊管理器,它強調(diào)性能: rollup.

它使用ES6模塊及一個稱為”Tree shaking “功能創(chuàng)建bundle，
只包括您在代碼中使用到的功能，而非傳輸整個庫。

最有名的兩個測試框架是 Jasmine 和 Mocha， 但最近兩個項目在2016年有更多的吸引力: AVA 和 Jest.

AVA, 由多產(chǎn)的 Sindre Sorhus創(chuàng)建的強調(diào)性能（并行測試）和ES6。
AVA的語法接近標(biāo)準(zhǔn)測試框架，如Tape 和 Node-tap。

Jest,另一個 Facebook 項目,
在過去幾周里有很多吸引力。 在React社區(qū)眾所周知，越來越多的人轉(zhuǎn)向Jest（例如閱讀這個故事 ），

它可能成為2017年最流行的測試框架。

Jest內(nèi)置了良好的mocking 功能，而其他測試框架通常依賴于[Sinon.JS]（http://sinonjs.org/）這樣的庫。

關(guān)于 IDE ，值得一提的是，最流行的兩個IDE是使用Web技術(shù)開發(fā)的開源項目。

在我們的調(diào)查結(jié)果中，微軟以Visual Studio Code帶路。

它提供了關(guān)于 TypeScript 和 node.js的良好整合.
一些開發(fā)人員提到開發(fā)速度的提升，感謝IntelliSense功能的改進(jìn)(整合了高亮和自動完成).

微軟和開源在同一句話里出現(xiàn)，沒毛??！

Atom, 由Github推出，
利用 Electron 創(chuàng)建（類似于其它的桌面應(yīng)用，包括桌面客戶端），并不亞于Visual Stdio Code。

關(guān)于 Atom 有趣的事實是: 它主要的語言是 CoffeeScript!

靜態(tài)網(wǎng)站生成器是生成一系列.html, .css 和 JavaScript文件的工具，
您可以在任何簡單的web服務(wù)器（Apache或NGNX）上部署，而不用大驚小怪，或者設(shè)置數(shù)據(jù)庫或任何web框架。
正如比爾蓋茨所說：

Build sites like it"s 1995

靜態(tài)網(wǎng)站快速，強大，易于維護(hù)。

SSG非常受歡迎，因為有很多很好的免費解決方案解決靜態(tài)網(wǎng)站：

Github pages

Gitlab pages

Netlify

Surge

Now static

在2016年，利用node.js構(gòu)建的最流行的SSG就是Hexo，它是個一站式SSG，
接近于像Wordpress這樣的CMS系統(tǒng)，
他有很多功能，包括國際化插件。

新出的Gatsby是一個非常有趣的解決方案，它因為使用React生態(tài)系統(tǒng)來生成靜態(tài)html文件，從競爭對手脫穎而出。
事實上，您可以組合React組件，Markdown文件和服務(wù)器端渲染，這使它非常強大。

盡管 JavaScript 疲勞? 和 戲劇事件 (還記得 "leftpad gate"),
隨著如 Vue.JS 和 React Native項目的崛起，
以及新項目如 Yarn 或Create React App.
對社區(qū)而言，2016是一個偉大的年份,
我們一直在談?wù)?016年Github上的項目，但是更重要的是是開發(fā)者的滿意度。
那么，如果你想了解更多，請看Sacha Greif的JavaScript現(xiàn)狀調(diào)查，
我們已經(jīng)收集了超過9,000份答卷。

是時候考慮2017年的后起之秀在哪里了?

以下是我精選的10個項目，在2016年我喜歡這些項目和觀點，2017年將保持增長：

vue.js勢頭將不會停止：

Electron

Create React App

React Native

Gatsby (用于構(gòu)建這個頁面！)

Yarn:一種快速、可靠和安全的依賴包，可以代替NPM、可在這兒查閱node.js包管理工具的狀態(tài)

“漸進(jìn)式web應(yīng)用”概念

Node.js的“微服務(wù)”解決方案，能夠更好實現(xiàn)部署，例如Now

Node.js的升級：最新一版對ES6語法有很好的支持

壓軸的是graphql：我的朋友告訴我，可能要搞個大新聞！