過去,，前端領(lǐng)域的開發(fā)人員只要了解一些HTML、CSS和jquery,，就足以創(chuàng)建互動網(wǎng)站,；但今天，他們需要面對廣泛而不斷變化的生態(tài)系統(tǒng),，開發(fā)各種技能,；他們需要掌握許多工具、數(shù)據(jù)庫和框架,；必須不斷投資自己來學(xué)習(xí)新知識,。

　　近年來出現(xiàn)了一系列基于JavaScript的優(yōu)秀庫和框架新產(chǎn)品，如ReactJS,、VueJS和Svelte,；它們?yōu)橹髁鱓eb應(yīng)用帶來了強大的動力。

　　1,、框架

　　2020年,，我們可能會看到Facebook的ReactJS和社區(qū)驅(qū)動的VueJS之間的對抗。目前React在GitHub上有1,、4萬星,，而Vue甚至有1,、5萬星。相比之下,，像Angular這樣的項目只有5.3萬星,。

　　2019年，React(藍線),、Vue(紅線),、Angular(黃線)和Svelte(綠線)的搜索趨勢也可以證明這一假設(shè)——Vue略高于React。Angular的搜索量相差甚遠,，而Svelte在這場對抗中幾乎沒有存在感,。

　　因此，在2020年,，使用或希望使用JavaScript框架的前端開發(fā)人員應(yīng)該將React和Vue作為他們的主要選擇,。如果你在處理大型企業(yè)項目，Angular也是可行的選擇,。

　　如果您想了解更多關(guān)于這些框架的信息,，請查看以下重要資源：

　　React

　　Vue、js,。

　　2,、靜態(tài)站點生成器。

　　靜態(tài)站點生成器集成了服務(wù)器渲染(SEO非常重要,，也會影響初始加載時間)和單頁應(yīng)用的能力,。

　　如今，許多項目選擇SSG,，即使不需要服務(wù)器渲染,，因為Next或Nuxt等解決方案有許多方便的功能，如markdown支持,、模塊包裝器和集成測試操作器,。

　　如果你非常重視前端開發(fā)，你應(yīng)該仔細研究以下項目,，并嘗試獲得一些實踐經(jīng)驗：

　　Next(基于React)

　　Nuxt(基于Vue)

　　Gatsby(基于React)

　　Gridsome(基于Vue)

　　這些可能是2020年最受歡迎的項目,，當然還有很多選擇。如果您想了解更多關(guān)于它們的信息,，請查看這些資源:

　　Next,、js。

　　Nuxt,、js,。

　　Gatsby。

　　Gridsome,。

　　3,、JAMstack,。

　　JavaScript(在客戶端上運行，如React,、Vue或VanilaJS),、API(服務(wù)端過程通過HTTPS抽象訪問JavaScript)和Markup(部署時預(yù)構(gòu)建的模板標記)。

　　這是一種構(gòu)建性能更好的網(wǎng)站和應(yīng)用程序的方法——降低擴展成本,，提供更高的安全性和更好的開發(fā)體驗,。

　　雖然這些術(shù)語本身并不新鮮，但它們有自己的共同點——它們不依賴Web服務(wù)器,。因此,，依靠Ruby或Node、js后端或使用服務(wù)端CMS(如Drupal或WordPress)構(gòu)建網(wǎng)站的單個應(yīng)用程序不是由JAMstack構(gòu)建的,。

　　如果您想使用JAMstack,，以下是一些最佳實踐：

　　整個項目提供CDN服務(wù)。

　　由于JAMstack不需要服務(wù)器,，整個項目可以通過CDN提供服務(wù),，從而釋放出無與倫比的速度和性能。

　　把一切都放在Git里,。

　　每個人都應(yīng)該能夠在沒有數(shù)據(jù)庫或復(fù)雜設(shè)置的情況下從Git存儲庫中克隆整個項目,。

　　自動化構(gòu)建

　　您可以完美地自動構(gòu)建，因為所有的標記都是預(yù)構(gòu)建的——例如,，使用webhooks或云服務(wù)來構(gòu)建標記,。

