JavaScript 滲透的范圍越來(lái)越廣，它能做的事情已經(jīng)遠(yuǎn)不止前端開(kāi)發(fā)而已。不久前 stateofjs.com 剛剛發(fā)布了 2017 JavaScript 現(xiàn)狀報(bào)告，現(xiàn)在 Ryan Chartrand 非常應(yīng)景地推出了2018 年的 JavaScript 發(fā)展趨勢(shì)，把這兩份文章一起結(jié)合來(lái)看，相信作為 JS 開(kāi)發(fā)者的你一定不再迷茫。

　　去年，有 50000 人對(duì) JavaScript 的上升趨勢(shì)感到好奇......

　　那么好吧，我的開(kāi)發(fā)者同胞們，現(xiàn)在我們?cè)賮?lái)看看 2018 年怎樣。

　　如果你 2017 年一整年都與世隔絕或者忙于項(xiàng)目而自顧不暇的話，這篇文章就是給你準(zhǔn)備的。

　　2017 年發(fā)生的很多事情正在為 2018 年的許多行動(dòng)和創(chuàng)新做好準(zhǔn)備。你還可以把本文用作規(guī)劃個(gè)人成長(zhǎng)的指南，來(lái)推出更具創(chuàng)新性的項(xiàng)目。

　　React vs. Vue.js

　　我們開(kāi)門見(jiàn)山，直接上好東西吧：認(rèn)為 Vue 可能會(huì)成為 React 的一大競(jìng)爭(zhēng)敵手的人不是很多，但是今年想要無(wú)視 Vue 是不可能的，在開(kāi)發(fā)者的炒作方面甚至令 Angular 黯然失色。

　　展望 2018 年的時(shí)候，我們即將迎來(lái) 2 年的激烈競(jìng)爭(zhēng)，而對(duì) Vue 的炒作會(huì)非常多。

　　React 有著全球最富有公司之一的財(cái)政支持，更不用說(shuō)他們還有極其有才的維護(hù)人員。

　　但是 Vue 做了下面這些讓開(kāi)發(fā)者真心高興的事：

• Vue 輕量，容易學(xué)習(xí)，有著令人難以置信的工具，有很棒的狀態(tài)管理和路由內(nèi)置（?。┑鹊?。

　　Vue 的社區(qū)當(dāng)然還沒(méi)有 React 那么大，但從核心團(tuán)隊(duì)是否有很好的使者并且是否傾聽(tīng)客戶來(lái)看，這個(gè)社區(qū)正在壯大。

　　談到取悅開(kāi)發(fā)者，不要忘了 Facebook 今年在 BSD+Patents 的收錢事件中遭遇的史詩(shī)般的失敗，這惹惱了不少的開(kāi)發(fā)者。

　　我們現(xiàn)在其實(shí)已經(jīng)發(fā)展到你一樣可以通過(guò) Vue 啟動(dòng)任何項(xiàng)目來(lái)讓自己生活變得簡(jiǎn)單的程度，這是他們的核心團(tuán)隊(duì)取得的一項(xiàng)令人印象深刻的成就。

　　這里有一篇文章對(duì) React、Vue 和 Angular 進(jìn)行了很好的對(duì)比。

　　最終可能會(huì)發(fā)展成什么樣子？Facebook 會(huì)做它最擅長(zhǎng)的東西：抄襲創(chuàng)新者然后世界繼續(xù)使用 React。

　　如果你是一位拒絕學(xué)習(xí) React 的 Angular 開(kāi)發(fā)者，隨著 Angular 的機(jī)會(huì)日漸消亡，Vue 應(yīng)該迅速成為你職業(yè)生涯更好的選項(xiàng)（而且 Vue 的部分語(yǔ)法跟 Angular 類似）。

　　每一位 JS 開(kāi)發(fā)者都仍然應(yīng)該考慮學(xué)習(xí) Vue.js，因?yàn)樗呀?jīng)制造了足夠大的水花，現(xiàn)在我們開(kāi)始看到對(duì) Vue.js 開(kāi)發(fā)者的需求出現(xiàn)，這意味著至少在短期內(nèi)你能夠?yàn)樽约簞?chuàng)造一些價(jià)值。

　　Next.js

