JavasScript社區(qū)在創(chuàng)新的道路上開(kāi)足了馬力疗杉，曾經(jīng)流行過(guò)的也許一個(gè)月之后就過(guò)時(shí)了。

2016已經(jīng)結(jié)束了瞎饲。你可能會(huì)想你是否錯(cuò)過(guò)一些重要的東西口叙？不用擔(dān)心，我們正在回顧那些流行趨勢(shì)嗅战。

通過(guò)比較過(guò)去12個(gè)月里Github所增加的star數(shù)妄田，我們依次來(lái)看看哪些項(xiàng)目吸引了大多數(shù)眼光。

在2015驮捍，React是當(dāng)之無(wú)愧的王者疟呐，Redux贏得了與flux之間的戰(zhàn)爭(zhēng)，攻陷了Flux的城池东且。

那么启具，誰(shuí)會(huì)是2016年的JavaScript之星呢？

我們利用bestof.js.org分析所涉及的項(xiàng)目技術(shù)珊泳。（bestof.js.org羅列了一系列與web平臺(tái)相關(guān)的最好的項(xiàng)目）

1. 2016最流行項(xiàng)目

通過(guò)比較去年最火的10個(gè)項(xiàng)目鲁冯，你可以總覽2016的web前端技術(shù)發(fā)展拷沸，會(huì)發(fā)現(xiàn)：

3個(gè)UI框架：Vue.js,React以及Angular 2

新的node.js包管理工具：Yarn

桌面應(yīng)用領(lǐng)先級(jí)解決方案：Electron

快速開(kāi)始React解決方案：Create React App

移動(dòng)端框架：React Native

最著名的CSS工具包：Bootstrap

基于函數(shù)式編程思想的狀態(tài)管理庫(kù)：Redux

強(qiáng)大靈活的圖表庫(kù)：D3

這彰顯了2016年JavaScript應(yīng)用的全面性以及多功能性。

2016年的王者是······

Vue.JS在去年獲得了超過(guò)25000個(gè)star薯演，這意味著每天有72個(gè)star撞芍，超過(guò)了包含React以及Angular在內(nèi)的其它任何框架。

Vue.JS在10月發(fā)布了2.0版本跨扮，這一版本為了更好的表現(xiàn)加入了Virtual DOM渲染方式序无。

Vue.JS已經(jīng)在很多大公司的生產(chǎn)環(huán)境投入使用（包括阿里巴巴，中國(guó)最大的電子商務(wù)公司）衡创，所以帝嗡，你可以放心的使用它。

現(xiàn)在Vue.JS已經(jīng)有一個(gè)相對(duì)成熟的生態(tài)體系璃氢，包括路由（vue-router）以及狀態(tài)管理庫(kù)（Vuex）哟玷。

看起來(lái)Vue.JS結(jié)合了React（組件化思路）以及Angular（html模板增強(qiáng)語(yǔ)法）的精華

2. 前端框架

出現(xiàn)并發(fā)出自己的聲音，推動(dòng)著JavaScript的創(chuàng)新拔莱。

準(zhǔn)確的說(shuō)碗降，這個(gè)目錄里面有兩種不同類型的框架：

全能型框架，創(chuàng)建一個(gè)現(xiàn)代web應(yīng)用所需的特性全部有塘秦，包括路由讼渊、數(shù)據(jù)獲取、狀態(tài)管理尊剔。AngularJS爪幻，Angular 2，Ember或者Aurelia都在這個(gè)類別里面须误。

專注于UI層面的輕便解決方案挨稿，例如React，Vue.JS京痢，以及Inferno等等奶甘。

我們已經(jīng)提到了Vue.JS(排名第1的那個(gè))，讓我們來(lái)看看其它的競(jìng)爭(zhēng)者祭椰。

React以及它的競(jìng)爭(zhēng)者

React排名第2臭家，沒(méi)有一個(gè)前端會(huì)忽視React以及它那豐富的生態(tài)圈。

