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

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

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

一個現代的JavaScript Web應用會包含哪些部分

為什么不推薦使用jQuery？

為什么React是個不錯的選擇

為什么并不需要你首先學透JavaScript？

如何學習ES6語法

緣何與如何學習Redux?

GraphQL到底解決了什么問題？

下一步又會走向何方

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

State Of JavaScript：前端框架現狀調查

為了便于理解現代JavaScript為啥看起來如何復雜，我們首先要明白其工作原理。我們首先來看下2008年左右流行的所謂傳統Web應用的架構:

1.服務端從數據庫中獲取數據。
2.服務端讀取這些數據然后渲染到HTML中。
3.HTML文件被發送到瀏覽器，瀏覽器將HTML轉化為DOM樹并且展示出來。

現在很多的應用會在客戶端使用JavaScript來保證應用的可交互性，不過本質上瀏覽器還是從收到HTML文件開始。下面我們再比較下2016年流行的所謂現代Web應用，典型的就是所謂的單頁應用:

注意到區別了嗎？與傳統的Web應用相比，現在的服務端更多的承擔起是提供數據的功能，而渲染HTML文件這一步交由客戶端進行處理。這一個根本性的變化也會導致很多或好或壞的結果，好的一方面呢:

對于某一塊內容，僅僅發送數據會比發送整個HTML文件快很多

以單頁應用為例，客戶端可以刷新局部數據而不需要刷新整個瀏覽器窗口

壞的方面:

由于現在數據的加載與渲染放在了客戶端，初始加載與渲染會耗費更長的時間

現在需要在客戶端提供一個存儲與管理數據的地方，也就是我們目前所熟悉的狀態管理工具

惡心的地方:

隨著客戶端應用邏輯與交互的日漸復雜，你需要掌握像服務端技術棧一樣復雜的前端技術棧

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

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

除非你是一個純粹的服務端應用程序開發者，你肯定知道些JavaScript基礎的內容。如果你還不是很了解的話那么也不需要擔心，這里推薦個不錯的教程Codecademy’s JavaScript lessons。

React的未來特性

React 入門與最佳實踐

在你了解了JavaScript基礎語法知識之后，我推薦你下一步開始學習React。

React是由Facebook開發并且開源的UI庫，換言之，其專注于完成將數據渲染到HTML這一步驟，也就是所謂的View層。不過需要注意的是，我在這里并不是安利React為最優秀的庫，這個是因項目而定的，不過我覺得React是個挺不錯的合適初學者的庫：

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

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

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

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

總而言之，React并不一定適用于所有的場景，但是我覺得它是所謂最安全的，學了不吃虧。React還會引導你去了解一些像組件、應用狀態與無狀態函數等等現代Web應用框架的概念。最后，React的整個生態圈非常繁榮，你可以從Github上有關React的項目中找到很多可用的組件，或者在Stack Overflow上找到很多關于React的答疑解惑。我個人是比較推薦Wes Bos的React for Beginners這一課程。這課程包含了React從入門到最佳實踐的全部知識。

使用Facebook的create-react-app快速構建React開發環境

在重構腳手架中掌握React/Redux/Webpack2基本套路

到了這里我假設你已經完成了React的基礎課程，如果你跟我差不多的話，那么我估計你現在的狀態可能是:

估摸著你已經忘了一大半學過的知識點

你很想能夠盡快付諸實踐

眾所周知，實踐是學習某個框架的不二法訣，并且開始一個簡單的個人項目也是學習新技術的不錯的試驗點。一個個人項目可以是簡單的單頁應用，也可能是像Github客戶端這樣復雜的Web應用。這里我推薦你可以嘗試著去做一個簡單的個人主頁。不過還是要補充一句，如果你打算用React做一個簡單的靜態內容頁就有點大材小用了，這里推薦一個不錯的工具Gatsby，這是一個React靜態網站生成器。

這里我把Gatsby推薦為你可以在初步實踐React階段一個不錯的參考項目，主要是因為:

其提供了配置好的Webpack，可以省去你很多學習配置的煩惱

能夠基于你目錄結構動態設置路由

所有的HTML內容同樣可以服務端渲染

生成的靜態內容頁意味著你可以簡單地就可以部署在Github主頁上

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

Arrow functions

Object destructing

Classes

Spread Operator

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

思考:我需要怎樣的前端狀態管理工具?

你不一定需要Redux

深入理解Redux:10個來自專家的Redux實踐建議

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

在React的生態圈中，最著名的狀態管理工具當屬Redux。Redux不僅能夠幫助你集中管理數據，還能強制使用者對于數據的修改操作進行統一規范。

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

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

GraphQL初探:從REST到GraphQL，更完善的數據查詢定義

現在我們已經討論了很多客戶端開發中所需要的知識棧，不過對于有追求的前端開發者而言這遠遠不夠。不談整個Node生態社區，我們還需要注意這個服務端的數據是如何傳遞到客戶端的。這里要著重介紹下GraphQL，一個由Facebook出品的可以替代傳統的REST API的標準。

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

章節所限，在我的調查里也提到Vue與Elm都是很優秀的框架，推薦有興趣的朋友可以了解下。另外，在學完了這些基礎知識，你還可以了解以下幾個方面:

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…)