(譯 & 轉載) 2016 JavaScript 後起之秀

2016 JavaScript 後起之秀

本文轉載自：衆成翻譯
譯者：zxhycxq
連接：http://www.zcfy.cc/article/2410
原文：https://risingstars2016.js.org/

【譯者注：】因格式問題，圖片相關的內容，請參照英文原文：https://risingstars2016.js.org/

JavaScript 社區在創新方面全速前進，幾個月後，曾經的趨勢就會過期。

2016 已經結束了,你可能會想本身錯過了一些重要的東西？別擔憂,咱們正回顧一下主要的趨勢。

讓咱們看看 by the numbers 這個在2016年推進的項目，它比較了在過去12個月，Github上 增長 的 stars 數量。

在 2015年, React 成爲最大贏家 ， Flux 贏得了Flux實現的風暴之戰。

誰是2016年JavaScript後起之秀呢？

目錄

1. 2016最流行的項目

2. 前端框架

3. Node.js 框架

4. React Boilerplates

5. Mobile

6. 編譯器

7. 構建工具

8. 測試框架

9. IDE

10. 靜態網站生成器

下面的圖表對比了在過去12個月中，GitHub上 增長的 stars。

咱們分析了來自bestof.js.org （關於web平臺的最佳項目清單）的項目。

一、2016最流行的項目

回顧

經過檢查去年中最火的10個項目，你能夠獲得一個很好的關於2016年Web開發環境是怎麼樣的回顧，你會發現：

• 3個 UI 框架: Vue.JS, React 和 Angular 2

• 一個新的 node.js 包管理器: Yarn

• 構建桌面應用的領先解決方案: Electron

• 快速開始一個新 React 項目的方案A Create React App

• 移動框架: React Native

• 最有名的 CSS 工具包: Bootstrap

• 基於函數式的狀態管理庫 : Redux

• 一個強大而又靈活的圖標庫: D3

它講述了不少關於JavaScript在2016年無所不在和用途普遍的事。

2016年勝利者是...

Vue.JS 去年在 Github 上得到了超過25,000 個stars, 這意味着一天72個stars，這比包括React和Angular在內的其餘框架都多。

vue 2, 利用虛擬DOM的性能,在去年十月份發佈。

Vue.JS 被一些大公司（包括阿里巴巴-中國最大的電子商務公司）在生產中使用，因此，你能夠認爲這是一個安全的選擇。

它已經擁有至關成熟的生態系統，包括 router (vue-router) 和一個狀態管理庫 (Vuex).

看起來 Vue.JS 集 React (組件方法)和 AngularJS (由框架特點加強的html代碼模板)於一身.

---

2前端框架

前端框架類應該對 JavaScript 疲勞 負有必定責任。
看起來，每月一個新的競爭者出現併發出本身的聲音，推進創新的步伐！

確切地說，在這個類別中，混合了兩種類別的項目

• 包含全部功能的全能框架,建立現代web應用(路由, 數據獲取, 狀態管理). AngularJS, Angular 2, Ember 或者 Aurelia 均屬此類別。

• UI層更輕的解決方案, 如 React, Vue.JS, Inferno...

咱們已經注意到Vue.JS(整體第一),讓咱們看下其餘的競爭者。

React 和他的競爭者

React 位列第二,沒有前端開發者能夠忽視React和它的生態系統。

React 是如此地受歡迎，以致於它鼓舞了衆多其餘庫意圖取其精華，去其糟粕，旨在提升瀏覽器的性能和構建時間。

Inferno 是這個類別中最流行的項目,它聲稱是最快的可替代React的項目。

在咱們的排名中，緊跟 Inferno 以後， Preact也是一個良好的React 替代品。
它的生態系統至關成熟，例如，具備離線功能的模板、路由、模塊，以致於你能夠在你的項目中使用任何你Preact項目裏面的已存在的React庫。

Angular 1 和 2

Angular 項目分爲2 個庫，由於 Angular 2重寫了Angular 1，儘管一些概念保持相同。

Angular 2 用TypeScript編寫，利用ES6 實現現代化、完全的框架。

AngularJS是1.x的分支, 它仍然在許多項目中使用，並將在一段時間內保持流行。

值得注意的是 Ember, 儘管有強大的生態系統和社區，依然未進入前10.

如此看來, 與其選擇」開箱即用「的包含全部特徵的框架，
開發者們在2016年 ，更加喜歡選擇他們本身的解決方案，」按菜單點菜「。

三、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 生成器構建，避免有時被稱爲回調地獄的問題。

Feathers

Feathers是一種建立「面向服務」的體系結構的很是靈活的解決方案。
這是建立一個Node.js微服務不錯的選擇。

