摘要：只是抱怨事物的狀態(tài)并沒有什么卵用，我打算給你一個(gè)實(shí)實(shí)在在的一步一步征服生態(tài)圈的學(xué)習(xí)計(jì)劃。好消息是，這剛好是本學(xué)習(xí)計(jì)劃關(guān)注的問題。比如，一個(gè)不錯(cuò)的出發(fā)點(diǎn)是的課。是一個(gè)由創(chuàng)建和開源的庫。我個(gè)人推薦的初學(xué)者課程。而個(gè)人項(xiàng)目是嘗試新技術(shù)的完美時(shí)機(jī)。

本文轉(zhuǎn)載自：眾成翻譯
譯者：網(wǎng)絡(luò)埋伏紀(jì)事
鏈接：http://www.zcfy.cc/article/1617
原文：https://medium.freecodecamp.com/a-study-plan-to-cure-javascript-fatigue-8ad3a54f2eb1#.d39y4izhb

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

譯者注：中文翻譯在此。

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

不過這不足為奇：我早就知道 JavaScript 生態(tài)圈會(huì)讓人困惑。實(shí)際上，我做 JavaScript 2016年的概況調(diào)查的最大原因就是想找到哪些庫是真正流行的，去蕪存菁。

但是今天，我想更進(jìn)一步。只是抱怨事物的狀態(tài)并沒有什么卵用，我打算給你一個(gè)實(shí)實(shí)在在的、一步一步征服 JavaScript 生態(tài)圈的學(xué)習(xí)計(jì)劃。

如果你是如下之一，那么本學(xué)習(xí)計(jì)劃就是為你定制的：

你已經(jīng)熟悉了基礎(chǔ)編程概念，比如變量和函數(shù)。

你可能已經(jīng)用諸如 PHP 和 Python 之類的語言做過后臺(tái)的工作，并且可能為一些簡(jiǎn)單技巧用過諸如 jQuery 這種前端庫。

你現(xiàn)在想從事一些更正規(guī)的前端開發(fā)，但是在開始之前就被框架和庫淹沒。

一個(gè)現(xiàn)代 JavaScript Web 應(yīng)用看起來像什么樣子

為什么你不能只用 jQuery

為什么 React 是最安全的選擇

為什么你也許不需要先“正確地學(xué)習(xí) JavaScript“

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

為什么要以及如何學(xué)習(xí) Redux

GraphQL 是什么以及為什么它是一個(gè)大事

之后該學(xué)什么

聲明：本文將包含一些對(duì) Wes Bos 所做課程的附屬鏈接，但是我推薦他的素材是因?yàn)槲艺嫘恼J(rèn)為不錯(cuò)，而不是為了推廣。

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

在開始之前，我們需要確保我們談?wù)摰氖峭患虑?。如果你搜?"學(xué)習(xí) JavaScript" 或者 "JavaScript 學(xué)習(xí)計(jì)劃"，會(huì)找到大量教你如何學(xué)習(xí) JavaScript 語言 的資源。

但是這實(shí)際上是 簡(jiǎn)單的 部分。你肯定可以深入挖掘和學(xué)習(xí)這門語言中復(fù)雜的部分，然而事實(shí)是大多數(shù) web 應(yīng)用只用了相對(duì)簡(jiǎn)單的代碼。換句話說，為編寫 web 應(yīng)用，你所需的 80% 知識(shí)通常只涉及標(biāo)準(zhǔn) JavaScript 書的前幾章。

最難搞定的是掌握 JavaScript 生態(tài)圈，這個(gè)生態(tài)圈有不計(jì)其數(shù)的競(jìng)爭(zhēng)性的框架和庫。好消息是，這剛好是本學(xué)習(xí)計(jì)劃關(guān)注的問題。

要理解為什么現(xiàn)代 JavaScript 應(yīng)用好像如此復(fù)雜，你首先得理解它們的工作機(jī)制。

