關於前端開發，500位工程師總結出了8款「最牛」編程語言工具

過去，前端開發不像現在這麼複雜，也不像現在這麼令人興奮。畢竟每天都有新工具、新框架和新插件出現，需要我們不斷學習。所幸，我們 Grab 的網頁設計團隊一直都走在前端開發的前沿，已經在自家網頁應用中融入了現代 JavaScript 系統。

但是，新員工和後端工程師可能還不太了解現代 JavaScript 系統。因此，在研發新功能或者修復漏洞時，會有些吃力。這時，公司就必須指導他們學習前端開發知識，幫助他們減少使用系統時遇到的問題，以最快的速度把代碼介紹給用戶。

在這份學習指南中，我們以 Grab 目前使用的工具為基礎，從前端開發的每個方面出發，向大家推薦了幾種值得學習的庫和框架。

使用須知

1. 熟練掌握核心編程概念；

2. 熟悉基本命令行操作和 Git 這類源代碼本版控制系統；

3. 擁有網頁開發經驗，利用Rubyon Rails 和 Django 這類框架開發過伺服器端渲染的網頁應用；

4. 了解網頁運作過程，熟悉 HTTP 這類網路協議。

下面，我們就開始詳細介紹：

NO.1 單頁面應用程序（即 Single-page App，以下簡稱 SPA）

現如今，網頁開發人員不再把所開發的產品叫做網站，而是叫做網頁應用。雖然二者沒有嚴格區分，但後者的交互性和動態性更強，能讓用戶自行操作並且收到特定回應。

以前，瀏覽器會收到來自伺服器的 HTML。當用戶訪問另一個 URL 地址時，需要全頁刷新，伺服器也會發送全新 HTML。這就是所謂的伺服器端渲染。

但是，在現代 SPA 中，客戶端渲染已經取代了伺服器端渲染。瀏覽器會先從伺服器上載入出最初圖像，和包括框架、庫和應用代碼在內的腳本，以及整個應用所需的樣式表。當用戶訪問其他頁面時，頁面將不會進行整體刷新，而是通過 HTML5 History API 對頁面地址進行更新。以 JSON 形式呈現出來的新頁面所需的新數據，將會通過向伺服器發出的 AJAX 請求，由瀏覽器檢索進行檢索。接著，SPA 會通過原先在頁面中下載好的 JavaScript，來對頁面數據進行動態更新。

SPA 的優點

1. 應用針對用戶操作給出的反應更加靈敏，不會由於頁面整體刷新而出現閃退；

2. 向伺服器發送的 HTTP 請求減少，無需在每一頁進行重複下載；

3. 用戶和伺服器劃分明確，無需修改伺服器代碼就可以輕鬆為新用戶創建不同平台。另外，只要不違背 API 規則，還可以分別對用戶和伺服器的技術堆棧進行修改。

SPA 的缺點

1. 最開始的載入任務較重，包括框架和應用代碼等；

2. 需要對伺服器進行額外的配置操作，讓它將所有請求彙集到同一個進入點；

3. SPA 依靠 JavaScript 來呈現內容，但並不是所有搜索引擎都能夠在爬蟲過程中執行 JavaScript。這一點，無疑會對應用的搜索引擎優化帶來負面影響。

NO.2 新時代 JavaScript

在深入研究開發 JavaScript 網頁應用的各個方面之前，首先要熟悉網路語言，即 JavaScript 或者 ECMAScript。JavaScript 用途非常廣泛，可以用來開發網頁伺服器、本機移動應用和桌面應用。

在 2015 年之前，最近的一次網路語言更新，是 2011 年的 ECMAScript 5.1。但是最近幾年，JavaScript 突然取得了不少進展。2015 年，ECMAScript 2015（之前叫做 ECMAScript 6）問世。與此同時，大量全新句法結構的出現，也使得代碼編寫更加簡單。當然了，也不是所有瀏覽器都全面引入了 ES2015。

