前端回顧：2016年 JavaScript 之星

　　JavasScript社群在創新的道路上開足了馬力，曾經流行過的也許一個月之後就過時了。2016已經結束了。你可能會想你是否錯過一些重要的東西？不用擔心，讓我們來回顧2016年前端有哪些主流。通過比較過去12個月裡Github所增加的star數，我們依次來看看哪些項目吸引了大多數眼光。

　　在2015，React是當之無愧的王者，Redux赢得了與flux之間的戰争，攻陷了Flux的城池。那麼，誰會是2016年的JavaScript之星呢？

您可能感興趣的相關文章

<a href="http://www.cnblogs.com/lhb25/p/amazing-jquery-effects.html" target="_blank">網站開發中很有用的 jQuery 效果【附源碼】</a>

<a href="http://www.cnblogs.com/lhb25/archive/2011/11/22/best-awesome-css3-animation-demos.html" target="_blank">分享35個讓人驚訝的 CSS3 動畫效果示範</a>

<a href="http://www.yyyweb.com/492.html" target="_blank">十分驚豔的8個 HTML5 &amp; JavaScript 特效</a>

<a href="http://www.cnblogs.com/lhb25/p/10-useful-web-effect.html">Web 開發中很實用的10個效果【源碼下載下傳】</a>

<a href="http://www.cnblogs.com/lhb25/archive/2013/01/06/jquery-image-carousel-effect.html" target="_blank">12款經典的白富美型 jQuery 圖檔輪播插件</a>

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

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

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排名第2，沒有一個前端會忽視React以及它那豐富的生态圈。

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

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

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

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應用，你會選擇哪一個架構？

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

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

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

Nodal架構立志于解決連接配接到PostgreSQL資料庫的無狀态分布式服務問題。

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

Sails是一個完全的MVC架構，靈感來源于Ruby on Rails（是以把它命名為Sails！）。它已經釋出了挺長一段時間了，相容各種類型的資料庫，SQL或者no-SQL。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

以及······

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

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

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

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

<a href="https://medium.com/javascript-scene/you-might-not-need-typescript-or-static-types-aa7cb670a77b#.1pn05vlis" target="_blank">You Might Not Need TypeScript</a>

<a href="https://toddmotto.com/typescript-the-missing-introduction" target="_blank">TypeScript:the missing introduction</a>

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

Flow并不是一個編譯器，它隻是一個靜态類型檢測工具，用來“标注”JavaScript代碼。基本上，在代碼中使用Flow隻是增加對于已知類型的注釋

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

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

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

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，由多産的Sindre Sorhus建立，主要關注于性能（平行測試）以及ES6。AVA的文法與标準測試架構（例如Tape和Node-tap）相似。

在2017年，它有可能成為最流行的測試架構。

Jest擁有很好的内置Mock資料能力，而其它的測試架構需要依賴類似于Sinon.js這樣的類庫。

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

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

它很好的整合了TypeScript以及node.js。一些開發者提到了開發速度的提升，這得感謝“IntelliSence”特性（整合了高亮以及自動補全）

它提供了很好的TypeScript和node.js的內建環境。一些開發者覺得這個IDE的“IntelliSense”功能（即高亮和自動補全）加快了開發速度。

提到“開源”和“微軟”，再也不是沖突的啦！

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

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

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

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

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

<a href="http://www.cnblogs.com/lhb25/p/10-useful-web-effect.html">Web 開發中很實用的10個效果【附源碼下載下傳】</a>

<a href="http://www.cnblogs.com/lhb25/archive/2012/08/08/ajax-jquery-pagination-plugin-tutorial.html" target="_blank">精心挑選的優秀jQuery Ajax分頁插件和教程</a>

<a href="http://www.yyyweb.com/271.html" target="_blank">12個讓人驚歎的的創意的 404 錯誤頁面設計</a>

<a href="http://www.cnblogs.com/lhb25/p/12-jquery-animation-plugins.html" target="_blank">讓網站動起來！12款優秀的 jQuery 動畫插件</a>

<a href="http://www.yyyweb.com/492.html" target="_blank">8個非常驚豔的 HTML5 和 JavaScript 特效</a>

<a target="_blank" href="http://www.cnblogs.com/lhb25/p/must-read-links-for-web-designers-and-developers-volume-12.html">Web 前端工程師和設計師必讀精華文章推薦</a>

<a href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/07/28/html5-awesome-single-page-sites-inspiration.html" target="_blank">酷！15個精美的 HTML5 單頁網站作品欣賞</a>

<a target="_blank" href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/11/22/best-awesome-css3-animation-demos.html">炫！35個讓人驚訝的 CSS3 動畫效果示範</a>

<a href="http://www.cnblogs.com/lhb25//lhb25/archive/2012/03/02/30-mind-blowing-parallax-scrolling-effect-websites.html" target="_blank">贊！30個與衆不同的優秀視差滾動效果網站</a>

<a target="_blank" href="http://www.cnblogs.com/lhb25//lhb25/archive/2012/01/13/25-outstanding-single-page-website-designs.html">靓！25個優秀的國外單頁網站設計作品欣賞</a>

<a target="_blank" href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/08/09/awesome-html5-and-javascript-effects.html">帥！8個驚豔的 HTML5 和 JavaScript 特效</a>

<a href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/06/27/35-exclusive-rainbow-colored-flash-websites.html" target="_blank">頂！35個很漂亮的國外 Flash 網站作品欣賞</a>

<a href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/08/24/outstanding-admin-panels-part-one.html" target="_blank">哇！34個漂亮網站和應用程式背景管理界面</a>

<a href="http://www.yyyweb.com/go/web" target="_blank">本部落格新站點 ◆ 前端裡 ◆ 歡迎圍觀：）</a>

歡迎任何形式的轉載，但請務必注明出處。