專治前端焦慮的學(xué)習(xí)方案

　　最近讀了Jose Aguinaga的博文2016年里做前端是怎樣一種體驗。這篇博客引發(fā)了廣泛的關(guān)注與討論，無論是在Hacker News還是Reddit還是Medium上，都有很多人參與到了它的討論中。我也是很早之前就感覺到了目前JavaScript生態(tài)圈中的群雄逐鹿，并且我們還特地對目前JavaScript庫流行現(xiàn)狀進(jìn)行了調(diào)查，希望能夠在異彩紛呈的各式各樣的庫中尋找到真正的為大眾所接受的。不過今天我們希望能夠更進(jìn)一步，不僅僅再抱怨現(xiàn)狀，而是從我個人的角度來給出一個逐步深入學(xué)習(xí)JavaScript生態(tài)圈的方案。（如果你尚對HTML/CSS/JavaScript并不了解，那么可以閱讀前端攻略：從路人甲到英雄無敵）。而在文本中我們會涉及以下幾個方面:
　　
　　● 一個現(xiàn)代的JavaScript web應(yīng)用會包含哪些部分
　　● 為什么不推薦使用jQuery？
　　● 為什么React是個不錯的選擇
　　● 為什么并不需要你首先學(xué)透JavaScript？
　　● 如何學(xué)習(xí)ES6語
　　● 緣何與如何學(xué)習(xí)Redux?
　　● GraphQL到底解決了什么問題？
　　● 下一步又會走向何方
　　
　　Background
　　
　　JavaScript vs JavaScript
　　在正式開始之前，我們先要搞清楚這里所要說的和你目前理解的是不是同一個東西。如果你在Google中搜索‘Learn JavaScript’或者‘JavaScript study plan’，你能得到一坨一坨的資料與教程指導(dǎo)你如何學(xué)習(xí)。不過實際上在我們的真實項目中，我們只會用到一些相對簡單的語法。換言之，可能你在學(xué)習(xí)Web應(yīng)用編寫中所需要的80%的知識點都包含在了任何一本JavaScript書籍的前幾章。另一個角度來說，真正麻煩的點在于如何掌握整個JavaScript生態(tài)圈，這里包含了數(shù)不盡的框架與庫。不過我相信本文可以給你一點啟示。
　　
　　Building Blocks Of JavaScript Apps
　　
　　● State Of JavaScript：前端框架現(xiàn)狀調(diào)查
　　為了便于理解現(xiàn)代JavaScript為啥看起來如何復(fù)雜，我們首先要明白其工作原理。我們首先來看下2008年左右流行的所謂傳統(tǒng)Web應(yīng)用的架構(gòu):
　　1.服務(wù)端從數(shù)據(jù)庫中獲取數(shù)據(jù)。
　　2.服務(wù)端讀取這些數(shù)據(jù)然后渲染到HTML中。
　　3.HTML文件被發(fā)送到瀏覽器，瀏覽器將HTML轉(zhuǎn)化為DOM樹并且展示出來。
　　
　　現(xiàn)在很多的應(yīng)用會在客戶端使用JavaScript來保證應(yīng)用的可交互性，不過本質(zhì)上瀏覽器還是從收到HTML文件開始。下面我們再比較下2016年流行的所謂現(xiàn)代Web應(yīng)用，典型的就是所謂的單頁應(yīng)用:
　　
　　注意到區(qū)別了嗎？與傳統(tǒng)的Web應(yīng)用相比，現(xiàn)在的服務(wù)端更多的承擔(dān)起是提供數(shù)據(jù)的功能，而渲染HTML文件這一步交由客戶端進(jìn)行處理。這一個根本性的變化也會導(dǎo)致很多或好或壞的結(jié)果，好的一方面呢:
　　
　　● 對于某一塊內(nèi)容，僅僅發(fā)送數(shù)據(jù)會比發(fā)送整個HTML文件快很多
　　● 以單頁應(yīng)用為例，客戶端可以刷新局部數(shù)據(jù)而不需要刷新整個瀏覽器窗口

