2017 年崛起的 JS 項目

共 4741 字，讀完需 8 分鐘，速讀 2 分鐘。我有幸參與了該項目的部分中文版翻譯、校對工做，感謝 Sacha Grief，Micheal Ramberu 的統計整理，以及 Frank Xu 的翻譯工做，完整版本請猛擊閱讀原文。javascript

和 2016年同樣，又到了咱們回顧 2017年 Javascript 領域發展與變化的時候。經過對比各項目過去 12 個月在 GitHub 上新增 star 數量，來評估其在 2017 年度的受關注程度，進而選出 2017 年度 JavaScript 領域崛起的明星項目。css

下列圖表對比了各個項目在 Github 上於過去 12 個月新增的 star 數量。分析的數據來源爲 bestof.js.org 網站，一個 WEB 領域優秀項目的精選網站。經過點擊項目，能夠查看更多信息。html

最受歡迎項目

下面是不分類別的 2017 年度最受歡迎 Javascript 項目，若是你時間很緊，看這部分就夠了。前端

Vue.js 蟬聯冠軍

Vue.js 再次強勢登頂年度排行榜冠軍，今年在 GitHub 上新增了超過 40K 的 star。相較於 2016 年的（26K star），今年 Vue.js 領先排行榜第 2 名（ React ）的優點更大了。vue

那麼，是什麼令 Vue.js 如此出衆？java

首先，它學習曲線平緩，使用了與 React 類似語法更讓 WEB 開發者熟悉的組件方案；
發展良好的生態圈，社區中涌現出事實上的官方標準庫：路由 vue-router，狀態管理庫: Vuex；
把模板、邏輯和樣式放入單個 .vue 文件中的單文件組件設計理念在模塊化代行其道的今天顯得很是親切；
被流行的 PHP 框架 Laravel 選爲默認的視圖引擎（View Engine）；
爲 Evan You 我的維護，經過衆籌方式來獲取支持的開源項目，而不是由 Facebook 或 Google 這樣的互聯網巨頭來主導。

也許正由於上述最後一點，Vue.js 在中國擁有大量的擁躉。不只被中國最大的電商平臺阿里巴巴使用，也得到了 GitLab 與 Adobe 這些公司青睞。node

React 再次得到亞軍

React 和 2016 同樣穩佔第二名，2017 年它在 GitHub 上得到了超過 27K star（再次明確下，此處咱們分析的是今年新增的 star 數量而非全部的 star 數量）。react

Create React App，是排行榜的季軍，已經成爲新建 React 項目的首選方式。它的大獲成功讓很多 React 樣板項目（React Boilerplates）慢慢淡出歷史舞臺。webpack

Dan Abramov（ Redux 做者，現就任於 Facebook）建立 Create React App 的確是作了一件了不得的工做，他在功能性與簡潔性之間取得了巧妙的平衡，好比，它沒有集成花哨的樣式解決方案（只使用了純粹的 CSS）和服務器端渲染，卻具備恰到好處的封裝，這些造就了良好的開發體驗。ios

Axios

Axios 庫是最普遍使用的 HTTP 客戶端。它能同時在用戶端（在用戶端發起 Ajax 請求）與服務器端（在 Node.js 環境中）使用。

Axios 的成功或許與 Vue.js 有比較大的關係，由於大量的 Vue.js 教程都使用它來發起 API 請求獲取數據。

Puppeteer

Puppeteer 是今年的大事件之一，是 Google Chrome 團隊開發的一個無界面 Chrome 瀏覽器，即一個在後臺運行，且能被代碼驅動和控制的瀏覽器。

它可做以下用途:

在真實瀏覽器中進行自動化界面測試；
用生成頁面快照的方式來實現服務端渲染；
利用 Google Chrome 「保存爲 PDF」的功能生成PDF文件；

前端框架

前端框架方面向來是兵家必爭之地，不過現在已呈三家鼎足分立，大局塵埃落定之勢。

Vue、React、Angular 三足鼎立

毫無疑問，目前公認的 3 大 UI 框架分別是 Vue.js，React 和 Angular 。

咱們習慣稱他們爲_框架_，但準確地講只有 Angular 是_框架_，Vue.js 和 React 應歸類爲_庫_。

前文中，咱們已經分析了 Vue.js 的成功因素和它的集成方案。

與 Vue.js 相對應的，React 方面卻依然處於碎片化的狀態，開發者須要根據自身項目的狀況，進行技術選型：

頁面間的路由切換問題；
如何獲取數據；
如何把數據綁定到表單；
如何存儲應用的狀態；

