摘要：不過今天我希望能夠更進(jìn)一步，不僅僅再抱怨現(xiàn)狀，而是從我個(gè)人的角度來給出一個(gè)逐步深入學(xué)習(xí)生態(tài)圈的方案。最后，我還是想提到下對于的好的學(xué)習(xí)方法就是回顧參照各種各樣的代碼庫，學(xué)習(xí)人家的用法與實(shí)踐。

本文翻譯自A-Study-Plan-To-Cure-JavaScript-Fatigue。筆者看到里面的幾張配圖著實(shí)漂亮，順手翻譯了一波。
本文從屬于筆者的Web Frontend Introduction And Best Practices:前端入門與最佳實(shí)踐。

最近我也讀了Jose Aguinaga的博文2016年里做前端是怎樣一種體驗(yàn)。這篇博客引發(fā)了廣泛的關(guān)注與討論，無論是在Hacker News還是Reddit還是Medium上，都有很多人參與到了它的討論中。我也是很早之前就感覺到了目前JavaScript生態(tài)圈中的群雄逐鹿，并且我還特地對目前JavaScript庫流行現(xiàn)狀進(jìn)行了調(diào)查，希望能夠在異彩紛呈的各式各樣的庫中尋找到真正的為大眾所接受的。不過今天我希望能夠更進(jìn)一步，不僅僅再抱怨現(xiàn)狀，而是從我個(gè)人的角度來給出一個(gè)逐步深入學(xué)習(xí)JavaScript生態(tài)圈的方案。（如果你尚對HTML/CSS/JavaScript并不了解，那么可以閱讀前端攻略：從路人甲到英雄無敵）。而在文本中我們會涉及以下幾個(gè)方面:

一個(gè)現(xiàn)代的JavaScript Web應(yīng)用會包含哪些部分

為什么不推薦使用jQuery？

為什么React是個(gè)不錯(cuò)的選擇

為什么并不需要你首先學(xué)透JavaScript？

如何學(xué)習(xí)ES6語法

緣何與如何學(xué)習(xí)Redux?

GraphQL到底解決了什么問題？

下一步又會走向何方

在正式開始之前，我們先要搞清楚我所要說的和你目前理解的是不是同一個(gè)東西。如果你在Google中搜索‘Learn JavaScript’或者‘JavaScript study plan’，你能得到一坨一坨的資料與教程指導(dǎo)你如何學(xué)習(xí)。不過實(shí)際上在我們的真實(shí)項(xiàng)目中，我們只會用到一些相對簡單的語法。換言之，可能你在學(xué)習(xí)Web應(yīng)用編寫中所需要的80%的知識點(diǎn)都包含在了任何一本JavaScript書籍的前幾章。另一個(gè)角度來說，真正麻煩的點(diǎn)在于如何掌握整個(gè)JavaScript生態(tài)圈，這里包含了數(shù)不盡的框架與庫。不過我相信本文可以給你一點(diǎn)啟示。

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)行處理。這一個(gè)根本性的變化也會導(dǎo)致很多或好或壞的結(jié)果，好的一方面呢:

對于某一塊內(nèi)容，僅僅發(fā)送數(shù)據(jù)會比發(fā)送整個(gè)HTML文件快很多

以單頁應(yīng)用為例，客戶端可以刷新局部數(shù)據(jù)而不需要刷新整個(gè)瀏覽器窗口

壞的方面:

由于現(xiàn)在數(shù)據(jù)的加載與渲染放在了客戶端，初始加載與渲染會耗費(fèi)更長的時(shí)間

現(xiàn)在需要在客戶端提供一個(gè)存儲與管理數(shù)據(jù)的地方，也就是我們目前所熟悉的狀態(tài)管理工具

惡心的地方:

隨著客戶端應(yīng)用邏輯與交互的日漸復(fù)雜，你需要掌握像服務(wù)端技術(shù)棧一樣復(fù)雜的前端技術(shù)棧