　　壞的方面:
　　● 由于現(xiàn)在數(shù)據(jù)的加載與渲染放在了客戶端，初始加載與渲染會耗費更長的時間
　　● 現(xiàn)在需要在客戶端提供一個存儲與管理數(shù)據(jù)的地方，也就是我們目前所熟悉的狀態(tài)管理工具
　　
　　惡心的地方
　　● 隨著客戶端應(yīng)用邏輯與交互的日漸復(fù)雜，你需要掌握像服務(wù)端技術(shù)棧一樣復(fù)雜的前端技術(shù)棧
　　
　　The Client-Server Spectrum
　　
　　實際上很多才接觸現(xiàn)代前端開發(fā)技術(shù)棧的同學(xué)，特別是才從后端轉(zhuǎn)前端的同學(xué)都會有個疑問，既然這么麻煩為何還要進(jìn)行轉(zhuǎn)變？舉個例子，如果用戶希望得到2+2的結(jié)果，肯定不需要我們將這個計算發(fā)送到服務(wù)端然后等待結(jié)果，瀏覽器完全能夠支持這種簡單的計算。換言之，如果你是打算構(gòu)建一個純粹的靜態(tài)內(nèi)容站，譬如博客這樣的，那么在服務(wù)端直接生成最終的HTML文件是個不錯的選擇。不過實際上很多Web應(yīng)用中我們并不能很好地界定這個分割點，并且整個光譜并不是連續(xù)的，你并不能先構(gòu)建一個純粹的服務(wù)端應(yīng)用然后慢慢地向客戶端遷移。當(dāng)?shù)竭_(dá)某個分割點時，你不得不停止這種遷移過程而去重構(gòu)大量的代碼，或者你就會面對一個龐雜無序難以維護(hù)的垃圾代碼庫。
　　
　　這一點與不建議使用jQuery不謀而合，你可以將jQuery看做膠帶一類的存在。對于房子的修修補補很是不錯，但是如果你想不斷地增加內(nèi)容與功能，你就會發(fā)現(xiàn)你的房子歪歪扭扭，到處都是狗皮膏藥，越看越丑。而大部分的現(xiàn)代JavaScript框架則是更像3D打印技術(shù)，可能在開始之前需要大量的準(zhǔn)備時間，但是它能還你一個更整潔穩(wěn)定的房屋。
　　
　　Week 0:JavaScript Basics
　　
　　除非你是一個純粹的服務(wù)端應(yīng)用程序開發(fā)者，你肯定知道些JavaScript基礎(chǔ)的內(nèi)容。如果你還不是很了解的話那么也不需要擔(dān)心，這里推薦個不錯的教程Codecademy’s JavaScript lessons。
　　
　　Week 1:Start With React
　　
　　● React的未來特性

　　● React 入門與最佳實踐
　　在你了解了JavaScript基礎(chǔ)語法知識之后，我推薦你下一步開始學(xué)習(xí)React。
　　
　　React是由Facebook開發(fā)并且開源的UI庫，換言之，其專注于完成將數(shù)據(jù)渲染到HTML這一步驟，也就是所謂的View層。不過需要注意的是，我在這里并不是安利React為最優(yōu)秀的庫，這個是因項目而定的，不過我覺得React是個挺不錯的合適初學(xué)者的庫：
　　
　　● React不一定就是最受歡迎的庫，不過其受歡迎程度相當(dāng)高
　　● React不一定是最輕量級的庫，不過其談不上是一個重量級的庫
　　● React不一定是最簡單易學(xué)的庫，不過其并不難學(xué)
　　● React不一定是最優(yōu)雅的庫，不過其看上去還是很舒心的
　　
　　總而言之，React并不一定適用于所有的場景，但是我覺得它是所謂最安全的，學(xué)了不吃虧。React還會引導(dǎo)你去了解一些像組件、應(yīng)用狀態(tài)與無狀態(tài)函數(shù)等等現(xiàn)代Web應(yīng)用框架的概念。最后，React的整個生態(tài)圈非常繁榮，你可以從Github上有關(guān)React的項目中找到很多可用的組件，或者在Stack Overflow上找到很多關(guān)于React的答疑解惑。我個人是比較推薦Wes Bos的React for Beginners這一課程。這課程包含了React從入門到最佳實踐的全部知識。
　　
　　Week 2:Your First React Project
　　
　　● 使用Facebook的create-react-app快速構(gòu)建React開發(fā)環(huán)境
　　● 在重構(gòu)腳手架中掌握React/Redux/Webpack2基本套路
　　
　　到了這里我假設(shè)你已經(jīng)完成了React的基礎(chǔ)課程，如果你跟我差不多的話，那么我估計你現(xiàn)在的狀態(tài)可能是:
　　
　　● 估摸著你已經(jīng)忘了一大半學(xué)過的知識點
　　● 你很想能夠盡快付諸實踐
　　
　　眾所周知，實踐是學(xué)習(xí)某個框架的不二法訣，并且開始一個簡單的個人項目也是學(xué)習(xí)新技術(shù)的不錯的試驗點。一個個人項目可以是簡單的單頁應(yīng)用，也可能是像Github客戶端這樣復(fù)雜的Web應(yīng)用。這里我推薦你可以嘗試著去做一個簡單的個人主頁。不過還是要補充一句，如果你打算用React做一個簡單的靜態(tài)內(nèi)容頁就有點大材小用了，這里推薦一個不錯的工具Gatsby，這是一個React靜態(tài)網(wǎng)站生成器。
　　
　　這里我把Gatsby推薦為你可以在初步實踐React階段一個不錯的參考項目，主要是因為:
　　
　　● 其提供了配置好的Webpack，可以省去你很多學(xué)習(xí)配置的煩惱
　　● 能夠基于你目錄結(jié)構(gòu)動態(tài)設(shè)置路由
　　● 所有的HTML內(nèi)容同樣可以服務(wù)端渲染
　　● 生成的靜態(tài)內(nèi)容頁意味著你可以簡單地就可以部署在Github主頁上
　　
　　Week 3:Mastering ES6
　　
　　隨著我學(xué)習(xí)React的深入，我很快就感覺到了現(xiàn)在能夠看得懂簡單的代碼示例，不過還有很多語法尚不能完全理解。舉例來說，我還不熟悉ES6中的一些常見特性:
　　
　　● Arrow functions
　　● Object destructing
　　● Classes
　　● Spread Operator
　　
　　如果你跟我一樣也不是很熟悉，那么建議可以花個幾天時間來認(rèn)真學(xué)習(xí)下ES6的特性。如果你喜歡上面推薦的React基礎(chǔ)課程，那么你也可以看下ES6 for Everybody系列教程。不過如果你想找點免費的資源，那么這里推薦Nicolas Bevacqua’s book, Practical ES6.。最后，我還是想提到下對于ES6的好的學(xué)習(xí)方法就是回顧參照各種各樣的代碼庫，學(xué)習(xí)人家的用法與實踐。
　　
　　Week 4:Taking On State Management
　　
　　● 思考:我需要怎樣的前端狀態(tài)管理工具?
　　● 你不一定需要Redux
　　● 深入理解Redux:10個來自專家的Redux實踐建議
　　
　　到這里我們已經(jīng)能夠構(gòu)建基于靜態(tài)內(nèi)容的簡單的React的前端項目，不過真實的Web應(yīng)用項目不可能全是靜態(tài)內(nèi)容，他們需要從服務(wù)端獲取數(shù)據(jù)然后交與React進(jìn)行動態(tài)渲染。最直觀的做法就是將數(shù)據(jù)一層一層地傳遞給組件，不過這很容易引發(fā)整個系統(tǒng)的混亂。譬如當(dāng)兩個組件需要去展示同樣的數(shù)據(jù)時候，它們應(yīng)該如何交互呢？

