治癒 JavaScript 疲態的學習計劃【轉載】

來源：伯樂在線 - Rose Wang 

 

像其餘人同樣，最近我讀了 Jose Aguinaga 的文章 《How it feels to learn JavaScript in 2016》。

顯然，這篇文章觸及了你們的神經：我一而再地在 Hacker News 看到它位居榜首。這也是 Reddit 網站裏 javaScript 分類下最爲熱門的帖子，截至目前，在 Medium 上已有超過一萬的喜歡數，極可能比我全部的文章加起來的喜歡數都多。但誰說了算呢？

儘管這並不意外，我很早以前就知道 JavaScript 生態系統會是混亂的。事實上，我進行這個《 State Of JavaScript 》調查的特殊緣由就是要找出哪些庫是實實在在受歡迎的，而且從喧鬧聲中整理出分類。

可是今天，我想往前邁進一步。而不是簡單地抱怨這個事態，我將會給予大家一個具體的，按部就班的學習計劃來攻克 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 並going from there。

讓咱們比較一下這個「現代版」的 2016 web 應用程序（又名「單頁面應用程序」）：

注意到不一樣了嗎？瀏覽器再也不發送 HTML，轉爲發送數據，而這種「數據到 HTML」的轉換過程反而發生在客戶端（這就是爲何你寫代碼的同時，會告訴客戶如何進行切換）。

這有許多啓示，首先，好的方面：

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

• 客戶端能夠在不刷新瀏覽器窗口的狀況下，當即更換內容（所謂的「單頁面應用程序」）。

壞的方面：

• 初始加載須要更長時間，由於「數據到 HTML」的代碼庫會變得更大。

• 如今，你須要在客戶端也有一個位置儲存、管理數據，以防你想緩存它或者檢查它。

醜陋的方面：

• 恭喜了，若是你如今須要處理的是客戶端協議棧，而你只能獲得複雜的服務器端協議棧。

客戶器-服務器端頻譜

既然有如此多的缺點，爲何還要經歷這些麻煩呢？爲何不一直堅持好用的舊版 PHP 應用程序呢？

好吧，假設你在編寫一個計算器，若是用戶想知道 2 + 2 的結果是什麼，當瀏覽器徹底有能力這樣實現操做的時候，去到服務器展現如何操做是毫無心義的。

另外，若是你在編寫一個純靜態網站，如博客，在服務器生成最終的 HTML 就很好  。

真相是大多數 web 應用都落在了這個頻譜的中間。問題是要知道它處於的位置。

但關鍵的事情是，頻譜是不連續的：你不能從一個純服務器端應用程序緩慢移動到一個純客戶端應用程序。在某些方面（二者的分界線），你將不得不停下來重構這一切，或者用大量混亂的沒法維護的代碼來結束它。

這就是你爲何不該該「只使用 JQuery」來應對一切。你能夠認爲JQuery 像膠帶同樣，對於房屋周邊的小修復是極其方便的，可是若是你不斷在你的房子上增長膠帶，看起來會愈來愈醜。

另外一方面，現代的 JavaScript 框架更像是 3D 打印一個替換件，它須要花費更多時間，但結果卻更簡潔，更穩固。

換言之，掌握現代 JavaScript 棧將會是一個賭注，無論它們開始在哪裏，大多數 web 應用程序遲早會結束在這個分界線的右側，因此，這意味着更多的工做，可是安全性高總好過遺憾。

第 0 周：JavaScript的基礎知識

除非你是一個純粹的後端開發者，否則你可能知道些許 JavaScript 知識。即便你對 JavaScript 知識一點都不瞭解，若是你是一個 PHP 或者 Java 開發，JavaScript 的類C 語法看起來也會有點熟悉。

但若是 JavaScript 對你來講，徹底是個謎，不要絕望。外面不少免費資源將迅速讓你加快學習速度。好比，Codecademy 的 JavaScript 的課程是個開始學習的不錯的選擇。

第一週：從 React 開始

如今已經知道 JavaScript 的基礎知識，那你明白爲何會出現如此複雜的 JavaScript 應用程序了嗎？讓咱們來談談細節，你應該從哪裏開始學習呢？我認爲答案應該是 React。

React 是由 Facebook 建立並開源的 UI 庫，換句話說，它關心的是

「數據到 HTML 轉換」的過程（視圖層）。

此時此刻，別誤解個人意思，我並非要你去挑剔 React ，由於它是最好的庫（這是很是主觀的），但它真的很好用。

• React 可能不是最受歡迎的庫，但它是至關大衆化的。

• React 可能不是最輕量級的庫，但它確實很輕。

• React 可能不是最容易學習的，但它確實很容易學會。

