過去，前端開發(fā)不像現在這么復雜，也不像現在這么令人興奮。畢竟每天都有新工具、新框架和新插件出現，需要我們不斷學習。所幸，我們Grab的網頁設計團隊一直都走在前端開發(fā)的前沿，已經在自家網頁應用中融入了現代JavaScript系統(tǒng)。
但是，新員工和后端工程師可能還不太了解現代JavaScript系統(tǒng)。因此，在研發(fā)新功能或者修復漏洞時，會有些吃力。這時，公司就必須指導他們學習前端開發(fā)知識，幫助他們減少使用系統(tǒng)時遇到的問題，以最快的速度把代碼介紹給用戶。
在這份學習指南中，我們以Grab目前使用的工具為基礎，從前端開發(fā)的每個方面出發(fā)，向大家推薦了幾種值得學習的庫和框架。
使用須知
1.熟練掌握核心編程概念；
2.熟悉基本命令行操作和Git這類源代碼本版控制系統(tǒng)；
3.擁有網頁開發(fā)經驗，利用Ruby on Rails和Django這類框架開發(fā)過服務器端渲染的網頁應用；
4.了解網頁運作過程，熟悉HTTP這類網絡協(xié)議。
下面，我們就開始詳細介紹：
NO.1 單頁面應用程序（即Single-page App，以下簡稱SPA）
現如今，網頁開發(fā)人員不再把所開發(fā)的產品叫做網站，而是叫做網頁應用。雖然二者沒有嚴格區(qū)分，但后者的交互性和動態(tài)性更強，能讓用戶自行操作并且收到特定回應。
以前，瀏覽器會收到來自服務器的HTML。當用戶訪問另一個URL地址時，需要全頁刷新，服務器也會發(fā)送全新HTML。這就是所謂的服務器端渲染。
但是，在現代SPA中，客戶端渲染已經取代了服務器端渲染。瀏覽器會先從服務器上加載出最初圖像，和包括框架、庫和應用代碼在內的腳本，以及整個應用所需的樣式表。當用戶訪問其他頁面時，頁面將不會進行整體刷新，而是通過HTML5 History API對頁面地址進行更新。以JSON形式呈現出來的新頁面所需的新數據，將會通過向服務器發(fā)出的AJAX請求，由瀏覽器檢索進行檢索。接著，SPA會通過原先在頁面中下載好的JavaScript，來對頁面數據進行動態(tài)更新。
SPA的優(yōu)點
1.應用針對用戶操作給出的反應更加靈敏，不會由于頁面整體刷新而出現閃退；
2.向服務器發(fā)送的HTTP請求減少，無需在每一頁進行重復下載；
3.用戶和服務器劃分明確，無需修改服務器代碼就可以輕松為新用戶創(chuàng)建不同平臺。另外，只要不違背API規(guī)則，還可以分別對用戶和服務器的技術堆棧進行修改。
SPA的缺點
1.最開始的加載任務較重，包括框架和應用代碼等；
2.需要對服務器進行額外的配置操作，讓它將所有請求匯集到同一個進入點；
3.SPA依靠JavaScript來呈現內容，但并不是所有搜索引擎都能夠在爬蟲過程中執(zhí)行JavaScript。這一點，無疑會對應用的搜索引擎優(yōu)化帶來負面影響。
NO.2 新時代JavaScript
在深入研究開發(fā)JavaScript網頁應用的各個方面之前，首先要熟悉網絡語言，即JavaScript或者ECMAScript。JavaScript用途非常廣泛，可以用來開發(fā)網頁服務器、本機移動應用和桌面應用。
在2015年之前，最近的一次網絡語言更新，是2011年的ECMAScript 5.1。但是最近幾年，JavaScript突然取得了不少進展。2015年，ECMAScript 2015（之前叫做ECMAScript 6）問世。與此同時，大量全新句法結構的出現，也使得代碼編寫更加簡單。當然了，也不是所有瀏覽器都全面引入了ES2015。
因此，正式開始研發(fā)應用之前，一定要熟悉掌握ES5和ES2015。目前，ES2015是相對較新的。不少開源代碼和Node.js應用還是用ES5寫的。所以說，如果你想在瀏覽器控制臺中進行漏洞調試，那應該還不能使用ES2015句法。不過，下面我們即將要介紹的，不少現代庫中的文件編制和代碼示例，卻是用ES2015寫的。在Grab，我們選擇使用ES2015來享受JavaScript句法更新升級之后，所帶來的超高生產能力。
簡單地說，在開發(fā)應用之前，你至少需要花上一兩天的時間，來回顧ES5、探索ES2015。當然了，最好是能夠花上三四天的時間，來進一步研究其中的句法。
NO.3 用戶界面——React
如果非要說出近年來前端系統(tǒng)引入頻率最高的JavaScript 項目，那應該是React。React是由Facebook工程師創(chuàng)建并且開源的一個庫。開發(fā)人員可以在這個庫中，為自家網頁界面編寫不同組件并且進行結合。
React帶來了不少激進創(chuàng)意，鼓勵開發(fā)人員從各個角度重新思考，以便找到最佳方式。多年來，網頁開發(fā)人員一直認為，HTML、JavaScript和CSS應該分開來寫。但React卻是恰恰相反，它鼓勵你在JavaScript當中編寫HTML和CSS。雖然一開始聽上去，這是個瘋狂的想法，但嘗試過后就會有全新的發(fā)現。具體說來，React有如下幾個特征：
1.闡述性：說白了，就是你只需要描述自己的想法，不需要落實。以往開發(fā)人員都必須要通過一系列步驟，來操控DOM才可以讓應用從一種狀態(tài)變?yōu)榱硪环N狀態(tài)。但在React當中，你只需要簡單地在各個組件中改變狀態(tài)就行。因為整個呈現出來的結果，會根據各個組件的狀態(tài)，自動進行更新和升級。
2.可維護性：通過改變各個組件來改變整體，能夠保證重復使用。我們發(fā)現，定義一個組件的屬性和部類，能夠讓React代碼自行完成文件編制。這樣一來，讀者就能夠清楚地知道使用該組件都需要些什么。
3.高效能性：我們只知道React使用的是虛擬DOM，卻不知道它為什么要使用虛擬DOM?，F代JavaScript引擎的運行速度非?？欤瑹o論是從DOM中讀取內容，還是向DOM寫內容，都需要花費很長時間。但是，React卻提供了一種速度較快的虛擬表現形式。
4.易學習性：React學起來非常簡單，需要掌握的API比較少，而且這些API基本都是保持不變的。作為最大的社區(qū)之一，React擁有眾多能夠靈活使用的工具和開源用戶界面組件，而且可以直接在網上找到大量學習資源。
NO.4 狀態(tài)管理——Flux或Redux
隨著應用中的內容越來越多，你會發(fā)現應用的結構也變得越來越亂。有可能應用中的各個組件需要分享和顯示共同數據，但上面介紹的React卻無法找到一種合適的方式來解決這個問題。畢竟，React只負責處理視圖層面的問題，并不能處理其他層面的結構問題，比如說在MVC模式當中，除了視圖以外的模型和控制器層面的問題。為此，Facebook就開發(fā)了一套叫做Flux的應用架構。它在充分利用單向數據流的基礎之上，補充和完善了React的可組合視圖組件。簡單說來，Flux架構有以下幾個特征：
1.單向數據流：提高應用的可預測性，能夠輕松掌握更新升級的具體進度；
2.職責和范圍的分離：Flux架構中的每一部分都有特定的責任，彼此之間是絲毫不掛鉤的；
3.能夠與表述性編程完美配合：無需特別明示不同狀態(tài)之間的轉換視圖就可以針對視圖進行升級。
鑒于從本質上來講，Flux并不是一個框架，所以開發(fā)人員已經嘗試過各種方法，以便將Flux模式付諸實踐。因此，Redux就誕生了。Redux結合了Flux、Command模式和Elm架構的創(chuàng)意，事實上就是一個狀態(tài)管理庫。現如今的開發(fā)人員，都習慣性地將其與React配套使用。具體說來，Redux有以下幾個核心概念：
1.應用的狀態(tài)都是利用單一的舊式JavaScript對象來描述的；
2.可以通過調度某一行為操作來改變狀態(tài)；
3.縮減器或者折疊器能夠利用當下的狀態(tài)和行為操作，來生產新的狀態(tài)。
當然了，雖然概念聽上去比較簡單，但功能卻非常強大，它們能夠讓應用：
1.由用戶提出在服務器上完成狀態(tài)改變；
2.在應用當中追蹤、登錄和回溯所有變化；
3.更加便利地使用撤銷和重做功能。
NO.5 帶有風格的編碼——CSS Module
所謂CSS就是層疊樣式表，專門指用來描述HTML元素樣式的規(guī)則。想要寫出比較好的CSS，是件很困難的事情，一般需要多年經驗和不斷嘗試。其實，一開始，CSS是專門為網頁文件設計的，并不是為網頁應用設計的，更別說偏向于組件架構的網頁應用了。因此，經驗豐富的前端開發(fā)人員就想盡一切辦法，希望能夠指導人們利用SMACSS和BEM來為那些比較復雜的項目寫出組織性和條理性較強的CSS。
如果在此之前，你從來沒有接觸過CSS，那么Codecademy網站上的HTML & CSS課程，可以在很大程度上幫助你學習入門知識。隨后，你可以了解有關Sass預處理程序的知識。Sass預處理程序是CSS語言的延伸，在之前的基礎之上進行了句法完善?？偠灾?，你可以花上三四天的時間，先去了解CSS方法，再去學習CSS模塊，盡量綜合利用SMACSS或BEM方法以及CSS模塊，來開發(fā)出帶有自己風格的應用。
NO.6 可維護性
與編寫代碼相比，人們用眼睛看代碼的次數更多。在Grab這種規(guī)模較大的公司更是如此，各位工程師都在忙著不同的項目。因此，我們非?？粗鼐幊檀a的可讀性、可維護性和穩(wěn)定性。當然了，想要同時保證這三點，也是有方法可以利用的，比如說廣泛測試、一致的編程風格，以及類型檢查。
NO.7 測試——Jest + Enzyme
Jest是由Facebook開發(fā)的一個測試庫，主要目的就是減少測試過程中可能出現的問題。在Facebook進行的項目當中，它提供了非常順暢的使用體驗。不同測試可以同時進行，以便縮短拿到結果的時間。在默認情況和監(jiān)測模式下，只會運行那些針對發(fā)生了改變的文件的測試。而其中，我們特別喜歡的一個功能，叫做Snapshot Testing，即快照測試。Jest能夠將React組件和Redux狀態(tài)生成的結果保存下來，并且還能夠以序列化文件的形式保存下來。這樣一來，就避免了手動操作。
雖然React也有測試功能，但是Facebook開發(fā)的Enzyme能夠通過一個類似jQuery的API，讓你更加方便地生成、維護和操作React組件的產出結果。經驗豐富的開發(fā)人員，會推薦你使用Enzyme來測試React組件。
總之，Jest和Enzyme能夠在簡化前端測試代碼編寫過程的同時，為開發(fā)人員帶來更多樂趣。這樣一來，開發(fā)人員也就會更加愿意編寫測試代碼。不僅如此，由于職責和界面定義明確，React組件以及Redux的行為操作和縮減器，測試起來也就會更加容易。
NO.8 檢查JavaScript出現的問題 — ESLint
所謂linter，就是一種對編程代碼進行靜態(tài)分析并且及時找出問題的工具，能夠在預防錯誤出現的同時，保證同一種編碼風格。而ESLint就是其中一種檢查JavaScript編碼問題的工具，具有比較明顯的擴張性和定制性。如果開發(fā)團隊想要編寫帶有個別風格的代碼，那也可以自行編寫查錯規(guī)則。
在大多數情況下，使用ESLint就像在項目文件夾里修改配置文件一樣簡單。如果你不自己寫的話，那要學的知識并沒有多少。你只要在出錯時及時發(fā)現，然后找到合適的解決方法。