React如此流行以至于其它的庫(kù)總想取其精華方淤，去其糟粕钉赁，在構(gòu)建以及瀏覽器渲染方面提高效率。

Inferno是這個(gè)清單里面最流行的項(xiàng)目了携茂，它聲稱最快的React替代品你踩。

在我們的排行榜緊鄰Inferno，Preact同樣是React一個(gè)很好的替代品。它的生態(tài)系統(tǒng)相當(dāng)成熟带膜，舉個(gè)例子吩谦，擁有離線緩存、路由以及兼容模板功能的樣板膝藕，你可以利用這個(gè)樣板使用你Preact項(xiàng)目里面的已存在的React庫(kù)逮京。

Angular 1 和 2

Angular如今已經(jīng)分成2個(gè)倉(cāng)庫(kù)了，因?yàn)锳ngular2是對(duì)Angular1的全部重寫束莫，盡管有一些概念仍然相同。

Angular 2 基于 TypeScript 以及 ES6 編寫草描，使其更加“現(xiàn)代”览绿、“縝密”。

AngularJS這個(gè)項(xiàng)目指代的是其分支 1.x 穗慕，它仍然在許多項(xiàng)目中使用饿敲，并且仍會(huì)流行一段時(shí)間。

現(xiàn)在逛绵，是時(shí)候提及Ember了怀各，雖然它龐大的生態(tài)圈以及社區(qū)不在top 10里面。

So it seems that, rather than opting for full frameworks with all features “out of the box”, developers in 2016 flavored lighter approaches and prefer to compose their own solution “à la carte”.

因此术浪，看起來(lái)瓢对，相比于封裝好的包含所有特性的全能型框架，2016年的開(kāi)發(fā)者們更青睞輕量型框架胰苏，并且更愿意自定義解決方案硕蛹，自己“點(diǎn)菜”。

3. Node.js 框架

在2016硕并，從未如此簡(jiǎn)單去創(chuàng)建以及部署一個(gè)node.js應(yīng)用法焰，只需要通過(guò)：Now、Webtask.io倔毙、Stdlib埃仪。類似于 Gomix 的工程項(xiàng)目更是降低了進(jìn)入 node.js 世界的門檻，它使任何人只需要通過(guò)一些點(diǎn)擊操作就能夠直接在瀏覽器編寫以及分享 node.js 代碼陕赃。

那么卵蛉，如果你不得不寫一個(gè)web應(yīng)用，你會(huì)選擇哪一個(gè)框架凯正？

Express

當(dāng)你想用 node.js 寫一個(gè)web應(yīng)用的時(shí)候毙玻，Express 經(jīng)常會(huì)被認(rèn)為web服務(wù)器的選擇之一。大多數(shù) node.js 開(kāi)發(fā)者對(duì)于它的設(shè)計(jì)哲學(xué)（核心很小廊散，但可以通過(guò)各種中間件進(jìn)行拓展）非常熟悉桑滩。

Koa

Koa的設(shè)計(jì)哲學(xué)與 Express 類似，只不過(guò)它使用了 ES6 中的 generators 來(lái)避免回調(diào)地獄問(wèn)題。

Feathers

對(duì)于以“服務(wù)端導(dǎo)向”架構(gòu)設(shè)計(jì)运准，F(xiàn)eathers是一個(gè)非常靈活的解決方案幌氮，很適合用來(lái)構(gòu)建小的 node.js 服務(wù)。

Nodal

Nodal框架立志于解決連接到PostgreSQL數(shù)據(jù)庫(kù)的無(wú)狀態(tài)以及分布服務(wù)問(wèn)題胁澳。

Keystone

Keystone是最好的MongoDB數(shù)據(jù)管理以及運(yùn)行終端解決方案之一该互，它主要是用來(lái)處理從MongoDB數(shù)據(jù)庫(kù)傳來(lái)的內(nèi)容。

管理界面是直接從模型里面生成的韭畸，擁有所有的CRUD操作以及很好的過(guò)濾功能宇智。

Sails

