1.2k Views in前端開發

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

blank

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

毫無疑問，前端開發會是 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 則在這個對決中幾乎沒有存在感。

blank

因此在 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

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 的更多訊息，這裡有一些很棒的資源：

4.PWA

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

PWA 都很可靠（即時載入，無需連接互聯網即可工作）、速度飛快（流暢的動畫，對使用者交互的快速回應），並能提供吸引人的體驗（類似原生應用的感受，出色的用戶體驗）。

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

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

  • 可以從瀏覽器添加到使用者的主螢幕
  • 即使沒有互聯網也能正常工作
  • 支援網路推送通知以增強用戶參與度
  • 利用谷歌的 Lighthouse 功能

如果你想瞭解有關 PWA 的更多訊息，請隨時查看以下資源：

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 的更多訊息，請查看以下重要資源：

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 項重要內容。

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

作者：Simon Holdorf

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

來源：微信

文章著作權歸作者所有，如有侵權，請聯繫小編刪除。

What do you think?

0 Points
Upvote Downvote

Browse and manage your votes from your Member Profile Page

Written by marketer

blank

2020下半年前端技術發展趨勢，值得每個前端人關注！
blank

2020年提高Web前端開發技術需要知道的10個關鍵點