2016-JavaScript之星

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

原文連接

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

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

經過比較過去12個月裏Github所增長的star數，咱們依次來看看哪些項目吸引了大多數眼光。

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

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

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

1. 2016最流行項目

經過比較去年最火的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模板加強語法）的精華。

2. 前端框架

這個前端框架清單多是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年開發者們更青睞輕量型框架，更願意自定義解決方案。

3. Node.js 框架

在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，它會是很好的選擇。

4. React模板生成器

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年所說的同構應用），
這表明應用無論是在客戶端仍是服務端都基本上能夠運行同一套代碼。

5. Mobile

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框架。

6. 編譯器

咱們如今這裏討論的編譯器（或者「轉換器」）是指其將其餘語言（或者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。

7. 構建工具

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

Wepack

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

Gulp

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

相似於Grunt，Gulp經過整合任務的方式工做：你可讓它壓縮合並一系列的資源。但它跟Webpack以及Browserify不一樣，並不處理模塊化的JavaSript代碼。

但它能夠與Webpack很好地配合使用，即便開發更願意使用npm scripts。

Browserify

Browserify，因爲其簡便性，不少node.js開發者喜歡它。

大致上，它會利用幾個node.js包來生成一個簡單的構建後的文件做爲輸出。但看起來，一個相似Webpack這種自主配置更強的工具更適用於web應用開發工做。

以及······

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

它使用了具備被稱做「Tree shaking」的特性ES6模塊來建立bundle，裏面只有在你代碼中使用的函數，而不是一整個類庫。

8. 測試框架

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

AVA

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

Jest

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

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

9. IDE

關於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編寫的！

10. 靜態網頁生成器

靜態網頁生成器（或者被稱爲「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：全部的朋友都告訴我，將有大事發生！