2018年前端JS框架發展趨勢-快速練功指南

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

2018 年最值得關注的 JavaScript 趨勢

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

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

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

2017年發生的很多事情正在為2018年的許多行動和創新做好準備。

你還可以把本文用作規劃個人成長的指南,來推出更具創新性的項目。

React vs. Vue.js

2018 年最值得關注的 JavaScript 趨勢

我們開門見山,直接上好東西吧:認為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組件的環境。

2018 年最值得關注的 JavaScript 趨勢

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

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體驗。

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

2018 年最值得關注的 JavaScript 趨勢

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

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

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

Babel

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

總而言之,2017年對於Babel來說是個好年,它的精力主要都集中在Babel 7的開發上面(希望能在2018年初發布)。

最重要的是,他們寫了一首歌🙂

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

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

Flow & Typescript

TypescriptFlow 都是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動畫庫。

2018 年最值得關注的 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。

2018 年最值得關注的 JavaScript 趨勢

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

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

額外提示:Web Assembly

有了這4個瀏覽器的支持后,Web Assembly幾乎大功告成了。

不過2018年稱之為趨勢還為時尚早,再過12個月再說吧。

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

2018 開發者的學習包

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

經歷分享:從平面設計師到前端工程師:五個月的轉變歷程


 

【想讓你的網站其他人優秀嗎?這些設計趨勢一個都不要錯過!】

1.9種讓你的網頁很專業
2.預測2018網頁設計趨勢
3.2018年手機應用UI設計趨勢
4.這3個設計趨勢是網頁設計師的最愛
5.2018必看設計懶人包手冊
6.高手進擊懶人包影片-設計師與開發者推薦的精選影片


 

給你最好的網頁設計Gogoshark|鯊魚邦不私藏分享

 


Also published on Medium.

GogoShark 小編主要分享: 網頁設計, 數位行銷, SEO, 品牌策略...等領域。是你的數位行銷解決方案專家。提供數位行銷知識、分析工具、解決方案與資源夥伴;精準蒐羅數位網路行銷懶人包、關鍵字行銷、社群行銷、內容行銷等。GogoShark 是間位於台北的網頁設計公司

客服支援

您的問題,由我們來解決 - 位於台北的專業網頁設計服務 GogoShark 可協助您拓展事業版圖,透過更加簡單快速的方法將一切數位化