實(shí)際上很多才接觸現(xiàn)代前端開發(fā)技術(shù)棧的同學(xué)，特別是才從后端轉(zhuǎn)前端的同學(xué)都會有個(gè)疑問，既然這么麻煩為何還要進(jìn)行轉(zhuǎn)變？舉個(gè)例子，如果用戶希望得到2+2的結(jié)果，肯定不需要我們將這個(gè)計(jì)算發(fā)送到服務(wù)端然后等待結(jié)果，瀏覽器完全能夠支持這種簡單的計(jì)算。換言之，如果你是打算構(gòu)建一個(gè)純粹的靜態(tài)內(nèi)容站，譬如博客這樣的，那么在服務(wù)端直接生成最終的HTML文件是個(gè)不錯(cuò)的選擇。不過實(shí)際上很多Web應(yīng)用中我們并不能很好地界定這個(gè)分割點(diǎn)，并且整個(gè)光譜并不是連續(xù)的，你并不能先構(gòu)建一個(gè)純粹的服務(wù)端應(yīng)用然后慢慢地向客戶端遷移。當(dāng)?shù)竭_(dá)某個(gè)分割點(diǎn)時(shí)，你不得不停止這種遷移過程而去重構(gòu)大量的代碼，或者你就會面對一個(gè)龐雜無序難以維護(hù)的垃圾代碼庫。

這一點(diǎn)與不建議使用jQuery不謀而合，你可以將jQuery看做膠帶一類的存在。對于房子的修修補(bǔ)補(bǔ)很是不錯(cuò)，但是如果你想不斷地增加內(nèi)容與功能，你就會發(fā)現(xiàn)你的房子歪歪扭扭，到處都是狗皮膏藥，越看越丑。而大部分的現(xiàn)代JavaScript框架則是更像3D打印技術(shù)，可能在開始之前需要大量的準(zhǔn)備時(shí)間，但是它能還你一個(gè)更整潔穩(wěn)定的房屋。

除非你是一個(gè)純粹的服務(wù)端應(yīng)用程序開發(fā)者，你肯定知道些JavaScript基礎(chǔ)的內(nèi)容。如果你還不是很了解的話那么也不需要擔(dān)心，這里推薦個(gè)不錯(cuò)的教程Codecademy’s JavaScript lessons。

React的未來特性

React 入門與最佳實(shí)踐

在你了解了JavaScript基礎(chǔ)語法知識之后，我推薦你下一步開始學(xué)習(xí)React。

React是由Facebook開發(fā)并且開源的UI庫，換言之，其專注于完成將數(shù)據(jù)渲染到HTML這一步驟，也就是所謂的View層。不過需要注意的是，我在這里并不是安利React為最優(yōu)秀的庫，這個(gè)是因項(xiàng)目而定的，不過我覺得React是個(gè)挺不錯(cuò)的合適初學(xué)者的庫：

React不一定就是最受歡迎的庫，不過其受歡迎程度相當(dāng)高

React不一定是最輕量級的庫，不過其談不上是一個(gè)重量級的庫

React不一定是最簡單易學(xué)的庫，不過其并不難學(xué)

React不一定是最優(yōu)雅的庫，不過其看上去還是很舒心的

