毫無疑問，前端開發(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)用程序帶來了強(qiá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（藍(lán)線）袍患、Vue（紅線）谓苟、Angular（黃線）和 Svelte（綠線）的搜索趨勢也能為這一假設(shè)提供佐證——其中 Vue 略高于 React。Angular 在搜索量方面差的很遠(yuǎn)协怒，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ù)端進(jìn)程通過 JavaScript 經(jīng)由 HTTPS 抽象并訪問）和 markup（在部署時預(yù)構(gòu)建的模板標(biāo)記）神妹。
這是一種構(gòu)建性能更好的網(wǎng)站和應(yīng)用的方法——降低擴(kuò)展成本颓哮、提供更高的安全性并提供更好的開發(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)，原子部署將等待所有文件上傳牵舱，然后再進(jìn)行更改串绩。
即時緩存失效
當(dāng)站點上線時，必須確保 CDN 可以處理即時緩存清除任務(wù)芜壁，以使更改可見礁凡。
像 Netlify 或 Zeit 這樣的著名主機(jī)都支持 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
漸進(jìn)式 Web 應(yīng)用程序（PWA）絕對是 2020 年的熱門話題。越來越多的公司選擇使用 PWA 取代原生應(yīng)用饱普，從而為用戶提供豐富的移動體驗运挫。
PWA 都很可靠（即時加載状共，無需連接互聯(lián)網(wǎng)即可工作）、速度飛快（流暢的動畫滑臊，對用戶交互的快速響應(yīng)）口芍，并能提供吸引人的體驗（類似原生應(yīng)用的感受，出色的用戶體驗）雇卷。
它們利用服務(wù) worker 提供脫機(jī)功能鬓椭，并利用一個 web-app 清單文件提供全屏體驗。
構(gòu)建一個漸進(jìn)式 Web 應(yīng)用的原因可能包括：
- 可以從瀏覽器添加到用戶的主屏幕
- 即使沒有互聯(lián)網(wǎng)也能正常工作
- 支持網(wǎng)絡(luò)推送通知以增強(qiáng)用戶參與度
- 利用谷歌的 Lighthouse 功能
如果你想了解有關(guān) PWA 的更多信息关划，請隨時查看以下資源：
- 漸進(jìn)式 Web 應(yīng)用（https://developers.google.com/web/progressive-web-apps）
- “你的第一個漸進(jìn)式 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ù)筐带，進(jìn)而收集數(shù)據(jù)。
使用 GraphQL 時的工作機(jī)制有所不同缤灵。開發(fā)人員會將一個查詢與他們的數(shù)據(jù)需求一起發(fā)送到一個 GraphQL 服務(wù)器上伦籍。然后，服務(wù)器將返回帶有所有對應(yīng)數(shù)據(jù)的一個 JSON 對象腮出。
使用 GraphQL 的另一個好處是它使用了強(qiáng)類型系統(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 的功能口注，例如代碼完成和高亮顯示，并且可以通過其擴(kuò)展市場來獲得幾乎無限的擴(kuò)展能力君珠。
其中擴(kuò)展市場是讓 VS Code 如此出色的最大功臣寝志。以下是為前端開發(fā)人員準(zhǔn)備的一些出色擴(kuò)展：
- 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)境中工作時必須進(jì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ī)模的團(tuán)隊中高效工作牵咙。
下面是你應(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 進(jìn)行開發(fā)協(xié)作”（https://www.edureka.co/blog/how-to-use-github/）侯嘀；
- GitHub另凌。
小編是一個多年開發(fā)經(jīng)驗的程序員，懂前端戒幔、Java途茫、Python。今年年初整理了一批WEB前端學(xué)習(xí)資料作為粉絲福利溪食，不論你是計算機(jī)專業(yè)想往WEB前端方向發(fā)展囊卜，還是零基礎(chǔ)想要轉(zhuǎn)行學(xué)習(xí)WEB前端，這份資料都能幫助到你错沃，在自學(xué)過程中遇見問題了也可以隨時問我栅组。這是我的WEB前端裙，518-672-693枢析，關(guān)于Java和Python的問題也可以在里面問我玉掸。
10. 軟技能
對于開發(fā)人員來說，經(jīng)常被忽視但確實非常重要的是一點就是獲取一些軟技能醒叁。
雖然了解事物的技術(shù)層面是很有用的司浪，但知道如何在團(tuán)隊中交流也同樣重要。如果你很在乎自己的技術(shù)生涯把沼，并且 / 或者打算升任高級職位啊易，那么你應(yīng)該發(fā)展自己的以下軟技能：
- 同理心
- 交流
- 團(tuán)隊合作
- 平易近人和樂于助人
- 耐心
- 開放的思想
- 解決問題的理念
- 負(fù)責(zé)任
- 創(chuàng)造力
- 時間管理
永遠(yuǎn)記住：高級開發(fā)人員最重要的交付物是更高級的開發(fā)人員饮睬。
小結(jié)
在本文中租谈，我向你展示了前端開發(fā)人員應(yīng)在 2020 年嘗試學(xué)習(xí)、改進(jìn)或掌握的 10 項重要內(nèi)容捆愁。
這份清單并不是要無所不包割去，但希望它能給你帶來一些的靈感——如何選擇就是你的事情了！
