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

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

　　1、框架

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

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

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

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

　　React

　　Vue、js。

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

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

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

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

　　Next(基于React)

　　Nuxt(基于Vue)

　　Gatsby(基于React)

　　Gridsome(基于Vue)

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

　　Next、js。

　　Nuxt、js。

　　Gatsby。

　　Gridsome。

　　3、JAMstack。

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

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

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

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

　　整個項目提供CDN服務。

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

　　把一切都放在Git里。

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

　　自動化構建

　　您可以完美地自動構建，因為所有的標記都是預構建的——例如，使用webhooks或云服務來構建標記。

　　原子部署

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

　　即時緩存失效。

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

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

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

　　(https:/jamstack、org/)

　　wtf(https:/jamstack)

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

　　4、PWA

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

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

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

　　構建漸進式Web應用程序的原因可能包括：

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

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

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

　　利用谷歌的Lighthouse功能。

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

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

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

　　5、GraphQL。

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

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

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

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

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

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

　　更多關于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/)