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

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

原文鏈接

JavasScript社區在創新的道路上開足了馬力，曾經流行過的也許一個月之后就過時了。

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

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

在2015，React是當之無愧的王者，Redux贏得了與flux之間的戰爭，攻陷了Flux的城池。

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

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

通過比較去年最火的10個項目，你可以總覽2016的web前端技術發展，會發現：

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

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

桌面應用領先級解決方案：Electron

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

移動端框架：React Native

最著名的CSS工具包：Bootstrap

基于函數式編程思想的狀態管理庫：Redux

強大靈活的圖表庫：D3

這彰顯了2016年JavaScript應用的全面性以及多樣性。

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

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

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

Vue.JS已經在很多大公司的生產環境投入使用（包括阿里巴巴，中國最大的電子商務公司），所以，你可以放心地使用它。

現在Vue.JS已經有一個相對成熟的生態體系，包括路由（vue-router）以及狀態管理庫（Vuex）。

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

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

準確地說，這里涉及兩種不同類型的框架：

全能型框架，創建一個現代web應用所需的特性全部有，包括路由、數據獲取、狀態管理。例如AngularJS，Angular 2，Ember或者Aurelia。

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

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

React以及它的競爭者

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

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

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

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

Angular 1 和 2

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

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

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

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

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

在2016，從未如此簡單去創建以及部署一個node.js應用，可利用：

Now

Webtask.io

Stdlib

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

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

Express

當你想用 node.js 寫一個web應用的時候，Express 經常會被認為web服務器的選擇之一。大多數 node.js 開發者對于它的設計哲學（核心很小，但可以通過各種中間件進行拓展）非常熟悉。

Koa

Koa的設計哲學與 Express 類似，只不過它使用了 ES6 中的 generators 來避免回調地獄問題。

Feathers

對于以“服務端導向”架構設計，Feathers是一個非常靈活的解決方案，很適合用來構建node.js 微服務。

Nodal

Nodal框架立志于解決連接到PostgreSQL數據庫的無狀態分布式服務問題。

Keystone

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

Sails

Sails是一個完全的MVC框架，靈感來源于Ruby on Rails（所以把它命名為Sails！）。它已經發布了挺長一段時間了，兼容各種類型的數據庫，SQL或者no-SQL。

Loopback

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

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

React是一個非常棒的UI庫，但是利用React配合現代web開發工作流工具需要很多配置。那么，怎么才能開始構建一個真實存在的應用呢？

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

創建React應用

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

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

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

React模板生成器

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

它允許開發者創建一個被稱為漸進式web應用（或者PWA）：web應用本地運行，使用了一種被稱為Service Worker的技術，你可以閱讀Nicolás Bevacqua所寫的這篇文章。

Next.js

Next.js，由來自Zeit忙碌的開發者所創建，擁有服務端渲染特性，可以通過此特性創建“萬能應用”（或者我們在2015年所說的同構應用），
這代表應用不管是在客戶端還是服務端都基本上可以運行同一套代碼。

JavaScript無處不在，現在你都可以使用web開發者的技術（HTML，JavaScript，CSS）來創建移動端應用。

React Native

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

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

Ionic

Ionic是“hybrid”應用概念的先鋒。本質上，它是基于Cordova來獲取移動設備的各種特性。它非常成熟，擁有一個龐大的生態系統。

NativeScript

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

以及······

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

我們現在這里討論的編譯器（或者“轉換器”）是指其將其他語言（或者JavaScript的超集）轉換JavaScript。它們將代碼轉換成“標準JavaScript”代碼，即瀏覽器（或者node.js）可以執行的代碼。

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

TypeScript

引領潮流的轉換器是TypeScript，它為web開發者帶來了Java以及C#開發者所使用的靜態類型。Angular 2 正是基于TypeScript增加了許多的特性（traction）。
這里也存在在JavaScript中使用類型的優勢與劣勢，你可以讀下面的兩篇文章來思考自己的觀點。

You Might Not Need TypeScript

TypeScript:the missing introduction

Babel

，同Webpack，Babel基本上已經成為一個標準工具，用來編譯ES6代碼以及使用類似React（JSX）類庫的模板。
最初，它只是用來編譯ES6，現在借助那些插件，已經成為一個用來做代碼轉換的更加通用的工具。

Flow

Flow并不是一個編譯器，它只是一個靜態類型檢測工具，用來“標注”JavaScript代碼。基本上，在代碼中使用Flow只是增加對于已知類型的注釋
（這里閱讀更多關于使用Flow去寫模塊）

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

CoffeeScript

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

在2016，很難想象一個web應用沒有經過任何構建過程。你經常需要通過構建來轉換模板以及優化資源，保證你的web應用在生產環境正常運行。

Wepack

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

Gulp

Gulp是一個通用任務運行器，可以用來處理任何形式（包括文件系統）的自動化過程，，所以，它并不是Webpack或者Browserify的直接競爭對手。

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

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

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

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

以及······

2017年一個模塊化處理工具正在崛起，它更強調性能問題，那就是rollup。

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

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

AVA

AVA，由多產的Sindre Sorhus創建，主要關注于性能（平行測試）以及ES6。AVA的語法與標準測試框架（例如Tape和Node-tap）相似。

Jest

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

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

關于IDE，不得不提2個最受歡迎的開源IDE是利用web技術開發的。

Visual Studio Code

在我們的統計結果中，微軟的Visual Studio Code獨占鰲頭。

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

Atom

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

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

Build sites like it"s 1995 像在1995年一樣那么簡單地開發網站。

靜態網頁很快，很強大并且很容易去維護。

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

Github pages

Gitlab pages

Netlify

Surge

Now static

Hexo

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

Gatsby

新的入局者Gatsby是一個非常有趣的解決方案，與競爭者不同，它利用React生態系統來生成靜態html文件。
你可以選擇與React組件、markdown文件以及服務端渲染整合，這使得它非常強大。

盡管JavaScript疲勞以及各種戲劇性的事件（還記得“left-pad”門吧？），2016年社區發展良好，Vue.JS以及React Native爆發，Yarn以及 Create React App新軍突起。

我們已經討論了2016年Github上面引領風尚的項目，但真正重要的是開發者的滿意程度。所以，如果你想要更多干貨，去查一下Sacha Greif的JavaScript現狀調查吧，收集了超過9000個回復！

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

這里是我挑選的10個項目，在2016年我很喜歡這些項目以及想法，2017年它們仍將蓬勃發展：

Vue.JS：勢頭正猛

Electron

Create React App

React Native

Gatsby

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

“漸進式網頁應用”概念

Node.js的“微服務”解決方案，能夠更好實現部署，例如Now

Node.js的升級：最新一版已經實現對ES6語法很好的支持

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