Sails是一個(gè)完全的MVC框架，靈感來(lái)源于Ruby on Rails（所以把它命名為SailsＲ榷　）随橘。它已經(jīng)發(fā)布了挺長(zhǎng)一段時(shí)間了，兼容各種版本的數(shù)據(jù)庫(kù)锦庸，SQL或者no-SQL机蔗。

Loopback

Loopback是另一個(gè)擁有很多特性的成熟框架，其中包括需要token驗(yàn)證的權(quán)限以及兼容任何數(shù)據(jù)庫(kù)甘萧。

最牛逼的特性是其API探測(cè)功能萝嘁。這個(gè)特性讓開(kāi)發(fā)者以直觀的方式檢測(cè)所有的API端點(diǎn)，在此過(guò)程中扬卷，開(kāi)發(fā)者還可以去檢測(cè)所有用戶的token牙言。

如果你想要去開(kāi)發(fā)一個(gè)新的API，它回事很好的選擇邀泉。

4. React模板生成器

React是一個(gè)非常棒的UI庫(kù)嬉挡，但是利用React配合現(xiàn)代web開(kāi)發(fā)工作流工具需要太多的配置。所以汇恤，怎么才能開(kāi)始構(gòu)建一個(gè)真實(shí)存在的應(yīng)用呢庞钢？

React模板生成器以及其它的starter開(kāi)發(fā)工具包給了我們這個(gè)答案。

創(chuàng)建React應(yīng)用

Facebook為了滿足這個(gè)需求因谎，提供了一種更輕便的路線基括，被稱為 Create React App，利用它可以很方便的開(kāi)始一個(gè)新的React項(xiàng)目财岔。

Dan Abramov（Redux的創(chuàng)建者风皿，目前在Facebook工作）為尋找構(gòu)建簡(jiǎn)單性和自主配置性之間的平衡做了很大的貢獻(xiàn)。

例如匠璧，不需要繁雜的樣式解決方案（僅僅只是單純的CSS）桐款，不需要服務(wù)端渲染，依舊可以將應(yīng)用很好的打包夷恍，同時(shí)魔眨，開(kāi)發(fā)體驗(yàn)也非常棒。

與其競(jìng)爭(zhēng)者最主要的區(qū)別在于，如果你使用了 Create React App遏暴，它就會(huì)成為你項(xiàng)目中的一個(gè)依賴侄刽，你只會(huì)看到你的應(yīng)用的代碼，其它的黑魔法都被隱藏起來(lái)了朋凉。

當(dāng)然州丹，你可以自由選擇合適升級(jí)依賴包，這并不僅僅是開(kāi)始杂彭。

React模板生成器

被成為 React boilerplate 的生成器擁有你所需要的一切墓毒，包括 Redux 以及一些比較好的本地特性，很好地利用了web工作者的技術(shù)優(yōu)勢(shì)亲怠。

它允許開(kāi)發(fā)者創(chuàng)建一個(gè)被稱為漸進(jìn)式web應(yīng)用（或者PWA）：web應(yīng)用本地運(yùn)行蚁鳖，使用了一種被稱為Service Worker的技術(shù)，你可以閱讀Nicolás Bevacqua所寫的這篇文章赁炎。

Next.js

Next.js，由來(lái)自Zeit忙碌的開(kāi)發(fā)者所創(chuàng)建钾腺，擁有服務(wù)端渲染特性徙垫，可以通過(guò)此特性創(chuàng)建“萬(wàn)能應(yīng)用”（或者我們?cè)?015年所說(shuō)的同構(gòu)應(yīng)用），

這代表應(yīng)用不管是在客戶端還是服務(wù)端都基本上可以運(yùn)行同一套代碼放棒。

5. Mobile

JavaScript無(wú)處不在姻报，現(xiàn)在你都可以使用web開(kāi)發(fā)者的技術(shù)（HTML，JavaScript间螟，CSS）來(lái)創(chuàng)建移動(dòng)端應(yīng)用吴旋。

React Native

