摘要：通過對比各項目過去個月在上新增數(shù)量，來評估其在年度的受關(guān)注程度，進而選出年度領(lǐng)域崛起的明星項目。也許正因為上述最后一點，在中國擁有大量的擁躉。不僅被中國最大的電商平臺阿里巴巴使用，也獲得了與這些公司青睞。

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

和 2016年 一樣，又到了我們回顧 2017年 Javascript 領(lǐng)域發(fā)展與變化的時候。
通過對比各項目過去 12 個月在 GitHub 上新增 star 數(shù)量，來評估其在 2017 年度的受關(guān)注程度，進而選出 2017 年度 JavaScript 領(lǐng)域崛起的明星項目。

下列圖表對比了各個項目在 Github 上于過去 12 個月新增的 star 數(shù)量。分析的數(shù)據(jù)來源為 bestof.js.org 網(wǎng)站 ，一個 WEB 領(lǐng)域優(yōu)秀項目的精選網(wǎng)站。通過點擊項目，可以查看更多信息。

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

Vue.js 再次強勢登頂年度排行榜冠軍，今年在 GitHub 上新增了超過 40K 的 star。相較于 2016 年的（26K star），今年 Vue.js 領(lǐng)先排行榜第 2 名（ React ）的優(yōu)勢更大了。

那么，是什么令 Vue.js 如此出眾？

首先，它學習曲線平緩，使用了與 React 相似語法更讓 WEB 開發(fā)者熟悉的組件方案；

發(fā)展良好的生態(tài)圈，社區(qū)中涌現(xiàn)出事實上的官方標準庫：路由 vue-router，狀態(tài)管理庫: Vuex；

把模板、邏輯和樣式放入單個 .vue 文件中的單文件組件設(shè)計理念在模塊化代行其道的今天顯得非常親切；

被流行的 PHP 框架 Laravel 選為默認的視圖引擎（View Engine）；

為 Evan You 個人維護，通過眾籌方式來獲取支持的開源項目，而不是由 Facebook 或 Google 這樣的互聯(lián)網(wǎng)巨頭來主導(dǎo)。

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

React 和 2016 一樣穩(wěn)占第二名，2017 年它在 GitHub 上獲得了超過 27K star（再次明確下，此處我們分析的是今年新增的 star 數(shù)量而非所有的 star 數(shù)量）。

Create React App，是排行榜的季軍，已經(jīng)成為新建 React 項目的首選方式。它的大獲成功讓不少 React 樣板項目（React Boilerplates）慢慢淡出歷史舞臺。

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

Axios 庫是最廣泛使用的 HTTP 客戶端。它能同時在用戶端（在用戶端發(fā)起 Ajax 請求）與服務(wù)器端（在 Node.js 環(huán)境中）使用。

Axios 的成功或許與 Vue.js 有比較大的關(guān)系，因為大量的 Vue.js 教程都使用它來發(fā)起 API 請求獲取數(shù)據(jù)。

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

它可作如下用途:

在真實瀏覽器中進行自動化界面測試；

用生成頁面快照的方式來實現(xiàn)服務(wù)端渲染；

利用 Google Chrome “保存為 PDF” 的功能生成PDF文件；

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

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

我們習慣稱他們?yōu)開框架_，但準確地講只有 Angular 是_框架_，Vue.js 和 React 應(yīng)歸類為_庫_。

前文中，我們已經(jīng)分析了 Vue.js 的成功因素和它的集成方案。

與 Vue.js 相對應(yīng)的，React 方面卻依然處于碎片化的狀態(tài)，開發(fā)者需要根據(jù)自身項目的情況，進行技術(shù)選型：

頁面間的路由切換問題；

如何獲取數(shù)據(jù)；

如何把數(shù)據(jù)綁定到表單；

如何存儲應(yīng)用的狀態(tài)；

相反，Angular 生態(tài)圈則更可控也更穩(wěn)定。有一種叫_Angular 準則_ 的最佳實踐用來指導(dǎo)開發(fā)。

