過去，前端領(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)用帶來了強(qiáng)大的動力。
2020年，我們可能會看到Facebook的ReactJS和社區(qū)驅(qū)動的VueJS之間的對抗。目前React在GitHub上有1、4萬星，而Vue甚至有1、5萬星。相比之下，像Angular這樣的項(xiàng)目只有5.3萬星。
2019年，React(藍(lán)線)、Vue(紅線)、Angular(黃線)和Svelte(綠線)的搜索趨勢也可以證明這一假設(shè)——Vue略高于React。Angular的搜索量相差甚遠(yuǎn)，而Svelte在這場對抗中幾乎沒有存在感。
因此，在2020年，使用或希望使用JavaScript框架的前端開發(fā)人員應(yīng)該將React和Vue作為他們的主要選擇。如果你在處理大型企業(yè)項(xiàng)目，Angular也是可行的選擇。
如果您想了解更多關(guān)于這些框架的信息，請查看以下重要資源：
React
Vue、js。
靜態(tài)站點(diǎn)生成器集成了服務(wù)器渲染(SEO非常重要，也會影響初始加載時(shí)間)和單頁應(yīng)用的能力。
如今，許多項(xiàng)目選擇SSG，即使不需要服務(wù)器渲染，因?yàn)镹ext或Nuxt等解決方案有許多方便的功能，如markdown支持、模塊包裝器和集成測試操作器。
如果你非常重視前端開發(fā)，你應(yīng)該仔細(xì)研究以下項(xiàng)目，并嘗試獲得一些實(shí)踐經(jīng)驗(yàn)：
Next(基于React)
Nuxt(基于Vue)
Gatsby(基于React)
Gridsome(基于Vue)
這些可能是2020年最受歡迎的項(xiàng)目，當(dāng)然還有很多選擇。如果您想了解更多關(guān)于它們的信息，請查看這些資源:
Next、js。
Nuxt、js。
Gatsby。
Gridsome。
JavaScript(在客戶端上運(yùn)行，如React、Vue或VanilaJS)、API(服務(wù)端過程通過HTTPS抽象訪問JavaScript)和Markup(部署時(shí)預(yù)構(gòu)建的模板標(biāo)記)。
這是一種構(gòu)建性能更好的網(wǎng)站和應(yīng)用程序的方法——降低擴(kuò)展成本，提供更高的安全性和更好的開發(fā)體驗(yàn)。
雖然這些術(shù)語本身并不新鮮，但它們有自己的共同點(diǎn)——它們不依賴Web服務(wù)器。因此，依靠Ruby或Node、js后端或使用服務(wù)端CMS(如Drupal或WordPress)構(gòu)建網(wǎng)站的單個(gè)應(yīng)用程序不是由JAMstack構(gòu)建的。
如果您想使用JAMstack，以下是一些最佳實(shí)踐：
整個(gè)項(xiàng)目提供CDN服務(wù)。
由于JAMstack不需要服務(wù)器，整個(gè)項(xiàng)目可以通過CDN提供服務(wù)，從而釋放出無與倫比的速度和性能。
把一切都放在Git里。
每個(gè)人都應(yīng)該能夠在沒有數(shù)據(jù)庫或復(fù)雜設(shè)置的情況下從Git存儲庫中克隆整個(gè)項(xiàng)目。
自動化構(gòu)建
您可以完美地自動構(gòu)建，因?yàn)樗械臉?biāo)記都是預(yù)構(gòu)建的——例如，使用webhooks或云服務(wù)來構(gòu)建標(biāo)記。
原子部署
為避免在大型項(xiàng)目中重新部署數(shù)百或數(shù)千份文件時(shí)出現(xiàn)不一致狀態(tài)，原子部署將等待所有文件上傳，然后進(jìn)行更改。
即時(shí)緩存失效。
網(wǎng)站上線時(shí)，必須確保CDN能夠處理即時(shí)緩存清除任務(wù)，以便更改可見。
像Netlify或Zeit這樣的著名主機(jī)支持JAMstack應(yīng)用程序，許多大公司使用它們?yōu)橛脩籼峁┳吭降捏w驗(yàn)。
作為一名前端開發(fā)者，你絕對想在2020年學(xué)習(xí)使用JAMstack。如果你想了解更多關(guān)于JAMstacks的信息，這里有一些很棒的資源:
(https:/jamstack、org/)
wtf(https:/jamstack)
剛接觸JAMstack？您需要了解的所有入門知識(https://snipcart、com/blog/jamstack)
漸進(jìn)式Web應(yīng)用程序(PWA)絕對是2020年的熱門話題。越來越多的公司選擇用PWA代替本地應(yīng)用，從而為用戶提供豐富的移動體驗(yàn)。
PWA非常可靠(即時(shí)加載，無需連接互聯(lián)網(wǎng)即可工作)，速度快(動畫流暢，對用戶交互響應(yīng)快)，能提供有吸引力的體驗(yàn)(類似本土應(yīng)用的感受，優(yōu)秀的用戶體驗(yàn))。
它們使用服務(wù)worker提供脫機(jī)功能，并使用web-app列表文件提供全屏體驗(yàn)。
構(gòu)建漸進(jìn)式Web應(yīng)用程序的原因可能包括：
可以從瀏覽器添加到用戶的主屏幕。
即使沒有互聯(lián)網(wǎng)也能正常工作。
支持網(wǎng)絡(luò)推送通知，增強(qiáng)用戶參與度。
利用谷歌的Lighthouse功能。
如果您想了解更多關(guān)于PWA的信息，請隨時(shí)查看以下資源：
漸進(jìn)式Web應(yīng)用(https://developers、google、com/web/progressive-web-apps)
您的第一個(gè)漸進(jìn)式Web應(yīng)用程序(https://codelapp/#0)
GraphQL是目前最熱門的話題之一，絕對是你2020年需要學(xué)習(xí)或提升的東西。
雖然REST提供了無狀態(tài)服務(wù)器等優(yōu)秀概念，一直被認(rèn)為是設(shè)計(jì)WebAPI的事實(shí)標(biāo)準(zhǔn)，但由于訪問這些RESTfulAPI的客戶端變化太快，這些相對笨拙的API越來越不靈活。
Facebook開發(fā)了GraphQL，旨在解決開發(fā)者在處理RestfulAPI時(shí)面臨的一些具體問題。
開發(fā)人員在使用RESTAPI時(shí)，可以從具有特定目的的多個(gè)端點(diǎn)(如一個(gè)/users/端點(diǎn)或一個(gè)/tours//location端點(diǎn))中獲取數(shù)據(jù)，然后收集數(shù)據(jù)。
使用GraphQL時(shí)，工作機(jī)制不同。開發(fā)人員將查詢與他們的數(shù)據(jù)需求一起發(fā)送到GraphQL服務(wù)器。然后，服務(wù)器將返回具有所有相應(yīng)數(shù)據(jù)的JSON對象。
使用GraphQL的另一個(gè)好處是它使用了一個(gè)強(qiáng)大的系統(tǒng)類型。GraphQL服務(wù)器上的所有內(nèi)容都是通過schema定義的GraphQLschema定義語言(SDL)。創(chuàng)建schema后，前端和后端開發(fā)人員可以獨(dú)立工作，因?yàn)樗麄兌贾蓝x的數(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/)
