一個治愈 JavaScript 疲勞的學習計劃

像其他人一樣，我最近偶然看到 Jose Aguinaga 的文章《在 2016 年學 JavaScript 是一種什么樣的體驗》。

很顯然，這篇文章觸到了很多人的痛點：我看到它兩次榮登 Hacker News 的榜首。它也是 /r/javascript 上最熱門的文章，并且截至目前它在 Medium 上有超過 10K 個喜歡——可能比我自己所有文章加在一起還要多。但是誰在乎呢？

不過這不足為奇：我早就知道 JavaScript 生態圈會讓人感到困惑。實際上，我做 JavaScript 2016 年的概況調查的主要原因就是想找到哪些庫是真正流行的，去蕪存菁。

但是今天，我想更進一步。只是抱怨事物的狀態并沒有什么卵用，我打算給你一個實實在在的、一步一步征服 JavaScript 生態圈的學習計劃。

目標人群

如果你符合如下情況，那么本學習計劃就是為你定制的：

• 你已經熟悉了基礎的編程概念，比如變量和函數。

• 你可能已經用諸如 PHP 和 Python 之類的語言做過后端的工作，并且可能為了用一些簡單技巧而使用過諸如 jQuery 這種前端庫。

• 你現在想從事一些更正規的前端開發，但是在開始之前就被框架和庫淹沒。

本文將介紹

• 一個現代的 JavaScript Web 應用看起來是什么樣子

• 為什么你不能只用 jQuery

• 為什么 React 是最安全的選擇

• 為什么你也許不需要先“正確地學習 JavaScript“

• 如何學習 ES6 語法

• 為什么要以及如何學習 Redux

• GraphQL 是什么以及為什么它很重要

• 之后該學什么

這里提到的資源

聲明：本文將包含一些對 Wes Bos 所做課程的附屬鏈接，但是我推薦他的素材是因為我真心認為不錯，而不是為了推廣。

如果你想找其它資源，那么可以看看 Mark Erikson 維護的一份 React、ES6 和 Redux 的超長鏈接列表。

此 JavaScript 非彼 JavaScript

在開始之前，需要確保我們談論的是同一件事情。如果你搜索 "學習 JavaScript" 或者 "JavaScript 學習計劃"，會找到大量教你如何學習 JavaScript 語言 的資源。

但是這實際上是 簡單的 部分。你肯定可以深入挖掘和學習這門語言中復雜的部分，然而事實是大多數 web 應用只用了相對簡單的代碼。換句話說，為編寫 web 應用，你所需的 80% 知識通常只涉及典型的 JavaScript 書的前幾章。

最難搞定的是掌握 JavaScript 生態圈 ，這個生態圈有不計其數的競爭性的框架和庫。好消息是，這剛好是本學習計劃關注的問題。

JavaScript 應用的組成部分

要理解為什么現代 JavaScript 應用好像如此復雜，你首先得理解它們的工作機制。

對于初學者，我們來看看大約在 2008 年的“傳統” web 應用：

1. 數據庫發送數據給后臺（比如你的 PHP 或者 Rails 應用）。

2. 后臺讀取該數據，并輸出 HTML。

3. HTML 被發送給瀏覽器，瀏覽器將其顯示為 DOM（即，網頁）

現在很多這種應用也會在客戶端塞進一些 JavaScript 代碼來添加交互性，比如標簽和模態窗口。但是從本質上講，瀏覽器依然是接收 HTML 并且從這里開始。

現在把它與 2016 年的 “ 現代” Web 應用（也稱為"單頁應用“）比較：