因此，正式開始研發應用之前，一定要熟悉掌握 ES5 和 ES2015。目前，ES2015 是相對較新的。不少開源代碼和 Node.js 應用還是用 ES5 寫的。所以說，如果你想在瀏覽器控制台中進行漏洞調試，那應該還不能使用 ES2015 句法。不過，下面我們即將要介紹的，不少現代庫中的文件編製和代碼示例，卻是用 ES2015 寫的。在 Grab，我們選擇使用 ES2015 來享受 JavaScript 句法更新升級之後，所帶來的超高生產能力。

簡單地說，在開發應用之前，你至少需要花上一兩天的時間，來回顧 ES5、探索 ES2015。當然了，最好是能夠花上三四天的時間，來進一步研究其中的句法。

NO.3 用戶界面——React

如果非要說出近年來前端系統引入頻率最高的 JavaScript 項目，那應該是 React。React 是由Facebook工程師創建並且開源的一個庫。開發人員可以在這個庫中，為自家網頁界面編寫不同組件並且進行結合。

React 帶來了不少激進創意，鼓勵開發人員從各個角度重新思考，以便找到最佳方式。多年來，網頁開發人員一直認為，HTML、JavaScript 和 CSS 應該分開來寫。但 React 卻是恰恰相反，它鼓勵你在 JavaScript 當中編寫 HTML 和 CSS。雖然一開始聽上去，這是個瘋狂的想法，但嘗試過後就會有全新的發現。具體說來，React 有如下幾個特徵：

1. 闡述性：說白了，就是你只需要描述自己的想法，不需要落實。以往開發人員都必須要通過一系列步驟，來操控 DOM 才可以讓應用從一種狀態變為另一種狀態。但在 React 當中，你只需要簡單地在各個組件中改變狀態就行。因為整個呈現出來的結果，會根據各個組件的狀態，自動進行更新和升級。

2. 可維護性：通過改變各個組件來改變整體，能夠保證重複使用。我們發現，定義一個組件的屬性和部類，能夠讓 React 代碼自行完成文件編製。這樣一來，讀者就能夠清楚地知道使用該組件都需要些什麼。

3. 高效能性：我們只知道 React 使用的是虛擬 DOM，卻不知道它為什麼要使用虛擬 DOM。現代 JavaScript 引擎的運行速度非常快，無論是從 DOM 中讀取內容，還是向 DOM 寫內容，都需要花費很長時間。但是，React 卻提供了一種速度較快的虛擬表現形式。

4. 易學習性：React 學起來非常簡單，需要掌握的 API 比較少，而且這些 API 基本都是保持不變的。作為最大的社區之一，React 擁有眾多能夠靈活使用的工具和開源用戶界面組件，而且可以直接在網上找到大量學習資源。

GIF/896K

NO.4 狀態管理——Flux 或 Redux

隨著應用中的內容越來越多，你會發現應用的結構也變得越來越亂。有可能應用中的各個組件需要分享和顯示共同數據，但上面介紹的 React 卻無法找到一種合適的方式來解決這個問題。畢竟，React 只負責處理視圖層面的問題，並不能處理其他層面的結構問題，比如說在 MVC 模式當中，除了視圖以外的模型和控制器層面的問題。為此，Facebook 就開發了一套叫做 Flux 的應用架構。它在充分利用單向數據流的基礎之上，補充和完善了 React 的可組合視圖組件。簡單說來，Flux 架構有以下幾個特徵：

1. 單向數據流：提高應用的可預測性，能夠輕鬆掌握更新升級的具體進度；

2. 職責和範圍的分離：Flux 架構中的每一部分都有特定的責任，彼此之間是絲毫不掛鉤的；

3. 能夠與表述性編程完美配合：無需特別明示不同狀態之間的轉換視圖就可以針對視圖進行升級。

鑒於從本質上來講，Flux 並不是一個框架，所以開發人員已經嘗試過各種方法，以便將 Flux 模式付諸實踐。因此，Redux 就誕生了。Redux 結合了 Flux、Command 模式和 Elm 架構的創意，事實上就是一個狀態管理庫。現如今的開發人員，都習慣性地將其與 React 配套使用。具體說來，Redux 有以下幾個核心概念：

1. 應用的狀態都是利用單一的舊式 JavaScript 對象來描述的；