　　原子部署

　　為避免在大型項目中重新部署數(shù)百或數(shù)千份文件時出現(xiàn)不一致狀態(tài)，原子部署將等待所有文件上傳,，然后進行更改。

　　即時緩存失效,。

　　網(wǎng)站上線時,，必須確保CDN能夠處理即時緩存清除任務(wù)，以便更改可見,。

　　像Netlify或Zeit這樣的著名主機支持JAMstack應(yīng)用程序,，許多大公司使用它們?yōu)橛脩籼峁┳吭降捏w驗。

　　作為一名前端開發(fā)者,，你絕對想在2020年學(xué)習(xí)使用JAMstack,。如果你想了解更多關(guān)于JAMstacks的信息，這里有一些很棒的資源:

　　(https:/jamstack,、org/)

　　wtf(https:/jamstack)

　　剛接觸JAMstack,？您需要了解的所有入門知識(https://snipcart、com/blog/jamstack)

　　4,、PWA

　　漸進式Web應(yīng)用程序(PWA)絕對是2020年的熱門話題,。越來越多的公司選擇用PWA代替本地應(yīng)用,，從而為用戶提供豐富的移動體驗。

　　PWA非?？煽?即時加載,，無需連接互聯(lián)網(wǎng)即可工作)，速度快(動畫流暢,，對用戶交互響應(yīng)快),，能提供有吸引力的體驗(類似本土應(yīng)用的感受，優(yōu)秀的用戶體驗),。

　　它們使用服務(wù)worker提供脫機功能,，并使用web-app列表文件提供全屏體驗。

　　構(gòu)建漸進式Web應(yīng)用程序的原因可能包括：

　　可以從瀏覽器添加到用戶的主屏幕,。

　　即使沒有互聯(lián)網(wǎng)也能正常工作,。

　　支持網(wǎng)絡(luò)推送通知，增強用戶參與度,。

　　利用谷歌的Lighthouse功能,。

　　如果您想了解更多關(guān)于PWA的信息，請隨時查看以下資源：

　　漸進式Web應(yīng)用(https://developers,、google,、com/web/progressive-web-apps)

　　您的第一個漸進式Web應(yīng)用程序(https://codelapp/#0)

　　5、GraphQL,。

　　GraphQL是目前最熱門的話題之一,，絕對是你2020年需要學(xué)習(xí)或提升的東西。

　　雖然REST提供了無狀態(tài)服務(wù)器等優(yōu)秀概念,，一直被認為是設(shè)計WebAPI的事實標準,，但由于訪問這些RESTfulAPI的客戶端變化太快，這些相對笨拙的API越來越不靈活,。

　　Facebook開發(fā)了GraphQL,，旨在解決開發(fā)者在處理RestfulAPI時面臨的一些具體問題。

　　開發(fā)人員在使用RESTAPI時,，可以從具有特定目的的多個端點(如一個/users/端點或一個/tours//location端點)中獲取數(shù)據(jù),，然后收集數(shù)據(jù)。

　　使用GraphQL時,，工作機制不同,。開發(fā)人員將查詢與他們的數(shù)據(jù)需求一起發(fā)送到GraphQL服務(wù)器。然后,，服務(wù)器將返回具有所有相應(yīng)數(shù)據(jù)的JSON對象,。

　　使用GraphQL的另一個好處是它使用了一個強大的系統(tǒng)類型。GraphQL服務(wù)器上的所有內(nèi)容都是通過schema定義的GraphQLschema定義語言(SDL),。創(chuàng)建schema后,，前端和后端開發(fā)人員可以獨立工作,，因為他們都知道定義的數(shù)據(jù)結(jié)構(gòu)。

　　更多關(guān)于GraphQL的信息,，請查看以下重要資源：

　　GraphQL,。

　　如何開始GraphQL(https://www、howtographql,、com/)

　　GraphQLContentAPI介紹(https://www,、contentful、com/developers/docs/tutorials/general/graphql/)

　　GraphQL:數(shù)據(jù)查詢語言(https://enginering,、fb,、com/core-data/graphql-a-data-query-language/)