注意到區別沒有？服務器現在是發送 數據 ，而不是發送 HTML，并且“數據到 HTML”的轉換步驟發生在客戶端 (這也是為什么你要把代碼和 數據 一起發送，告訴客戶端如何執行從前的轉換）。

這會造成很多影響。首先，好的部分是：

• 對于給定內容塊，只發送數據比發送整個 HTML 頁面更快。

• 客戶端可以立即交換內容，而不需要像以前那樣刷新瀏覽器窗口（這也是術語“單頁應用”的由來）。

壞的部分是：

• 首次加載更長，因為“將數據轉換到 HTML”的代碼庫會變得很大。

• 你現在還需要一個地方來存儲和管理客戶端上的數據，從而方便緩存或者檢查它。

而惡心的部分是：

• 恭喜 - 你現在不得不處理客戶端技術棧，這會變得跟服務器端技術棧一樣復雜。

客戶端-服務器光譜（范圍）

那么，既然有這么多缺點，為什么要受這種罪呢？為什么不就沿襲過去 PHP 應用的老套路呢？

好吧，假設你正在寫一個計算器。如果用戶想知道 2 + 2 是多少，那么當瀏覽器完全有能力做這種事情的時候，回到服務器執行這種操作然后再返回過來就很毫無意義了。

相反，如果你只是創建一個純靜態網站，比如博客，那么直接在服務器上生成最終的 HTML 就挺合適的。

事實是，大多數 web 應用介于光譜的中間地帶。問題是要知道處于什么位置。

但關鍵是 這個光譜是不連續的 ：你不能從一個純服務器端應用開始，慢慢走向一個純客戶端應用。在某個點（分水線, the Divide ），你會被強制停下來，重構所有東西，否則會以一大堆不可維護的意大利面條式的代碼而告終。

這就是為什么你不應該不管做什么都只用 jQuery 的原因。你可以把 jQuery 當作是牛皮膠布。用它對付家里的小修小補還是很方便，但是如果你到處貼就很難看了。

另一方面，現代 JavaScript 框架更像 3D 打印一個替換零件：要花更長時間，但是結果是更干凈更堅固。

也就是說，掌握現代 JavaScript 技術棧是個賭注，不管從哪里開始，大多數 web 應用 可能 遲早都會出現在分水線的右邊。所以，是的，要干的活更多了，但是有備無患。

第 0 周: JavaScript 基礎

除非你是一名純后臺開發者，否則你可能會了解點 JavaScript。當然，即使你不了解，如果你是一名 PHP 或者 Java 開發者，JavaScript 的類 C 語法也會看起來有點熟悉。

但是如果 JavaScript 對你來說完全摸不著頭腦，也不要灰心。有很多免費資源可以讓你快速上手，比如 Codecademy 的 JavaScript 課就很適合入門。

第 1 周: 從 React 開始

現在知道了基礎 JavaScript 語法，而且你理解了為什么 Javascript 應用顯得那么復雜，下面說說具體的技術。到底要從哪里開始呢？

我相信答案是 React。

React 是一個由 非死book 創建和開源的 UI 庫。也就是說，它負責“數據到 HTML”這一步（視圖層）。

不要誤會我的話：我不是因為 React 是 最好 的庫，所以推薦你選它（因為這太主觀了），而是因為它 相當不錯 。

• React 也許不是 最 流行的庫，但它是 相當 流行的。

• React 也許不是 最 輕量級的庫，但它是 相當 輕量級的。

• React 也許不是 最 容易學的，但它是 相當 易學的。

• React 也許不是 最 優雅的庫，但它是 相當 優雅的。

也就是說，React 也許并非是所有情況的 最佳 選擇，但是我相信它是最 安全 的。相信我，“你剛起步的時候”并不是承擔技術選擇風險的最佳時間。

React 也會給你介紹一些有用的概念，比如組件、應用程序狀態、無狀態函數。不管在你職業生涯期間最終使用哪個框架或者庫，這些概念都會被證明很有用。

最后，React 有一個很大的生態圈，這個生態圈還包括其它可以與 React 配合得很好的包和庫。并且它的完全普及意味著你可以在 Stackoverflow 這類網站上找到很多幫助。

我個人推薦 We Bos 的 React 初學者課程。我自己就是看這個課程學的，而且它剛剛用最新的 React 最佳實踐徹底修訂過。

你應該首先“正確地學習 JavaScript” 嗎？

如果你是一個按部就班的學習者，你可能想在做其它事情之前很好地掌握 JavaScript 的基本原理。

但是對于其它人來說，這就好像是通過學習人體解剖學和流體動力學來 學習游泳 一樣。確實，這二者都在游泳中起了很大的作用，但是跳到游泳池里會更好玩！

這里沒有正確或者錯誤的答案，一切都取決于你的學習方式。實際上，反正最基礎的 React 教程可能會只用到 JavaScript 很小的一個子集，所以只關注你現在需要的，剩下的以后再說，這樣就夠了。

這也適用于整個 JavaScript 生態圈。暫時不要費心去理解 Webpack 或者 Babel 這些東西的來龍去脈。實際上 React 最近推出了它自己的小 命令行工具 ，用這個工具你完全不需要構建任何配置，就可以創建應用。

第 2 周: 你的第一個 React 項目

下面我們假設你剛完成了一個 React 課程。如果你跟我一樣，那么下面兩件事情可能是真的：

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

• 你迫不及待要把你記得的一半用于實踐。

我相信學習一個框架或者一門語言的最好方式是馬上用它。而個人項目是嘗試新技術的完美場景。

個人項目可以是任何東西，小到一個簡單頁面，大到一個復雜的 Web 應用，但是我認為重新設計你的個人網站可能難度剛剛好。并且，我知道你可能已經把你的個人網站擱置多年了！

我之前提到過，用單頁應用模式開發靜態內容確實有點大材小用，不過 React 實際上有一款秘密武器： Gatsby 。這是一個 React 靜態網站生成器，可以體驗一下 React 的所有優點。

使用 Gatsby 來上手 React 有如下幾個好處：

• 預先配置好的 Webpack，意味著你要省下來很多麻煩事。

• 基于目錄結構自動生成路由。

• 所有 HTML 內容也是在服務器端生成，所以就能充分利用前后端的優勢。

• 靜態內容意味著不需要服務器，可以很簡單的托管在 GitHub Pages 上。

我就是用 Gatsby 搞定了 State Of JavaScript 網站，完全不需要操心路由、構建工具的配置，以及服務器端渲染，節省了大把時間。

第 3 周: 掌握 ES6

在我自己學習 React 的探索中，我很快就發現我可以很輕松地復制粘貼代碼示例，但是有很多東西我仍然不懂。

特別是，我對 ES6 引入的一些新功能不太熟悉，比如：

• 箭頭函數

• 對象解構

• 類

• 展開運算符

如果你也這樣，那么可能要花幾天學習一下 ES6 了。如果你喜歡 React 初學者課程，你可能想掏錢看看 Wes 的優秀視頻 ES6 for Everybody。

或者如果你喜歡免費資源的話，那就看看 Nicolas Bevacqua 的書《Practical ES6》。

掌握 ES6 的一個好的練習方式是翻一下較早的代碼庫（比如你在第 2 周創建的！），盡可能將代碼轉換為 ES6 的更短、更簡潔的語法。

第 4 周: 掌握狀態管理

到了這里，你應該有能力創建一個支持靜態內容的簡單 React 前端了。

但是真正的 Web 應用不會是靜態的：它們需要從某個地方獲取數據，通常是某種類型的數據庫。

現在你只能向一個組件發送數據，但是這很快會變得一團糟。比如，如果兩個組件需要顯示同一塊數據該怎么辦？或者二者兩個組件需要相互通信該怎么辦？

這時輪到 狀態管理發揮 作用了。你可以把狀態（換句話說，就是數據）存儲到一個 全局的倉庫 中，然后將其分發到你的 React 組件中，而不是一點一點存儲在每個組件中：

在 React 陣營中，最熱門的狀態管理庫是 Redux。Redux 不僅可以幫助你集中管理數據，還可以對數據的操作制定嚴格的協議。

可以地把 Redux 當作是一個銀行：你不能到本地的分行，手動修改你的賬戶總額（“嘿，就讓我多加幾個零吧！”）。而是填寫一個存款單，然后把它交給授權執行該操作的銀行出納員。

同樣，Redux 也不允許你直接修改全局狀態。而是將 action 傳遞給 reducer 。reducer 是一個特殊的函數，它執行修改狀態的操作，返回新的更新了的狀態為結果。

所有這些額外工作帶來的是整個應用中高度標準化和可維護的數據流，并且數據流可以通過訪問 Redux Devtools 這類工具來可視化：

(動圖，請點擊閱讀原文)

你可以再次與我們的朋友 Wes 在一起，通過他的 Redux 課程來學習 Redux，這套課程是完全免費的。

或者，你可以用 Redux 的發明人 Dan Abramov 在 egghead.io 上的視頻課程來學習。這套課程也是免費的。

附贈第 5 周: 用 GraphQL 創建 API

迄今為止，我們差不多只談及了客戶端，這只是等式的一半。即使你不完全掌握整個 Node 生態圈，也需要了解對于任何 Web 應用都很關鍵的一點：數據是如何從服務器到客戶端的。

毫無疑問，這個環節也是快速變化的。此時，非死book 的另一個開源項目 GraphQL 應運而生，成為傳統 REST API 的一個重要替代物。

REST API 暴露多個 REST 路由，每個路由讓你可以訪問一個預定義的數據集（比如，/api/post、/api/comments 等等）。而 GraphQL 只暴露一個端點，讓客戶端可以通過這一個端點查詢它所需的數據。

就好像你要買很多東西，REST API 就是多次來回肉店、面包店、小賣部，而 GraphQL 就是給某人一個購物清單，然后把他送到這三個地方。

當你需要查詢多個數據源的時候，這種新策略就變得特別有意義了。就像購物清單示例一樣，現在你可以用一個請求，從所有這些數據源獲取數據。

GraphQL 在過去一年左右的時間已經日益受歡迎，很多項目（比如我們第 2 周所用的 Gatsby）都在計劃采用它。

GraphQL 本身只是一個協議，但是目前它的最佳實現可能是 Apollo 庫。這個庫能與 Redux 很好地配合。有關 GraphSQL 和 Apollo 的教學材料依然很少，但是希望 Apollo 文檔 能幫你開始。

除了 React 及其生態圈外

我推薦你從 React 生態圈開始，是因為它是安全的選擇。但是，它絕非是唯一有效的前端技術棧。如果你想繼續探索的話，這里還有兩個推薦：

Vue

Vue 是一個相對比較新的庫，但是它正以創記錄的速度增長，而且已經被大公司采納。特別在中國，它正被像百度和阿里巴巴（被認為是中國的谷歌和中國的亞馬遜）這樣的公司采用。并且它還是 PHP 框架 Laravel 的官方前端層框架。

與 React 相比，它的一些關鍵賣點是：

• 官方維護的路由和狀態管理庫。

• 關注于性能。

• 較低的學習曲線（由于使用的是基于 HTML 的模板）。

• 較少的樣板代碼。

按照現在的情況，依然讓 React 比 Vue 占優勢的兩個主要因素是 React 生態圈的大小，以及 React Native (以后會詳細介紹）。但是我相信 Vue 會很快趕上！

Elm

如果說 Vue 是更平易近人的選項，那么 Elm 就是更前沿的選項。Elm 不僅是一個框架，還是一個編譯到 JavaScript 的全新語言。

這帶來不少優點，比如性能提升、強制語義版本控制以及無運行時異常。

我本人還沒有試過 Elm，但是我的朋友們都給我熱烈推薦它。并且 Elm 用戶通常看起來對它很滿意（JavaScript 2016的概況調查中展示 Elm 有 84% 的滿意度）。

下一步

到這里你應該已經很好地掌握了整個 React 前端技術棧，并且有望用它帶來相當可觀的產出。

但是并不意味著這就完事了！這只是 JavaScript 生態圈旅程的開端。你會逐漸遇到一些其它主題，包括：

• 服務器端的 JavaScript (Node、Express…)

• JavaScript 測試 (Jest、Enzyme…)

• 構建工具 (Webpack…)

• 類型系統 (TypeScript、Flow…)

• 處理 JavaScript 應用中的 CSS (CSS 模塊、樣式化的組件Styled Components…)

• JavaScript 移動應用開發 (React Native…)

• JavaScript 桌面應用開發 (Electron…)

我不可能在這里涵蓋所有內容，但是不要灰心！第一步總是最艱難的，你猜怎么著：你已經通過閱讀本學習計劃，跨出了第一步。

現在你理解了如何把生態圈中不同部分組合在一起，這不過就是將你下一步想學習的內容排隊，并且每個月搞定一個新技術。

 

來自：http://mp.weixin.qq.com/s?__biz=MzA4NjE3MDg4OQ==&mid=2650963833&idx=1&sn=56a1aa2613593121918c94dc744c1ec1&chksm=843a131fb34d9a0946dd42966e89dd7842de1c27d8b45be6ff4698858dec6a6479026bff04a1&scene=0#wechat_redirect