和大家一樣，最近我也看了Jose Aguinaga寫的How it feels to learn JavaScript in 2016.

顯然這篇文章擊中了人們的痛處。它在Hacker News上排了不止一次第一。同樣也是/r/javascript上最火的一篇，在Medium上也有超過10k的推薦。

這並不能算是譁眾取寵：我很早以前就瞭解到，JS的生態圈確實很令人困惑。事實上，我開展State Of JavaScript調查正是為了瞭解真正受歡迎的JS庫，去其糟粕，取其精華。

今天，我不只是簡單地陳述JS的發展現狀，我將會向你展現一個十分具體，一步一步掌握JS知識體系的學習計劃。

 “我自己是一名從事了5年web前端開發的老程式設計師，辭職目前在做線上教育講師（我的微信：web_kc，加我好友時備註：CSDN，給你贈送一套前端學習教程），每晚都會直播前端教學（從零基礎到大牛），正在學習前端的可以加下我，也可以加QQ群：465611429，今年年初我花了一個月整理了一份最適合2018年學習的web前端乾貨，從最基礎的HTML+CSS+JS到移動端HTML5到各種框架都有整理，送給每一位前端小夥伴，這裡是前端學習者聚集地，歡迎初學和進階中的小夥伴。

 

目標人群

這份學習計劃寫給：

• 你熟悉例如變數方法一類的基本的程式設計概念；

• 你之前有了解過PHP/Python一類的後端語言，也使用過jQuery一類的庫；

• 你想要更深入的瞭解前端開發，卻迷失在無數的框架和類庫當中不知道何去何從。

 

涵蓋內容

• 當前JS應用的構成

• 為什麼僅使用jQuery是不夠的

• 為什麼React是最合適的選擇

• 為什麼你沒必要一開始就“全面掌握JavaScript”

• 如何學習ES6語法

• 為什麼以及如何學習Redux

• GraphQL是個什麼玩意兒

• 在這之後該學些什麼

 

學習資料說明

免責宣告：文章會提到一些來自Wes Bos的教程連結，僅作推薦，並不是推廣廣告。

如果你想要找到別的相關資料，Mark Erikson在Github上有一個收集列表React, ES6, and Redux

 

此JavaScript非彼JavaScript

首先明確一下這份學習計劃主要目的。隨便你一搜“學習JavaScript”或者“JavaScript學習計劃”，就能夠找到無數有關學習JavaScript語言的教程資源。

但這其實屬於比較簡單的部分。對一門語言的學習理解可以挖的很深，可是事實上大部分Web應用的程式碼是很簡單的。換句話講，編寫Web應用所需的80%的知識在你看的JavaScript教程書籍的前幾章就都涵蓋了。

真正的困難在於掌握包含了數不勝數的框架和庫的JavaScript的生態體系。這篇學習計劃主要關注的就是這部分內容。

 

JavaScript應用的框架結構

為了理解當前JavaScript應用的複雜性，我們首先需要了解他們是如何運作的。

首先我們看一下2008年標準的Web應用的構成：

1. 資料庫為後端提供資料（後端可以是PHP或Rails等）；

2. 後端解析資料並輸出HTML；

3. HTML被髮送到瀏覽器，以網頁的形式展示。

現在這類應用也有一些客戶端的JS程式碼，用來增加互動（例如標籤、模態視窗等），但本質上，瀏覽器仍是從伺服器獲取HTML的內容。

現在拿當前2016年的Web應用（也稱作：單頁面應用）與之比較：

發現其中的區別了麼？並不是從伺服器傳送HTML內容，而是隻返回資料，資料到HTML的渲染步驟都發生在客戶端（同樣也返回客戶端如何根據會話進行反饋的程式碼）。

這麼做有好有壞，首先好處是：

• 對於相同的某塊內容，只發送資料要比傳送HTML頁面快。

• 客戶端不需要重新整理頁面就可以進行互動改變內容（這也是為什麼稱其為單頁面應用的原因）

缺陷是：

• 初次載入需要更久，因為 “資料轉換成HTML”的程式碼量會很大。

• 為了方便快取和查詢，你在客戶端也需要有一塊地方管理和儲存資料。

比較髒的是：

• 恭喜你，現在客戶端的技術棧和伺服器端一樣複雜啦。

 

客戶端與伺服器的範疇

既然有這麼多缺陷我們為什麼還要遭這份兒罪呢？就像以前那樣使用PHP後端不好麼？

那麼，試想一下你開發一個計算器應用。如果使用者想知道2+2的結果，在伺服器端計算再返回是非常傻的，因為瀏覽器完全有能力實現這種需求。

但另外一方面，如果你只是搭建部落格一類的靜態站點的話，在伺服器端直接生成HTML內容就挺合適的。

而事實上，大部分的Web應用都介於這兩者之間，問題就是我們到底採用何種架構。

關鍵是兩種架構是無法過渡的：你不能開始寫一個純伺服器端應用然後慢慢遷移到純客戶端。有些情況下，你將不得不停下來把所有的部分都重構，或者遺留下一堆無法維護的雜亂程式碼。

