前端開發(fā)從未像現(xiàn)在這樣復(fù)雜和令人興奮?；旧厦扛粢惶炀蜁霈F(xiàn)新的工具、庫、框架和插件。要學(xué)習(xí)的東西越來越多。

好在我們的 Grab web 團隊（譯者注：Grab 是東南亞的一家打車平臺）一直遵循著最新、最佳的方法，并將現(xiàn)代 JavaScript 生態(tài)系統(tǒng)納入了我們的 web 應(yīng)用。

這樣也導(dǎo)致，我們的新員工或后端工程師，他們可能會不熟悉這些現(xiàn)代 JavaScript 生態(tài)系統(tǒng)，為了在 web app 中完成某項功能或修復(fù)某些 bug , 他們不得不去學(xué)習(xí)，最終被不斷涌現(xiàn)的新事物所“淹沒”。

為了指導(dǎo)他們快速接受前沿技術(shù)的演進，輕松熟悉生態(tài)系統(tǒng)，并盡可能快地輸出代碼。我們發(fā)布了這樣一本學(xué)習(xí)指南，介紹我們做了什么和為什么要這樣做。

本指南的靈感來源于“治療 JavaScript 疲勞的學(xué)習(xí)計劃”（A Study Plan to Cure JavaScript Fatigue），并在基于目前最適合 Grab 發(fā)展的基礎(chǔ)上，對下面這些適用于前端開發(fā)的庫和框架進行推薦。

文中還會解釋選擇某某庫和某某框架的原因，并提供學(xué)習(xí)資源鏈接，以便讀者能夠自由選擇。以及在某些情況下可能效果更好的替代選擇，以供參考和進一步自我探索。

如果您非常熟悉前端開發(fā)，并且一直有跟進最新的技術(shù)，本指南可能對您用處不大。它偏向針對前端新手。如果您的公司正在探索現(xiàn)代 JavaScript 堆棧，您會發(fā)現(xiàn)本指南可能對您的公司也有用！

請注意，本指南也有在 GitHub 上發(fā)布，我們將定期更新。

前提

• 對核心編程概念有一定理解。

• 可使用基本的命令行操作并熟悉源碼版本控制系統(tǒng)（如 Git ）。

• 有 Web 開發(fā)經(jīng)驗。 使用 Ruby on Rails、Django、Express 等框架構(gòu)建過 Web 應(yīng)用。

• 了解 Web 工作原理。 熟悉 Web 協(xié)議和約定，如 HTTP 和 RESTful API 。

涉及內(nèi)容:

• 單頁應(yīng)用（Single-page Apps）

• 現(xiàn)代 JavaScript（ New-age JavaScript）

• 用戶界面（User Interface）

• 狀態(tài)管理（State Management）

• 規(guī)則編碼（Coding with Style）

• 測試（Testing）

• JavaScript 檢測（Linting JavaScript）

• CSS 檢測（Linting CSS）

• 類型（Types）

• 系統(tǒng)構(gòu)建（Build System）

• 包管理（Package Management）

• 持續(xù)集成（Continuous Integration）

• 托管（Hosting）

• 部署（Deployment）

如果您已有相關(guān)經(jīng)驗，可選擇跳過部分內(nèi)容。

單頁應(yīng)用（SPAs）

Web 開發(fā)人員現(xiàn)在將其構(gòu)建的產(chǎn)品稱為 Web 應(yīng)用，而不是網(wǎng)站。雖然這兩個術(shù)語之間沒有嚴(yán)格的區(qū)別，但 Web 應(yīng)用往往是高度互動和動態(tài)的，允許用戶執(zhí)行操作并接收響應(yīng)。

傳統(tǒng)上，瀏覽器從服務(wù)器接收 HTML 并呈現(xiàn)。當(dāng)用戶定位到另一個 URL 時，需要進行全頁刷新，并且服務(wù)器為新頁面發(fā)送新的新 HTML 。這被稱為服務(wù)器端渲染。

