6周學習計劃，攻克JavaScript難關(React/Redux/ES6 etc.)

標籤：container   而且   play   遷移   資料   jpg   system   精通   intern   

 6周學習計劃，攻克JavaScript難關(React/Redux/ES6 etc.)餘博倫 · 2 個月前

原文連結：A Study Plan To Cure JavaScript Fatigue

Sacha Greif

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

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

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

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

目標人群

這份學習計劃寫給：

• 你熟悉例如變數方法一類的基本的編程概念；
• 你之前有瞭解過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給每個獨立的組件傳入資料，可應用一旦複雜了使用這種方式就會很淩亂。例如當兩個組件需要展示同一組資料，或者需要相互連信的時候。

這就是引入狀態管理概念的時候了。與在你的各個組件中一小塊一小Block Storage狀態(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的各部分實現是如何協同之後，接下來要做的也不過就是每個月都學習點火起來的新技術而已。

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

「好好學習，天天向上」 

6周學習計劃，攻克JavaScript難關(React/Redux/ES6 etc.)