2. 可以通過調度某一行為操作來改變狀態；

3. 縮減器或者摺疊器能夠利用當下的狀態和行為操作，來生產新的狀態。

當然了，雖然概念聽上去比較簡單，但功能卻非常強大，它們能夠讓應用：

1. 由用戶提出在伺服器上完成狀態改變；

2. 在應用當中追蹤、登錄和回溯所有變化；

3. 更加便利地使用撤銷和重做功能。

NO.5 帶有風格的編碼——CSS Module

所謂 CSS 就是層疊樣式表，專門指用來描述 HTML 元素樣式的規則。想要寫出比較好的 CSS，是件很困難的事情，一般需要多年經驗和不斷嘗試。其實，一開始，CSS 是專門為網頁文件設計的，並不是為網頁應用設計的，更別說偏向於組件架構的網頁應用了。因此，經驗豐富的前端開發人員就想盡一切辦法，希望能夠指導人們利用 SMACSS 和 BEM 來為那些比較複雜的項目寫出組織性和條理性較強的 CSS。

如果在此之前，你從來沒有接觸過 CSS，那麼 Codecademy 網站上的 HTML & CSS 課程，可以在很大程度上幫助你學習入門知識。隨後，你可以了解有關 Sass 預處理程序的知識。Sass 預處理程序是 CSS 語言的延伸，在之前的基礎之上進行了句法完善。總而言之，你可以花上三四天的時間，先去了解 CSS 方法，再去學習 CSS 模塊，盡量綜合利用 SMACSS 或 BEM 方法以及 CSS 模塊，來開發出帶有自己風格的應用。

NO.6 可維護性

與編寫代碼相比，人們用眼睛看代碼的次數更多。在 Grab 這種規模較大的公司更是如此，各位工程師都在忙著不同的項目。因此，我們非常看重編程代碼的可讀性、可維護性和穩定性。當然了，想要同時保證這三點，也是有方法可以利用的，比如說廣泛測試、一致的編程風格，以及類型檢查。

NO.7 測試——Jest + Enzyme

Jest 是由 Facebook 開發的一個測試庫，主要目的就是減少測試過程中可能出現的問題。在 Facebook 進行的項目當中，它提供了非常順暢的使用體驗。不同測試可以同時進行，以便縮短拿到結果的時間。在默認情況和監測模式下，只會運行那些針對發生了改變的文件的測試。而其中，我們特別喜歡的一個功能，叫做 Snapshot Testing，即快照測試。Jest 能夠將 React 組件和 Redux 狀態生成的結果保存下來，並且還能夠以序列化文件的形式保存下來。這樣一來，就避免了手動操作。

GIF/1.6M

雖然 React 也有測試功能，但是 Facebook 開發的 Enzyme 能夠通過一個類似 jQuery 的 API，讓你更加方便地生成、維護和操作 React 組件的產出結果。經驗豐富的開發人員，會推薦你使用 Enzyme 來測試 React 組件。

總之，Jest 和 Enzyme 能夠在簡化前端測試代碼編寫過程的同時，為開發人員帶來更多樂趣。這樣一來，開發人員也就會更加願意編寫測試代碼。不僅如此，由於職責和界面定義明確，React 組件以及 Redux 的行為操作和縮減器，測試起來也就會更加容易。

NO.8 檢查 JavaScript 出現的問題—ESLint

所謂 linter，就是一種對編程代碼進行靜態分析並且及時找出問題的工具，能夠在預防錯誤出現的同時，保證同一種編碼風格。而 ESLint 就是其中一種檢查 JavaScript 編碼問題的工具，具有比較明顯的擴張性和定製性。如果開發團隊想要編寫帶有個別風格的代碼，那也可以自行編寫查錯規則。

在大多數情況下，使用 ESLint 就像在項目文件夾里修改配置文件一樣簡單。如果你不自己寫的話，那要學的知識並沒有多少。你只要在出錯時及時發現，然後找到合適的解決方法。

想要系統學習web前端和免費學習資料的 可以加裙六二三九六六八零六 學完有工作推薦

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！