然而，在現(xiàn)代的 SPAs 中，已被客戶端渲染取代。瀏覽器從服務(wù)器加載初始頁面，以及整個應(yīng)用所需的腳本（框架、庫、應(yīng)用代碼）和樣式表。當(dāng)用戶定位到其他頁面時，不會觸發(fā)頁面刷新。通過 HTML5 History API 更新頁面的 URL 。瀏覽器通過 AJAX 請求檢索新頁面（通常以 JSON 格式）所需的新數(shù)據(jù)。然后， SPA 通過 JavaScript 動態(tài)更新已經(jīng)在初始頁面加載中已經(jīng)下載好的新頁面。這種模式類似于原生手機應(yīng)用的工作原理。

優(yōu)勢:

• 應(yīng)用感更強，用戶不會看到由于全頁刷新導(dǎo)致頁面之間的閃爍。

• 對服務(wù)器進行的 HTTP 請求較少，因為不必為每個頁面加載重復(fù)下載相同的資料。

• 明確分離客戶端與服務(wù)器之間的關(guān)系；可以輕松地為不同的平臺構(gòu)建新的客戶端而無需修改服務(wù)器代碼。只要 API contract 不被破壞，還可以獨立地修改客戶機和服務(wù)器上的技術(shù)棧。

劣勢:

• 需加載多個頁面所需的框架、應(yīng)用代碼和初始頁面加載需要的成本。

• 在服務(wù)器上會有一個額外的步驟，即將其配置為將所有請求被路由到單個入口點，并允許客戶端路由從那里接管。

• SPAs 依賴于 JavaScript 來呈現(xiàn)內(nèi)容，但并不是所有的搜索引擎在爬行期間都會執(zhí)行 JavaScript ，而且可能會在您的頁面上看到空的內(nèi)容。這在無意中會影響應(yīng)用的 SEO 。

雖然傳統(tǒng)的服務(wù)器端呈現(xiàn)的應(yīng)用仍然是可行的選擇，但是由于客戶端和服務(wù)器代碼可以獨立開發(fā)和發(fā)布，因此清晰明了的客戶端和服務(wù)器分離可以更好地擴展到較大的工程團隊。

由于 Web 開發(fā)人員構(gòu)建的是應(yīng)用而不是頁面，因此客戶端 JavaScript 架構(gòu)變得越來越重要。在服務(wù)器端呈現(xiàn)的頁面中，通常使用 jQuery 的代碼片段將用戶交互性添加到每個頁面。但是，當(dāng)構(gòu)建大型應(yīng)用程序時，光有 jQuery 還不夠。畢竟，jQuery 主要是一個用于 DOM 操作的庫，它不是框架；無法為應(yīng)用定義清晰的結(jié)構(gòu)和組織。

JavaScript 框架往往被構(gòu)建以便在 DOM 上提供更高級別的抽象，從而允許將內(nèi)存中的狀態(tài)保留在 DOM 之外。使用框架還帶來了一些適合應(yīng)用的重用建議的推薦和最佳做法的好處。團隊中不熟悉代碼基礎(chǔ)但具有框架經(jīng)驗的新工程師將會更容易理解代碼，因為它是以一種他們熟悉的結(jié)構(gòu)組織起來的。流行框架通常會有很多教程和指南，利用同事和社區(qū)的知識和經(jīng)驗，可幫助新工程師快速上手。

學(xué)習(xí)鏈接

• 單頁應(yīng)用：優(yōu)缺點分析

• Web 開發(fā)的演進

• 選擇客戶端渲染的原因

現(xiàn)代 JavaScript

在深入了解構(gòu)建 JavaScript Web 應(yīng)用的各個方面之前，熟悉 Web-JavaScript 或 ECMAScript 的語言非常重要。 JavaScript 是一種非常通用的語言，可以用它來構(gòu)建 Web 服務(wù)器，也可以構(gòu)建原生移動應(yīng)用和桌面應(yīng)用。