利用React Native，基于相同的代碼以及React開(kāi)發(fā)者熟悉的理念方法厢破，你可以構(gòu)建iOS和Android不同平臺(tái)的移動(dòng)端應(yīng)用荣瑟。

想要了解更多關(guān)于構(gòu)建iOS以及Andriod平臺(tái)應(yīng)用的知識(shí)，請(qǐng)移步官方教程摩泪。

其它的解決方案笆焰，基于Cordova，常常依賴于Webview去渲染頁(yè)面见坑，但并沒(méi)有原生流暢嚷掠。“Write Once Run Everywhere···”開(kāi)發(fā)者們的夢(mèng)想終于成真啦荞驴！

Ionic

Ionic是“hybrid”應(yīng)用概念的先鋒不皆。在其外表之下，它基于Cordova來(lái)獲取移動(dòng)設(shè)備的各種特性熊楼。它非常成熟霹娄，擁有一個(gè)龐大的生態(tài)系統(tǒng)。

NativeScript

NativeScript與React Native目的（利用web技術(shù)開(kāi)發(fā)真正的移動(dòng)端應(yīng)用）相同。它有兩種形式项棠，NativeScript Core以及NativeScript + Angular 2

以及······

2017年有一項(xiàng)快完成的項(xiàng)目：Weex悲雳，一個(gè)基于Vue.JS的跨平臺(tái)移動(dòng)端UI框架。

6. 編譯器

我們現(xiàn)在這里討論的編譯器（或者“轉(zhuǎn)換器”）是指其將其他語(yǔ)言（或者JavaScript的超集）轉(zhuǎn)換JavaScript香追。它們將代碼轉(zhuǎn)換成“標(biāo)準(zhǔn)JavaScript”代碼合瓢，即瀏覽器（或者node.js）可以執(zhí)行的代碼。

舉個(gè)例子透典，編譯器使開(kāi)發(fā)者可以使用最新版本的JavaScript（ES6）而不需要擔(dān)心瀏覽器兼容問(wèn)題晴楔。

TypeScript

引領(lǐng)潮流的轉(zhuǎn)換器是TypeScript，它為web開(kāi)發(fā)者帶來(lái)了Java以及C#開(kāi)發(fā)者所使用的靜態(tài)類型峭咒。Angular 2 正是基于TypeScript增加了許多的特性（traction）税弃。

這里也存在在JavaScript中使用類型的優(yōu)勢(shì)與劣勢(shì)，你可以讀下面的兩篇文章來(lái)思考自己的觀點(diǎn)凑队。

You Might Not Need TypeScript

TypeScript:the missing introduction

Babel

Babel则果，同Webpack，已經(jīng)基本上成為一個(gè)的標(biāo)準(zhǔn)工具漩氨，用來(lái)編譯ES6代碼以及使用類似React（JSX）類庫(kù)的模板西壮。

最初，它只是用來(lái)編譯ES6叫惊，現(xiàn)在已經(jīng)成為一個(gè)用來(lái)做代碼轉(zhuǎn)換的更加通用的工具款青，感謝那一大批插件。

Flow

Flow并不是一個(gè)編譯器霍狰，它只是一個(gè)靜態(tài)類型檢測(cè)工具抡草，用來(lái)“標(biāo)注”JavaScript代碼≌崤鳎基本上康震，在代碼中使用Flow只是增加對(duì)于意料中類型的注釋

（這里閱讀更多關(guān)于使用Flow去寫模塊）

它被使用在Faceboook項(xiàng)目的代碼中。自從Facebook成為開(kāi)源世界（開(kāi)源項(xiàng)目例如React宾濒，React Native签杈，F(xiàn)lux， Immutable鼎兽，Jest···）的主角之一答姥，

這里面有太多的意義了。

CoffeeScript

在過(guò)去幾年中谚咬，基于Python以及Ruby語(yǔ)法的CoffeeScript以及它精妙的語(yǔ)法成為最流行的編譯器鹦付，但在2016，它不再那么流行择卦，很多開(kāi)發(fā)者由CoffeeScript轉(zhuǎn)向搭配Babel的ES6敲长。