相反，Angular 生態圈則更可控也更穩定。有一種叫_Angular 準則_ 的最佳實踐用來指導開發。

這可能給人一種 Angular 對於多人協同工做更友好的印象。此外，隨着支持靜態類型的 TypeScript 加入，Angular 也勢必能獲得更多熟悉 C# 或 Java 的後端開發人員人觀注與青睞。

少便是多

在三巨頭以後，能很是有趣的發現第四名 Preact。

Preact 是一個 React 的小型替代解決方案：有相同的 API，卻只有 3KB 的大小。

相似的還有許多競爭者，爲了區別於三巨頭，它們在瀏覽器的性能上下功夫，努力作出本身的特點。

Node.js 框架

JavaScript 已不只僅侷限於 Web 前端應用，也被愈來愈多的人使用開發後端應用。Node.js 社區頗具備影響力的 Mikeal Rogers 作出了 Node.js 會在一年內超越 Java的預測。

和其餘語言都有事實上的標準框架不一樣的是（如 Ruby 有 Ruby on Rails，Python 有 Django，PHP 有 Laravel），目前基於 Node.js 寫服務端程序尚未一個你們都承認的標準框架。

Express 並非 2017 年度的 Node.js 框架分類排行冠軍，畢竟這個項目已經成立多年，但它已轉變爲許多框架和 CMS 的基礎組件，包括 Feathers、Keystone 和 Nest。

Express 的極簡主義設計彷佛完美地符合了當今微服務理念的發展趨勢：把一個大型程序解耦成幾個小的應用。

與去年相比, 今年有 3 個新面孔進入了 node.js 框架分類排行的 TOP 10：

Fastify 是一個受 Hapi 啓發而開發的通用 Web 框架，也適合用做 JSON HTTP API 服務器；
Server.js 注重於「開箱即用」的開發體驗；
Nest 是一個用 TypeScript 寫的框架，其模塊化和控制器組合的架構設計，讓 Angular 用戶感到十分親切。

React 生態圈

React 只專一於視圖層 (View Layer)，這在爲整個生態圈留下更多發展空間的同時，也爲自身快速向前發展創造了機會。這個分類下咱們會統計基於 React 和 React Native 構建的項目。

Create React App 經過集成優秀的預置和包，解決了新建 React 應用時要進行繁瑣複雜的配置問題。今年 Facebook 也繼續保持了頻繁更新的節奏，使他成爲目前 React 生態中最活躍的項目。

做爲 Create React App 的一個成功案例，咱們能夠看 StackBlitz，這是一個在線 IDE，經過 Create React App，讓你在數秒內就能夠在瀏覽器中建立一個應用。

即便 Create React App 已被默認爲 React 的新建工具包，開發者們仍然能夠有其它選項，例如 React boilerplate，這也是十分受人關注的項目，繼承了諸如 GraphQL 的不少有用功能。

Ant Design，Ant Design Pro 和 Material UI 是 React 組件的樣式工具集，它們能幫助程序員在新建應用時而再也不擔憂樣式問題。

第 10 名 Recompose 的人氣值也證實了開發者們喜歡 React 的緣由：它的「函數式」特性，一切皆函數。Recompose 提供了一全套的函數來幫助你走的更遠。

Vue.js 生態圈

特約撰稿人: Evan You，雖然咱們很欣賞 Vue.js，但不得不認可咱們並不太熟悉它的生態圈。爲此咱們找了一位專家來點評下今年 Vue.js 的發展狀況，那麼還有誰能比 Vue.js 做者更熟悉呢？

在 2017 年，伴隨着 Vue.js 用戶的增加，許多 Vue.js 生態圈中的項目也獲得了使人驚喜地快速成長。

Element 和 iView 是兩個最受歡迎的 UI 組件工具包，專一於桌面端 UI 界面的快速開發。而 Mint UI 與 vux 則相反，是移動端最受歡迎的 UI 工具包。

Vuetify 是一款功能最完備的能同時適用於移動端和桌面端的 Material Design 組件框架內置了包括服務端渲染、PWA、CLI 模板支持等諸多特性。

Nuxt 則是一款基於 Vue.js 的更高級的框架，它能讓咱們流暢地開發具有服務器端渲染能力的 Vue.js 應用，而它的通用性使咱們能用一樣的代碼庫來構建單頁引用，甚至生成靜態網站。

Weex 是一個能夠用 Vue.js 語法和 API 來進行原生渲染的移動桌面應用開發。它由阿里巴巴公司開發，並已運用於世界上一些最高頻使用的移動應用中，十分注重性能問題上的優化。

移動開發