　　然后就是 Next.js，我們稱之為“React 的保險(xiǎn)”。

　　盡管 Facebook 從未在這場(chǎng)游戲中領(lǐng)先過(guò)，并且在創(chuàng)新的勢(shì)頭上無(wú)法與 Vue 匹敵，但在工具使用、代碼切割、路由以及狀態(tài)管理方面，React 加上 Next.js 能讓你在體驗(yàn)上跟 Vue 接近許多，此外還能讓你獲得大規(guī)模的 React 生態(tài)體系和支持。

　　Next 對(duì)于用 React 開(kāi)發(fā)的 server-side 為主的應(yīng)用也特別有用，二者在應(yīng)用已經(jīng)日益成為趨勢(shì)。

　　此外，再加上 Now.js（由同一支團(tuán)隊(duì)開(kāi)發(fā)）你就能得到超級(jí)快速的部署 React 應(yīng)用的方式。

　　隨著 Vue 與 React 之爭(zhēng)的延續(xù)，預(yù)計(jì)會(huì)看到越來(lái)越多 Next 與 React 的雙劍合璧，這會(huì)讓 React 陣營(yíng)的每個(gè)人都感覺(jué)舒服一點(diǎn)。

　　Angular

　　盡管 Angular 越來(lái)越難以取悅開(kāi)發(fā)者，它仍將是 2018 年廣受采用的框架之一。

　　許多公司采用了 Angular 1.0，隨著 2018-19 年間他們尋求移植到更好的框架，這些會(huì)關(guān)注 React 或者 Vue 會(huì)不會(huì)是 Angular 2 更好的替代。

　　Angular 剩下的擁護(hù)者已經(jīng)表態(tài)說(shuō) Angular 會(huì)成為企業(yè)選擇的 JS 框架，但這一斷言尚有待證實(shí)，而且在 2018 年未必能得到證實(shí)。

　　這里有你需要了解的 2017 年有關(guān) Angular 的一切。

　　Reason

　　Facebook 生產(chǎn)使用的一切永遠(yuǎn)都值得關(guān)注。

　　Facebook 現(xiàn)在用 Reason 來(lái)開(kāi)發(fā) web 版的 Facebook Messenger 以及其他項(xiàng)目（Whatsapp、Instagram、Ads 等）。

　　2017 年，他們還推出了 reason-react，將 reason 跟 Reacy 綁定在一起，這樣你就可以寫出可編譯成慣用 ReactJS 的 Reason 代碼。

　　所以你可想象一下，不需要安裝 Babel（+許多插件）、Flow 等，只需要 OCaml + Reason（現(xiàn)在已經(jīng)支持 React 綁定）即可的強(qiáng)大。這是一個(gè)有待開(kāi)發(fā)的一大趨勢(shì)。

　　在 JS 領(lǐng)域 Reason 今年獲得的注意力要比大部分的編譯成 js 型語(yǔ)言多很多，所以這絕對(duì)是 2018 年值得繼續(xù)關(guān)注的趨勢(shì)之一。

　　GraphQL

　　GraphQL 是 API 的查詢語(yǔ)言（可以看成是 REST 的現(xiàn)代版）。

　　GraphQL 沒(méi)有辜負(fù) 2017 年的炒作，像 Yelp、Spotify、Github、沃爾瑪、《紐約時(shí)報(bào)》等主流公司都在采用 GraphQL，而且現(xiàn)在還有了基于 GraphQL 的 API。

　　其中一些 API 甚至是專門支持 GraphQL 的，甚至連 REST 選項(xiàng)都沒(méi)有。簡(jiǎn)而言之：創(chuàng)新公司正在押注到 GraphQL 身上。RESTful API 當(dāng)然還遠(yuǎn)沒(méi)到滅亡的地步，但再次地，看看初創(chuàng)企業(yè)的使用趨勢(shì)就知道 GraphQL 是個(gè)熱門選項(xiàng)。

　　另一方面，像 Falcor 這樣的替代者幾乎連討論的聲音都沒(méi)有了。

　　如果你想在創(chuàng)新公司找份工作的話，現(xiàn)在絕對(duì)是開(kāi)始學(xué)習(xí) GraphQL 的時(shí)候。

　　Redux、Relay Modern 以及 Apollo