這也解釋了你為什麼不能在所有專案中“只用jQuery”。你可以把jQuery想象成萬金油。房間裡需要修修補補的時候它有奇效，而你如果濫用的話只會讓一切看起來很糟糕。另外一方面，當前的JavaScript框架就好像3D列印技術革新一樣：耗時更久，但結果更簡潔可靠。

換句話講，掌握當前流行的JavaScript技術棧就是賭絕大多數的Web應用可能最終都將把伺服器端客戶端劃分開來。你確實需要付出更多的學習成本。不過少壯不努力，老大隻得徒傷悲。

 

第一週：JavaScript基礎

除非你之前是個純後端開發者，你多少都應該知道點JavaScript.即使你不懂，JavaScript的語法看起來也很像C，對於PHP或Java開發者來說應該不會太陌生。

要是你之前一點都不瞭解JavaScript也沒關係。網上可以找到很多相關的免費教程讓你快速入門。例如Codecademy’s JavaScript lessons就很不錯。

• JavaScript 教程

• JavaScript全棧教程

• JavaScript MDN

• JavaScript 標準參考教程

 

第二週：開始學習React

掌握了JavaScript的基本語法之後，你多少明白些為什麼JavaScript應用會如此複雜了，我們直接說點具體的，從哪裡上手呢？

我想答案就該是React.

React是Facebook開源的UI工具庫。換句話講，它主要用來處理資料到頁面的渲染步驟（檢視層）。

不要誤會我：我推薦你選用React不是因為它是全世界最好的框架（這太過主觀了），而是因為它確實非常受歡迎。

• React也許不是全世界最受歡迎的框架，但真的有很多人都喜歡它。

• React也許不是最輕量的框架，但也並不臃腫。

• React也許並不是最易上手的框架，但也挺友好的。

• React也許並不是最優雅的框架，但也夠優雅了。

換句話講，React也許不是所有情況下的最優選擇，但它是最靠譜的。而其相信我，在你剛剛開始的時候，還是不要太特立獨行的好。

學習React同樣有助於你瞭解一些實用的概念。例如元件、應用狀態、無狀態方法等。這對你學習任何別的框架和庫都是很有價值的。

最後，React有著當前最大的生態體系，許多包和庫都能和它非常好地協同，同時它龐大的社群也可以讓你比較輕鬆地在網上獲取到幫助。

我個人推薦React for Beginners這個教程。我自己當時就學了這個教程，而且它最近剛剛更新了React的最佳實踐。

• React 入門例項教程

• React 教程

• 一看就懂的ReactJs入門教程-精華版

• 十分詳細的React入門例項

• React 入門與最佳實踐

 

你需要先“全面掌握JavaScript”麼？

假如你是個按部就班的同學，你可能希望先踏踏實實地牢固打好JavaScript的基礎。

但對於大多數人來講，這就好像為了學游泳去學人體解剖和流體力學一樣。確實，這兩門專業知識對游泳來說都至關重要，不過還是直接跳到池子裡開始遊爽啊！

這個問題沒有對錯，全在於你的學習方法。事實上，大部分的React基礎教程都只需要很少一部分JavaScript知識，你只需要先掌握這部分內容就足夠了。

這個道理同樣適用於廣義上的JavaScript知識體系。你並不需要擔心不理解Webpack或Babel的輸入輸出。事實上，React推出的命令列工具可以讓你完全不必擔心配置就初始化好應用。

 

第三週：你的第一個React應用

在你學完了React的教程之後，你可能面臨和我當時相同的狀況：

• 你把你剛學的內容可能已經忘了一半了。

• 你等不及要帶著剩下的一半知識上手實踐一下。

我堅信學習一個框架或一門語言的最好方法就是上手實踐。而寫一些個人專案則是實驗新技術的最好選擇。

一個個人開發專案可以簡單到只是一個頁面，也可以複雜到一個完整的Web應用。我感覺用新技術重新設計你的個人網站難度剛剛好，另外，你估計也很久沒有更新過你個人站的架構了。

我之前提到過，用單頁應用展示靜態內容確實有些大材小用了，不過React有一款很棒的工具Gatsby，一個React架構的靜態站點生成器，可以讓你體驗React的所有優點。

使用Gatsby入門React的好處有以下幾條：

• 一個預先配置好的Webpack，這意味著你要省下很多麻煩（Webpack配置簡直太反人類）。

• 根據你的目錄結構自動生成路由。

• 所有的HTML都會在伺服器端渲染，彌補了客戶端渲染的不足。

• 靜態站點也可以不必擔心伺服器端，並且可以輕鬆託管在Github Pages上。

State Of JavaScript就是我用Gatsby開發的，不需要操心路由、構建工具配置、伺服器端渲染等煩人的問題，為我節約了大量的時間。

 

第四周：熟悉ES6

在我學習React的過程中，我很快就發現我可以很輕鬆地複製貼上程式碼示例，但剩下的很多仍然不懂。

尤其是不熟悉ES6的語法：

• 箭頭函式Arrow functions