總而言之，React并不一定適用于所有的場景，但是我覺得它是所謂最安全的，學(xué)了不吃虧。React還會引導(dǎo)你去了解一些像組件、應(yīng)用狀態(tài)與無狀態(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從入門到最佳實(shí)踐的全部知識。

使用Facebook的create-react-app快速構(gòu)建React開發(fā)環(huán)境

在重構(gòu)腳手架中掌握React/Redux/Webpack2基本套路

到了這里我假設(shè)你已經(jīng)完成了React的基礎(chǔ)課程，如果你跟我差不多的話，那么我估計(jì)你現(xiàn)在的狀態(tài)可能是:

估摸著你已經(jīng)忘了一大半學(xué)過的知識點(diǎn)

你很想能夠盡快付諸實(shí)踐

眾所周知，實(shí)踐是學(xué)習(xí)某個(gè)框架的不二法訣，并且開始一個(gè)簡單的個(gè)人項(xiàng)目也是學(xué)習(xí)新技術(shù)的不錯(cuò)的試驗(yàn)點(diǎn)。一個(gè)個(gè)人項(xiàng)目可以是簡單的單頁應(yīng)用，也可能是像Github客戶端這樣復(fù)雜的Web應(yīng)用。這里我推薦你可以嘗試著去做一個(gè)簡單的個(gè)人主頁。不過還是要補(bǔ)充一句，如果你打算用React做一個(gè)簡單的靜態(tài)內(nèi)容頁就有點(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)容頁意味著你可以簡單地就可以部署在Github主頁上

隨著我學(xué)習(xí)React的深入，我很快就感覺到了現(xiàn)在能夠看得懂簡單的代碼示例，不過還有很多語法尚不能完全理解。舉例來說，我還不熟悉ES6中的一些常見特性:

Arrow functions

Object destructing

Classes

Spread Operator

如果你跟我一樣也不是很熟悉，那么建議可以花個(gè)幾天時(shí)間來認(rèn)真學(xué)習(xí)下ES6的特性。如果你喜歡上面推薦的React基礎(chǔ)課程，那么你也可以看下ES6 for Everybody系列教程。不過如果你想找點(diǎn)免費(fèi)的資源，那么這里推薦Nicolas Bevacqua’s book, Practical ES6.。最后，我還是想提到下對于ES6的好的學(xué)習(xí)方法就是回顧參照各種各樣的代碼庫，學(xué)習(xí)人家的用法與實(shí)踐。

思考:我需要怎樣的前端狀態(tài)管理工具?

你不一定需要Redux

深入理解Redux:10個(gè)來自專家的Redux實(shí)踐建議

到這里我們已經(jīng)能夠構(gòu)建基于靜態(tài)內(nèi)容的簡單的React的前端項(xiàng)目，不過真實(shí)的Web應(yīng)用項(xiàng)目不可能全是靜態(tài)內(nèi)容，他們需要從服務(wù)端獲取數(shù)據(jù)然后交與React進(jìn)行動(dòng)態(tài)渲染。最直觀的做法就是將數(shù)據(jù)一層一層地傳遞給組件，不過這很容易引發(fā)整個(gè)系統(tǒng)的混亂。譬如當(dāng)兩個(gè)組件需要去展示同樣的數(shù)據(jù)時(shí)候，它們應(yīng)該如何交互呢？
這也就是所謂狀態(tài)管理工具的用武之處，不同于將你的數(shù)據(jù)存放到組件內(nèi)，你可以創(chuàng)建一個(gè)獨(dú)立的全局單例Store來為組件樹存放狀態(tài):

在React的生態(tài)圈中，最著名的狀態(tài)管理工具當(dāng)屬Redux。Redux不僅能夠幫助你集中管理數(shù)據(jù)，還能強(qiáng)制使用者對于數(shù)據(jù)的修改操作進(jìn)行統(tǒng)一規(guī)范。

你可以將Redux想象為銀行，你并不能直接進(jìn)入自己的賬戶然后修改賬戶中的余額，你需要通過前臺來發(fā)出一系列的指令控制操作。Redux也是這樣，并不允許你直接修改全局狀態(tài)，你必須將Actions傳入Reducers，然后由這些純函數(shù)來返回新的狀態(tài)值。這樣整個(gè)系統(tǒng)的流程就清晰可見并且可回溯:

同樣的，我們這里也推薦一些Redux 教程，以及免費(fèi)的Redux作者的系列分享。

GraphQL初探:從REST到GraphQL，更完善的數(shù)據(jù)查詢定義

現(xiàn)在我們已經(jīng)討論了很多客戶端開發(fā)中所需要的知識棧，不過對于有追求的前端開發(fā)者而言這遠(yuǎn)遠(yuǎn)不夠。不談?wù)麄€(gè)Node生態(tài)社區(qū)，我們還需要注意這個(gè)服務(wù)端的數(shù)據(jù)是如何傳遞到客戶端的。這里要著重介紹下GraphQL，一個(gè)由Facebook出品的可以替代傳統(tǒng)的REST API的標(biāo)準(zhǔn)。

傳統(tǒng)的REST API會通過暴露多個(gè)REST路由來允許用戶訪問些數(shù)據(jù)集，譬如/api/posts,/api/comments。而GraphQL將多個(gè)后端的REST接口整合為單個(gè)端點(diǎn)，允許用戶從單個(gè)端點(diǎn)獲取所需要的數(shù)據(jù)。

章節(jié)所限，在我的調(diào)查里也提到Vue與Elm都是很優(yōu)秀的框架，推薦有興趣的朋友可以了解下。另外，在學(xué)完了這些基礎(chǔ)知識，你還可以了解以下幾個(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…)