這可能給人一種 Angular 對于多人協(xié)同工作更友好的印象。此外，隨著支持靜態(tài)類型的 TypeScript 加入，Angular 也勢必能得到更多熟悉 C# 或 Java 的后端開發(fā)人員人觀注與青睞。

在三巨頭之后，能非常有趣的發(fā)現(xiàn)第四名 Preact。

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

類似的還有許多競爭者，為了區(qū)別于三巨頭，它們在瀏覽器的性能上下功夫，努力做出自己的特色。

JavaScript 已不僅僅局限于 Web 前端應(yīng)用，也被越來越多的人使用開發(fā)后端應(yīng)用。Node.js 社區(qū)頗具有影響力的 Mikeal Rogers 做出了 Node.js 會在一年內(nèi)超越 Java的預(yù)測。

和其他語言都有事實上的標準框架不同的是（如 Ruby 有 Ruby on Rails，Python 有 Django，PHP 有 Laravel），目前基于 Node.js 寫服務(wù)端程序還沒有一個大家都認可的標準框架。

Express 并不是 2017 年度的 Node.js 框架分類排行冠軍，畢竟這個項目已經(jīng)成立多年，但它已轉(zhuǎn)變?yōu)樵S多框架和 CMS 的基礎(chǔ)組件，包括 Feathers、Keystone 和 Nest。

Express 的極簡主義設(shè)計似乎完美地符合了當今微服務(wù)理念的發(fā)展趨勢：把一個大型程序解耦成幾個小的應(yīng)用。

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

Fastify 是一個受 Hapi 啟發(fā)而開發(fā)的通用 Web 框架，也適合用作 JSON HTTP API 服務(wù)器；

Server.js 注重于“開箱即用”的開發(fā)體驗；

Nest 是一個用 TypeScript 寫的框架，其模塊化和控制器組合的架構(gòu)設(shè)計，讓 Angular 用戶感到十分親切。

React 只專注于視圖層 (View Layer)，這在為整個生態(tài)圈留下更多發(fā)展空間的同時，也為自身快速向前發(fā)展創(chuàng)造了機會。這個分類下我們會統(tǒng)計基于 React 和 React Native 構(gòu)建的項目。

Create React App 通過集成優(yōu)秀的預(yù)置和包，解決了新建 React 應(yīng)用時要進行繁瑣復(fù)雜的配置問題。今年 Facebook 也繼續(xù)保持了頻繁更新的節(jié)奏，使他成為目前 React 生態(tài)中最活躍的項目。

作為 Create React App 的一個成功案例，我們可以看 StackBlitz，這是一個在線 IDE，通過 Create React App，讓你在數(shù)秒內(nèi)就可以在瀏覽器中創(chuàng)建一個應(yīng)用。

即使 Create React App 已被默認為 React 的新建工具包，開發(fā)者們?nèi)匀豢梢杂衅渌x項，例如 React boilerplate，這也是十分受人關(guān)注的項目，繼承了諸如 GraphQL 的很多有用功能。

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

第 10 名 Recompose 的人氣值也證明了開發(fā)者們喜歡 React 的原因：它的“函數(shù)式”特性，一切皆函數(shù)。Recompose 提供了一全套的函數(shù)來幫助你走的更遠。

特約撰稿人: Evan You，雖然我們很欣賞 Vue.js，但不得不承認我們并不太熟悉它的生態(tài)圈。為此我們找了一位專家來點評下今年 Vue.js 的發(fā)展情況，那么還有誰能比 Vue.js 作者更熟悉呢？

在 2017 年，伴隨著 Vue.js 用戶的增長，許多 Vue.js 生態(tài)圈中的項目也得到了令人驚喜地快速成長。

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

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

Nuxt 則是一款基于 Vue.js 的更高級的框架，它能讓我們流暢地開發(fā)具備服務(wù)器端渲染能力的 Vue.js 應(yīng)用，而它的通用性使我們能用同樣的代碼庫來構(gòu)建單頁引用，甚至生成靜態(tài)網(wǎng)站。

