2018年最值得關注的JavaScript趨勢

點選上方“中興開發者社群”，關注我們

每天讀一篇一線開發者原創好文

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

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

　　那麼好吧，我的開發者同胞們，現在我們再來看看 2018 年怎樣。

　　如果你 2017 年一整年都與世隔絕或者忙於專案而自顧不暇的話，這篇文章就是給你準備的。

　　2017 年發生的很多事情正在為 2018 年的許多行動和創新做好準備。你還可以把本文用作規劃個人成長的指南，來推出更具創新性的專案。

　　React vs. Vue.js

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

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

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

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

• Vue 輕量，容易學習，有著令人難以置信的工具，有很棒的狀態管理和路由內建（！）等等。

　　Vue 的社群當然還沒有 React 那麼大，但從核心團隊是否有很好的使者並且是否傾聽客戶來看，這個社群正在壯大。

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

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

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

　　最終可能會發展成什麼樣子？Facebook 會做它最擅長的東西：抄襲創新者然後世界繼續使用 React。

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

　　每一位 JS 開發者都仍然應該考慮學習 Vue.js，因為它已經制造了足夠大的水花，現在我們開始看到對 Vue.js 開發者的需求出現，這意味著至少在短期內你能夠為自己創造一些價值。

　　Next.js

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

　　儘管 Facebook 從未在這場遊戲中領先過，並且在創新的勢頭上無法與 Vue 匹敵，但在工具使用、程式碼切割、路由以及狀態管理方面，React 加上 Next.js 能讓你在體驗上跟 Vue 接近許多，此外還能讓你獲得大規模的 React 生態體系和支援。

　　Next 對於用 React 開發的 server-side 為主的應用也特別有用，二者在應用已經日益成為趨勢。

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

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

　　Angular

　　儘管 Angular 越來越難以取悅開發者，它仍將是 2018 年廣受採用的框架之一。

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

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

　　這裡有你需要了解的 2017 年有關 Angular 的一切。

　　Reason

　　Facebook 生產使用的一切永遠都值得關注。

　　Facebook 現在用 Reason 來開發 web 版的 Facebook Messenger 以及其他專案（Whatsapp、Instagram、Ads 等）。

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

　　所以你可想象一下，不需要安裝 Babel（+許多外掛）、Flow 等，只需要 OCaml + Reason（現在已經支援 React 繫結）即可的強大。這是一個有待開發的一大趨勢。

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

　　GraphQL

　　GraphQL 是 API 的查詢語言（可以看成是 REST 的現代版）。

　　GraphQL 沒有辜負 2017 年的炒作，像 Yelp、Spotify、Github、沃爾瑪、《紐約時報》等主流公司都在採用 GraphQL，而且現在還有了基於 GraphQL 的 API。

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

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

　　如果你想在創新公司找份工作的話，現在絕對是開始學習 GraphQL 的時候。

　　Redux、Relay Modern 以及 Apollo

　　Redux 是一直很火的 Dan Abramov/Andrew Clark 專案，後來有迅速成為 React 狀態管理和資料抓取的首選解決方案。

　　但 GraphQL 改變了現狀，主要是在資料抓取方面。

　　我們現在有了 Relay Modern （Facebook 開發）和 Apollo，讓你可以比 Redux 更高效地抓取並傳遞 GraphQL 資料到 React 應用的 GraphQL 客戶端框架。

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

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

　　這意味著你仍然可以跟 Relay 一起用 Redux，Redux 用於本地狀態管理以及一些複雜的非伺服器狀態，然後由 Relay 來抓取。

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

　　Storybook

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

　　Storybook 是一個定義、開發和測試 UI 元件的環境。

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

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

　　你可能已經碰到過用 Storybook 來設計的開源專案了，但如果想自己看看它是怎麼用的話，那就看看用 Storybook 設計的 Airbnb 的日期選擇器。

　　作為開發者如果你想在 2018 年脫穎而出，那就在面試的時候用 Storybook 展示你的最新專案。

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

　　Prettier

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

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

　　變成：

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

　　這個東西在 GitHub 上面得到了 18000 顆星，開發者都很喜歡這個簡單又有價值的專案。

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

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

　　Jest 和 Enzyme

　　說到 JavaScript 測試，Jest 無疑是領先的那個，而 Enzyme 則是很好的補充，尤其是在開發 React 應用的時候。

　　就像你在這裡看到一樣，在下載方面 Jest 現在統治著 Jasmine。

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

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

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

　　Webpack

　　Webpack 已經崛起為最流行的資產打包工具。Webpack 還經歷了不可思議的一年。

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

　　然後，到了今年年頭的時候，我寫了篇文章，說 Webpack 在 3 個月內就拿到了 15000 美元來支撐這個專案是如何的不可思議。而他們現在已經拿到了幾十萬美元的融資了。

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