• React 可能不是最優雅的，但它確實很簡潔。

換句話說，React 在每一種狀況下可能不是最好的選擇，但我相信它是最穩妥的，相信我，伴隨着你的技術選擇，「剛開始的時候」不是冒險的最佳時刻。

React 將爲你介紹一些有用的概念，如 components，application state，

stateless functions。不管你在職業生涯中使用哪一個框架或庫，這將會被證實是有用的。

最後，React 擁有包含其餘其餘包和庫的大的生態系統，這些都使用 React 工做運行。它的絕對普及意味着你能夠找到不少的幫助網站，如 Stack Overflow 。

我我的推薦 Wes Bos 給 React 初學者的課程。這是我如何開始自學React，它徹底是用最新 React 的最佳實踐驗證過的。

起初，你是否應該「正確地學習 JavaScript」呢？

若是你是一個很是有條理的學習者，你可能想在作其餘事以前很好地掌握 JavaScript 的基礎。

可是這對於其餘人來講，感受像是經過學習人體解剖學和流體動力學來學習游泳同樣。固然，這二者都在游泳過程當中發揮了重要的做用，可是更有趣的只是跳進泳池!

這兒沒有正確或錯誤的答案，它徹底取決於你的學習風格。事實上，

最基本的 React 的教程可能只會用到 JavaScript 的一小部分，所以當下將注意力放在你所須要的內容上，將剩餘部分留在以後，這種方法是極好的。

這也廣泛適用於 JavaScript 生態系統。此刻，不要過於擔憂事情的前因後果，像 Webpack 和 Babel 。事實上，最近 React 出來了本身的微命令行程序，讓你不進行任何配置就能建立應用程序。

第二週：你的第一個 React 項目

讓咱們假設一下你剛剛完成了第一個 React 課程。若是你和我同樣，有兩件事多是對的:

• 你曾經學習過的東西，已經被你忘記了一半。

• 你火燒眉毛地將你所記得的一半用於實踐中。

我相信學習框架或語言的最好方法就是使用它。我的項目是試用新技術的最佳時機。

我的項目能夠是一個單一網頁到一個複雜 web 應用程序中間的任何一種，但我以爲從新設計本身的我的網站是一個很好的中間地帶。另外，我知道你可能已經推遲了多年！

以前我確實說過使用單頁面應用程序寫靜態內容每每是多餘的，可是 React 有一個祕密武器：Gatsby ，一個 React 的靜態網站生成器，它可讓你「投機取巧」，同時獲得 React 的所有好處且無任何缺陷。

這就是爲何Gatsby 是用 React 開始的一個好方法。

• 預配置 Webpack ，意味着你能絕不頭疼地獲得全部的好處。

• 基於你的目錄結構自動配置路由。

• 全部 HTML 內容也是在服務器端生成的，因此你獲得了二者的最好部分。

• 靜態內容意味着沒有服務器，而且超級容易託管到 GitHub 頁面上。

我使用 Gatsby 寫the State Of JavaScript 網站，而沒必要擔憂路由配置，構建工具的配置，或者服務器端渲染爲我節約了大量時間。

 

第三週：掌握 ES6

在我本身學習 React 的探索中，我能夠經過複製粘貼示例代碼，迅速達到一個點，但仍有不少不明白的地方。

確切地說，我並不熟悉 ES6 介紹的全部的新功能，如：

• 箭頭函數

• 對象解構

• 類（的支持）

• 拓展參數

若是你上了這條船了，也許是時候花幾天時間來好好學一下 ES6。若是你喜歡 React 的初學者課程，你可能會想看一下 Wes 的那些良好的 ES6 學習視頻。

或者若是你喜歡免費的資源，看看Nicolas Bevacqua’s book, Practical ES6。

掌握 ES6 的一個好的練習就是重構之前的代碼庫（好比你在第二週建立的那個），將你的代碼改得更短，儘量地簡潔。

第四周：從事狀態管理

就這點而言，你應該能夠創建一個由靜態內容支持的簡單的 React前端項目。

但真正的 Web 應用程序不是靜態的，它們須要從某個地方獲取數據，一般是某種類型的數據庫。

如今，你能夠只發送數據到你單個的組件上，但很快將一片混亂。好比，要是兩個組件須要相同的數據呢？或者須要彼此談話呢？

這就是狀態管理起源的地方。而不是在每一個單獨的組件一個字節一個字節地儲存你的狀態（換言之，也就是你的數據）。你儲存在一個單一的global store，而後分派給你的 React 組件。

在 React 的世界中，最受歡迎的（資源）狀態管理庫就是 Redux。

Redux 不只有助於你集中你的數據，並且會執行一些嚴格的協議來操做數據。

