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

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

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

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

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

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

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

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

發展良好的生態圈，社區中涌現出事實上的官方標準庫：路由 vue-router，狀態管理庫: Vuex；

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

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

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

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

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

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

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

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

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

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

它可作如下用途:

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

用生成頁面快照的方式來實現服務端渲染；

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

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

毫無疑問，目前公認的 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 的大小。

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

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 只專注于視圖層 (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 提供了一全套的函數來幫助你走的更遠。

特約撰稿人: 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” 的承諾已經變成現實。

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

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

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

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

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

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

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

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

構建工具分類中的排行冠軍是 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 接近。

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

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

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

Git 集成功能；

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

React 語法集成等；

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

目前 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 的歷史時，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 上聯系我們！