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

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

原文鏈接

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

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

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

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

那么，誰會是2016年的JavaScript之星呢？

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

通過比較去年最火的10個項目，你可以總覽2016的web前端技術(shù)發(fā)展，會發(fā)現(xiàn)：

3個UI框架：Vue.js, React以及Angular 2

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

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

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

移動端框架：React Native

最著名的CSS工具包：Bootstrap

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

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

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

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

Vue.JS在去年獲得了超過25000個star，這意味著每天有72個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)有一個相對成熟的生態(tài)體系，包括路由（vue-router）以及狀態(tài)管理庫（Vuex）。

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

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

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

全能型框架，創(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(排名第1的那個)，讓我們來看看其它的競爭者。

React以及它的競爭者

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

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

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

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

Angular 1 和 2

Angular如今已經(jīng)分成2個倉庫了，因為Angular2是對Angular1的全部重寫，盡管有一些概念仍然相同。

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

AngularJS這個項目指代的是其分支 1.x ，它仍然在許多項目中使用，并且仍會流行一段時間。

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

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

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

Now

Webtask.io

Stdlib

類似于 Gomix 的工程項目更是降低了進(jìn)入 node.js 世界的門檻，它使任何人只需要通過一些點擊操作就能夠直接在瀏覽器編寫以及分享 node.js 代碼。

那么，如果你不得不寫一個web應(yīng)用，你會選擇哪一個框架？

Express

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

Koa

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

Feathers

對于以“服務(wù)端導(dǎo)向”架構(gòu)設(shè)計，F(xiàn)eathers是一個非常靈活的解決方案，很適合用來構(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是一個完全的MVC框架，靈感來源于Ruby on Rails（所以把它命名為Sails?。Ｋ呀?jīng)發(fā)布了挺長一段時間了，兼容各種類型的數(shù)據(jù)庫，SQL或者no-SQL。

Loopback

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

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

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

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

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

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

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

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

React模板生成器

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

它允許開發(fā)者創(chuàng)建一個被稱為漸進(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)用”（或者我們在2015年所說的同構(gòu)應(yīng)用），
這代表應(yīng)用不管是在客戶端還是服務(wù)端都基本上可以運(yùn)行同一套代碼。

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

React Native

利用React Native，基于相同的代碼以及React開發(fā)者熟悉的理念方法，你可以構(gòu)建iOS和Android不同平臺的移動端應(yīng)用。
想要了解更多關(guān)于構(gòu)建iOS以及Andriod平臺應(yīng)用的知識，請移步官方教程。

其它的解決方案，基于Cordova，常常依賴于Webview去渲染頁面，但并沒有原生流暢?！癢rite Once Run Everywhere···”開發(fā)者們的夢想終于成真啦！

Ionic

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

NativeScript

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

以及······

2017年有一項快完成的項目：Weex，一個基于Vue.JS的跨平臺移動端UI框架。

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

舉個例子，編譯器使開發(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)勢與劣勢，你可以讀下面的兩篇文章來思考自己的觀點。

You Might Not Need TypeScript

TypeScript:the missing introduction

Babel

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

Flow

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

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

CoffeeScript

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

在2016，很難想象一個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是一個通用任務(wù)運(yùn)行器，可以用來處理任何形式（包括文件系統(tǒng)）的自動化過程，，所以，它并不是Webpack或者Browserify的直接競爭對手。

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

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

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

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

以及······

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

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

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

AVA

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

Jest

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

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

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

Visual Studio Code

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

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

Atom

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

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

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

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

SSG非常流行，因為有很多種好的方法能夠免費去建立網(wǎng)站：

Github pages

Gitlab pages

Netlify

Surge

Now static

Hexo

在2016，利用node.js構(gòu)建的最流行的SSG就是Hexo。它是一個一站式SSG，與Wordpress這樣的CMS系統(tǒng)類似，例如可以用來創(chuàng)建博客。它有很多特性，包括國際化的插件。

Gatsby

新的入局者Gatsby是一個非常有趣的解決方案，與競爭者不同，它利用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)尚的項目，但真正重要的是開發(fā)者的滿意程度。所以，如果你想要更多干貨，去查一下Sacha Greif的JavaScript現(xiàn)狀調(diào)查吧，收集了超過9000個回復(fù)！

是時候來想想2017了，下一個JavaScript之星是誰？

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

Vue.JS：勢頭正猛

Electron

Create React App

React Native

Gatsby

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

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

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

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

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