10個前端開發需要學習的關鍵技能

小編是一個多年開發經驗的程式設計師,前端、Java、Python我都懂,如果你在入門學習WEB前端的過程當中缺乏系統的學習教程,或者說缺乏一個交流技術的地方,你可以申請加入我的WEB前端裙:前面五一八,中間六七二,最後六九三。裡面還有我這幾年整理的WEB前端學習手冊,面試題,開發工具,PDF文件教程,你可以自行去下載

毫無疑問,前端開發會是 2020 年技術領域最熱門的專業之一。

在過去,前端領域的開發人員只要瞭解一些 HTML、CSS,也許還有 jQuery,就足以建立互動式網站了;但是今天,他們需要面對廣泛而不斷變化的生態系統,開發多種多樣的技能;他們需要掌握眾多工具、庫和框架;並且他們還要不斷投資自身來學習新的知識。

最近幾年湧現了一系列基於 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 則在這個對決中幾乎沒有存在感。

10個前端開發需要學習的關鍵技能

因此在 2020 年,使用或希望使用 JavaScript 框架的前端開發人員應將 React 和 Vue 作為他們的主要選擇。如果你正在處理大型企業專案,則 Angular 也是可行之選。

如果你想了解有關這些框架的更多資訊,請檢視下列重要資源:

React

Vue。js

2。 靜態站點生成器

靜態站點生成器融合了服務端渲染(對於 SEO 來說非常重要,也會影響初始載入時間)和單頁應用程式的能力。

如今,許多專案即使不需要服務端渲染也選擇了一種 SSG,因為 Next 或 Nuxt 之類的解決方案具有很多便捷的功能,例如 markdown 支援、模組打包器和整合的測試執行器等。

如果你很重視前端開發工作,則應仔細研究以下專案,並嘗試獲得一些實踐經驗:

Next(基於 React)

Nuxt(基於 Vue)

Gatsby(基於 React)

Gridsome(基於 Vue)

這些可能是 2020 年最熱門的專案,當然選項還有很多。如果你想了解關於它們的更多資訊,請檢視這些資源:

Next。js

Nuxt。js

Gatsby

Gridsome

10個前端開發需要學習的關鍵技能

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。如果你想了解有關 JAMstacks 的更多資訊,這裡有一些很棒的資源:

JAMstack(https://jamstack。org/)

JAMstack WTF(https://jamstack。wtf/)

“剛接觸 JAMstack?你需要了解的一切入門知識”(https://snipcart。com/blog/jamstack)

10個前端開發需要學習的關鍵技能

4。PWA

漸進式 Web 應用程式(PWA)絕對是 2020 年的熱門話題。越來越多的公司選擇使用 PWA 取代原生應用,從而為使用者提供豐富的移動體驗。

PWA 都很可靠(即時載入,無需連線網際網路即可工作)、速度飛快(流暢的動畫,對使用者互動的快速響應),並能提供吸引人的體驗(類似原生應用的感受,出色的使用者體驗)。

它們利用服務 worker 提供離線功能,並利用一個 web-app 清單檔案提供全屏體驗。

構建一個漸進式 Web 應用的原因可能包括:

可以從瀏覽器新增到使用者的主螢幕

即使沒有網際網路也能正常工作

支援網路推送通知以增強使用者參與度

利用谷歌的 Lighthouse 功能

如果你想了解有關 PWA 的更多資訊,請隨時檢視以下資源:

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

“你的第一個漸進式 Web 應用”(https://codelabs。developers。google。com/codelabs/your-first-pwapp/#0)

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 後,前端和後端開發人員就可以彼此獨立地工作,因為他們都瞭解了已定義的資料結構。

如果你想了解有關 GraphQL 的更多資訊,請檢視以下重要資源:

GraphQL

怎樣開始 GraphQL(https://www。howtographql。com/)

“GraphQL Content API 入門”(https://www。contentful。com/developers/docs/tutorials/general/graphql/)

“GraphQL:一種資料查詢語言”(https://engineering。fb。com/core-data/graphql-a-data-query-language/)

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 的基本概念。以下是一些適合你的資源:

“解釋 Git 的基本概念以及如何使用 GitHub”(https://thepilcrow。net/explaining-basic-concepts-git-and-github/);

“如何使用 GitHub——使用 GitHub 進行開發協作”(https://www。edureka。co/blog/how-to-use-github/);

GitHub。

10。 軟技能

對於開發人員來說,經常被忽視但確實非常重要的是一點就是獲取一些軟技能。

雖然瞭解事物的技術層面是很有用的,但知道如何在團隊中交流也同樣重要。如果你很在乎自己的技術生涯,並且 / 或者打算升任高階職位,那麼你應該發展自己的以下軟技能:

同理心

交流

團隊合作

平易近人和樂於助人

耐心

開放的思想

解決問題的理念

負責任

創造力

時間管理

永遠記住:高階開發人員最重要的交付物是更高階的開發人員。

小結

在本文中,我向你展示了前端開發人員應在 2020 年嘗試學習、改進或掌握的 10 項重要內容。

這份清單並不是要無所不包,但希望它能給你帶來一些的靈感——如何選擇就是你的事情了!

頂部