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

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

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

譯者注：中文翻譯在此。

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

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

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

如果你是如下之一，那么本學習計劃就是為你定制的：

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

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

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

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

為什么你不能只用 jQuery

為什么 React 是最安全的選擇

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

如何學習 ES6 語法

為什么要以及如何學習 Redux

GraphQL 是什么以及為什么它是一個大事

之后該學什么

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

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

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

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

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

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

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

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

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

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

現(xiàn)在很多這種應(yīng)用也會在客戶端塞進一些 JavaScript 代碼來添加交互性，比如標簽和模態(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)換）。

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

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

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

壞的部分是：

首次加載更長，因為"數(shù)據(jù)到 HTML”代碼庫會變得很大。

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

而惡心的部分是：

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

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

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

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

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

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

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

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

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

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

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

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

我相信答案是 React。

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

現(xiàn)在不要誤會我：我不是告訴你因為 React 是 最好 的庫，所以要選它（因為這太主觀了），而是因為它是 相當不錯 。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

箭頭函數(shù)

對象解構(gòu)

類

展開運算符

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

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

掌握 ES6 的一個好練習是翻一下較早的代碼庫（比如你在第一周創(chuàng)建的?。M可能將代碼轉(zhuǎn)換為 ES6 的更短、更簡潔的語法。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

關(guān)注于性能。

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

較少的樣板代碼。

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

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

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

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

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

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

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

JavaScript 測試 (Jest、Enzyme…)

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

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

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

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

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

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

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

這個學習計劃對你有幫助嗎？你希望我下一次寫 JavaScript 的哪一塊？請在這里，或者在 我的推特 上留下評論，讓我知道。

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