　　Redux 是一直很火的 Dan Abramov/Andrew Clark 項(xiàng)目，后來(lái)有迅速成為 React 狀態(tài)管理和數(shù)據(jù)抓取的首選解決方案。

　　但 GraphQL 改變了現(xiàn)狀，主要是在數(shù)據(jù)抓取方面。

　　我們現(xiàn)在有了 Relay Modern （Facebook 開(kāi)發(fā)）和 Apollo，讓你可以比 Redux 更高效地抓取并傳遞 GraphQL 數(shù)據(jù)到 React 應(yīng)用的 GraphQL 客戶端框架。

　　但就像一位開(kāi)發(fā)者指出那樣，Relay/Apollo/Redux：

這些框架和它們的好處未必需要是互斥的。實(shí)際上，這幾個(gè)一起使用可以提供很好的關(guān)注分離，這是 web 開(kāi)發(fā)來(lái)說(shuō)可太重要了。

　　這意味著你仍然可以跟 Relay 一起用 Redux，Redux 用于本地狀態(tài)管理以及一些復(fù)雜的非服務(wù)器狀態(tài)，然后由 Relay 來(lái)抓取。

　　但是社區(qū)對(duì)簡(jiǎn)化這個(gè)的東西（目前為止唯一的答案是 Vue.js 或者 Cashay）比較焦慮。

　　Storybook

　　哇哦，2017 年 Storybook 真的是火了。

　　Storybook 是一個(gè)定義、開(kāi)發(fā)和測(cè)試 UI 組件的環(huán)境。

　　它從年初的幾乎一潭死水變成年中的大規(guī)模流行，這要感謝社區(qū)的巨大努力。這是一個(gè)極其激勵(lì)人的故事，展現(xiàn)出了開(kāi)源工作應(yīng)該如何演進(jìn)，它的故事真的值得一讀。

　　Storybook 太有用了（而且用起來(lái)也很有趣），你可以單獨(dú)地開(kāi)放和測(cè)試 UI。它就像一本實(shí)時(shí)的 UI 設(shè)計(jì)指南，能夠?yàn)殚_(kāi)發(fā)者提供真正的價(jià)值。

　　你可能已經(jīng)碰到過(guò)用 Storybook 來(lái)設(shè)計(jì)的開(kāi)源項(xiàng)目了，但如果想自己看看它是怎么用的話，那就看看用 Storybook 設(shè)計(jì)的 Airbnb 的日期選擇器。

　　作為開(kāi)發(fā)者如果你想在 2018 年脫穎而出，那就在面試的時(shí)候用 Storybook 展示你的最新項(xiàng)目。

　　額外提示：建議你也看看 react-bluekit，這是 Storybook 的替代，Netflix 的工程團(tuán)隊(duì)用來(lái)設(shè)計(jì)他們的組件庫(kù)。

　　Prettier

　　就像它的名字一樣，Prettier 是一個(gè)代碼格式化程序，可以讓你的代碼可讀性更強(qiáng)，并且很好看。

foo (reallyLongArg ()， omgSoManyParameters ()， IShouldRefactorThis ()， isThereSeriouslyAnotherOne ());

　　變成：

foo (
reallyLongArg (),
omgSoManyParameters (),
IShouldRefactorThis (),
isThereSeriouslyAnotherOne ()
);

　　這個(gè)東西在 GitHub 上面得到了 18000 顆星，開(kāi)發(fā)者都很喜歡這個(gè)簡(jiǎn)單又有價(jià)值的項(xiàng)目。

　　它還被用到了許多其他你熱愛(ài)的項(xiàng)目上，比如 Webpack、React、Next.js、Babel 等。

　　再次地，你可以成為一名 Go 開(kāi)發(fā)者，這樣就不用安裝這個(gè)也能享受它的功能了。

　　Jest 和 Enzyme

　　說(shuō)到 JavaScript 測(cè)試，Jest 無(wú)疑是領(lǐng)先的那個(gè)，而 Enzyme 則是很好的補(bǔ)充，尤其是在開(kāi)發(fā) React 應(yīng)用的時(shí)候。

　　就像你在這里看到一樣，在下載方面 Jest 現(xiàn)在統(tǒng)治著 Jasmine。