無所不能的 JavaScript，天然可已用來編寫移動應用，這意爲着你能夠在 WEB 端與 Native 端複用你的組件。

在本分類中，咱們爲 3 大前端框架找到了對應的解決方案：

React: React Native
Vue：Weex 和 Quasar
Angular：Ionic 和 NativeScript

與 2016 年同樣，React Native 兩年蟬聯頭名，它能讓咱們使用把 JavaScript 編譯成可以運行在 iOS、Android 甚至是 Windows 系統的原生 APP 應用。

正如視頻使用 React Native 來跨平臺編譯APP中所特別強調的：「Write One, Run Everywhere」的承諾已經變成現實。

編譯工具：Compilers

這裏咱們將討論那些編譯到標準 JavaScript 代碼的語言。

一般狀況下，在搭建本身的構建工做流時須要編譯器可能有 2 個緣由：

想當即使用最新的 JavaScript 語言特性，並把它應用到儘量多的瀏覽器中，這類需求讓 Babel 得到了成功，不少項目都依賴於它；
想爲語言添加新的特性，好比「類型檢查」；

對 Javascript 程序員進行分類有個熱門的問題是：你是用類型的，仍是不用類型的？

JavaScript 自己帶有基本的動態類型，但缺少靜態類型。而不少開發者傾向於在代碼中使用類型，尤爲在大型項目中，由於這樣可讓代碼變得更爲健壯且易於閱讀和理解。

若是你須要類型，有兩個主流可選項：微軟的 TypeScript 和 Facebook 的 Flow（Facebook 在本身的主要項目 React，React Native，Jest 中都有使用)

你能夠從 James Kyle 的文章來感覺二者的區別: A Comparison Between Adopting Flow or TypeScript。

構建工具：Build Tools

構建工具分類中的排行冠軍是 Parcel，這或許是今年最大的驚喜，做爲一個 8 月份纔在 GitHub 上發佈的新項目卻已達到 14K 個 star 的關注度。

Parcel 不只提供現代前端開發所需的各類功能，還有個碾壓性的優點：零配置！這是它與依靠大量 "loaders" 的 Webpack 最大區別。

請別誤解數字，Webpack 依然是最流行的構建應用，它在 GitHub 上有 35K 的 star 和超 500 人的貢獻者。目前有許多項目使用了它，包括今年最流行的兩個項目：Create React App 和 Gatsby。

Webpack 不斷在迭代更新，2.0 版本可讓開發者經過動態加載的方式輕鬆實現「代碼分割」的功能。

Webpack 與 Parcel 同時定位於構建 WEB 應用，而 Rollup 則定位於庫的構建，它專一於 ES6 模塊的性能提高上。

Rollup 已被一些主流的庫使用，值得一提的是 React 團隊也在 2017 年把它們的構建系統從 Browserify 切換到了 Rollup。

在 React 博客中提到

Rollup 能夠預編譯而且集成到應用中，能與 React 之類類似的庫作到完美配合。

Poi 與 Parcel 有一樣的目標：一款現代網絡應用構建工具，它默認零配置但你能夠經過使用 preset 來擴展。

測試框架

正如咱們去年預計的同樣 (這是咱們第一次預測成功!)，Jest 成了今年測試框架類別中的王者。

Jest 最初是 Facebook 由於 React 組件測試目的而開發的，但最近幾個月革命性的版本變動（發佈了 22 個大版本）使得它如今能同時用於測試前端、後端代碼。

Jest 有幾個大的閃光點：

無需配置，默認地設定已經知足一般需求；
強大的開發者體驗 (智能觀察模式，直觀的錯誤報告)；
語法上與 Mocha 很接近，許多程序員熟悉 describe 和 it 這樣的關鍵詞；
不須要額外的庫來建立 assertions，已所有內置；
獨特的"快照"模式能夠做爲從新運行測試時的對比基準；

AVA，去年的第一名，仍然有許多吸引人的特色。

這個項目由 Sindre Sorhus 建立並在他全部的項目中使用，熟悉他的同窗確定知道這意味着什麼！

相較於 Jest，AVA 更側重於並行測試上的速度，更輕量，也更接近測試標準，語法上與測試框架 Tape 接近。

IDE 和編輯器

在這裏咱們討論的是利用 WEB 技術來構建的開源的代碼編輯器（ Sublime 粉絲們對不住了！）。

2016 年由微軟主導的 VS Code 與 GitHub 主導的 Atom 在本類別中齊頭並進。今年他們也依然處於領先地位，不過在互相較量中，VS Code 己領先它的對手一大截。

每月 VS Code 都會發布新版本，帶來更多實用 IDE 功能同時性能上卻沒有太大的損耗。即便不安裝任何插件，你也有一大堆開箱即用的功能：