在 2015 年之前，最后一次重大更新是 2011 年發(fā)布的 ECMAScript 5.1 。然而，近年來，JavaScript 在短時間內(nèi)突然出現(xiàn)大幅度改善。2015 年，ECMAScript 2015（以前稱為 ECMAScript 6 ）發(fā)布，引入大量的語法結(jié)構(gòu)，使得編寫代碼不再那么笨重。如果你對這段歷史感興趣，Auth0 有寫一篇關(guān)于 history of JavaScript 的文章。直到現(xiàn)在，也并非所有的瀏覽器都完全實現(xiàn)了 ES2015 規(guī)范。類似 Babel 這類的工具使開發(fā)人員能夠在其應(yīng)用中編寫 ES2015 ，隨后 Babel 將其轉(zhuǎn)換為 ES5 以兼容瀏覽器。

熟悉 ES5 和 ES2015 都至關(guān)重要。 ES2015 現(xiàn)在依然很新，很多開源代碼和 Node.js 應(yīng)用仍然是使用 ES5 編寫。如果您是在瀏覽器控制臺中進行調(diào)試，可能無法使用 ES2015 語法。另一方面，稍后將介紹的許多現(xiàn)代庫的文檔和示例代碼都是用 ES2015 寫的。在 Grab ，我們使用 babel-preset-env 來享受 JavaScript 的不斷改進的語法來提升生產(chǎn)力。 babel-preset-env 能智能地確定哪些 Babel 插件是必需的（哪些新的語言特性不被支持，需被翻譯），以讓瀏覽器更好地對 ES 的各種語言特性提供原生支持。如果您喜歡使用已經(jīng)穩(wěn)定的語言特性，那么 babel-preset-stage-3（一個完全可以在瀏覽器中實現(xiàn)的規(guī)范）可能會更適合您。

花一兩天的實際去修正 ES5 并摸索 ES2015 。 ES2015 中使用最多的特性包括“箭頭函數(shù)”、“Classes”（語法糖）、“字符串模板”、“解構(gòu)”，“Default/Rest/Spread 操作符”以及“導(dǎo)入和導(dǎo)出模塊”。

預(yù)估時間: 3–4 天. 可在學(xué)習(xí)其他庫并嘗試構(gòu)建應(yīng)用時學(xué)習(xí)/查找語法。

學(xué)習(xí)鏈接

• Learn ES5 on Codecademy

• Learn ES2015 on Babel

• ES6 Katas

• Free Code Camp

• 你不知道的 JS  (高階內(nèi)容，初學(xué)者可選)

用戶界面?—?React

如果要說近年來給前端生態(tài)帶來風(fēng)暴式影響的 JavaScript 項目，當(dāng)屬 React 。 React 是一個由 Facebook 開發(fā)的庫。 在 React 中，開發(fā)人員為其 Web 界面編寫組件并將其組合在一起。

React 帶來了許多激進的想法，并鼓勵開發(fā)人員重新思考最佳實踐。 多年來，Web 開發(fā)人員被灌輸分開編寫 HTML、JavaScript 和 CSS 的理念 ，但 React 恰恰相反，鼓勵在 JavaScript 中編寫 CSS  。這聽起來很瘋狂，但在嘗試之后，會發(fā)現(xiàn)其實并不奇怪。作為影響前端發(fā)展正轉(zhuǎn)向基于組件的發(fā)展模式的關(guān)鍵，React 的特點如下：

• 聲明式?—?描述想在 View 中看到的，而不是如何實現(xiàn)它。在 jQuery 時代，開發(fā)人員必須提出一系列的步驟來操縱 DOM ，從一個應(yīng)用狀態(tài)到下一個應(yīng)用狀態(tài)。在 React 中，只需更改組件中的狀態(tài)，View 將根據(jù)狀態(tài)進行更新。也可通過查看 render（）方法中的標(biāo)記來確定組件的外觀。

• 函數(shù)式—?View 是基于 state 和 props 的純函數(shù)。多數(shù)情況下，React 組件由 props（外部參數(shù)）和 state（內(nèi)部數(shù)據(jù)）定義。相同的 props 和 state ，會構(gòu)成相同的視圖。純函數(shù)易于測試，功能組件也大多相同。由于組件的界面定義良好，可通過提供不同的 props 和 state 來對組件進行測試并比較，從而輕松完成測試。