對(duì)于初學(xué)者，我們來看看大約在 2008 年的“傳統(tǒng)” web 應(yīng)用：

數(shù)據(jù)庫發(fā)送數(shù)據(jù)給你的后臺(tái)（比如你的 PHP 或者 Rails 應(yīng)用）。

后臺(tái)讀取該數(shù)據(jù)，并輸出 HTML。

HTML 被發(fā)送給瀏覽器，瀏覽器將其顯示為 DOM（即，網(wǎng)頁）

現(xiàn)在很多這種應(yīng)用也會(huì)在客戶端塞進(jìn)一些 JavaScript 代碼來添加交互性，比如標(biāo)簽和模態(tài)窗口。但是從本質(zhì)上講，瀏覽器依然是接收 HTML 并且從這里開始。

現(xiàn)在把它與“現(xiàn)代" 2016年的 Web 應(yīng)用（也稱為"單頁應(yīng)用“）比較：

注意到區(qū)別沒有？服務(wù)器現(xiàn)在是發(fā)送數(shù)據(jù)，而不是發(fā)送 HTML，并且“數(shù)據(jù)到HTML"轉(zhuǎn)換步驟發(fā)生在客戶端 (這也是為什么你要把數(shù)據(jù)與代碼一起發(fā)送，告訴客戶端如何執(zhí)行所說的轉(zhuǎn)換）。

這有很多含義。首先，好的部分是：

對(duì)于給定內(nèi)容塊，只發(fā)送數(shù)據(jù)比發(fā)送整個(gè) HTML 頁面更快。

客戶端可以立即切換內(nèi)容，而不需要像以前那樣刷新瀏覽器窗口（這也是術(shù)語“單頁應(yīng)用”的由來）。

壞的部分是：

首次加載更長(zhǎng)，因?yàn)?數(shù)據(jù)到 HTML”代碼庫會(huì)變得很大。

你現(xiàn)在也需要一個(gè)地方來存儲(chǔ)和管理客戶端上的數(shù)據(jù)，從而方便緩存或者檢查它。

而惡心的部分是：

恭喜 - 你現(xiàn)在不得不處理客戶端技術(shù)棧，這會(huì)變得跟服務(wù)器端技術(shù)棧一樣復(fù)雜。

那么，既然有這么多缺點(diǎn)，為什么要受這種罪呢？為什么不就沿襲過去 PHP 應(yīng)用的老套路呢？

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

另一方面，如果你只是創(chuàng)建一個(gè)純靜態(tài)網(wǎng)站，比如博客，那么直接在服務(wù)器上生成最終的 HTML 就挺合適的。

事實(shí)是，大多數(shù) web 應(yīng)用介于光譜的中間地帶。問題是要知道在哪里。

但是關(guān)鍵的事情是 這個(gè)光譜是不連續(xù)的 ：你不能從一個(gè)純服務(wù)器端應(yīng)用開始，慢慢走向一個(gè)純客戶端應(yīng)用。在某個(gè)點(diǎn)（分水線 divide），你會(huì)被強(qiáng)制停下來，重構(gòu)所有東西，否則會(huì)以一大堆不可維護(hù)的意大利面條式的代碼而告終。

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

另一方面，現(xiàn)代 JavaScript 框架更像 3D 打印的一個(gè)替換零件：要花更長(zhǎng)時(shí)間，但是結(jié)果是更干凈更堅(jiān)固。

也就是說，掌握現(xiàn)代 JavaScript 技術(shù)棧是個(gè)賭注，不管從哪里開始，大多數(shù) web 應(yīng)用 可能 遲早都會(huì)出現(xiàn)在分水線的右邊。所以，是的，要干的活更多了，但是有備無患更好。

除非你是一名純后臺(tái)開發(fā)者，否則你可能會(huì)了解點(diǎn) JavaScript。當(dāng)然，即使你不了解，如果你是一名 PHP 或者 Java 開發(fā)者，JavaScript 的類 C 語法也會(huì)看起來有點(diǎn)熟悉。

