前端大牛：2020年給前端開發工程師的10個學習建議

毫無疑問，前端開發將成爲2020年技術領域最熱門的學科之一。

之前，前端空間的開發人員只要瞭解一些HTML，CSS，也許還有jQuery來建立交互式網站，就足夠了。可是今天，他們面臨着普遍且不斷變化的開發技能生態系統；掌握的工具，庫和框架；而且須要不斷投資於我的教育。

最近幾年，咱們使用JavaScript爲主要的Web應用程序提供了強大的新庫和框架，例如ReactJS，VueJS和Svelte。

在這裏小編建了一個前端學習交流扣扣羣：132667127，我本身整理的最新的前端資料和高級開發教程，若是有想須要的，能夠加羣一塊兒學習交流

本文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之類的解決方案具備便捷的功能，例如模塊捆綁器，集成測試運行器等。

若是您認真對待前端開發，則應仔細研究如下項目，並嘗試得到一些實踐經驗：

· Next（基於React）

· Nuxt（基於Vue）

· Gatsby（基於React）

· Gridsome（基於Vue）

3. JAMstack

術語JAMstack表明JavaScript（在客戶端上運行-例如，React，Vue或VanillaJS），API（服務器端進程經過JavaScript經過HTTPS抽象並訪問）和標記（在部署時預先構建的模板標記）。。

這是一種構建網站和應用程序以提升性能的方法-下降擴展成本，提供更高的安全性並提供更好的開發人員體驗。

儘管這些術語自己並非什麼新鮮事物，但它們的共同點是相同的-它們並不依賴於Web服務器。所以，依賴於Ruby或Node.js後端或使用服務器端CMS（例如Drupal或WordPress）構建的網站的單片應用程序不是使用JAMstack構建的。

若是要使用JAMstack，有一些最佳實踐：

整個項目都在CDN上提供服務

因爲不須要服務器，所以整個項目均可以經過CDN進行服務，從而釋放出無與倫比的速度和性能。

一切都存在於在Git中

每一個人都應該可以從Git存儲庫克隆整個項目，而無需數據庫或複雜的設置。

自動化構建

您能夠完美地自動構建，由於全部標記都是預先構建的，例如使用webhooks或雲服務。

原子部署

爲了經過在大型項目中從新部署數百或數千個文件來避免出現不一致的狀態，原子部署將等待全部文件上傳，而後再進行更改。

即時緩存失效

當站點上線時，必須確保CDN能夠處理即時緩存清除，以使更改可見。

像Netlify或Zeit這樣的著名主機都支持JAMstack應用程序，大公司使用它們爲用戶提供出色的體驗。

4. PWA

漸進式Web應用程序（PWA）無疑將在2020年成爲現實。愈來愈多的公司選擇PWA取代本機應用程序，以便爲用戶提供豐富的移動體驗。

PWA可靠（即時加載，無需鏈接互聯網便可工做），快速（流暢的動畫，對用戶交互的快速響應）和吸引人的體驗（本機應用程序的感受，出色的用戶體驗）。

他們利用服務人員提供脫機功能，並利用Web應用清單文件提供全屏體驗。

構建漸進式Web應用程序的緣由有：

· 能夠從瀏覽器添加到用戶的主屏幕

· 即便沒有互聯網也能正常工做

· 支持網絡推送通知以加強用戶參與度

· 利用Google的Lighthouse功能

5. GraphQL

GraphQL是當前最熱門的主題之一，而且絕對是您在2020年須要學習或改進的東西。

儘管REST經過提供無狀態服務器之類的出色概念一直被認爲是設計Web API的事實上的標準，但在跟上快速變化的客戶端訪問RESTful API時，RESTful API卻愈來愈不靈活。

GraphQL由Facebook開發，旨在解決開發人員在處理Restful API時面臨的確切問題。

使用REST API，開發人員能夠經過從具備特定目的的多個端點（例如/ users / 端點或/ tours / / location端點）中獲取數據來收集數據。

使用GraphQL，這將以不一樣的方式工做。開發人員會將查詢與他們的數據要求一塊兒發送到GraphQL服務器。而後，服務器將返回帶有全部相應數據的JSON對象。

使用GraphQL的另外一個好處是它使用了強類型系統。GraphQL服務器上的全部內容都是使用GraphQL模式定義語言（SDL）經過模式定義的。建立架構後，前端開發人員和後端開發人員均可以彼此獨立地工做，由於他們知道已定義的數據結構。

6.代碼編輯器/ IDE

與2019年同樣，微軟的VS Code將在2020年成爲大多數前端工程師的第一編輯器。

它提供幾乎相似於IDE的功能，例如代碼自動完成和語法高亮顯示，而且能夠經過其擴展市場進行幾乎無限的擴展。

特別是市場使VS Code如此出色。如下是您做爲前端開發人員的一些出色擴展：

· JavaScript（ES6）代碼段

· npm

· beautify

· CSS速覽

· ESLint

· Live Sass編譯器

· Chrome調試器

這些是很酷的例子。在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.軟技能

對於開發人員來講，常常被忽視但確實很是重要的是得到軟技能。

雖然有助於瞭解事物的技術方面，但瞭解如何在團隊中進行交流也一樣重要。若是您對技術職業很認真，而且/或者打算升任高級職位，則應該從事如下軟技能方面的工做：

同情

溝通

團隊合做

平易近人和樂於助人

忍耐

開放的思想

解決問題

責任心

創造力

時間管理

永遠記住：開發人員最重要的交付物是高級開發人員。（提高你本身）

結論

在本文中，web前端的小編向您展現了前端開發人員應在2020年嘗試學習，改進或掌握的10項重要內容。

這份清單並非要完整，但但願它能給您明年的靈感-選擇全由您決定！