摘要：在，是當(dāng)之無愧的王者，贏得了與之間的戰(zhàn)爭，攻陷了的城池。于月發(fā)布了版本，這一版本為了更好的表現(xiàn)加入了渲染方式。前端框架這個(gè)前端框架清單可能是年疲勞的元兇之一。的創(chuàng)建者，目前在工作為尋找構(gòu)建簡單性和自主配置性之間的平衡做了很大的貢獻(xiàn)。

春節(jié)后的第一篇就從這個(gè)開始吧~本文已在前端早讀課公眾號(hào)上首發(fā)

原文鏈接

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

2016已經(jīng)結(jié)束了。你可能會(huì)想你是否錯(cuò)過一些重要的東西？不用擔(dān)心，讓我們來回顧2016年前端有哪些主流。

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

在2015，React是當(dāng)之無愧的王者，Redux贏得了與flux之間的戰(zhàn)爭，攻陷了Flux的城池。

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

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

通過比較去年最火的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

快速上手React的解決方案：Create React App

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

最著名的CSS工具包：Bootstrap

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

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

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

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

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

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

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

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

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

這個(gè)前端框架清單可能是2016年JavaScript疲勞的元兇之一。似乎每個(gè)月都有一個(gè)新的競(jìng)爭者流行起來，推動(dòng)著JavaScript的創(chuàng)新。

準(zhǔn)確地說，這里涉及兩種不同類型的框架：

全能型框架，創(chuàng)建一個(gè)現(xiàn)代web應(yīng)用所需的特性全部有，包括路由、數(shù)據(jù)獲取、狀態(tài)管理。例如AngularJS，Angular 2，Ember或者Aurelia。

專注于UI層的輕量級(jí)解決方案，例如React，Vue.JS，以及Inferno等等。

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

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

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

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

Inferno是這類類庫里最流行的項(xiàng)目了，它聲稱自己是最快的React替代品。

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

Angular 1 和 2

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

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

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

。
Ember也值得一提，雖然它排不到前十，它的生態(tài)圈依然龐大。

因此，看起來，相比于封裝好的包含所有特性的全能型框架，2016年開發(fā)者們更青睞輕量型框架，更愿意自定義解決方案。

在2016，從未如此簡單去創(chuàng)建以及部署一個(gè)node.js應(yīng)用，可利用：

Now

Webtask.io

Stdlib

