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

　　去年，有 50000 人對 JavaScript 的上升趨勢感到好奇......

　　那么好吧，我的開發(fā)者同胞們，現(xiàn)在我們再來看看 2018 年怎樣。

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

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

　　React vs. Vue.js

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

　　展望 2018 年的時候，我們即將迎來 2 年的激烈競爭，而對 Vue 的炒作會非常多。

　　React 有著全球最富有公司之一的財政支持，更不用說他們還有極其有才的維護人員。

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

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

　　Vue 的社區(qū)當(dāng)然還沒有 React 那么大，但從核心團隊是否有很好的使者并且是否傾聽客戶來看，這個社區(qū)正在壯大。

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

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

　　這里有一篇文章對 React、Vue 和 Angular 進行了很好的對比。

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

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

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

　　Next.js

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

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

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

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

　　隨著 Vue 與 React 之爭的延續(xù)，預(yù)計會看到越來越多 Next 與 React 的雙劍合璧，這會讓 React 陣營的每個人都感覺舒服一點。

　　Angular

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

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

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

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

　　Reason

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

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

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

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

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

　　GraphQL

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

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

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

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

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

　　Redux、Relay Modern 以及 Apollo

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

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

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

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

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

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

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

　　Storybook

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

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

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

　　Storybook 太有用了（而且用起來也很有趣），你可以單獨地開放和測試 UI。它就像一本實時的 UI 設(shè)計指南，能夠為開發(fā)者提供真正的價值。

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

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

　　額外提示：建議你也看看 react-bluekit，這是 Storybook 的替代，Netflix 的工程團隊用來設(shè)計他們的組件庫。

　　Prettier

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

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

　　變成：

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

　　這個東西在 GitHub 上面得到了 18000 顆星，開發(fā)者都很喜歡這個簡單又有價值的項目。

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

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

　　Jest 和 Enzyme

　　說到 JavaScript 測試，Jest 無疑是領(lǐng)先的那個，而 Enzyme 則是很好的補充，尤其是在開發(fā) React 應(yīng)用的時候。

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

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

　　由 Airbnb 工程團隊開發(fā)的 Enzyme 是一個測試 React 組件的 JavaScript 庫。自從 2016 年以來它已經(jīng)在 GitHub 上面拿到了 12000 顆星。

　　Jest 和 Snapshots + Enzyme 超級簡單的 React 組件測試 API 形成了一個很強的測試組合，會在 2018 年不斷流行起來。

　　Webpack

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

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

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

　　Webpack 不僅為開源項目如何走向繁榮鋪好未來，而且這個項目一整年都維持了很旺盛的發(fā)展勢頭。

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

　　因為這該項目得到的支持如此之好（以及他們對社區(qū)的關(guān)心程度如此之高），所以 2018 年最好預(yù)測的趨勢就是它了。

　　Parcel

　　但每一個大規(guī)模的趨勢發(fā)展的同時，也會有不滿開發(fā)者隊伍的日益壯大。

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

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

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

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

　　盡管簡化配置和改善速度都是很好的改進，如果 2018 年上半年 Webpack 沒有抄這些改進的話我不會感到奇怪。

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

　　Gatsby

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

　　自從 Kyle 去年全職開發(fā) Gatsby 以來，這個東西開始真正獲得發(fā)展勢頭。

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

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

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

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

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

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

　　Babel

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

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

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

　　但目前為止，Babel 還會在 2018 年延續(xù)強勁走勢。

　　Flow & Typescript

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

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

　　Facebook 開發(fā)的 Flow 是 React 開發(fā)者的優(yōu)先選擇，因為它很容易跟 Babel 集成，在 React 項目中也使用得很普遍。

　　微軟開發(fā)的 TypeScript 在 Angular 2+ 開發(fā)者當(dāng)中很流行，因為它是主要語言。

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

　　Immutable.js

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

immutableJS 確保了大型團隊的開發(fā)者不會做一些愚蠢的事情。

　　簡而言之：Immutable.js，F(xiàn)acebook 的另一個項目，確保了狀態(tài)不會因為使用不可變對象而發(fā)生突變。

　　正如我們的 redditor 網(wǎng)友指出那樣，這對于大型團隊的開發(fā)者會極其有用，因為這些人經(jīng)常會無意識地搞亂了狀態(tài)。

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

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

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

　　Popmotion

　　Popmotion 是一個在 GitHub 上迅速贏得星星的 JavaScript 動畫庫。

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

　　現(xiàn)在，我意識到在一句話里面用這兩個詞對推銷這個日益流行的庫并沒有幫助。

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

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

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

　　React Native & Electron

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

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

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

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

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

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

　　額外提示：Web Assembly

　　有了這 4 個瀏覽器的支持后，Web Assembly 幾乎大功告成了。不過 2018 年稱之為趨勢還為時尚早，再過 12 個月再說吧。

　　但一定要密切關(guān)注它，因為現(xiàn)在每個人都盯住這個呢。

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

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

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

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

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

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

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

• Storybook！Storybook！Storybook！

• 在一個項目上安裝 Prettier，讓你的代碼可讀性更強。

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

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

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

• 用 React Native 開發(fā)一個移動 app。

• 用 Electron 開發(fā)一個桌面 app。

• 玩一下 Popmotion 創(chuàng)作一個流暢的動畫。

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