Git 集成功能；
自動補全：JavaScript 語法，文件路徑進行補全，npm 包名字等等；
React 語法集成等；

此外，你能夠在編輯器中添加 Prettier 插件，這樣每次保存時它都會自動格式化文件，在這樣的編程環境下編碼真是一種享受。

CSS in JavaScript

目前 React 社區仍然沒有就如何有效管理組件樣式這個問題達成共識，即沒有標準的解決方案。

若是無需太多自定義的標準樣式，能夠用 Material UI 或 Ant Design 這樣現成的組件工具包。若是須要更高度靈活的自定義，你仍然能使用傳統方式：用一個像 Bootstrap 或 Bulma 這樣的全局 CSS 樣式，經過修改組件的 className 屬性來達到目的。這樣作缺點是組件沒法進行自我樣式管理，由於樣式分佈在單獨的文件中。

CSS in JavaScript 概念的出現便是爲了解決上述問題。

概念自己很簡單：既然咱們在 React 中己能經過 JavaScript 來同時控制邏輯和模板部分，何再也不進一步，連樣式也一併管理了呢？

Styled Components 是今年本類別的冠軍，它利用 JavasScript 最近新加入的模板字符串特性，讓開發者在 React 組件中直接使用標準的 CSS 語法編寫樣式。

CSS Modules，做爲本類別的亞軍，則採用了混合的解決方案。它讓開發者本身挑選諸如標準 CSS, SASS, NO slug Less, NO slug Stylus等方式編寫樣式，再以文件的方式導入到組件中。

Mark Dalgleish，CSS Modules 的做者，寫了一篇有意思的文章來闡述 CSS-in-JavaScript 解決方案：A Unified Styling Language。若是你對 CSS-in-Javascript 解決方案仍持懷疑態度的話，那此文絕對不容錯過。

靜態網站生成器

靜態網站生成器（SSG，Static Site Generator）是指可以生成一坨 HTML、CSS、JS 文件，方便你快速部署到 WEB 服務器上而不須要安裝和配置數據庫的工具。

靜態網站具備速度快，穩定且易於維護的特色。做爲 2016 年的亞軍，Gatsby 今年成功撥得頭籌。它新增了許多新功能來助你優化靜態網站：

快速瀏覽和導出速度；
主動預加載機能；
智能代碼分解 (模板 + 網頁數據)；

Gatsby 使用 React 來作視圖層(View Layer)，構建時候則用 GraphQL 來查詢內容。它有一個強大的社區而且 React 官網也是用 Gatsby 的來搭建的.

React Static 是本類別的新面孔。它從 Create React App 項目中得到靈感，定位於作一個輕量的 Gatsby 替代方案，專一於性能和簡潔。

此外，值得一提的是 Next.js 也能當靜態網站生成器來用。

GraphQL

在將來回顧 GraphQL 的歷史時，2017 年頗有可能會成爲一個轉折點。

像 the New York Times 這樣的大公司開始使用 GraphQL，Relay 和 Apollo (兩個主要的 GraphQL 客戶端框架) 也在今年發佈了兩個重要的版本更新。

在這兩大庫的身後，像 Graphcool 這樣的公司也提供了大量的工具和庫，而 Vulcan 這樣的全棧框架也開始採用 GraphQL 。

值得注意的是今年最有人氣的靜態網站生成器 Gatsby 也在數據處理中使用了 GraphQL 。

隨着愈來愈多的人加入到 GraphQL 陣營來, 能夠預見其在技術上普遍取代 REST 只是一個時間問題。

總結

但願咱們今年對 JavaScript 領域作出的回顧可以對你有所啓發。

能夠看到，Vue.js 兩年蟬聯冠軍而且沒有絲毫停下來的徵兆。

React 生態圈也最終解決了證書問題，繼續繁榮發展的勢頭。

可是若是讓咱們評選_2017 項目之星_的話，那絕對是 Prettier。有了它，咱們寫代碼時的不再用擔憂格式問題！

State of JavaScript 2017 survey 收集和分析了 23,000 位開發者的調研問卷，能幫助你從另外一個視角來解讀社區演化的方向。

明年此時，你認爲誰將入圍 2018 年度的 JavaScript 明星項目？

一個基於 GraphQL 的新框架?
一個充分利用 WebAssembly 標準的庫, 用來打造瀏覽器上不同凡響的全新體驗？

請把你的見解告訴咱們！最後，感謝您閱讀這篇文章，歡迎自由轉發。有任何問題或反饋請在 GitHub 上聯繫咱們！