類似于 Gomix 的工程項(xiàng)目更是降低了進(jìn)入 node.js 世界的門檻，它使任何人只需要通過一些點(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 開發(fā)者對(duì)于它的設(shè)計(jì)哲學(xué)（核心很小，但可以通過各種中間件進(jìn)行拓展）非常熟悉。

Koa

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

Feathers

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

Nodal

Nodal框架立志于解決連接到PostgreSQL數(shù)據(jù)庫的無狀態(tài)分布式服務(wù)問題。

Keystone

Keystone是最好的MongoDB數(shù)據(jù)管理以及運(yùn)行終端解決方案之一，它主要是用來處理從MongoDB數(shù)據(jù)庫傳來的內(nèi)容。管理界面是直接從模型里面生成的，擁有所有的CRUD操作以及很好的過濾功能。

Sails

Sails是一個(gè)完全的MVC框架，靈感來源于Ruby on Rails（所以把它命名為Sails?。?。它已經(jīng)發(fā)布了挺長一段時(shí)間了，兼容各種類型的數(shù)據(jù)庫，SQL或者no-SQL。

Loopback

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

最牛逼的特性是其API探測(cè)功能。這個(gè)特性讓開發(fā)者以直觀的方式檢測(cè)所有的API端點(diǎn)，在此過程中，開發(fā)者還可以去檢測(cè)所有用戶的token。
如果你想要去開發(fā)一個(gè)新的API，它會(huì)是很好的選擇。

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

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

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

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

Dan Abramov（Redux的創(chuàng)建者，目前在Facebook工作）為尋找構(gòu)建簡單性和自主配置性之間的平衡做了很大的貢獻(xiàn)。
例如，不需要繁雜的樣式解決方案（僅僅只是單純的CSS），不需要服務(wù)端渲染，依舊可以將應(yīng)用很好地打包，同時(shí)，開發(fā)體驗(yàn)也非常棒。

與其競(jìng)爭者最主要的區(qū)別在于，如果你使用了 Create React App，它就會(huì)成為你項(xiàng)目中的一個(gè)依賴，你只會(huì)看到你的應(yīng)用的代碼，其它的黑魔法都被隱藏起來了。
當(dāng)然，你可以自由選擇何時(shí)升級(jí)依賴包，這并不僅僅是開始。

React模板生成器

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

它允許開發(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，由來自Zeit忙碌的開發(fā)者所創(chuàng)建，擁有服務(wù)端渲染特性，可以通過此特性創(chuàng)建“萬能應(yīng)用”（或者我們?cè)?015年所說的同構(gòu)應(yīng)用），
這代表應(yīng)用不管是在客戶端還是服務(wù)端都基本上可以運(yùn)行同一套代碼。

JavaScript無處不在，現(xiàn)在你都可以使用web開發(fā)者的技術(shù)（HTML，JavaScript，CSS）來創(chuàng)建移動(dòng)端應(yīng)用。

React Native

利用React Native，基于相同的代碼以及React開發(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去渲染頁面，但并沒有原生流暢?！癢rite Once Run Everywhere···”開發(fā)者們的夢(mèng)想終于成真啦！

Ionic

Ionic是“hybrid”應(yīng)用概念的先鋒。本質(zhì)上，它是基于Cordova來獲取移動(dòng)設(shè)備的各種特性。它非常成熟，擁有一個(gè)龐大的生態(tài)系統(tǒng)。

NativeScript

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

以及······

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

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

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

TypeScript

引領(lǐng)潮流的轉(zhuǎn)換器是TypeScript，它為web開發(fā)者帶來了Java以及C#開發(fā)者所使用的靜態(tài)類型。Angular 2 正是基于TypeScript增加了許多的特性（traction）。
這里也存在在JavaScript中使用類型的優(yōu)勢(shì)與劣勢(shì)，你可以讀下面的兩篇文章來思考自己的觀點(diǎn)。

You Might Not Need TypeScript

TypeScript:the missing introduction

Babel

，同Webpack，Babel基本上已經(jīng)成為一個(gè)標(biāo)準(zhǔn)工具，用來編譯ES6代碼以及使用類似React（JSX）類庫的模板。
最初，它只是用來編譯ES6，現(xiàn)在借助那些插件，已經(jīng)成為一個(gè)用來做代碼轉(zhuǎn)換的更加通用的工具。

Flow

Flow并不是一個(gè)編譯器，它只是一個(gè)靜態(tài)類型檢測(cè)工具，用來“標(biāo)注”JavaScript代碼?；旧希诖a中使用Flow只是增加對(duì)于已知類型的注釋
（這里閱讀更多關(guān)于使用Flow去寫模塊）

它用在Faceboook項(xiàng)目的代碼中。自從Facebook成為開源世界（開源項(xiàng)目例如React，React Native，F(xiàn)lux， Immutable，Jest···）的主角之一，
這里面有太多的意義了。

CoffeeScript

在過去幾年中，基于Python以及Ruby語法的CoffeeScript以及它精妙的語法成為最流行的編譯器，但在2016，它不再那么流行，很多開發(fā)者由CoffeeScript轉(zhuǎn)向搭配Babel的ES6。

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

Wepack

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

Gulp

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

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

但它可以與Webpack很好地配合使用，即使開發(fā)更愿意使用npm scripts。

Browserify，由于其簡便性，很多node.js開發(fā)者喜歡它。

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

以及······

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

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

Jasmine以及 Mocha是最著名的兩個(gè)測(cè)試框架，但AVA和Jest在2016年發(fā)展更加迅速。。

AVA

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

Jest

Jest，又一個(gè)Facebook項(xiàng)目，在上個(gè)星期獲得了很多的關(guān)注。在React社區(qū)，它很出名，越來越多的人開始向Jest遷移（看這個(gè)故事），
在2017年，它有可能成為最流行的測(cè)試框架。

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

關(guān)于IDE，不得不提2個(gè)最受歡迎的開源IDE是利用web技術(shù)開發(fā)的。

Visual Studio Code

在我們的統(tǒng)計(jì)結(jié)果中，微軟的Visual Studio Code獨(dú)占鰲頭。

它很好的整合了TypeScript以及node.js。一些開發(fā)者提到了開發(fā)速度的提升，這得感謝“IntelliSence”特性（整合了高亮以及自動(dòng)補(bǔ)全）
它提供了很好的TypeScript和node.js的集成環(huán)境。一些開發(fā)者覺得這個(gè)IDE的“IntelliSense”功能（即高亮和自動(dòng)補(bǔ)全）加快了開發(fā)速度。
提到“開源”和“微軟”，再也不是矛盾的啦！

Atom

Atom，由Github主推，利用Electron創(chuàng)建（類似于其它的桌面應(yīng)用，包括桌面客戶端），其并不輸于Visual Studio Code太多。
關(guān)于Atom，有一個(gè)有趣的事情：它主要用CoffeeScript編寫的！

靜態(tài)網(wǎng)頁生成器（或者被稱為“SSG”）用來生成一系列html，css以及JavaScript文件的工具。你可以將這些文件部署在任意一個(gè)簡單的web服務(wù)器上面（Apache或者NGNX），不需要大動(dòng)干戈或者設(shè)置一個(gè)數(shù)據(jù)庫或者使用任何的web框架。正如Gatsby網(wǎng)站這么說：

Build sites like it"s 1995 像在1995年一樣那么簡單地開發(fā)網(wǎng)站。

靜態(tài)網(wǎng)頁很快，很強(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)類似，例如可以用來創(chuàng)建博客。它有很多特性，包括國際化的插件。

Gatsby

新的入局者Gatsby是一個(gè)非常有趣的解決方案，與競(jìng)爭者不同，它利用React生態(tài)系統(tǒng)來生成靜態(tài)html文件。
你可以選擇與React組件、markdown文件以及服務(wù)端渲染整合，這使得它非常強(qiáng)大。

盡管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)目，但真正重要的是開發(fā)者的滿意程度。所以，如果你想要更多干貨，去查一下Sacha Greif的JavaScript現(xiàn)狀調(diào)查吧，收集了超過9000個(gè)回復(fù)！

是時(shí)候來想想2017了，下一個(gè)JavaScript之星是誰？

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

Vue.JS：勢(shì)頭正猛

Electron

Create React App

React Native

Gatsby

Yarn：一個(gè)快速、可信賴的安全依賴包，可替代npm，可以在這兒
查閱node.js包管理工具的狀態(tài)

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

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

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

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