在過去，前端領域的開發人員只要了解一些 HTML、CSS，也許還有 jQuery，就足以創建互動式網站了；但是今天，他們需要面對廣泛而不斷變化的生態系統，開發多種多樣的技能；他們需要掌握眾多工具、庫和框架；并且他們還要不斷投資自身來學習新的知識。下面就跟大家分享2020年需要學習的10個前端關鍵技能。
最近幾年涌現了一系列基于 JavaScript 的優秀庫和框架新品，如 ReactJS、VueJS 和 Svelte 等；它們為主流 Web 應用程式帶來了強大的動力。
本文希望為你提供一些指導，幫助你在 2020 年提升自己的前端開發水平；無論你是新手還是有不少經驗的老鳥，這篇文章都值得一讀。
1. 框架
2020 年，我們可能會看到 Facebook 的 ReactJS 與社區驅動的 VueJS 之間的對決。目前，React 在 GitHub 上擁有 140,000 星，而 Vue 甚至拿到了 153,000 星。相比之下，Angular 這樣的專案只有 53,000 個星。
在 2019 年，React（藍線）、Vue（紅線）、Angular（黃線）和 Svelte（綠線）的搜索趨勢也能為這一假設提供佐證——其中 Vue 略高于 React。Angular 在搜索量方面差的很遠，Svelte 則在這個對決中幾乎沒有存在感。
因此在 2020 年，使用或希望使用 JavaScript 框架的前端開發人員應將 React 和 Vue 作為他們的主要選擇。如果你正在處理大型企業專案，則 Angular 也是可行之選。
2. 靜態站點生成器
靜態站點生成器融合了服務端渲染（對于 SEO 來說非常重要，也會影響初始加載時間）和單頁應用程式的能力。
如今，許多專案即使不需要服務端渲染也選擇了一種 SSG，因為 Next 或 Nuxt 之類的解決方案具有很多便捷的功能，例如 markdown 支持、模塊打包器和集成的測驗運行器等。
如果你很重視前端開發作業，則應仔細研究以下專案，并嘗試獲得一些實踐經驗：
Next（基于 React）
Nuxt（基于 Vue）
Gatsby（基于 React）
Gridsome（基于 Vue）
這些可能是 2020 年最熱門的專案，當然選項還有很多。
3.JAMstack
術語 JAMstack 代表 JavaScript（在客戶端上運行，例如 React、Vue 或 VanillaJS）、API（服務端行程通過 JavaScript 經由 HTTPS 抽象并訪問）和 markup（在部署時預構建的模板標記）。
這是一種構建性能更好的網站和應用的方法——降低擴展成本、提供更高的安全性并提供更好的開發體驗。
盡管這些術語本身并不是什么新鮮事物，但它們有自己的共同點——它們不依賴 Web 服務器。因此，依賴一個 Ruby 或 Node.js 后端，或使用服務端 CMS（例如 Drupal 或 WordPress）構建站點的單體應用就不是用 JAMstack 構建的。
如果你要使用 JAMstack，下面是一些最佳實踐：
整個專案都在一個 CDN 上提供服務
由于 JAMstack 不需要服務器，因此整個專案都可以通過一個 CDN 提供服務，從而釋放出無與倫比的速度和性能。
一切都放在 Git 中
所有人都應該能夠從一個 Git 存盤庫克隆整個專案，而無需資料庫或復雜的設定。
自動化構建
你可以完美地自動構建，因為所有標記都是預構建的——例如使用 webhooks 或云服務預構建標記。
原子部署
為了在大型專案中重新部署數百或數千個檔案時避免出現不一致的狀態，原子部署將等待所有檔案上傳，然后再進行更改。
即時快取失效
當站點上線時，必須確保 CDN 可以處理即時快取清除任務，以使更改可見。
像 Netlify 或 Zeit 這樣的著名主機都支持 JAMstack 應用程式，還有很多大公司使用它們為用戶提供出色的體驗。
作為一名前端開發人員，你絕對會想在 2020 年學習使用 JAMstack。
4.PWA
漸進式 Web 應用程式（PWA）絕對是 2020 年的熱門話題。越來越多的公司選擇使用 PWA 取代原生應用，從而為用戶提供豐富的移動體驗。
PWA 都很可靠（即時加載，無需連接互聯網即可作業）、速度飛快（流暢的影片，對用戶互動的快速回應），并能提供吸引人的體驗（類似原生應用的感受，出色的用戶體驗）。
它們利用服務 worker 提供脫機功能，并利用一個 web-app 清單檔案提供全屏體驗。
構建一個漸進式 Web 應用的原因可能包括：
可以從瀏覽器添加到用戶的主螢屏
即使沒有互聯網也能正常作業
支持網路推送通知以增強用戶參與度
利用谷歌的 Lighthouse 功能
5.GraphQL
GraphQL 是當前最熱門的話題之一，并且絕對是你在 2020 年需要學習或提升的事物。
盡管 REST 提供了無狀態服務器之類的出色概念，一直被認為是設計 Web API 的事實標準，但由于訪問這些 RESTful API 的客戶端的變化速度太快，這些相對笨拙的 API 越來越顯得不夠靈活了。
GraphQL 由 Facebook 開發，旨在解決開發人員在處理 Restful API 時面臨的一些具體問題。
使用 REST API 時，開發人員可以從具有一個特定目的的多個端點（例如一個 /users/端點或一個 /tours//location 端點）中獲取資料，進而收集資料。
使用 GraphQL 時的作業機制有所不同。開發人員會將一個查詢與他們的資料需求一起發送到一個 GraphQL 服務器上。然后，服務器將回傳帶有所有對應資料的一個 JSON 物件。
使用 GraphQL 的另一個好處是它使用了強型別系統。GraphQL 服務器上的所有內容都是使用 GraphQLschema 定義語言（SDL），通過一個 schema 定義的。創建 schema 后，前端和后端開發人員就可以彼此獨立地作業，因為他們都了解了已定義的資料結構。
6. 代碼編輯器 /IDE
與 2019 年一樣，微軟的 VS Code 將在 2020 年成為大多數前端工程師的首選編輯器。
它提供了很像 IDE 的功能，例如代碼完成和高亮顯示，并且可以通過其擴展市場來獲得幾乎無限的擴展能力。
其中擴展市場是讓 VS Code 如此出色的最大功臣。以下是為前端開發人員準備的一些出色擴展：
JavaScript (ES6) code snippets
npm
Prettier
CSS Peek
Vetur
ESLint
Live Sass Compiler
Debugger for Chrome
Live Server
Beautify
這些是一些很酷的例子。在 VS Code 中還有很多值得探索的內容，因此如果你還沒用過，我建議你嘗試一下。
7. 測驗
未經測驗的代碼不應被投入生產環境。
在你的個人專案中，似乎不做任何測驗是很方便的，但在商業和企業環境中作業時必須進行測驗。因此對于任何開發人員而言，最好盡量將測驗集成到開發作業流程中。
測驗用例可以分為以下幾類：
單元測驗
在隔離環境中測驗單個組件或函式。
集成測驗
測驗組件之間的互動。
端到端測驗
在瀏覽器中測驗完整功能的用戶流。
還有更多測驗方法，例如手動測驗、快照測驗等。如果你想升任高級開發人員職位，或打算在具備一些開發標準的大型公司作業，則應嘗試提升自己的測驗技能。
8. 純凈代碼
能夠撰寫干凈的代碼是一項很棒的技能，許多組織都對此提出了很高的要求。如果你想從開發人員的職位升級為高級開發人員，則應該好好學習純凈代碼的理念。
簡潔的代碼應該是優雅且易讀的。它們應該專注于某個目標，你應該做到這一點。所有測驗均運行在純凈代碼中。它們不應包含重復項，應盡量減少物體（例如類、方法和函式）的使用。
想要撰寫純凈代碼，開發人員應做的一些事情是：
為變數、類、方法和函式創建有意義的名稱；
函式應該很小并且應該盡可能減少引數；
根本不需要注釋——代碼本身就應該說明一切。
如果你想了解有關純凈代碼檢查的更多資訊，請閱讀 Robert C. Martin 的書籍和帖子。
9.Git
毫無疑問，Git 是當今 Web 開發中版本控制的標準。對于每位前端工程師而言，了解基本的 Git 概念和作業流程是非常重要的，這樣才能在各種規模的團隊中高效作業。
下面是你應該知道的一些流行的 Git 命令：
git config
git init
git clone
git status
git add
git commit
git push
git pull
git branch
這些命令可以提高作業效率，熟悉它們當然是很好的；但是前端工程師還應該學習 Git 的基本概念。
10. 軟技能
對于開發人員來說，經常被忽視但確實非常重要的是一點就是獲取一些軟技能。
雖然了解事物的技術層面是很有用的，但知道如何在團隊中交流也同樣重要。如果你很在乎自己的技術生涯，并且 / 或者打算升任高級職位，那么你應該發展自己的以下軟技能：
同理心
交流
團隊合作
平易近人和樂于助人
耐心
開放的思想
解決問題的理念
負責任
創造力
時間管理
永遠記住：高級開發人員最重要的交付物是更高級的開發人員。
小結
在本文中，展示了前端開發人員應在 2020 年嘗試學習、改進或掌握的 10 項重要內容。這份清單并不是要無所不包，但希望它能給你帶來一些的靈感——如何選擇就是你的事情了！
uj5u.com熱心網友回復：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/10615.html
標籤：非技術區
上一篇：vue打包以后，data引入的內容全部不顯示是為什么？？
下一篇：Flask專案報錯