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

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

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

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

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