• 物件解構Object destructuring

• 類Classes

• 展開操作符The spread operator

如果你也有相同的感受，那就是時候花些時間好好學學ES6了。ES6 for Everybody就是一個很不錯的教程。

你想要免費的教程也有，Nicolas Bevacqua的Practical ES6就不錯。

• ECMAScript 6入門

掌握學習ES6的一個比較好的實踐方法是重構你在第三週寫的程式碼，儘量都轉換為更簡潔的ES6寫法。

 

第五週：掌握狀態管理

到現在這個階段你應該已經能寫一些靜態內容的React前端了。

但真正的Web應用肯定不是靜態的：他們需要從資料庫一類的後端獲取資料。

現在你可以用React給每個獨立的元件傳入資料，可應用一旦複雜了使用這種方式就會很凌亂。例如當兩個元件需要展示同一組資料，或者需要相互通訊的時候。

這就是引入狀態管理概念的時候了。與在你的各個元件中一小塊一小塊儲存狀態(state)不同的是，你可以將所有的資料儲存在一個全域性store中，然後再分發給每個React元件：

在React陣營裡，Redux是最受歡迎的狀態管理庫。Redux不僅能幫助你集中管理資料，同樣可以將對資料的操作限制在一定規範內。

你可以將Redux想象成一個銀行：你不能直接修改你賬戶的存款數字（來來來，讓我在後面多加幾顆零吧！）。而是需要填寫存款表單，讓銀行出納認證後來完成這個操作。

相似的，Redux也不允許你直接修改全域性state的資料。而是通過向reducers傳遞actions來進行，reducer其實就是一個接收舊狀態和操作返回新狀態的方法。

這些看似多餘的工作可以讓你很好地維護管理你應用中的資料流。Redux Devtools這樣的工具可以很好地顯示資料流的變化。

同樣你也可以在Wes的網站上學習Redux 教程，這個是免費的。

或者你喜歡視訊教程，也可以參考Dan Abramov在egghead.io上的視訊教程

• Redux 入門教程

• Redux 入門與最佳實踐

 

最後一週：使用GraphQL構造APIs

到目前為止，我們談論的大部分內容都在客戶端，這只是整個應用的一半而已。即便你現在不需要完全瞭解Node的生態體系，你也需要了解對任何Web應用都至關重要的一點：資料是如何從伺服器獲取並傳到客戶端的。

同樣也是由Fackbook開源的專案GraphQL，它可以作為傳統REST APIs的替代解決方案。

不同於REST API根據你預先定義的資料集（例如 /api/posts, /api/comments, etc.）分發出不同的REST路徑。GraphQL可以讓你只通過一個數據端像操作資料庫一樣按需查詢資料。

想象成一個人分別多次去生食店、麵包店、果樹店與他帶著一個購物清單去的區別。

這種新的策略在你需要請求多組資料來源的時候非常有意義。就像我們上面舉的購物清單例子，你只需要一次請求就可以獲取所有的資料。

GraphQL在過去的一年裡火了起來，很多例如Gatsby的專案都開始打算使用它。

GraphQL本身只是一項協議，它最好的實現是能和Redux非常好地協同的Apollo這個庫。現在網上的相關教程確實比較少，不過Apollo 官方文件已經能讓你很好地瞭解它了。

 

除了React之外呢

我推薦你從學習React生態體系開始因為選它確實很靠譜。但並不意味著只有這一種可靠的前段技術棧。我這裡還有兩個別的推薦：

Vue

Vue是新近火起來的一個框架，很多百度阿里一類的大公司也都開始使用了。它也同樣是PHP框架Laravel的官方前端實現。

相比React，它的主要賣點是：

• 官方提供維護的路由和狀態管理類庫

• 專注於效能表現

• 更低的學習成本，可以直接使用HTML模板而不是JSX

• 更少的模板程式碼

React更強大的地方在於它龐大的生態體系，例如React Native一類的實現。不過Vue也在越來越壯大。

• 新手向：Vue 2.0 的建議學習順序

Elm

如果說Vue還和React比較類似的話，Elm是更加前衛的一種實現。Elm不僅是一個框架，更是一種建立在JavaScript之上的語言，類似CoffeeScript/TypeScript等。

它有很多優點，例如效能提升，語義化的版本，沒有執行異常等。

在State Of JavaScript調查中，有84%使用過它的開發者都很滿意。

 

接下來學什麼？

相信在學完上述的內容之後你已經熟練掌握了React的前端技術棧了。希望你在實際開發中也能很好地應用它。

但這並不能證明你已經精通了JavaScript！這僅僅是掌握整個JavaScript技術體系的開始而已。這裡還有一些你可能感興趣的內容（內容本來也是英文所以就不翻譯啦）：

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

一篇文章遠遠不足以介紹所有這些內容。萬事開頭難，不過你要對自己有信心。等到你瞭解了JS的各部分實現是如何協同之後，接下來要做的也不過就是每個月都學習點火起來的新技術而已。

有任何問題以及好的意見或建議歡迎在評論區參與討論。