Nodal

Nodal 框架的目標是無狀態和分佈式服務鏈接到PostgreSQL數據庫。

Keystone

Keystone是我所知獲得一個管理客戶端運行的最佳解決方案之一 ，
目的是管理從MongoDB數據庫來的內容。
管理界面從模型自動生成，具備全部CRUD操做和友好的過濾器。

Sails

Sails是一個完整的MVC框架。
受Ruby on Rails的啓發（所以名爲Sails!）.他已經問世很長時間了。
能夠和任何類型的數據庫使用，SQL或no-SQL。

Loopback

Loopback是一個有不少的內置功能，包括須要token驗證的權限和鏈接到任何數據庫的另外一個成熟的框架。

他的殺手級特性是 API 探測功能，經過檢查任何用戶token的功能，以直觀的方式讓開發人員檢查全部API端點。
若是你必須構建一個API，這絕對是一個不錯的選擇。

---

四、React 模板生成器

React 是一個偉大的 UI 庫，但使用React和現代Web開發工做流工具須要大量的配置。
那麼如何開始建立一個真實世界的應用程序呢？
這是 React "模板生成器" 和其餘的「初學者工具包」給出的答案···

建立 React App

Facebook 經過提供一個輕鬆的叫作建立 React App方法實現須要，
這是使得啓動一個新 React 項目很是方便。

Dan Abramov （Redux的創造者，如今在Facebook工做）作了一項偉大的工做：
找到簡單和特徵之間的正確平衡。
例如，沒有花哨的樣式解決方案（只是簡單的CSS），沒有服務器端渲染，
但一切都被很好的打包，開發體驗很是棒。

與其競爭者的主要區別是，若是使用Create React App，它將成爲項目的依賴項，
全部的黑科技都是隱藏的，你看到的只是你的應用程序代碼。
您能夠隨時升級依賴關係，它不僅是一個開始。

React boilerplate

名爲React的樣板文件有您須要的一模板生成器切，
包括Redux和一些友好的離線功能，很好地利用了web工做者的技術優點。

它讓開發人員建立名爲漸進式web應用（或PWA）的Web應用程序：
使用名爲Service Worker的技術運行的離線Web應用程序，
閱讀來自 Nicolás Bevacqua的這篇文章 .

Next.js

Next.js由忙碌的Zeit人員建立，具備服務器端渲染特性，
可用於建立通用應用程序（或同構應用程序，如咱們在2015年所說），
亦即，在代碼客戶端和服務器端用差很少的代碼運行應用程序。

---

五、Mobile

JavaScript無處不在，你可使用已知的web開發技術 (HTML, JavaScript, CSS)構建原生移動應用。

React Native

經過React Native，在一樣的代碼基礎上，你能夠構建IOS和Android原生移動應用，
使用React開發人員熟悉的概念。
想了解更多關於構建IOS和Android應用，閱讀這個教程

其餘解決方案,基於 Cordova,依賴Webview來渲染屏幕，而且不如原生解決方案高效。
"一次編寫，處處運行"... 開發者夢想成真了!

Ionic

Ionic 是混合應用理念的先鋒，在底層，它基於Cordova來訪問移動設備功能。
它很是成熟，有着強大的生態系統。

NativeScript

NativeScript旨在實現與React Native相同的目標（使用Web技術構建真正的移動應用程序）。 它有兩種風格，NativeScript Core和NativeScript + Angular 2

展望將來..

一個在2017年密切關注的項目: Weex,
一個構建在Vue.JS之上的移動跨平臺UI框架。

六、編譯器

咱們在這裏談論生成任何語言（或JavaScript的超集）的JavaScript的編譯器（或「transpilers」）。
他們將代碼轉換爲瀏覽器（或node.js）能夠執行的「標準JavaScript」代碼。

例如，編譯器容許開發人員使用最新版本的JavaScript（ES6）編寫代碼，而沒必要擔憂瀏覽器支持。

TypeScript

最流行的轉譯器是 TypeScript,它帶給web開發者來自java和c#的靜態類型。
事實上， Angular 2使用TypeScript 增長了更多的特性。
這兒有關於在js中使用類型的利弊，閱讀這兩篇文章，提出你本身的觀點。

• 你也不併不須要 TypeScript

• TypeScript: the missing introduction

Babel

Babel與Webpack一塊兒，幾乎成爲編譯ES5代碼和標準JavaScript中的庫（如React（JSX））所使用的模板的標準。
最初建立的編譯ES6，它成爲一個更通用的工具，能夠完成任何代碼轉換，感謝這個插件系統。

Flow