　　這也就是所謂狀態(tài)管理工具的用武之處，不同于將你的數(shù)據(jù)存放到組件內(nèi)，你可以創(chuàng)建一個獨立的全局單例Store來為組件樹存放狀態(tài):
　　
　　在React的生態(tài)圈中，最著名的狀態(tài)管理工具當(dāng)屬Redux。Redux不僅能夠幫助你集中管理數(shù)據(jù)，還能強制使用者對于數(shù)據(jù)的修改操作進(jìn)行統(tǒng)一規(guī)范。
　　
　　你可以將Redux想象為銀行，你并不能直接進(jìn)入自己的賬戶然后修改賬戶中的余額，你需要通過前臺來發(fā)出一系列的指令控制操作。Redux也是這樣，并不允許你直接修改全局狀態(tài)，你必須將Actions傳入Reducers，然后由這些純函數(shù)來返回新的狀態(tài)值。這樣整個系統(tǒng)的流程就清晰可見并且可回溯:
　　
　　同樣的，我們這里也推薦一些Redux 教程，以及免費的Redux作者的系列分享。
　　
　　Week 5: Building APIs With GraphQL
　　
　　● GraphQL初探:從REST到GraphQL，更完善的數(shù)據(jù)查詢定義
　　
　　現(xiàn)在我們已經(jīng)討論了很多客戶端開發(fā)中所需要的知識棧，不過對于有追求的前端開發(fā)者而言這遠(yuǎn)遠(yuǎn)不夠。不談?wù)麄€Node生態(tài)社區(qū)，我們還需要注意這個服務(wù)端的數(shù)據(jù)是如何傳遞到客戶端的。這里要著重介紹下GraphQL，一個由Facebook出品的可以替代傳統(tǒng)的REST API的標(biāo)準(zhǔn)。
　　
　　傳統(tǒng)的REST API會通過暴露多個REST路由來允許用戶訪問些數(shù)據(jù)集，譬如/api/posts,/api/comments。而GraphQL將多個后端的REST接口整合為單個端點，允許用戶從單個端點獲取所需要的數(shù)據(jù)。
　　
　　Beyond & Next Steps
　　
　　章節(jié)所限，在我的調(diào)查里也提到Vue與Elm都是很優(yōu)秀的框架，推薦有興趣的朋友可以了解下。另外，在學(xué)完了這些基礎(chǔ)知識，你還可以了解以下幾個方面:
　　
　　● JavaScript on the server (Node, Express…)
　　● JavaScript testing (Jest, Enzyme…)
　　● Build tools (Webpack…)
　　● Type systems (TypeScript, Flow…)
　　● Dealing with CSS in your JavaScript apps (CSS Modules, Styled Components…)
　　● JavaScript for Mobile apps (React Native…)
　　● JavaScript for desktop apps (Electron…)