• 可重用性?—?以基于組件的方式編寫 View 就是鼓勵重用性。我們發(fā)現(xiàn)定義一個組件的 propTypes 能讓 React 代碼自我記錄，以讓用戶可以清楚地知道使用該組件需要什么。此外，您的視圖和邏輯在組件中是獨立的，不會受到影響也不影響其他組件。只需向組件提供相同的 props  ，就可輕松地在大規(guī)模重構(gòu)過程中 shift 組件。

• 高性能—?您可能已經(jīng)聽說 React 使用的是 virtual DOM（請勿與 shadow DOM 混淆），并且在狀態(tài)發(fā)生變化時重新呈現(xiàn)所有內(nèi)容，那你知道為什么需要 virtual DOM 嗎？雖然現(xiàn)代 JavaScript 引擎很快，但從 DOM 讀取和寫入速度很慢。 React 在內(nèi)存中保持 DOM 的輕量級虛擬渲染。重新渲染一切本身就是一句有誤導(dǎo)性的術(shù)語。在 React 中它實際上是指重新渲染 DOM 的內(nèi)存中呈現(xiàn)，而不是實際的 DOM 本身。當(dāng)組件的底層數(shù)據(jù)發(fā)生變化時，將創(chuàng)建一個新的虛擬呈現(xiàn)，并與先前的進行比較。然后將差異（所需的最小變化集）修補到真正的 browser DOM 。

• 易于學(xué)習(xí)?—?學(xué)習(xí) React 非常簡單。與 this 相比，React API surface 相對較小; 只有很少的幾個 API 可以學(xué)習(xí)，并且不會經(jīng)常變化。React 社區(qū)是最大的社區(qū)之一，同時也是一個充滿活力的工具生態(tài)系統(tǒng)，有開放的 UI 組件，以及一大批在線資源可供學(xué)習(xí)。

• 優(yōu)秀的開發(fā)體驗?—有許多工具可以改善 React 的開發(fā)體驗。React Developer Tools 是一個瀏覽器擴展，可檢查組件，查看和操作其 props 和 state 。使用 webpack 進行熱更新可讓您在瀏覽器中查看代碼的更改，而無需刷新瀏覽器。Facebook 還提供了一個 codemod 腳本，以幫助您在有庫更新時將代碼遷移到新的 API ，使升級過程相對無痛。

經(jīng)過多年發(fā)展，其實也出現(xiàn)了比 React 更出色的新視圖庫。React 可能不是最快的庫，但在生態(tài)系統(tǒng)、整體使用體驗和效率方面，它仍然是最強大的庫之一。 Facebook 正在通過重寫基礎(chǔ)協(xié)調(diào)算法，力圖使 React 更快。 React 讓我們知道如何編寫更好的代碼和更好維護的 Web 應(yīng)用，并讓我們成長為更好的工程師。

我們建議您在 React 主頁上瀏覽一個關(guān)于建立 tic-tac-toe 游戲的教程，以先了解 React 是什么及能做什么。想要進一步深入學(xué)習(xí)，可查看 React Router 的創(chuàng)始人、React 社區(qū)專家發(fā)布的高級免費課程“ React Fundamentals ”，里面還涵蓋了 React 官方文檔未寫入的更高級的概念。Facebook 的 Create React App 是以最小配置支持 React 項目的工具，也強烈建議在您新的 React 項目中啟用。

React 是一個庫，而不是一個框架，并不處理視圖層以下的層次 - 應(yīng)用狀態(tài)。后面會說到。

估計時間: 3–4 天. 嘗試構(gòu)建類似待辦事項列表這種簡單的項目，去 Hacker News 克隆一些純 React 經(jīng)驗。 你會慢慢收獲和成長，期間可能會面臨一些也許無法用 React 解決的問題，下面的主題會講到…

學(xué)習(xí)鏈接

• React Official Tutorial

• React Fundamentals

• Simple React Development in 2017

• Presentational and Container Components

替代方案

• Angular

• Ember