7. 構(gòu)建工具

在2016郎嫁，很難想象一個(gè)web應(yīng)用沒(méi)有經(jīng)過(guò)任何構(gòu)建過(guò)程。你經(jīng)常需要通過(guò)構(gòu)建來(lái)轉(zhuǎn)換模板以及優(yōu)化資源祈噪，保證你的web應(yīng)用在生產(chǎn)環(huán)境正常運(yùn)行泽铛。

Wepack

Webpack是用來(lái)構(gòu)建單頁(yè)應(yīng)用的主要工具，它與React生態(tài)良好兼容辑鲤。最新發(fā)布的版本2增加一些先前期望的功能（可通過(guò)這篇介紹查看）

Gulp

Gulp是一個(gè)通用任務(wù)運(yùn)行器盔腔，可以用來(lái)處理任何形式的自動(dòng)化過(guò)程包括文件系統(tǒng)，所以月褥，它并不是Webpack或者Browserify的直接競(jìng)爭(zhēng)對(duì)手弛随。

類似于Grunt，Gulp通過(guò)整合任務(wù)的方式工作：你可以讓它壓縮合并一系列的資源但它跟Webpack以及Browserify不同宁赤，并不處理模塊化的JavaSript代碼舀透。

但它可以與Webpack很好的兼容，即使開(kāi)發(fā)更愿意去使用npm scripts代替它决左。

Browserify

Browserify愕够，由于其簡(jiǎn)便性，很多node.js開(kāi)發(fā)者喜歡它佛猛。

大體上链烈，它會(huì)利用幾個(gè)node.js包來(lái)生成一個(gè)簡(jiǎn)單的構(gòu)建后的文件作為輸出。但看起來(lái)挚躯，一個(gè)類似Webpack這種自主配置更強(qiáng)的工具更適用于web應(yīng)用開(kāi)發(fā)工作。

以及······

2017年一個(gè)模塊化處理工具正在崛起擦秽，它更強(qiáng)調(diào)性能問(wèn)題码荔，那就是rollup。

它使用了具有被稱作“Tree shaking”的特性ES6模塊來(lái)創(chuàng)建bundle感挥，里面只有在你代碼中使用的函數(shù)缩搅，而不是一整個(gè)類庫(kù)。

8. 測(cè)試框架

兩個(gè)著名的測(cè)試框架使Jasmine以及 Mocha触幼，但在2016硼瓣，2個(gè)發(fā)布不久的項(xiàng)目吸引了很大的關(guān)注：AVA和Jest。

AVA

AVA置谦，由多產(chǎn)的Sindre Sorhus創(chuàng)建堂鲤，主要關(guān)注于性能（平行測(cè)試）以及ES6。AVA的語(yǔ)法與標(biāo)準(zhǔn)測(cè)試框架媒峡，例如Tape和Node-tap瘟栖，相似。

Jest

Jest谅阿，又一個(gè)Facebook項(xiàng)目半哟，在上個(gè)星期獲得了很多的關(guān)注酬滤。在React社區(qū)，它很出名寓涨，越來(lái)越多的人開(kāi)始向Jest遷移（看這個(gè)故事）盯串，

在2017年，它有可能成為最流行的測(cè)試框架戒良。

Jest擁有很好的內(nèi)置Mock數(shù)據(jù)能力体捏，而其它的測(cè)試框架需要依賴類似于Sinon.js這樣的類庫(kù)。

9. IDE

關(guān)于IDE（整合開(kāi)發(fā)環(huán)境）蔬墩，不得不提2個(gè)最受歡迎的利用web技術(shù)開(kāi)發(fā)的開(kāi)源IDE译打。

Visual Stdio Code

在我們的統(tǒng)計(jì)結(jié)果中，微軟引領(lǐng)了Visual Stdio Code的開(kāi)發(fā)工作拇颅。

它很好的整合了TypeScript以及node.js奏司。一些開(kāi)發(fā)者提到了開(kāi)發(fā)速度的提升，這得感謝“IntelliSence”特性（整合了高亮以及自動(dòng)補(bǔ)全）