　　Jest 的 Snapshots 功能在 2017 年真的起來(lái)了，使得處理測(cè)試的痛苦少量很多。你可以看看 React Conf 2017 的這次演講來(lái)了解它的一切。

　　由 Airbnb 工程團(tuán)隊(duì)開(kāi)發(fā)的 Enzyme 是一個(gè)測(cè)試 React 組件的 JavaScript 庫(kù)。自從 2016 年以來(lái)它已經(jīng)在 GitHub 上面拿到了 12000 顆星。

　　Jest 和 Snapshots + Enzyme 超級(jí)簡(jiǎn)單的 React 組件測(cè)試 API 形成了一個(gè)很強(qiáng)的測(cè)試組合，會(huì)在 2018 年不斷流行起來(lái)。

　　Webpack

　　Webpack 已經(jīng)崛起為最流行的資產(chǎn)打包工具。Webpack 還經(jīng)歷了不可思議的一年。

　　去年的這個(gè)時(shí)候，Webpack 還幾乎連文檔都沒(méi)有，大部分的開(kāi)發(fā)者都不知道該怎么開(kāi)始用它。

　　然后，到了今年年頭的時(shí)候，我寫了篇文章，說(shuō) Webpack 在 3 個(gè)月內(nèi)就拿到了 15000 美元來(lái)支撐這個(gè)項(xiàng)目是如何的不可思議。而他們現(xiàn)在已經(jīng)拿到了幾十萬(wàn)美元的融資了。

　　Webpack 不僅為開(kāi)源項(xiàng)目如何走向繁榮鋪好未來(lái)，而且這個(gè)項(xiàng)目一整年都維持了很旺盛的發(fā)展勢(shì)頭。

　　謝天謝地，Sean Larkin 還在領(lǐng)導(dǎo)著 Webpack，所以 Webpack 能夠取得下一個(gè)成就還沒(méi)有結(jié)束的跡象。

　　因?yàn)檫@該項(xiàng)目得到的支持如此之好（以及他們對(duì)社區(qū)的關(guān)心程度如此之高），所以 2018 年最好預(yù)測(cè)的趨勢(shì)就是它了。

　　Parcel

　　但每一個(gè)大規(guī)模的趨勢(shì)發(fā)展的同時(shí)，也會(huì)有不滿開(kāi)發(fā)者隊(duì)伍的日益壯大。

　　Parcel，一個(gè)有競(jìng)爭(zhēng)力的打包工具，也相當(dāng)迅速地獲得了發(fā)展勢(shì)頭，目前它已經(jīng)在 GitHub 上面攢到了 12000 顆星，開(kāi)始直接威脅到 Webpack 的江湖地位。

　　Parcel 的賣點(diǎn)是別的打包工具都變得太龐大了，而 Parcel 的打包速度是 Webpack 的 2 倍（使用緩存的時(shí)候快 10 倍）。

　　它還針對(duì) Webpack 多少有點(diǎn)令人困惑的配置設(shè)置，而 Parcel 卻不需要配置。

只用把你應(yīng)用的入口點(diǎn)指給它，它就會(huì)把事情做對(duì)了。

　　盡管簡(jiǎn)化配置和改善速度都是很好的改進(jìn)，如果 2018 年上半年 Webpack 沒(méi)有抄這些改進(jìn)的話我不會(huì)感到奇怪。

　　類似于 Vue 與 React 之爭(zhēng)，這個(gè)小家伙總是創(chuàng)新得更快，但要取決于大家伙會(huì)不會(huì)受到哪些創(chuàng)新的靈感啟發(fā)而改進(jìn)自己的項(xiàng)目。

　　Gatsby

　　Gatsby 是 Kyle Mathews 開(kāi)發(fā)的用于 React 的靜態(tài)網(wǎng)站生成器。

　　自從 Kyle 去年全職開(kāi)發(fā) Gatsby 以來(lái)，這個(gè)東西開(kāi)始真正獲得發(fā)展勢(shì)頭。

　　React 網(wǎng)站本身就是用 Gatsby 開(kāi)發(fā)的，再也有沒(méi)有比這更有力的證明了。

　　Gatsby 的全部關(guān)切都在于性能和給 React 提供盡可能快的 web 體驗(yàn)。