但是如果 JavaScript 對(duì)你來說是完全摸不著頭腦，也不要灰心。有很多免費(fèi)資源在那，可以快速讓你了解最新情況。比如，一個(gè)不錯(cuò)的出發(fā)點(diǎn)是 Codecademy 的 JavaScript 課。

現(xiàn)在知道了基礎(chǔ) JavaScript 語法，而且你理解了為什么 Javascript 應(yīng)用顯得那么復(fù)雜，下面我們?cè)斦?。到底要從哪里開始呢？

我相信答案是 React。

React 是一個(gè)由 Facebook 創(chuàng)建和開源的 UI 庫。也就是說，它負(fù)責(zé)“數(shù)據(jù)到HTML"這一步（視圖層）。

現(xiàn)在不要誤會(huì)我：我不是告訴你因?yàn)?React 是 最好 的庫，所以要選它（因?yàn)檫@太主觀了），而是因?yàn)樗?相當(dāng)不錯(cuò) 。

React 也許不是最流行的庫，但是它是相當(dāng)流行的。

React 也許不是最輕量級(jí)的庫，但是它是相當(dāng)輕量級(jí)的。

React 也許不是最容易學(xué)的，但是它是相當(dāng)容易學(xué)的。

React 也許不是最優(yōu)雅的庫，但是它是相當(dāng)優(yōu)雅的。

也就是說，React 也許并非是所有情況的 最佳 選擇，但是我相信它是最 安全 的。相信我，"就在你剛開始的時(shí)候"并不是承擔(dān)技術(shù)選擇風(fēng)險(xiǎn)的最佳時(shí)間。

React 也會(huì)給你介紹一些有用的概念，比如組件、應(yīng)用程序狀態(tài)、無狀態(tài)函數(shù)。不管在你職業(yè)生涯期間最終使用哪個(gè)框架或者庫，這些概念都會(huì)被證明是有用的。

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

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

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

但是對(duì)于其它人來說，這就好像是學(xué)游泳的時(shí)候?qū)W習(xí)人體解剖學(xué)和流體動(dòng)力學(xué)一樣。確實(shí)，這二者都在游泳中起了很大的作用，但是跳到游泳池里會(huì)更好玩！

這里沒有正確或者錯(cuò)誤的答案，一切都取決于你的學(xué)習(xí)方式。事實(shí)是，反正最基礎(chǔ)的 React 教程可能會(huì)只用到 JavaScript 很小的一個(gè)子集，所以只關(guān)注你現(xiàn)在需要的，剩下的以后再說，這樣會(huì)更好。

這也適用于整個(gè) JavaScript 生態(tài)圈。現(xiàn)在先不要對(duì)理解像 Webpack 或者 Babel 這些東西的來龍去脈操太多心。實(shí)際上 React 最近推出了它自己的小命令行工具，用這個(gè)工具你完全不需要構(gòu)建任何配置，就可以創(chuàng)建應(yīng)用。

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

你已經(jīng)把你剛學(xué)的內(nèi)容忘掉了一半。

你迫不及待要把你記得的一半用于實(shí)踐。

我相信學(xué)習(xí)一個(gè)框架或者一門語言的最好方式是馬上就用它。而個(gè)人項(xiàng)目是嘗試新技術(shù)的完美時(shí)機(jī)。

個(gè)人項(xiàng)目可以是任何東西，小到一個(gè)簡(jiǎn)單頁面，大到一個(gè)復(fù)雜的 Web 應(yīng)用，但是我認(rèn)為重新設(shè)計(jì)你的個(gè)人網(wǎng)站可能是一個(gè)剛剛好。并且，我知道你可能已經(jīng)把你的個(gè)人網(wǎng)站擱置多年了！

我之前提到過，用單頁應(yīng)用模式開發(fā)靜態(tài)內(nèi)容確實(shí)有點(diǎn)大材小用，不過 React 實(shí)際上有一款秘密武器：Gatsby。這是一個(gè) React 靜態(tài)網(wǎng)站生成器，可以體驗(yàn)一下 React 的所有優(yōu)點(diǎn)。

