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

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

最受歡迎項(xiàng)目

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

Vue.js 蟬聯(lián)冠軍

1.png

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

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

• 首先，它學(xué)習(xí)曲線平緩，使用了與 React 相似語法更讓 WEB 開發(fā)者熟悉的組件方案；
• 發(fā)展良好的生態(tài)圈，社區(qū)中涌現(xiàn)出事實(shí)上的官方標(biāo)準(zhǔn)庫：路由 vue-router，狀態(tài)管理庫: Vuex；
• 把模板、邏輯和樣式放入單個(gè) .vue 文件中的單文件組件設(shè)計(jì)理念在模塊化代行其道的今天顯得非常親切；
• 被流行的 PHP 框架 Laravel 選為默認(rèn)的視圖引擎（View Engine）；
• 為 Evan You 個(gè)人維護(hù)，通過眾籌方式來獲取支持的開源項(xiàng)目，而不是由 Facebook 或 Google 這樣的互聯(lián)網(wǎng)巨頭來主導(dǎo)。

也許正因?yàn)樯鲜鲎詈笠稽c(diǎn)，Vue.js 在中國(guó)擁有大量的擁躉。不僅被中國(guó)最大的電商平臺(tái)阿里巴巴使用，也獲得了 GitLab 與 Adobe 這些公司青睞。

React 再次獲得亞軍

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

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

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

Axios

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

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

Puppeteer

Puppeteer 是今年的大事件之一，是 Google Chrome 團(tuán)隊(duì)開發(fā)的一個(gè)無界面 Chrome 瀏覽器，即一個(gè)在后臺(tái)運(yùn)行，且能被代碼驅(qū)動(dòng)和控制的瀏覽器。

它可作如下用途:

• 在真實(shí)瀏覽器中進(jìn)行自動(dòng)化界面測(cè)試；
• 用生成頁面快照的方式來實(shí)現(xiàn)服務(wù)端渲染；
• 利用 Google Chrome “保存為 PDF” 的功能生成PDF文件；

前端框架

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

前端框架.png

Vue、React、Angular 三足鼎立

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

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

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

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

• 頁面間的路由切換問題；
• 如何獲取數(shù)據(jù)；
• 如何把數(shù)據(jù)綁定到表單；
• 如何存儲(chǔ)應(yīng)用的狀態(tài)；

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

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

少即是多

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

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

類似的還有許多競(jìng)爭(zhēng)者，為了區(qū)別于三巨頭，它們?cè)跒g覽器的性能上下功夫，努力做出自己的特色。

Node.js 框架

node.png

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

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

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

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

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

• Fastify 是一個(gè)受 Hapi 啟發(fā)而開發(fā)的通用 Web 框架，也適合用作 JSON HTTP API 服務(wù)器；
• Server.js 注重于“開箱即用”的開發(fā)體驗(yàn)；
• Nest 是一個(gè)用 TypeScript 寫的框架，其模塊化和控制器組合的架構(gòu)設(shè)計(jì)，讓 Angular 用戶感到十分親切。

React 生態(tài)圈

react.png

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

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

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

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

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

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

Vue.js 生態(tài)圈

vue.png

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

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

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

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

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

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

移動(dòng)開發(fā)

移動(dòng)開發(fā).png

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

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

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

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

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

編譯工具：Compilers

編譯工具.png

這里我們將討論那些編譯到標(biāo)準(zhǔn) JavaScript 代碼的語言。

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

• 想立即使用最新的 JavaScript 語言特性，并把它應(yīng)用到盡可能多的瀏覽器中，這類需求讓 Babel 獲得了成功，很多項(xiàng)目都依賴于它；
• 想為語言添加新的特性，比如“類型檢查”；

對(duì) Javascript 程序員進(jìn)行分類有個(gè)熱門的問題是：你是用類型的，還是不用類型的？

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

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

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

構(gòu)建工具：Build Tools

構(gòu)建工具.png

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

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

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

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

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

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

在 React 博客中提到

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

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

測(cè)試框架

測(cè)試框架.png

正如我們去年預(yù)計(jì)的一樣 (這是我們第一次預(yù)測(cè)成功!)，Jest 成了今年測(cè)試框架類別中的王者。

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

Jest 有幾個(gè)大的閃光點(diǎn)：

• 無需配置，默認(rèn)地設(shè)定已經(jīng)滿足通常需求；
• 強(qiáng)大的開發(fā)者體驗(yàn) (智能觀察模式，直觀的錯(cuò)誤報(bào)告)；
• 語法上與 Mocha 很接近，許多程序員熟悉 describe 和 it 這樣的關(guān)鍵詞；
• 不需要額外的庫來創(chuàng)建 assertions，已全部?jī)?nèi)置；
• 獨(dú)特的”快照”模式可以作為重新運(yùn)行測(cè)試時(shí)的對(duì)比基準(zhǔn)；

AVA，去年的第一名，仍然有許多吸引人的特點(diǎn)。

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

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

IDE 和編輯器

IDE.png

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

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

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

• Git 集成功能；
• 自動(dòng)補(bǔ)全：JavaScript 語法，文件路徑進(jìn)行補(bǔ)全，npm 包名字等等；
• React 語法集成等；

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

CSS in JavaScript

CSS.png

目前 React 社區(qū)仍然沒有就如何有效管理組件樣式這個(gè)問題達(dá)成共識(shí)，即沒有標(biāo)準(zhǔn)的解決方案。

如果無需太多自定義的標(biāo)準(zhǔn)樣式，可以用 Material UI 或 Ant Design 這樣現(xiàn)成的組件工具包。如果需要更高度靈活的自定義，你仍然能使用傳統(tǒng)方式：用一個(gè)像 Bootstrap 或 Bulma 這樣的全局 CSS 樣式，通過修改組件的 className 屬性來達(dá)到目的。這樣做缺點(diǎn)是組件無法進(jìn)行自我樣式管理，因?yàn)闃邮椒植荚趩为?dú)的文件中。

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

概念本身很簡(jiǎn)單：既然我們?cè)?React 中己能通過 JavaScript 來同時(shí)控制邏輯和模板部分，何不再進(jìn)一步，連樣式也一并管理了呢？

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

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

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

靜態(tài)網(wǎng)站生成器

靜態(tài)網(wǎng)站生成器.png

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

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

• 快速瀏覽和導(dǎo)出速度；
• 主動(dòng)預(yù)加載機(jī)能；
• 智能代碼分解 (模板 + 網(wǎng)頁數(shù)據(jù))；

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

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

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

GraphQL

GraphQL.png

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

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

在這兩大庫的身后，像 Graphcool 這樣的公司也提供了大量的工具和庫，而 Vulcan 這樣的全?？蚣芤查_始采用 GraphQL 。

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

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

總結(jié)

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

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

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

但是如果讓我們?cè)u(píng)選2017 項(xiàng)目之星的話，那絕對(duì)是 Prettier。有了它，我們寫代碼時(shí)的再也不用擔(dān)心格式問題！

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

明年此時(shí)，你認(rèn)為誰將入圍 2018 年度的 JavaScript 明星項(xiàng)目？

• 一個(gè)基于 GraphQL 的新框架?
• 一個(gè)充分利用 WebAssembly 標(biāo)準(zhǔn)的庫, 用來打造瀏覽器上與眾不同的全新體驗(yàn)？

原網(wǎng)頁地址：http://www.yyyweb.com/5028.html#0-youdao-1-49829-3...