　　他們網(wǎng)站的這張圖可以讓你了解到它大概是怎么工作的：

　　Gatsby 還利用先進(jìn)的 web 技術(shù)替其他網(wǎng)頁(yè)預(yù)抓取資源，使得瀏覽起來(lái)快如閃電。

　　盡管 Gatsby 無(wú)論如何也不會(huì)統(tǒng)治這個(gè)行業(yè)，但卻是開(kāi)發(fā)快速靜態(tài)網(wǎng)站非常出色的解決方案，會(huì)不斷流行下去。

　　要想更多了解 Gatsby，可參考這篇文章。

　　Babel

　　到現(xiàn)在 Babel 已經(jīng)沒(méi)有介紹的必要了，大體上它仍將成為趨勢(shì)延續(xù)下去。

　　總而言之，2017 年對(duì)于 Babel 來(lái)說(shuō)是個(gè)好年，它的精力主要都集中在 Babel 7 的開(kāi)發(fā)上面（希望能在 2018 年初發(fā)布）。最重要的是，他們寫了一首歌:)

　　Babel 目前唯一的擔(dān)心是 Reason 日益成為主流。

　　但目前為止，Babel 還會(huì)在 2018 年延續(xù)強(qiáng)勁走勢(shì)。

　　Flow & Typescript

　　Typescript 和 Flow 都是 JavaScript 開(kāi)發(fā)者很好的靜態(tài)類型選項(xiàng)，可以用來(lái)改進(jìn)其代碼質(zhì)量。

　　我們未必會(huì)在 2018 年看到誰(shuí)摧毀誰(shuí)的情形，所以它們還會(huì)一起共存，各自服務(wù)于不同的用例。

　　Facebook 開(kāi)發(fā)的 Flow 是 React 開(kāi)發(fā)者的優(yōu)先選擇，因?yàn)樗苋菀赘?Babel 集成，在 React 項(xiàng)目中也使用得很普遍。

　　微軟開(kāi)發(fā)的 TypeScript 在 Angular 2+ 開(kāi)發(fā)者當(dāng)中很流行，因?yàn)樗侵饕Z(yǔ)言。

　　2018 年這兩個(gè)的發(fā)展可能會(huì)停滯，現(xiàn)在真正的問(wèn)題是 Reason 今后會(huì)不會(huì)取代了這兩個(gè)。

　　Immutable.js

　　有一位 reddit 網(wǎng)友是這樣描述的，我很喜歡這種說(shuō)法：

immutableJS 確保了大型團(tuán)隊(duì)的開(kāi)發(fā)者不會(huì)做一些愚蠢的事情。

　　簡(jiǎn)而言之：Immutable.js，F(xiàn)acebook 的另一個(gè)項(xiàng)目，確保了狀態(tài)不會(huì)因?yàn)槭褂貌豢勺儗?duì)象而發(fā)生突變。

　　正如我們的 redditor 網(wǎng)友指出那樣，這對(duì)于大型團(tuán)隊(duì)的開(kāi)發(fā)者會(huì)極其有用，因?yàn)檫@些人經(jīng)常會(huì)無(wú)意識(shí)地搞亂了狀態(tài)。

封裝在 Immutable.JS 對(duì)象里面的數(shù)據(jù)是永遠(yuǎn)也不會(huì)變的。它總會(huì)返回一份新的拷貝。這跟 JavaScript 形成了羨慕對(duì)比，后者的一些操作不會(huì)改變你的數(shù)據(jù)（比方說(shuō)一些數(shù)據(jù)方法，包括 map、filter、concat、forEach 等），但有的就會(huì)（Array 的 pop、push、splice 等）。

　　使用 Immutable.JS 有相當(dāng)大的限制，但視你的需求不同，那些限制未必有關(guān)系。你可以通過(guò)這篇文章了解更多。

　　在 GitHub 上拿到了 20000 多顆星的 Immutable.js 已經(jīng)在 2017 年崛起，預(yù)計(jì)還會(huì)延續(xù)到 2018 年，因?yàn)殚_(kāi)發(fā)者正在花時(shí)間理解其中的概念和權(quán)衡。

　　Popmotion

　　Popmotion 是一個(gè)在 GitHub 上迅速贏得星星的 JavaScript 動(dòng)畫(huà)庫(kù)。

