毫無疑問许饿，前端開發(fā)會是 2020 年技術(shù)領(lǐng)域最熱門的專業(yè)之一。
在過去舵盈，前端領(lǐng)域的開發(fā)人員只要了解一些 HTML陋率、CSS，也許還有 jQuery书释，就足以創(chuàng)建交互式網(wǎng)站了翘贮；但是今天，他們需要面對廣泛而不斷變化的生態(tài)系統(tǒng)爆惧，開發(fā)多種多樣的技能狸页；他們需要掌握眾多工具、庫和框架；并且他們還要不斷投資自身來學(xué)習(xí)新的知識芍耘。
最近幾年涌現(xiàn)了一系列基于 JavaScript 的優(yōu)秀庫和框架新品址遇，如 ReactJS、VueJS 和 Svelte 等斋竞；它們?yōu)橹髁?Web 應(yīng)用程序帶來了強大的動力倔约。
本文希望為你提供一些指導(dǎo)，幫助你在 2020 年提升自己的前端開發(fā)水平坝初；無論你是新手還是有不少經(jīng)驗的老鳥浸剩，這篇文章都值得一讀。
1. 框架
2020 年鳄袍，我們可能會看到 Facebook 的 ReactJS 與社區(qū)驅(qū)動的 VueJS 之間的對決绢要。目前，React 在 GitHub 上擁有 140,000 星拗小，而 Vue 甚至拿到了 153,000 星重罪。相比之下，Angular 這樣的項目只有 53,000 個星哀九。
在 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)用程序的能力。
如今纳令，許多項目即使不需要服務(wù)端渲染也選擇了一種 SSG挽荠，因為 Next 或 Nuxt 之類的解決方案具有很多便捷的功能，例如 markdown 支持平绩、模塊打包器和集成的測試運行器等圈匆。
如果你很重視前端開發(fā)工作，則應(yīng)仔細(xì)研究以下項目捏雌，并嘗試獲得一些實踐經(jīng)驗：
Next（基于 React）
Nuxt（基于 Vue）
Gatsby（基于 React）
Gridsome（基于 Vue）
這些可能是 2020 年最熱門的項目跃赚，當(dāng)然選項還有很多。如果你想了解關(guān)于它們的更多信息，請查看這些資源：
Next.js
Nuxt.js
Gatsby
Gridsome
3.JAMstack
術(shù)語 JAMstack 代表 JavaScript（在客戶端上運行纬傲，例如 React满败、Vue 或 VanillaJS）、API（服務(wù)端進程通過 JavaScript 經(jīng)由 HTTPS 抽象并訪問）和 markup（在部署時預(yù)構(gòu)建的模板標(biāo)記）叹括。
這是一種構(gòu)建性能更好的網(wǎng)站和應(yīng)用的方法——降低擴展成本算墨、提供更高的安全性并提供更好的開發(fā)體驗。
盡管這些術(shù)語本身并不是什么新鮮事物汁雷，但它們有自己的共同點——它們不依賴 Web 服務(wù)器净嘀。因此，依賴一個 Ruby 或 Node.js 后端侠讯，或使用服務(wù)端 CMS（例如 Drupal 或 WordPress）構(gòu)建站點的單體應(yīng)用就不是用 JAMstack 構(gòu)建的面粮。
如果你要使用 JAMstack，下面是一些最佳實踐：
整個項目都在一個 CDN 上提供服務(wù)
由于 JAMstack 不需要服務(wù)器继低，因此整個項目都可以通過一個 CDN 提供服務(wù)熬苍，從而釋放出無與倫比的速度和性能。
一切都放在 Git 中
所有人都應(yīng)該能夠從一個 Git 存儲庫克隆整個項目袁翁，而無需數(shù)據(jù)庫或復(fù)雜的設(shè)置柴底。
自動化構(gòu)建
你可以完美地自動構(gòu)建，因為所有標(biāo)記都是預(yù)構(gòu)建的——例如使用 webhooks 或云服務(wù)預(yù)構(gòu)建標(biāo)記粱胜。
原子部署
為了在大型項目中重新部署數(shù)百或數(shù)千個文件時避免出現(xiàn)不一致的狀態(tài)柄驻，原子部署將等待所有文件上傳，然后再進行更改焙压。
即時緩存失效
當(dāng)站點上線時鸿脓，必須確保 CDN 可以處理即時緩存清除任務(wù)，以使更改可見涯曲。
像 Netlify 或 Zeit 這樣的著名主機都支持 JAMstack 應(yīng)用程序野哭，還有很多大公司使用它們?yōu)橛脩籼峁┏錾捏w驗。
作為一名前端開發(fā)人員幻件，你絕對會想在 2020 年學(xué)習(xí)使用 JAMstack拨黔。如果你想了解有關(guān) JAMstacks 的更多信息，這里有一些很棒的資源：
JAMstack（https://jamstack.org/）
JAMstack WTF（https://jamstack.wtf/）
“剛接觸 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)用的感受，出色的用戶體驗）。
它們利用服務(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://codelabs.developers.google.com/codelabs/your-first-pwapp/#0）
5.GraphQL
GraphQL 是當(dāng)前最熱門的話題之一傻铣，并且絕對是你在 2020 年需要學(xué)習(xí)或提升的事物章贞。
盡管 REST 提供了無狀態(tài)服務(wù)器之類的出色概念，一直被認(rèn)為是設(shè)計 Web API 的事實標(biāo)準(zhǔn)非洲，但由于訪問這些 RESTful API 的客戶端的變化速度太快鸭限，這些相對笨拙的 API 越來越顯得不夠靈活了。
GraphQL 由 Facebook 開發(fā)两踏，旨在解決開發(fā)人員在處理 Restful API 時面臨的一些具體問題败京。
使用 REST API 時，開發(fā)人員可以從具有一個特定目的的多個端點（例如一個 /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)容都是使用 GraphQLschema 定義語言（SDL）晶姊，通過一個 schema 定義的。創(chuàng)建 schema 后伪货，前端和后端開發(fā)人員就可以彼此獨立地工作们衙，因為他們都了解了已定義的數(shù)據(jù)結(jié)構(gòu)。
如果你想了解有關(guān) GraphQL 的更多信息碱呼，請查看以下重要資源：
GraphQL
怎樣開始 GraphQL（https://www.howtographql.com/）
“GraphQL Content API 入門”（https://www.contentful.com/developers/docs/tutorials/general/graphql/）
“GraphQL：一種數(shù)據(jù)查詢語言”（https://engineering.fb.com/core-data/graphql-a-data-query-language/）
6. 代碼編輯器 /IDE
與 2019 年一樣蒙挑，微軟的 VS Code 將在 2020 年成為大多數(shù)前端工程師的首選編輯器。
它提供了很像 IDE 的功能巍举，例如代碼完成和高亮顯示脆荷，并且可以通過其擴展市場來獲得幾乎無限的擴展能力。
其中擴展市場是讓 VS Code 如此出色的最大功臣懊悯。以下是為前端開發(fā)人員準(zhǔn)備的一些出色擴展：
JavaScript (ES6) code snippets
npm
Prettier
CSS Peek
Vetur
ESLint
Live Sass Compiler
Debugger for Chrome
Live Server
Beautify
這些是一些很酷的例子。在 VS Code 中還有很多值得探索的內(nèi)容梦皮，因此如果你還沒用過炭分，我建議你嘗試一下。
7. 測試
未經(jīng)測試的代碼不應(yīng)被投入生產(chǎn)環(huán)境剑肯。
在你的個人項目中捧毛，似乎不做任何測試是很方便的，但在商業(yè)和企業(yè)環(huán)境中工作時必須進行測試。因此對于任何開發(fā)人員而言呀忧，最好盡量將測試集成到開發(fā)工作流程中师痕。
測試用例可以分為以下幾類：
單元測試
在隔離環(huán)境中測試單個組件或函數(shù)。
集成測試
測試組件之間的交互而账。
端到端測試
在瀏覽器中測試完整功能的用戶流胰坟。
還有更多測試方法，例如手動測試泞辐、快照測試等笔横。如果你想升任高級開發(fā)人員職位，或打算在具備一些開發(fā)標(biāo)準(zhǔn)的大型公司工作咐吼，則應(yīng)嘗試提升自己的測試技能吹缔。
8. 純凈代碼
能夠編寫干凈的代碼是一項很棒的技能，許多組織都對此提出了很高的要求锯茄。如果你想從開發(fā)人員的職位升級為高級開發(fā)人員厢塘，則應(yīng)該好好學(xué)習(xí)純凈代碼的理念。
簡潔的代碼應(yīng)該是優(yōu)雅且易讀的肌幽。它們應(yīng)該專注于某個目標(biāo)俗冻，你應(yīng)該做到這一點。所有測試均運行在純凈代碼中牍颈。它們不應(yīng)包含重復(fù)項迄薄，應(yīng)盡量減少實體（例如類、方法和函數(shù)）的使用煮岁。
想要編寫純凈代碼讥蔽，開發(fā)人員應(yīng)做的一些事情是：
為變量、類画机、方法和函數(shù)創(chuàng)建有意義的名稱冶伞；
函數(shù)應(yīng)該很小并且應(yīng)該盡可能減少參數(shù)；
根本不需要注釋——代碼本身就應(yīng)該說明一切步氏。
如果你想了解有關(guān)純凈代碼檢查的更多信息响禽，請閱讀 Robert C. Martin 的書籍和帖子。
9.Git
毫無疑問荚醒，Git 是當(dāng)今 Web 開發(fā)中版本控制的標(biāo)準(zhǔn)芋类。對于每位前端工程師而言，了解基本的 Git 概念和工作流程是非常重要的界阁，這樣才能在各種規(guī)模的團隊中高效工作侯繁。
下面是你應(yīng)該知道的一些流行的 Git 命令：
git config
git init
git clone
git status
git add
git commit
git push
git pull
git branch
這些命令可以提高工作效率，熟悉它們當(dāng)然是很好的泡躯；但是前端工程師還應(yīng)該學(xué)習(xí) Git 的基本概念贮竟。以下是一些適合你的資源：
“解釋 Git 的基本概念以及如何使用 GitHub”（https://thepilcrow.net/explaining-basic-concepts-git-and-github/）丽焊；
“如何使用 GitHub——使用 GitHub 進行開發(fā)協(xié)作”（https://www.edureka.co/blog/how-to-use-github/）；
GitHub咕别。
10. 軟技能
對于開發(fā)人員來說技健，經(jīng)常被忽視但確實非常重要的是一點就是獲取一些軟技能。
雖然了解事物的技術(shù)層面是很有用的惰拱，但知道如何在團隊中交流也同樣重要雌贱。如果你很在乎自己的技術(shù)生涯，并且 / 或者打算升任高級職位弓颈，那么你應(yīng)該發(fā)展自己的以下軟技能：
同理心
交流
團隊合作
平易近人和樂于助人
耐心
開放的思想
解決問題的理念
負(fù)責(zé)任
創(chuàng)造力
時間管理
永遠記酌毖俊：高級開發(fā)人員最重要的交付物是更高級的開發(fā)人員。
小結(jié)
在本文中翔冀，我向你展示了前端開發(fā)人員應(yīng)在 2020 年嘗試學(xué)習(xí)导街、改進或掌握的 10 項重要內(nèi)容。
這份清單并不是要無所不包纤子，但希望它能給你帶來一些的靈感——如何選擇就是你的事情了搬瑰！
對于學(xué)前端總結(jié)了一些經(jīng)驗和整理了一套學(xué)習(xí)視頻資料：
這是我自己組建的一個前端技術(shù)交流Q un ++++++++++++++
錢面是--282--
中間是--549--
后面是--184---
如果需要學(xué)習(xí)資料在里面下載】嘏穑看看前輩們是如何在編程的世界里傲然前行泽论。