使用 Gatsby 來上手 React 有如下幾個(gè)好處：

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

基于目錄結(jié)構(gòu)自動(dòng)生成路由。

所有 HTML 內(nèi)容也是由服務(wù)器端生成的，所以你得到了兩全其美的結(jié)果。

靜態(tài)內(nèi)容意味著不需要服務(wù)器，可以很簡(jiǎn)單的托管在 GitHub Pages上。

我就是用 Gatsby 搞定 State Of JavaScript 網(wǎng)站，完全不需要操心路由、構(gòu)建工具的配置，以及服務(wù)器端渲染，為我節(jié)省了大把時(shí)間。

在我自己學(xué)習(xí) React 的探索中，我很快就發(fā)現(xiàn)我可以很輕松地復(fù)制粘貼代碼示例，但是有很多東西我仍然不懂。

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

箭頭函數(shù)

對(duì)象解構(gòu)

類

展開運(yùn)算符

如果你處境相同，那么可能到了要花幾天學(xué)習(xí)一下 ES6 的時(shí)候了。如果你喜歡 React 初學(xué)者課程，你可能想掏錢看看 Wes 的優(yōu)秀視頻 ES6 for Everybody。

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

掌握 ES6 的一個(gè)好練習(xí)是翻一下較早的代碼庫（比如你在第一周創(chuàng)建的！），盡可能將代碼轉(zhuǎn)換為 ES6 的更短、更簡(jiǎn)潔的語法。

到了這里，你應(yīng)該有能力創(chuàng)建一個(gè)支持靜態(tài)內(nèi)容的簡(jiǎn)單 React 前端了。

但是真正的 Web 應(yīng)用不會(huì)是靜態(tài)的：它們需要從某個(gè)地方獲取數(shù)據(jù)，通常是某種類型的數(shù)據(jù)庫。

現(xiàn)在你只能向一個(gè)組件發(fā)送數(shù)據(jù)，但是這很快會(huì)變得很糟糕。比如，如果兩個(gè)組件需要顯示同一塊數(shù)據(jù)該怎么辦？或者二者兩個(gè)組件需要相互對(duì)話該怎么辦？

這就是狀態(tài)管理起作用的地方。你可以把狀態(tài)（換句話說，就是數(shù)據(jù)）存儲(chǔ)到一個(gè)全局的倉庫中，然后將其分發(fā)到你的 React 組件中，而不是一點(diǎn)一點(diǎn)存儲(chǔ)在每個(gè)組件中：

在 React 陣營中，最熱門的狀態(tài)管理庫是 Redux。Redux 不僅可以幫助你集中管理數(shù)據(jù)，還可以對(duì)數(shù)據(jù)的操作制定嚴(yán)格的協(xié)議。

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

同樣，Redux 也不允許你直接修改全局狀態(tài)。而是將 action 傳遞給 reducer。reducer 是一個(gè)特殊的函數(shù)，它執(zhí)行修改狀態(tài)的操作，返回新的更新了的狀態(tài)為結(jié)果。

所有這些額外工作帶來的是整個(gè)應(yīng)用中高度標(biāo)準(zhǔn)化和可維護(hù)的數(shù)據(jù)流，并且數(shù)據(jù)流可以通過訪問 Redux Devtools 這類工具來可視化：

你可以再次與我們的朋友 Wes 在一起，用他的 Redux 課程來學(xué)習(xí) Redux，這套課程是完全免費(fèi)的。

或者，你可以用 Redux 的發(fā)明人 Dan Abramov 在 egghead.io 上的視頻課程來學(xué)習(xí)。這套課程也是免費(fèi)的。

迄今為止，我們差不多只談及了客戶端，這只是等式的一半。即使你不需要完全掌握整個(gè) Node 生態(tài)圈，也需要了解對(duì)于任何 Web 應(yīng)用都很關(guān)鍵的一點(diǎn)：數(shù)據(jù)是如何從服務(wù)器到客戶端的。