　　可以把它想象為 Flash 預(yù)見(jiàn)了 jQuery。

　　現(xiàn)在，我意識(shí)到在一句話里面用這兩個(gè)詞對(duì)推銷這個(gè)日益流行的庫(kù)并沒(méi)有幫助。

　　但你對(duì)這個(gè)庫(kù)的研究越深，你就越會(huì)發(fā)現(xiàn)有一群人對(duì) jQuery 和 Falsh 都有極深的抱怨，迫切需要讓情況變好一點(diǎn)。

　　而 Popmotion 真的體驗(yàn)要好很多，在 web 動(dòng)畫(huà)方面有了很多的創(chuàng)新。這無(wú)疑是 2018 年值得關(guān)注的趨勢(shì)之一。

　　你可以到這個(gè)網(wǎng)站一探究竟。

　　React Native & Electron

　　React Native 讓你可以針對(duì)移動(dòng)設(shè)備開(kāi)發(fā) React 應(yīng)用，而 Electronlets 則可以讓你針對(duì)桌面開(kāi)發(fā) JavaScript 應(yīng)用。

　　這兩個(gè)框架在 2017 年均站穩(wěn)了腳跟，也都是從 JavaScript 到原生應(yīng)用很好的解決方案。

　　一些用 Electron 開(kāi)發(fā)的知名 app 包括：Slack、Atom、Github Desktop 以及 Discord。

　　用 React Native 開(kāi)發(fā)的流行應(yīng)用包括：Facebook、Instagram、Airbnb 以及 UberEATS。

　　你現(xiàn)在還可以開(kāi)發(fā) Windows 版的 React Native 應(yīng)用。

　　無(wú)論如何現(xiàn)在都是 JavaScript 開(kāi)發(fā)者的好時(shí)光，考慮現(xiàn)在你開(kāi)發(fā)桌面和移動(dòng) app 已經(jīng)比過(guò)去容易多了。

　　額外提示：Web Assembly

　　有了這 4 個(gè)瀏覽器的支持后，Web Assembly 幾乎大功告成了。不過(guò) 2018 年稱之為趨勢(shì)還為時(shí)尚早，再過(guò) 12 個(gè)月再說(shuō)吧。

　　但一定要密切關(guān)注它，因?yàn)楝F(xiàn)在每個(gè)人都盯住這個(gè)呢。

　　2018 學(xué)習(xí)材料

　　看完了前面介紹的所有這些趨勢(shì)后，下面我們給打擊推薦一些 2018 年的學(xué)習(xí)資料，不斷學(xué)習(xí)與時(shí)俱進(jìn)你才能保持作為遠(yuǎn)程開(kāi)發(fā)者的競(jìng)爭(zhēng)力并且發(fā)揮你的潛能：

• 勇敢去學(xué) Vue.js 吧

• 每一位 React 開(kāi)發(fā)者都應(yīng)該學(xué)習(xí) Next.js

• 開(kāi)始學(xué)習(xí) Reason（以及 Reason React）然后做個(gè)業(yè)余項(xiàng)目試試吧。

• GraphQL 必須列入你的 2018 待辦事宜清單。

• 跟著 Relay Modern 學(xué)，這是 React+GraphQL 應(yīng)用的數(shù)據(jù)抓取選項(xiàng)之一。

• Storybook！Storybook！Storybook！

• 在一個(gè)項(xiàng)目上安裝 Prettier，讓你的代碼可讀性更強(qiáng)。

• 在一個(gè) React 項(xiàng)目上學(xué)習(xí)使用 Jest 截屏及 Enzyme。

• 學(xué)習(xí) Flow（React 開(kāi)發(fā)者）或者 TypeScript（其他人）。

• 考慮用 Gatsby 把 Markdown 文本轉(zhuǎn)換成靜態(tài)頁(yè)面。

• 用 React Native 開(kāi)發(fā)一個(gè)移動(dòng) app。

• 用 Electron 開(kāi)發(fā)一個(gè)桌面 app。

• 玩一下 Popmotion 創(chuàng)作一個(gè)流暢的動(dòng)畫(huà)。

• 把這個(gè)資源清單導(dǎo)入為 Todoist 項(xiàng)目。