5分钟看懂，未来1年web前端新趋势，都在这了！！！
文/北媽
閱讀本文需要?4分鐘
一
今天是2019年的第一個(gè)工作日，意義非凡。
既然是工作日，無(wú)論你有沒(méi)有從假期綜合癥里反應(yīng)過(guò)來(lái)，北媽都要帶你快速回顧一下：
2018年的web前端開(kāi)發(fā)的重要新聞、重要事件和JavaScript的各種流行框架、模式發(fā)展趨勢(shì)。
快速回顧，也就意味著篇幅精悍，重點(diǎn)突出，也就可能難免有不當(dāng)和錯(cuò)誤之處，如果有，敬請(qǐng)指正和留言討論。
知識(shí)之旅開(kāi)始：
NPM熱門(mén)前端框架下載
老規(guī)矩，先來(lái)看最熱門(mén)的幾個(gè)框架npm下載量圖
圖里不難看出 十年霸主 jquery 依然穩(wěn)定嗎而且還有略高的上揚(yáng)趨勢(shì)，這可能亞太地區(qū)提供了不少幫助，畢竟很多老項(xiàng)目還是很依賴jquery。
React繼續(xù)其統(tǒng)治地位無(wú)人能及。
React多年來(lái)一直主導(dǎo)Web開(kāi)發(fā)，2018年它根本沒(méi)有放慢速度。根據(jù)Stackoverflow 調(diào)查它仍然是最受歡迎的庫(kù)之一。
核心React團(tuán)隊(duì)非常積極地更新庫(kù)并添加功能。在整個(gè)2018年，我們看到了React v16版本的許多新增內(nèi)容，包括新的[生命周期方法]，[新的上下文API]，[指針事件]，[惰性函數(shù)]和[React.memo]。
React Hooks 得到了一些響亮的反饋，很多開(kāi)發(fā)人員喜歡這個(gè)更新。掛鉤是一種使用該useState功能向功能組件添加狀態(tài)的方法，它還將管理生命周期事件。
不會(huì)React的同學(xué)不要著急，下面有Vue何Angular的，統(tǒng)統(tǒng)都有。如果你想學(xué)，北媽也找到了很多原生教程，這是鏈接，不過(guò)前提是你最好英語(yǔ)不錯(cuò)。
戳這里看 40個(gè)最佳 react教程(老外的)：
https://gitconnected.com/learn/react
二
Vue：2018年前端世界明星
Vue在GitHub Stars中比 React 的星星增長(zhǎng)還多，在2017年Vue迅速爆發(fā)之后，Vue在2018年繼續(xù)增長(zhǎng)。實(shí)際上，它甚至超過(guò)了React在GitHub上收到的星星數(shù)量
不過(guò)，雖然Vue很受歡迎，但在實(shí)際使用中它仍然以React和Angular為后盾和體系支持。
Vue擁有一大批熱情的用戶群，而且還在不斷增長(zhǎng)，而且vue看起來(lái)將成為未來(lái)幾年前端頻繁使用的一個(gè)，其實(shí)更多的國(guó)人貢獻(xiàn)超乎尋常的猛。
彩蛋：北媽在web前端入坑系列第六篇：Vue、React、Angular之三國(guó)殺，web前端入坑第六篇(上)?，寫(xiě)過(guò)關(guān)于三個(gè)框架的對(duì)比和各種屬性，有興趣的回顧下，看此文更佳。
另外，Vue3.0 已經(jīng)在擬定發(fā)布中了，更多的性能優(yōu)化和提升，不要擔(dān)心語(yǔ)法層面改變，更多關(guān)于Vue3.0的文章和新聞，我后續(xù)會(huì)第一時(shí)間持續(xù)跟進(jìn)，還是那句話，信北媽，得永生！
三
Angular繼續(xù)亦步亦趨，發(fā)布v7版本
10月，Angular在其流行的UI框架的第7版中又發(fā)布了另一個(gè)主要版本。從早期的AngularJS MVC架構(gòu)到使用組件的更現(xiàn)代的Angular包，Angular已經(jīng)有了大量的增長(zhǎng)。
但據(jù)我調(diào)查和感受，由于angular的龐大性和系統(tǒng)性，國(guó)人用它的越來(lái)越少，老外到是依然情有獨(dú)鐘。
因?yàn)殡m然Angular與React和Vue等框架沒(méi)有相同的狂熱粉絲，但它仍然是專業(yè)項(xiàng)目的熱門(mén)選擇。
許多開(kāi)發(fā)人員在使用React時(shí)都會(huì)感到疲勞，因?yàn)樗枰こ處熢诠芾順?gòu)建管道的同時(shí)做出許多依賴關(guān)系和架構(gòu)決策。而Vue雖然入門(mén)簡(jiǎn)單，但太過(guò)靈活和不成體系，對(duì)一些進(jìn)階比較困難。
另一方面，Angular是一個(gè)高度自以為是的完整框架，CLI管理所有構(gòu)建步驟。專業(yè)環(huán)境的另一個(gè)好處是Angular需要TypeScript。Angular已經(jīng)在Web開(kāi)發(fā)世界中樹(shù)立了獨(dú)立的價(jià)值，并繼續(xù)被采用，業(yè)界很多標(biāo)準(zhǔn)都是Angular第一個(gè)發(fā)明和采用的。
如果要學(xué)習(xí)Angular的戳這里：
https://gitconnected.com/learn/angular
另外放一個(gè) 三大前端法寶 熱門(mén)圖
四
新技術(shù)和新概念
1、GraphQL 、PWA 、WebAssembly
GraphQL已被GitHub等技術(shù)領(lǐng)導(dǎo)者采用。然而，它并沒(méi)有像一些預(yù)測(cè)的那樣快速地起飛。
據(jù)JS狀態(tài)調(diào)查顯示，只有1/5的前端開(kāi)發(fā)人員使用過(guò)GraphQL，但是有驚人的62.5％的開(kāi)發(fā)人員已經(jīng)聽(tīng)說(shuō)過(guò)它并希望使用它。
PWA和 WebAssembly這兩個(gè)東西，如果你們現(xiàn)在還不懂或者沒(méi)接觸沒(méi)關(guān)系，我會(huì)出一系列教程，我們一起學(xué)，持續(xù)關(guān)注北媽就好。
因?yàn)檫@個(gè)以后，會(huì)越來(lái)越流行，只不過(guò)現(xiàn)在還不重要。
2、各種CLI工具封裝
眾所周知，要跟上最新的庫(kù)，正確配置應(yīng)用程序并做出正確的架構(gòu)決策，這可能會(huì)讓人感到筋疲力盡。
這種痛苦催生了管理工具的CLI包的創(chuàng)建，允許開(kāi)發(fā)人員專注于應(yīng)用程序和業(yè)務(wù)邏輯。
大家熟知和不熟知的 流行的框架包括?Next.js（SSR for React），Create-React-App（客戶端React），Nuxt.js（SSR for Vue），Vue CLI（客戶端） -side Vue），React Native的Expo CLI，默認(rèn)情況下使用Angular
3、靜態(tài)站點(diǎn)話題 重新興起
隨著JavaScript革命的發(fā)生，每個(gè)人都喜歡學(xué)習(xí)最新最好的語(yǔ)言框架，但現(xiàn)在事情已經(jīng)解決，我們已經(jīng)意識(shí)到并非每個(gè)網(wǎng)站都需要是一個(gè)復(fù)雜的單頁(yè)面應(yīng)用程序（SPA）。
這導(dǎo)致了靜態(tài)站點(diǎn)生成器的增長(zhǎng)。
這些工具允許你在你喜歡的庫(kù)中編寫(xiě)代碼，例如React或Vue，但在構(gòu)建期間生成靜態(tài)HTML文件，允許我們立即向用戶提供完全構(gòu)建的頁(yè)面。
靜態(tài)站點(diǎn)非常適合構(gòu)建個(gè)人網(wǎng)站或博客，但它們可以輕松擴(kuò)展到更大的應(yīng)用程序。我們已經(jīng)看到了用于構(gòu)建靜態(tài)網(wǎng)站的流行框架的興起，例如Gatsby和React Static?for React應(yīng)用程序，以及VuePress?for Vue應(yīng)用程序。
事實(shí)上，靜態(tài)網(wǎng)站已經(jīng)變得如此受歡迎，以至于蓋茨比實(shí)際上已經(jīng)組建了一家公司，并在去年的開(kāi)源框架中獲得了風(fēng)險(xiǎn)投資資金。
4、TypeScript可能是JavaScript的未來(lái)
JavaScript因沒(méi)有靜態(tài)類型變量而受到批評(píng)。試圖糾正這個(gè)問(wèn)題的兩個(gè)主要庫(kù)是TypeScript和Flow，但TypeScript看起來(lái)是最受歡迎的。
事實(shí)上，在Stack Overflow調(diào)查中，TypeScript的評(píng)分高于JavaScript本身，為67％，而最受喜愛(ài)的語(yǔ)言為61.9％。
根據(jù)JS的狀態(tài)調(diào)查，超過(guò)80％的開(kāi)發(fā)人員希望使用TS或已經(jīng)使用它并享受它。對(duì)于Flow，只有34％的開(kāi)發(fā)人員正在使用它或想要使用它。
根據(jù)所有跡象，TypeScript是JS中靜態(tài)類型的首選解決方案，許多人選擇使用普通的JavaScript。在2018年，TS的npm下載數(shù)量大幅增長(zhǎng)，而Flow保持不變。
不管承不承認(rèn)，TS已經(jīng)成為流行了，唉，又學(xué)不到了吧？
5、Webpack 又發(fā)布新版本
Webpack 3發(fā)布僅8個(gè)月后，版本4發(fā)布了。Webpack 4繼續(xù)推動(dòng)簡(jiǎn)化和更快的構(gòu)建，聲稱高達(dá)98％的改進(jìn)。它選擇合理的默認(rèn)值，在沒(méi)有插件的情況下處理更多功能，并且不再需要使用配置文件。Webpack現(xiàn)在還支持WebAssembly并允許您import直接使用WebAssembly文件。
6、編輯器話題 VScode成為新霸主
一張圖足夠了，不過(guò)我依然是 sublime text 先行。畢竟瑞士軍刀不能丟
五
預(yù)測(cè)、展望 2019
2019的大方向展望，從這幾點(diǎn)學(xué)準(zhǔn)沒(méi)錯(cuò)。
隨著基礎(chǔ)的到位和不斷推動(dòng)改進(jìn)的Web體驗(yàn)，WebAssembly將開(kāi)始看到更多的應(yīng)用。
React保持領(lǐng)先，但Vue和Angular繼續(xù)在用戶中增長(zhǎng)。
CSS-in-JS可能會(huì)成為默認(rèn)的樣式方法而不是純CSS。
可能是開(kāi)發(fā)人員再看看本機(jī)Web組件嗎？
毫不奇怪，性能仍然是一個(gè)焦點(diǎn)，諸如PWA和代碼分割之類的東西成為每個(gè)應(yīng)用程序的標(biāo)準(zhǔn)。
在PWA采用的基礎(chǔ)上，網(wǎng)絡(luò)變得更加原生，具有離線功能和無(wú)縫的桌面/移動(dòng)體驗(yàn)。
我們繼續(xù)看到CLI工具和框架的增長(zhǎng)繼續(xù)抽象到構(gòu)建應(yīng)用程序的繁瑣方面，允許開(kāi)發(fā)人員專注于生成功能。
越來(lái)越多的公司采用具有統(tǒng)一代碼庫(kù)的移動(dòng)解決方案，如React Native或Flutter。
集裝箱、CLI化（即Docker，Kubernetes）的影響在前端過(guò)程中變得更加普遍。
GraphQL在采用方面實(shí)現(xiàn)了飛躍，并在更多公司中得到應(yīng)用。
TypeScript開(kāi)始成為標(biāo)準(zhǔn)JavaScript的默認(rèn)選擇。
虛擬現(xiàn)實(shí)使用A-Frame，React VR和Google VR等框架向前邁進(jìn)。
北媽寄語(yǔ)
還沒(méi)看盡興？篇幅已經(jīng)很長(zhǎng)了，其實(shí)每個(gè)話題都可以單獨(dú)寫(xiě)一篇長(zhǎng)文出來(lái)。
Vue繼續(xù)流行、React依然是前端霸主，但萬(wàn)變不離其宗，所以2019，我們一起努力進(jìn)化！
寫(xiě)和翻譯這種總結(jié)文其實(shí)很費(fèi)精力，不但要查數(shù)據(jù)，還要自己總結(jié)，還不能錯(cuò)，所以各位
“不存在十全十美的文章，如同不存在徹頭徹尾的絕望”
今天就先到這里，我們明天見(jiàn)。
老規(guī)矩平時(shí)不開(kāi)贊賞，月底統(tǒng)一交租，但不耽誤你點(diǎn) [好看]。
熱門(mén)閱讀
2019北媽和你：活著就意味必須要做點(diǎn)什么，請(qǐng)好好努力
當(dāng)實(shí)在受不了了，就開(kāi)干吧！
每天只想聽(tīng)你們說(shuō)：小北最帥！
長(zhǎng)按掃碼關(guān)注我
總結(jié)
以上是生活随笔為你收集整理的5分钟看懂，未来1年web前端新趋势，都在这了！！！的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 云炬随笔20170201
- 下一篇： 云炬随笔20180606