毫不奇怪，這個(gè)環(huán)節(jié)也是快速變化的。此時(shí)，F(xiàn)acebook 的另一個(gè)開源項(xiàng)目 GraphQL 應(yīng)運(yùn)而生，成為傳統(tǒng) REST API 的一個(gè)重要替代物。

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

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

當(dāng)你需要查詢多個(gè)數(shù)據(jù)源的時(shí)候，這種新策略就變得特別有意義了。就像購物清單示例一樣，現(xiàn)在你可以用一個(gè)請(qǐng)求，從所有這些數(shù)據(jù)源獲取數(shù)據(jù)。

GraphQL 在過去一年左右的時(shí)間已經(jīng)日益受歡迎，很多項(xiàng)目（比如我們第二周所用的 Gatsby）都在計(jì)劃采用它。

GraphQL 本身只是一個(gè)協(xié)議，但是目前它的最佳實(shí)現(xiàn)可能是 Apollo 庫。這個(gè)庫能與 Redux 很好地配合。有關(guān) GraphSQL 和 Apollo 的教學(xué)材料依然很少，但是希望 Apollo 文檔 能幫你開始。

我推薦你從 React 生態(tài)圈開始，是因?yàn)樗前踩倪x擇。但是，它絕非是唯一有效的前端技術(shù)棧。如果你想繼續(xù)探索的話，這里還有兩個(gè)推薦：

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

與 React 相比，它的一些關(guān)鍵賣點(diǎn)是：

官方維護(hù)的路由和狀態(tài)管理庫。

關(guān)注于性能。

較低的學(xué)習(xí)曲線（由于使用的是基于 HTML 的模板）。

較少的樣板代碼。

按照現(xiàn)在的情況，依然讓 React 比 Vue 占優(yōu)勢(shì)的兩個(gè)主要因素是 React 生態(tài)圈的大小，以及 React Native (稍后會(huì)詳細(xì)介紹）。但是我會(huì)好不吃驚地看到 Vue 會(huì)很快趕上！

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

這帶來不少優(yōu)點(diǎn)，比如性能提升、強(qiáng)制語義版本控制以及無運(yùn)行時(shí)異常。

我本人還沒有試過 Elm，但是我的朋友們都給我熱烈推薦它。并且 Elm 用戶通?？雌饋韺?duì)它很滿意（JavaScript 2016的概況調(diào)查中展示 Elm 有 84% 的滿意度）。

到這里你應(yīng)該已經(jīng)很好地掌握了整個(gè) React 前端技術(shù)棧，并且有希望用它帶來相當(dāng)?shù)漠a(chǎn)出。

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

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

JavaScript 測(cè)試 (Jest、Enzyme…)

構(gòu)建工具 (Webpack…)

類型系統(tǒng) (TypeScript、Flow…)

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

JavaScript 移動(dòng)應(yīng)用開發(fā) (React Native…)

JavaScript 桌面應(yīng)用開發(fā) (Electron…)

我不可能在這里就涵蓋所有這些內(nèi)容，但是不要灰心！第一步總是最艱難的，你猜怎么著：你已經(jīng)通過閱讀本學(xué)習(xí)計(jì)劃，跨出了第一步。

現(xiàn)在你理解了如何把生態(tài)圈中不同部分組合在一起，這不過就是將你下一步想學(xué)習(xí)的內(nèi)容排隊(duì)，并且每個(gè)月搞定一個(gè)新技術(shù)。

這個(gè)學(xué)習(xí)計(jì)劃對(duì)你有幫助嗎？你希望我下一次寫 JavaScript 的哪一塊？請(qǐng)?jiān)谶@里，或者在 我的推特 上留下評(píng)論，讓我知道。

如果你想知道下一次我要發(fā)表什么文章，也可以注冊(cè) the State Of JavaScript 郵件列表。