提到“開(kāi)源”和“微軟”樟插，再也不是矛盾的啦韵洋！

Atom

Atom，由Github主推黄锤，利用Electron創(chuàng)建（類似于其它的桌面應(yīng)用搪缨，包括桌面客戶端），其并不輸于Visual Stdio Code太多鸵熟。

關(guān)于Atom副编，有一個(gè)有趣的事情：它主要的編寫語(yǔ)言是CoffeeScript！

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

靜態(tài)網(wǎng)頁(yè)生成器（或者被稱為“SSG”）用來(lái)生成一系列html流强，css以及JavaScript文件的工具痹届。你可以將這些文件部署在一個(gè)簡(jiǎn)單的web服務(wù)器上面（Apache或者NGNX），

不需要感到驚奇或者設(shè)置一個(gè)數(shù)據(jù)庫(kù)或者使用任何的web框架打月。正如Gatsby網(wǎng)站這么說(shuō)：

build sites like it’s 1995

靜態(tài)網(wǎng)頁(yè)很快队腐，很強(qiáng)大并且很容易去維護(hù)。

SSG非常流行奏篙，因?yàn)橛泻芏喾N好的方法能夠免費(fèi)去建立網(wǎng)站：

Github pages柴淘、Gitlab pages、Netlify秘通、Surge为严、Now static

Hexo

在2016，利用node.js構(gòu)建的最流行的SSG就是Hexo肺稀。它是一個(gè)一站式SSG梗脾，與Wordpress這樣的CMS系統(tǒng)類似，

例如可以用來(lái)創(chuàng)建博客盹靴。它有很多特性包括國(guó)際化的插件炸茧。

Gatsby

新的入局者Gatsby是一個(gè)非常有趣的解決方案瑞妇，它與它的競(jìng)爭(zhēng)者不同，因?yàn)樗肦eact生態(tài)系統(tǒng)來(lái)生成靜態(tài)html文件梭冠。

你可以選擇與React組件辕狰、markdown文件以及服務(wù)端渲染整合，這使得它非常強(qiáng)大控漠。

結(jié)論

盡管JavaScript疲勞以及各種戲劇性的事件（還記得“l(fā)eft-pad”門吧蔓倍？），2016年社區(qū)發(fā)展良好盐捷，Vue.JS以及

React Native爆發(fā)偶翅，Yarn以及 Create React App新軍突起。

我們已經(jīng)討論了2016年Github上面引領(lǐng)風(fēng)尚的項(xiàng)目碉渡，但真正重要的是開(kāi)發(fā)者的滿意程度聚谁。所以，如果你想要更多干貨滞诺，

去查一下Sacha Greif的JavaScript現(xiàn)狀調(diào)查吧形导，收集了超過(guò)9000個(gè)回復(fù)婿牍！

是時(shí)候來(lái)想想2017了暂衡，下一個(gè)JavaScript之星是誰(shuí)？

這里是我挑選的10個(gè)項(xiàng)目存璃，在2016年我很喜歡這些項(xiàng)目以及想法淋叶，2017年它們?nèi)詫⑴畈l(fā)展：

Vue.JS：永不停歇

Electron

Create React App（用來(lái)創(chuàng)建頁(yè)面）

React Native

Gatsby

Yarn：一個(gè)快速阎曹、可信賴的安全依賴包，可替代npm煞檩，可以在這兒

查閱node.js包管理工具的狀態(tài)

“漸進(jìn)式網(wǎng)頁(yè)應(yīng)用”概念

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

Node.js的升級(jí)：最新一版已經(jīng)實(shí)現(xiàn)對(duì)ES6語(yǔ)法很好的支持

最后一個(gè)就是GraphQL：我所有的朋友都告訴我形娇，將有大事發(fā)生！

關(guān)于本文

譯者：@墨白

譯文：https://github.com/fezaoduke/TranslationInstitute/edit/master/JavaScript之星-2016.md

原文：https://risingstars2016.js.org