　　謝天謝地，Sean Larkin 還在領導著 Webpack，所以 Webpack 能夠取得下一個成就還沒有結束的跡象。

　　因為這該專案得到的支援如此之好（以及他們對社群的關心程度如此之高），所以 2018 年最好預測的趨勢就是它了。

　　Parcel

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

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

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

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

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

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

　　類似於 Vue 與 React 之爭，這個小傢伙總是創新得更快，但要取決於大傢伙會不會受到哪些創新的靈感啟發而改進自己的專案。

　　Gatsby

　　Gatsby 是 Kyle Mathews 開發的用於 React 的靜態網站生成器。

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

　　React 網站本身就是用 Gatsby 開發的，再也有沒有比這更有力的證明了。

　　Gatsby 的全部關切都在於效能和給 React 提供儘可能快的 web 體驗。

　　他們網站的這張圖可以讓你瞭解到它大概是怎麼工作的：

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

　　儘管 Gatsby 無論如何也不會統治這個行業，但卻是開發快速靜態網站非常出色的解決方案，會不斷流行下去。

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

　　Babel

　　到現在 Babel 已經沒有介紹的必要了，大體上它仍將成為趨勢延續下去。

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

　　Babel 目前唯一的擔心是 Reason 日益成為主流。

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

　　Flow & Typescript

　　Typescript 和 Flow 都是 JavaScript 開發者很好的靜態型別選項，可以用來改進其程式碼質量。

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

　　Facebook 開發的 Flow 是 React 開發者的優先選擇，因為它很容易跟 Babel 整合，在 React 專案中也使用得很普遍。

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

　　2018 年這兩個的發展可能會停滯，現在真正的問題是 Reason 今後會不會取代了這兩個。

　　Immutable.js

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

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

　　簡而言之：Immutable.js，Facebook 的另一個專案，確保了狀態不會因為使用不可變物件而發生突變。

　　正如我們的 redditor 網友指出那樣，這對於大型團隊的開發者會極其有用，因為這些人經常會無意識地搞亂了狀態。

封裝在 Immutable.JS 物件裡面的資料是永遠也不會變的。它總會返回一份新的拷貝。這跟 JavaScript 形成了羨慕對比，後者的一些操作不會改變你的資料（比方說一些資料方法，包括 map、filter、concat、forEach 等），但有的就會（Array 的 pop、push、splice 等）。

　　使用 Immutable.JS 有相當大的限制，但視你的需求不同，那些限制未必有關係。你可以通過這篇文章瞭解更多。

　　在 GitHub 上拿到了 20000 多顆星的 Immutable.js 已經在 2017 年崛起，預計還會延續到 2018 年，因為開發者正在花時間理解其中的概念和權衡。

　　Popmotion

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

　　可以把它想象為 Flash 預見了 jQuery。

　　現在，我意識到在一句話裡面用這兩個詞對推銷這個日益流行的庫並沒有幫助。

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

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

　　你可以到這個網站一探究竟。

　　React Native & Electron

　　React Native 讓你可以針對移動裝置開發 React 應用，而 Electronlets 則可以讓你針對桌面開發 JavaScript 應用。

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

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

　　用 React Native 開發的流行應用包括：Facebook、Instagram、Airbnb 以及 UberEATS。

　　你現在還可以開發 Windows 版的 React Native 應用。

　　無論如何現在都是 JavaScript 開發者的好時光，考慮現在你開發桌面和移動 app 已經比過去容易多了。

　　額外提示：Web Assembly

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

　　但一定要密切關注它，因為現在每個人都盯住這個呢。

　　2018 學習材料

　　看完了前面介紹的所有這些趨勢後，下面我們給打擊推薦一些 2018 年的學習資料，不斷學習與時俱進你才能保持作為遠端開發者的競爭力並且發揮你的潛能：

• 勇敢去學 Vue.js 吧

• 每一位 React 開發者都應該學習 Next.js

• 開始學習 Reason（以及 Reason React）然後做個業餘專案試試吧。

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

• 跟著 Relay Modern 學，這是 React+GraphQL 應用的資料抓取選項之一。

• Storybook！Storybook！Storybook！

• 在一個專案上安裝 Prettier，讓你的程式碼可讀性更強。

• 在一個 React 專案上學習使用 Jest 截圖及 Enzyme。

• 學習 Flow（React 開發者）或者 TypeScript（其他人）。

• 考慮用 Gatsby 把 Markdown 文字轉換成靜態頁面。

• 用 React Native 開發一個移動 app。

• 用 Electron 開發一個桌面 app。

• 玩一下 Popmotion 創作一個流暢的動畫。

• 把這個資源清單匯入為 Todoist 專案。