你能夠想象一下 Redux看成銀行：你不能去當地分行手動修改你的帳戶總金額（「這兒，讓我填幾個零!」）。相反，你能夠填寫一張存款表，而後交給銀行出納，受權去執行執行這個操做。

一樣地，Redux 也不會讓你本身直接修改你的全局狀態。相反，你能夠經過減速器執行操做，以及執行操做的特定函數，並做爲結果返回更新後的新狀態。

全部這樣額外的工做的結果是一個高度標準化的，在你的應用程序維持數據流，而且使用工具好比 Redux Devtools 變得可視化

再一次，你能夠跟着咱們的朋友 Wes 和他的 Redux 課程來學習 Redux，這確實是徹底免費的！

或者，你能夠看看 Redux 創始人Dan Abramov 的video series on egghead.io ，這一樣是免費的。

加分第五週：用 GraphQL 構建API

到目前爲止，咱們差很少只探討了客戶端，這只是等式的一半。即便沒有進入到整個的 Node 生態系統，重要的是要專一於解決任何Web 應用程序的某一關鍵方面：數據如何從服務器端獲取到客戶器端。

這一點也不會讓人感到驚奇，它是瞬息萬變的，GraphQL（另外一個Facebook 的開源項目）做爲一個替代傳統 REST API 正在出現。

而REST API 揭示了多REST 路由，每一個都給你提供一個預約義的數據集（例如，/api/posts，/api/comments等等），GraphQL 揭示了一個端點，讓客戶查詢所須要的數據。

試想一下，屢次往返於肉店，麪包店，雜貨店，與之相對的是給某人

一個購物清單，並在途中送他們到三個地方。

當你須要查詢多個數據源時，這種新策略變得尤其重要。就像咱們的購物清單的例子，你可使用一個單一的請求從全部源獲取數據。

GraphQL 在過去一年時間左右已經加速發展，許多項目正計劃採用它。

GraphQL 自己只是一個協議，但其如今最大的成就多是 Apollo 庫，使用 Redux 效果很好。關於GraphQL 和 Apollo 仍缺少指導性的材料，可是但願 Apollo 的文檔能夠幫助你開始。

React與 Co 之外的

我建議你從 React 生態系統開始，由於它是安全的選擇，但它絕對不是惟一有效的前端技術棧。若是你想繼續探索這兒有兩個建議：

Vue

Vue 是一個相對新的庫，可是它正以創紀錄的速度在增加，而且被大公司所採用，尤爲在中國，像百度和阿里巴巴（認爲是中國的谷歌和中國的亞馬遜）所使用。這也是 PHP 框架 Laravel 官方的前端層。

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

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

• 專一於性能。

• 因爲使用基於 HTML 的模板，擁有較低的學習曲線。

• 減小示例代碼。

就目前這種狀況，兩個主要的事情仍然是 React 超越了 Vue ，那就是 React 的生態系統和React Native。但我一點都不驚訝 Vue 會很快遇上！

Elm

若是 Vue 是一個更易靠近的選擇，那麼 Elm 就是相對前沿的選擇。Elm 不僅是一個框架，更是一個全新的語言，能夠向下編譯成 JavaScript 。

這帶來了多重優點，好比改進的性能，增強的語義版本控制，運行零異常。

我我的尚未嘗試用過 Elm ，朋友熱烈推薦它，Elm 的使用者彷佛很滿意它（在State Of JavaScript 調查顯示有 84 % 的滿意率）。

接下來的步驟

如今，你應該對於整個前端技術棧有一個很好的掌握，同時但願可以用它合理地產出。

這並不意味着你已經作成了！這僅僅是你在整個 JavaScript 生態系統中旅行的開始而已。你最終遇到的還會包括：

• 服務器端的 JavaScript（Node，Express……）

• JavaScript 測試（Jest，Enzyme……）

• 構建工具（Webpack……）

• 類型系統（TypeScript，Flow……）

• 在你的JavaScript 應用程序處理 CSS（CSS 模塊化組件……）

• 移動應用JavaScript（原生 React……）

• 桌面應用程序JavaScript（Electron……）

我不能覆蓋這兒的全部內容，但不要絕望！第一步老是最難的，想一想看：你只是閱讀了這個學習計劃。

如今你明白了JavaScript 生態系統中的各個部分是如何結合在一塊兒的。

這只是你接下來要學習的東西，而後每月解鎖一項新技術。

保持聯絡

你以爲這個學習計劃有用嗎？你但願我接下里寫關於 JavaScript 的哪一部分？留下你的評論或者 tweet 讓我知道。

若是你想知道我下次發表的帖子，你也能夠註冊登陸到 the State Of JavaScript 網站上的郵件列表中查看。

感謝 Michael Shilman。