• Vue

• Cycle

狀態(tài)管理?—?Flux/Redux

隨著您的應(yīng)用越來越大，可能會發(fā)現(xiàn)應(yīng)用結(jié)構(gòu)變得有點混亂。應(yīng)用中的組件可能要共享和顯示常見數(shù)據(jù)，但 React 中卻沒有很優(yōu)雅的方式來處理這些情況。 畢竟，React 只是視圖層，它并沒有明確規(guī)范如何在傳統(tǒng)的 MVC 范例中構(gòu)建應(yīng)用的其他層，如 model 和 controller 。為了解決這個問題，F(xiàn)acebook 發(fā)明了 Flux ，一款應(yīng)用架構(gòu)，通過使用單向數(shù)據(jù)流來補充 React 的可組合視圖組件。點此可閱讀關(guān)于 Flux 如何運作的介紹。 總而言之，F(xiàn)lux 范式（Flux pattern）具有以下特點：

• 單向數(shù)據(jù)流?—?使應(yīng)用更可預(yù)測，以輕松跟蹤更新。

• 關(guān)注點分離?—?Flux 架構(gòu)中的各個部分都有明確的職責(zé)，并且高度分離。

• 適用于聲明式編程?—? store 可將更新發(fā)送到 view ，而無需指定如何在狀態(tài)之間轉(zhuǎn)換視圖。

由于 Flux 本身不是一個框架，開發(fā)人員嘗試提出各種 Flux 范式的實現(xiàn)。最后，出現(xiàn)了一個最亮眼的贏家，那就是 Redux 。 Redux 將來自 Flux、Command pattern 和 Elm 架構(gòu)的想法融合在一起，已然成為目前 React 開發(fā)者最常使用的狀態(tài)管理庫。其核心概念是：

• 應(yīng)用狀態(tài)（state）是由單個普通的 JavaScript 對象（POJO）描述。

• 調(diào)度一個 action (也是 POJO) 來修改狀態(tài)。

• Reducer 是一種純函數(shù)，它利用當(dāng)前狀態(tài)和動作來產(chǎn)生新的狀態(tài)。

這些概念聽起來很簡單，但功能強大，因為它們使應(yīng)用能夠：

• 在服務(wù)端呈現(xiàn)狀態(tài)，在客戶端啟動

• 跟蹤、記錄和回溯整個應(yīng)用的更改

• 輕松執(zhí)行撤消和重做

Redux 創(chuàng)始人 Dan Abramov 非常仔細(xì)地為 Redux 撰寫了詳細(xì)的文檔，同時為初階和高階的 Redux 使用者創(chuàng)建了全面的視頻教程。這些是學(xué)習(xí) Redux 非常有用的資源。

View 和 State 相結(jié)合

雖然 Redux 并不是一定要和 React 一起使用，但我們強烈推薦。 React 和 Redux 有很多相似的理念和特點：

• 函數(shù)式組合范式?—?React 由 views (純函數(shù)) 構(gòu)成，而 Redux 由 pure reducers (也是純函數(shù)) 構(gòu)成。在指定輸入組合時，輸出都是可預(yù)見的。

• 易于 Reason About?—?這個詞您可能聽過很多次，但實際上是什么意思？我們將其解釋為對代碼的控制和理解 - 代碼以我們期望的方式行事，當(dāng)有問題時，可以輕松發(fā)現(xiàn)問題。據(jù)已有的經(jīng)驗，React 和 Redux 會使調(diào)試更簡單。由于數(shù)據(jù)流是單向的，因此跟蹤數(shù)據(jù)流（服務(wù)器響應(yīng)、用戶輸入事件）更容易，并且可以直接定位問題發(fā)生在哪一層。

• 結(jié)構(gòu)分層?—?應(yīng)用/ Flux 架構(gòu)中的每一層都是一個純函數(shù)，具有明確的職責(zé)。為純函數(shù)編寫測試相對容易。

• 開發(fā)體驗?—?在開發(fā)過程中，諸如 Redux DevTools 之類的開發(fā)工具，可幫助調(diào)試和檢查應(yīng)用。