Weex 是一個可以用 Vue.js 語法和 API 來進行原生渲染的移動桌面應(yīng)用開發(fā)。它由阿里巴巴公司開發(fā)，并已運用于世界上一些最高頻使用的移動應(yīng)用中，十分注重性能問題上的優(yōu)化。

無所不能的 JavaScript，自然可已用來編寫移動應(yīng)用，這意為著你可以在 WEB 端與 Native 端復(fù)用你的組件。

在本分類中，我們?yōu)?3 大前端框架找到了對應(yīng)的解決方案：

React: React Native

Vue：Weex 和 Quasar

Angular：Ionic 和 NativeScript

與 2016 年一樣，React Native 兩年蟬聯(lián)頭名，它能讓我們使用把 JavaScript 編譯成能夠運行在 iOS、Android 甚至是 Windows 系統(tǒng)的原生 APP 應(yīng)用。

正如視頻 使用 React Native 來跨平臺編譯APP中所特別強調(diào)的：“Write One, Run Everywhere” 的承諾已經(jīng)變成現(xiàn)實。

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

通常情況下，在搭建自己的構(gòu)建工作流時需要編譯器可能有 2 個原因：

想立即使用最新的 JavaScript 語言特性，并把它應(yīng)用到盡可能多的瀏覽器中，這類需求讓 Babel 獲得了成功，很多項目都依賴于它；

想為語言添加新的特性，比如“類型檢查”；

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

JavaScript 本身帶有基本的動態(tài)類型，但缺乏靜態(tài)類型。而很多開發(fā)者傾向于在代碼中使用類型，尤其在大型項目中，因為這樣可以讓代碼變得更為健壯且易于閱讀和理解。

如果你需要類型，有兩個主流可選項：微軟的 TypeScript 和 Facebook 的 Flow（Facebook 在自己的主要項目 React，React Native，Jest 中都有使用)

你可以從 James Kyle 的文章來感受兩者的區(qū)別: A Comparison Between Adopting Flow or TypeScript。

構(gòu)建工具分類中的排行冠軍是 Parcel，這或許是今年最大的驚喜，作為一個 8 月份才在 GitHub 上發(fā)布的新項目卻已達到 14K 個 star 的關(guān)注度。

Parcel 不僅提供現(xiàn)代前端開發(fā)所需的各種功能，還有個碾壓性的優(yōu)勢：零配置！這是它與依靠大量 "loaders" 的 Webpack 最大區(qū)別。

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

Webpack 不斷在迭代更新，2.0 版本可以讓開發(fā)者通過動態(tài)加載的方式輕松實現(xiàn)“代碼分割”的功能。

Webpack 與 Parcel 同時定位于構(gòu)建 WEB 應(yīng)用，而 Rollup 則定位于庫的構(gòu)建，它專注于 ES6 模塊的性能提升上。

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

在 React 博客中提到

Rollup 可以預(yù)編譯并且集成到應(yīng)用中，能與 React 之類相似的庫做到完美配合。

Poi 與 Parcel 有同樣的目標：一款現(xiàn)代網(wǎng)絡(luò)應(yīng)用構(gòu)建工具，它默認零配置但你可以通過使用 preset 來擴展。

正如我們?nèi)ツ觐A(yù)計的一樣 (這是我們第一次預(yù)測成功!)，Jest 成了今年測試框架類別中的王者。

Jest 最初是 Facebook 因為 React 組件測試目的而開發(fā)的，但最近幾個月革命性的版本變更（發(fā)布了 22 個大版本）使得它現(xiàn)在能同時用于測試前端、后端代碼。

Jest 有幾個大的閃光點：

無需配置，默認地設(shè)定已經(jīng)滿足通常需求；

強大的開發(fā)者體驗 (智能觀察模式，直觀的錯誤報告)；

語法上與 Mocha 很接近，許多程序員熟悉 describe 和 it 這樣的關(guān)鍵詞；

不需要額外的庫來創(chuàng)建 assertions，已全部內(nèi)置；

獨特的"快照"模式可以作為重新運行測試時的對比基準；

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

這個項目由 Sindre Sorhus 創(chuàng)建并在他所有的項目中使用，熟悉他的同學肯定知道這意味著什么！

