2021年前端開發人員應該學習的10件事
毫無疑問，前端開發將是2021年程式設計領域最熱門之一。
以前的前端開發者只要懂得一些HTML、CSS，或許還有jQuery就足以創建互動式網站，但如今面臨的是一個廣泛且不斷變化的生態系統，需要新的開發技能;需要掌握新的工具、庫和框架;需要不斷地投資自己。
在過去的幾年裡，給我們帶來了很棒的新庫和框架，比如ReactJS、VueJS和Svelte，利用JAVAScript來驅動主要的Web應用。
1. 框架
在2021年，我們可能會看到Facebook的ReactJS和社區驅動的VueJS之間的對決。 React目前在GitHub上擁有15.9萬顆星星，而Vue的星星數更多--17.5萬顆。 例如，Angular只有6.75萬顆星。
React（藍線）、Vue（紅線）、Angular（黃線）和Svelte（綠線）在2019年的搜索量支援了這一假設--Vue略高於React。 Angular在搜索量上跟不上，Svelte在這次比較中完全沒有作用。
因此，對於2021年，從事或想要使用JAVAScript框架的前端開發人員應該將React和Vue作為主要選擇。 如果你正在從事大型企業專案，Angular是一個有效的選擇。
2. 靜態網站產生器
靜態網站生成器結合了伺服器端渲染（對SEO非常重要，但也是初始載入時間）和單頁應用的力量。
現在很多專案即使不需要伺服器端渲染，也會選擇SSG，因為像Next或Nuxt這樣的解決方案都帶有方便的功能，比如標記支援、模組捆綁器、集成測試運行器等。
如果你對前端開發感興趣，你應該仔細研究一下下面的專案，並嘗試在這些專案上獲得一些實踐經驗：
- Next (React-based)
- Nuxt (Vue-based)
- Gatsby (React-based)
- Gridsome (Vue-based)
3. JAMstack
術語JAMstack代表JAVAScript（在用戶端運行--例如，React、Vue或VanillaJS）、API（伺服器端進程被抽象化，並通過JAVAScript通過HTTPS訪問）和標記（在部署時預先構建的範本化標記）。
這是一種構建網站和應用的方式，以獲得更好的性能--降低擴展成本，提供更高的安全性，並提供更好的開發者體驗。
雖然這些名詞本身並不新鮮，但它們都有相同的地方--不依賴於Web伺服器。 因此，一個依靠Ruby或Node.js後端的單片應用，或者一個使用Drupal或WordPress等伺服器端CMS構建的網站，都不是用JAMstack構建的。
如果你想使用JAMstack，有一些最佳實踐。
整個專案在CDN上服務
因為不需要伺服器，整個專案可以由CDN提供服務，釋放出無與倫比的速度和性能。
一切都在Git里
每個人都應該能夠從Git repo中克隆整個專案，而不需要資料庫或複雜的設置。
自動構建
你可以完美地自動構建，因為所有的標記都是預先構建的--例如，使用webhooks或雲服務。
Atomic部署了
為了避免在大型專案中重新部署成百上千個檔而導致狀態不一致，原子部署會等待所有文件上傳後再上線修改。
即時緩存無效
當一個網站上線時，你必須確保你的CDN能夠處理即時的緩存清除，讓變化變得可見。
大公司使用它們為使用者提供良好的體驗。
在2021年，作為一個前端開發者，這絕對是你想搞清楚的事情。
4. PWA
漸進式網路應用（PWA）在2021年肯定會成為一種趨勢。 越來越多的公司選擇PWA而不是原生應用，為使用者提供豐富的行動體驗。
PWA是可靠的（即時載入，無需網路連接即可工作），快速的（流暢的動畫，對使用者互動的快速回應），以及吸引人的（原生應用的感覺，良好的用戶體驗）。
它們利用服務工作者實現離線功能，利用Web應用清單檔實現全屏體驗。
構建一個進步的Web應用的原因有，比如。
可以從瀏覽器添加到使用者的主螢幕上
即使沒有網路連接也可以工作。
支援網路推送通知，增強用戶參與度
5. GraphQL
現在最熱門的話題之一，也絕對是你在2021年要學習或改進的事情，就是GraphQL。
雖然REST通過提供無狀態伺服器等偉大的概念，長期以來被認為是設計Web API的事實標準，但RESTful API在跟上快速變化的用戶端訪問時，越來越被認為是不靈活的。
GraphQL由Facebook開發，正是為了解決開發者在處理Restful API時面臨的問題。
使用REST API，開發人員將通過從多個端點收集數據，這些端點是為了特定目的而創建的，例如，/users/_id端點或/tours/_id/location端點。
使用GraphQL，工作方式會有所不同。 開發人員將向GraphQL伺服器發送一個查詢，並附上他們的數據需求。 然後伺服器將返回一個包含所有相應數據的JSON物件。
使用GraphQL的另一個好處是它使用了一個強大的類型系統。 GraphQL伺服器上的一切都通過使用GraphQL模式定義語言（SDL）的模式來定義。 一旦創建了模式，前端和後端開發人員都可以很獨立地相互工作，因為他們知道定義的數據結構。
6. 程式碼編輯器/IDEs
就像在2020年，微軟的VS Code將在2021年成為大多數前端工程師的第一編輯器。
它提供了幾乎類似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. 整潔的代碼
能夠寫出乾淨的代碼是一項很好的技能，也是很多企業所需要的。 如果你想從開發人員的崗位升到高級開發人員的崗位，你應該真正學習乾淨代碼的概念。
乾淨的代碼應該是優雅的，令人愉悅的閱讀。 它應該是集中的，你應該照顧它。 所有的測試都在乾淨的代碼中運行。 它們不應該包含重複的內容，實體的使用，如類、方法和函數，應該盡量減少。
一個乾淨的代碼開發者應該做的一些事情是。
為變數，類，方法和函數創建有意義的名稱。
函數要小，參數要盡量少。
根本不應該要求註釋--代碼本身就應該是有意義的。
9. git
毫無疑問，Git是目前Web開發中版本控制的標準。 對於每一個前端工程師來說，瞭解基本的Git概念和工作流程，對於在各種規模的團隊中有效工作真的很重要。
下面是一些你應該知道的常用Git命令。
- git config
- git init
- git clone
- git status
- git add
- git commit
- git push
- git pull
- git branch
10. 軟技能
經常被忽視，但對開發人員來說真的非常重要，那就是掌握軟技能。
雖然瞭解技術方面的知識很有説明，但知道如何在團隊中進行溝通同樣重要。 如果你計劃向高級職位發展，你應該努力掌握以下軟技能。
同理心
溝通
團隊合作
親和力和熱心説明
耐心
思想開放
解決問題
問責制
創造性
時間管理
我是胖虎，一個正在創業的前端工程師，如果你同樣迷茫不知道前端該如何學習，可以加入我的自學團，會有知識分享，匹配學習夥伴，還可以參加我組織的上線專案及活動。
想加入的夥伴給我留言或者直接私信。
作者：hly990990