Flow不是一個編譯器，它只是一個靜態類型檢測工具，用來「標註」JavaScript代碼。
在代碼中使用Flow只是增長對於意料之中類型的註釋（閱讀這裏更多關於使用Flow寫模塊）

它使用Facebook內部的源代碼項目，（React，React Native，Flux，Immutable，Jest等）Facebook成爲開源世界的主演之一。
這意味深長。

CoffeeScript

CoffeeScript和其精簡的語法，受 Python 和Ruby 語法啓發，但它在2016年不太流行，
大量的開發者經過使用Babel從 CoffeeScript 轉移到ES6。

七、構建工具

在 2016年,咱們很難想象一個沒有任何構建過程的Web應用。
一般須要一個構建過程來編譯模板和優化資源，以便在生產環境中運行Web應用程序。

Webpack

Webpack 是被用來構建單頁應用的主要工具，在React生態系統中運行，
新發布的版本2帶有一些有前途的加強功能（查看本文介紹 introduction）

Gulp

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

相似於 Grunt,Gulp經過聚合工做：你能夠要求它壓縮和合並一系列資源，但它不會像Webpack或Browserify那樣本身處理模塊化的JavaScript。

然而，它能夠很好地與webpack，即便開發人員傾向於使用npm腳本。

Browserify

Browserify,因爲其簡單的特性，一般深受node.js開發者的喜好。

基本上，它須要幾個node.js包做爲輸入，併爲瀏覽器生成一個單一的「構建」文件做爲輸出。
可是，彷佛像Webpack同樣的工具，更適合Web應用工做流。

展望將來...

在2017年應該關注的模塊管理器,它強調性能: rollup.

它使用ES6模塊及一個稱爲」Tree shaking 「功能建立bundle，
只包括您在代碼中使用到的功能，而非傳輸整個庫。

---

8測試框架

最有名的兩個測試框架是 Jasmine 和 Mocha， 但最近兩個項目在2016年有更多的吸引力: AVA 和 Jest.

AVA

AVA, 由多產的 Sindre Sorhus建立的強調性能（並行測試）和ES6。
AVA的語法接近標準測試框架，如Tape 和 Node-tap。

Jest

Jest,另外一個 Facebook 項目,
在過去幾周裏有不少吸引力。 在React社區衆所周知，愈來愈多的人轉向Jest（例如閱讀這個故事 ），

它可能成爲2017年最流行的測試框架。

Jest內置了良好的mocking 功能，而其餘測試框架一般依賴於[Sinon.JS]（http://sinonjs.org/）這樣的庫。

---

九、IDE

關於 IDE ，值得一提的是，最流行的兩個IDE是使用Web技術開發的開源項目。

Visual Studio Code

在咱們的調查結果中，微軟以Visual Studio Code帶路。

它提供了關於 TypeScript 和 node.js的良好整合.
一些開發人員提到開發速度的提高，感謝IntelliSense功能的改進(整合了高亮和自動完成).

微軟和開源在同一句話裏出現，沒毛病！

Atom

Atom, 由Github推出，
利用 Electron 建立（相似於其它的桌面應用，包括桌面客戶端），並不亞於Visual Stdio Code。

關於 Atom 有趣的事實是: 它主要的語言是 CoffeeScript!

---

十、靜態網站生成器

靜態網站生成器是生成一系列.html, .css 和 JavaScript文件的工具，
您能夠在任何簡單的web服務器（Apache或NGNX）上部署，而不用大驚小怪，或者設置數據庫或任何web框架。
正如比爾蓋茨所說：

Build sites like it's 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 疲勞™ 和 戲劇事件 (還記得 "leftpad gate"),
隨着如 Vue.JS 和 React Native項目的崛起，
以及新項目如 Yarn 或Create React App.
對社區而言，2016是一個偉大的年份,
咱們一直在談論2016年Github上的項目，可是更重要的是是開發者的滿意度。
那麼，若是你想了解更多，請看Sacha Greif的JavaScript現狀調查，
咱們已經收集了超過9,000份答卷。

是時候考慮2017年的後起之秀在哪裏了?

如下是我精選的10個項目，在2016年我喜歡這些項目和觀點，2017年將保持增加：

• vue.js勢頭將不會中止：

• Electron

• Create React App

• React Native

• Gatsby (用於構建這個頁面！)

• Yarn:一種快速、可靠和安全的依賴包，能夠代替NPM、可在這兒查閱node.js包管理工具的狀態

• 「漸進式web應用」概念

• Node.js的「微服務」解決方案，可以更好實現部署，例如Now

• Node.js的升級：最新一版對ES6語法有很好的支持

• 壓軸的是graphql：個人朋友告訴我，可能要搞個大新聞！