相較于 Jest，AVA 更側(cè)重于并行測試上的速度，更輕量，也更接近測試標準，語法上與測試框架 Tape 接近。

在這里我們討論的是利用 WEB 技術(shù)來構(gòu)建的開源的代碼編輯器（ Sublime 粉絲們對不住了！）。

2016 年由微軟主導(dǎo)的 VS Code 與 GitHub 主導(dǎo)的 Atom 在本類別中齊頭并進。今年他們也依然處于領(lǐng)先地位，不過在互相較量中，VS Code 己領(lǐng)先它的對手一大截。

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

Git 集成功能；

自動補全：JavaScript 語法，文件路徑進行補全，npm 包名字等等；

React 語法集成等；

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

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

如果無需太多自定義的標準樣式，可以用 Material UI 或 Ant Design 這樣現(xiàn)成的組件工具包。如果需要更高度靈活的自定義，你仍然能使用傳統(tǒng)方式：用一個像 Bootstrap 或 Bulma 這樣的全局 CSS 樣式，通過修改組件的 className 屬性來達到目的。這樣做缺點是組件無法進行自我樣式管理，因為樣式分布在多帶帶的文件中。

CSS in JavaScript 概念的出現(xiàn)即是為了解決上述問題。

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

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

CSS Modules，作為本類別的亞軍，則采用了混合的解決方案。它讓開發(fā)者自己挑選諸如標準 CSS, SASS, NO slug Less, NO slug Stylus等方式編寫樣式，再以文件的方式導(dǎo)入到組件中。

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

靜態(tài)網(wǎng)站生成器（SSG，Static Site Generator）是指能夠生成一坨 HTML、CSS、JS 文件，方便你快速部署到 WEB 服務(wù)器上而不需要安裝和配置數(shù)據(jù)庫的工具。

靜態(tài)網(wǎng)站具有速度快，穩(wěn)定且易于維護的特點。作為 2016 年的亞軍，Gatsby 今年成功撥得頭籌。它新增了許多新功能來助你優(yōu)化靜態(tài)網(wǎng)站：

快速瀏覽和導(dǎo)出速度；

主動預(yù)加載機能；

智能代碼分解 (模板 + 網(wǎng)頁數(shù)據(jù))；

Gatsby 使用 React 來做視圖層(View Layer)，構(gòu)建時候則用 GraphQL 來查詢內(nèi)容。它有一個強大的社區(qū)并且 React 官網(wǎng)也是用 Gatsby 的來搭建的.

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

此外，值得一提的是 Next.js 也能當靜態(tài)網(wǎng)站生成器來用。

在未來回顧 GraphQL 的歷史時，2017 年很有可能會成為一個轉(zhuǎn)折點。

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

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

值得注意的是今年最有人氣的靜態(tài)網(wǎng)站生成器 Gatsby 也在數(shù)據(jù)處理中使用了 GraphQL 。

隨著越來越多的人加入到 GraphQL 陣營來, 可以預(yù)見其在技術(shù)上廣泛取代 REST 只是一個時間問題。

希望我們今年對 JavaScript 領(lǐng)域做出的回顧能夠?qū)δ阌兴鶈l(fā)。

可以看到，Vue.js 兩年蟬聯(lián)冠軍并且沒有絲毫停下來的征兆。

React 生態(tài)圈也最終解決了證書問題，繼續(xù)繁榮發(fā)展的勢頭。

但是如果讓我們評選_2017 項目之星_的話，那絕對是 Prettier。有了它，我們寫代碼時的再也不用擔心格式問題！

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

明年此時，你認為誰將入圍 2018 年度的 _JavaScript 明星項目_？

一個基于 GraphQL 的新框架?

一個充分利用 WebAssembly 標準的庫, 用來打造瀏覽器上與眾不同的全新體驗？

請把你的看法告訴我們！最后，感謝您閱讀這篇文章，歡迎自由轉(zhuǎn)發(fā)。有任何問題或反饋請在 GitHub 上聯(lián)系我們！