此外，您的應(yīng)用可能需要處理異步調(diào)用，例如進行遠(yuǎn)程 API 請求。redux-thunk 和 redux-saga 就是用來解決這些問題的。理解他們可能需要一些時間，因為需要理解函數(shù)編程和生成器。建議只在有需要的時候處理它。

react-redux 是一個官方的封裝庫，非常簡單易學(xué)。

預(yù)估時間: 4 days. 下面的 Egghead 課程可能有點耗時，但值得花時間。 學(xué)完 Redux 后，您可以嘗試將其納入已構(gòu)建好的 React 項目中。 Redux 是否解決了您在純 React 中遇到的一些狀態(tài)管理問題？

學(xué)習(xí)鏈接

• Flux 主頁

• Redux 主頁

• Egghead Course?—?Redux 入門

• Egghead Course?—?使用慣用的 Redux 構(gòu)建 React 應(yīng)用

• React Redux Links

• You Might Not Need Redux

替代方案

• MobX

規(guī)則編碼—?CSS Modules

CSS（層疊樣式表）是描述 HTML 元素布局的規(guī)則。寫好 CSS 很難。編寫可維護和可擴展的 CSS ，通常需要多年的經(jīng)驗和積累。具有全局命名空間的 CSS 基本上是為 Web 文檔而設(shè)計的，并不是真正用于支持組件架構(gòu)的 Web 應(yīng)用。因此，經(jīng)驗豐富的前端開發(fā)人員總結(jié)了設(shè)計方法學(xué)，指導(dǎo)人們?nèi)绾螢閺?fù)雜項目編寫合理的 CSS ，例如使用 SMACSS、BEM、SUIT CSS 等。

CSS 方法學(xué)所帶來的樣式封裝是由公約和綱要強制執(zhí)行的，打破了開發(fā)者不遵守約定的時代。

正如您可能已經(jīng)意識到的那樣，前端生態(tài)系統(tǒng)的工具十分豐富，甚至趨于飽和，因此當(dāng)發(fā)現(xiàn)已經(jīng)有一些工具來分塊解決大規(guī)模編寫 CSS 問題時，應(yīng)該也不會感到奇怪。 “At scale” 意味著有大量開發(fā)人員正在開展同一個大型項目，并觸及相同的樣式表。目前在 JS 中編寫 CSS 還沒有社區(qū)認(rèn)可的最佳方式 ，我們希望有一天，能像 Redux 一樣，在所有的 Flux 實現(xiàn)中出現(xiàn)贏家。目前，我們在使用的是 CSS Modules 。 CSS modules 是對現(xiàn)有 CSS 的改進，旨在解決 CSS 中全局命名空間的問題；它允許編寫默認(rèn)情況下的局部樣式并封裝到組件中。使用 CSS modules ，大型團隊可以編寫模塊化和可重用的 CSS ，而不用擔(dān)心沖突或覆蓋應(yīng)用的其他部分。不過，CSS modules 最終仍然需要編譯成瀏覽器可識別的正常全局命名空間的 CSS ，因此學(xué)習(xí)和理解原始 CSS 仍然很重要。

如果您是一個 CSS 初學(xué)者，Codecademy 的 HTML & CSS 課程將是不錯的開始。然后，攻讀 Sass preprocessor ，這是 CSS 語言的擴展，在基礎(chǔ)上增加了語法改進，并鼓勵樣式可重用性。再去研究上面提到的 CSS 方法學(xué)，CSS modules 放到最后去學(xué)。

預(yù)估時間: 3–4 days. 嘗試使用 SMACSS / BEM 理論 和/或 CSS modules 來設(shè)計應(yīng)用。

學(xué)習(xí)鏈接

• Learn HTML & CSS course on Codecademy

• Intro to HTML/CSS on Khan Academy

• SMACSS

• BEM

• SUIT CSS

• CSS Modules Specification

• Sass Homepage

• 前端面試問題答案?—?HTML ?

• 前端面試問題答案?—?CSS ?

替代方案

• JSS

• Styled Components