作者：余博倫
原文鏈接：https://zhuanlan.zhihu.com/p/23412169
和大家一樣，最近我也看了Jose Aguinaga寫的How it feels to learn JavaScript in 2016.
顯然這篇文章?lián)糁辛巳藗兊耐刺帯Ｋ贖acker News上排了不止一次第一。同樣也是/r/javascript上最火的一篇，在Medium上也有超過10k的推薦。
這并不能算是嘩眾取寵：我很早以前就了解到，JS的生態(tài)圈確實(shí)很令人困惑。事實(shí)上，我開展State Of JavaScript調(diào)查正是為了了解真正受歡迎的JS庫，去其糟粕，取其精華。
今天，我不只是簡(jiǎn)單地陳述JS的發(fā)展現(xiàn)狀，我將會(huì)向你展現(xiàn)一個(gè)十分具體，一步一步掌握J(rèn)S知識(shí)體系的學(xué)習(xí)計(jì)劃。
目標(biāo)人群
這份學(xué)習(xí)計(jì)劃寫給：
你熟悉例如變量方法一類的基本的編程概念；
你之前有了解過PHP/Python一類的后端語言，也使用過jQuery一類的庫；
你想要更深入的了解前端開發(fā)，卻迷失在無數(shù)的框架和類庫當(dāng)中不知道何去何從。
涵蓋內(nèi)容
當(dāng)前JS應(yīng)用的構(gòu)成
為什么僅使用jQuery是不夠的
為什么React是最合適的選擇
為什么你沒必要一開始就“全面掌握J(rèn)avaScript”
如何學(xué)習(xí)ES6語法
為什么以及如何學(xué)習(xí)Redux
GraphQL是個(gè)什么玩意兒
在這之后該學(xué)些什么
學(xué)習(xí)資料說明
免責(zé)聲明：文章會(huì)提到一些來自Wes Bos的教程鏈接，僅作推薦，并不是推廣廣告。
如果你想要找到別的相關(guān)資料，Mark Erikson在Github上有一個(gè)收集列表React, ES6, and Redux
此JavaScript非彼JavaScript
首先明確一下這份學(xué)習(xí)計(jì)劃主要目的。隨便你一搜“學(xué)習(xí)JavaScript”或者“JavaScript學(xué)習(xí)計(jì)劃”，就能夠找到無數(shù)有關(guān)學(xué)習(xí)JavaScript語言的教程資源。
但這其實(shí)屬于比較簡(jiǎn)單的部分。對(duì)一門語言的學(xué)習(xí)理解可以挖的很深，可是事實(shí)上大部分Web應(yīng)用的代碼是很簡(jiǎn)單的。換句話講，編寫Web應(yīng)用所需的80%的知識(shí)在你看的JavaScript教程書籍的前幾章就都涵蓋了。
真正的困難在于掌握包含了數(shù)不勝數(shù)的框架和庫的JavaScript的生態(tài)體系。這篇學(xué)習(xí)計(jì)劃主要關(guān)注的就是這部分內(nèi)容。
JavaScript應(yīng)用的框架結(jié)構(gòu)
為了理解當(dāng)前JavaScript應(yīng)用的復(fù)雜性，我們首先需要了解他們是如何運(yùn)作的。
首先我們看一下2008年標(biāo)準(zhǔn)的Web應(yīng)用的構(gòu)成：
數(shù)據(jù)庫為后端提供數(shù)據(jù)（后端可以是PHP或Rails等）；
后端解析數(shù)據(jù)并輸出HTML；
HTML被發(fā)送到瀏覽器，以網(wǎng)頁的形式展示。
現(xiàn)在這類應(yīng)用也有一些客戶端的JS代碼，用來增加交互（例如標(biāo)簽、模態(tài)窗口等），但本質(zhì)上，瀏覽器仍是從服務(wù)器獲取HTML的內(nèi)容。
現(xiàn)在拿當(dāng)前2016年的Web應(yīng)用（也稱作：?jiǎn)雾撁鎽?yīng)用）與之比較：
發(fā)現(xiàn)其中的區(qū)別了么？并不是從服務(wù)器發(fā)送HTML內(nèi)容，而是只返回?cái)?shù)據(jù)，數(shù)據(jù)到HTML的渲染步驟都發(fā)生在客戶端（同樣也返回客戶端如何根據(jù)會(huì)話進(jìn)行反饋的代碼）。
這么做有好有壞，首先好處是：
對(duì)于相同的某塊內(nèi)容，只發(fā)送數(shù)據(jù)要比發(fā)送HTML頁面快。
客戶端不需要刷新頁面就可以進(jìn)行交互改變內(nèi)容（這也是為什么稱其為單頁面應(yīng)用的原因）
缺陷是：
初次加載需要更久，因?yàn)?“數(shù)據(jù)轉(zhuǎn)換成HTML”的代碼量會(huì)很大。
為了方便緩存和查詢，你在客戶端也需要有一塊地方管理和存儲(chǔ)數(shù)據(jù)。
比較臟的是：
恭喜你，現(xiàn)在客戶端的技術(shù)棧和服務(wù)器端一樣復(fù)雜啦。
客戶端與服務(wù)器的范疇
既然有這么多缺陷我們?yōu)槭裁催€要遭這份兒罪呢？就像以前那樣使用PHP后端不好么？
那么，試想一下你開發(fā)一個(gè)計(jì)算器應(yīng)用。如果用戶想知道2+2的結(jié)果，在服務(wù)器端計(jì)算再返回是非常傻的，因?yàn)闉g覽器完全有能力實(shí)現(xiàn)這種需求。
但另外一方面，如果你只是搭建博客一類的靜態(tài)站點(diǎn)的話，在服務(wù)器端直接生成HTML內(nèi)容就挺合適的。
而事實(shí)上，大部分的Web應(yīng)用都介于這兩者之間，問題就是我們到底采用何種架構(gòu)。
關(guān)鍵是兩種架構(gòu)是無法過渡的：你不能開始寫一個(gè)純服務(wù)器端應(yīng)用然后慢慢遷移到純客戶端。有些情況下，你將不得不停下來把所有的部分都重構(gòu)，或者遺留下一堆無法維護(hù)的雜亂代碼。
這也解釋了你為什么不能在所有項(xiàng)目中“只用jQuery”。你可以把jQuery想象成萬金油。房間里需要修修補(bǔ)補(bǔ)的時(shí)候它有奇效，而你如果濫用的話只會(huì)讓一切看起來很糟糕。另外一方面，當(dāng)前的JavaScript框架就好像3D打印技術(shù)革新一樣：耗時(shí)更久，但結(jié)果更簡(jiǎn)潔可靠。
換句話講，掌握當(dāng)前流行的JavaScript技術(shù)棧就是賭絕大多數(shù)的Web應(yīng)用可能最終都將把服務(wù)器端客戶端劃分開來。你確實(shí)需要付出更多的學(xué)習(xí)成本。不過少壯不努力，老大只得徒傷悲。
第一周：JavaScript基礎(chǔ)
除非你之前是個(gè)純后端開發(fā)者，你多少都應(yīng)該知道點(diǎn)JavaScript.即使你不懂，JavaScript的語法看起來也很像C，對(duì)于PHP或Java開發(fā)者來說應(yīng)該不會(huì)太陌生。
要是你之前一點(diǎn)都不了解JavaScript也沒關(guān)系。網(wǎng)上可以找到很多相關(guān)的免費(fèi)教程讓你快速入門。例如Codecademy’s JavaScript lessons就很不錯(cuò)。
JavaScript 教程
JavaScript全棧教程
JavaScript MDN
JavaScript 標(biāo)準(zhǔn)參考教程
第二周：開始學(xué)習(xí)React
掌握了JavaScript的基本語法之后，你多少明白些為什么JavaScript應(yīng)用會(huì)如此復(fù)雜了，我們直接說點(diǎn)具體的，從哪里上手呢？
我想答案就該是React.
React是Facebook開源的UI工具庫。換句話講，它主要用來處理數(shù)據(jù)到頁面的渲染步驟（視圖層）。
不要誤會(huì)我：我推薦你選用React不是因?yàn)樗侨澜缱詈玫目蚣埽ㄟ@太過主觀了），而是因?yàn)樗_實(shí)非常受歡迎。
React也許不是全世界最受歡迎的框架，但真的有很多人都喜歡它。
React也許不是最輕量的框架，但也并不臃腫。
React也許并不是最易上手的框架，但也挺友好的。
React也許并不是最優(yōu)雅的框架，但也夠優(yōu)雅了。
換句話講，React也許不是所有情況下的最優(yōu)選擇，但它是最靠譜的。而其相信我，在你剛剛開始的時(shí)候，還是不要太特立獨(dú)行的好。
學(xué)習(xí)React同樣有助于你了解一些實(shí)用的概念。例如組件、應(yīng)用狀態(tài)、無狀態(tài)方法等。這對(duì)你學(xué)習(xí)任何別的框架和庫都是很有價(jià)值的。
最后，React有著當(dāng)前最大的生態(tài)體系，許多包和庫都能和它非常好地協(xié)同，同時(shí)它龐大的社區(qū)也可以讓你比較輕松地在網(wǎng)上獲取到幫助。
我個(gè)人推薦React for Beginners這個(gè)教程。我自己當(dāng)時(shí)就學(xué)了這個(gè)教程，而且它最近剛剛更新了React的最佳實(shí)踐。
React 入門實(shí)例教程
React 教程
一看就懂的ReactJs入門教程-精華版
十分詳細(xì)的React入門實(shí)例
React 入門與最佳實(shí)踐
你需要先“全面掌握J(rèn)avaScript”么？
假如你是個(gè)按部就班的同學(xué)，你可能希望先踏踏實(shí)實(shí)地牢固打好JavaScript的基礎(chǔ)。
但對(duì)于大多數(shù)人來講，這就好像為了學(xué)游泳去學(xué)人體解剖和流體力學(xué)一樣。確實(shí)，這兩門專業(yè)知識(shí)對(duì)游泳來說都至關(guān)重要，不過還是直接跳到池子里開始游爽啊！
這個(gè)問題沒有對(duì)錯(cuò)，全在于你的學(xué)習(xí)方法。事實(shí)上，大部分的React基礎(chǔ)教程都只需要很少一部分JavaScript知識(shí)，你只需要先掌握這部分內(nèi)容就足夠了。
這個(gè)道理同樣適用于廣義上的JavaScript知識(shí)體系。你并不需要擔(dān)心不理解Webpack或Babel的輸入輸出。事實(shí)上，React推出的命令行工具可以讓你完全不必?fù)?dān)心配置就初始化好應(yīng)用。
第三周：你的第一個(gè)React應(yīng)用
在你學(xué)完了React的教程之后，你可能面臨和我當(dāng)時(shí)相同的狀況：
你把你剛學(xué)的內(nèi)容可能已經(jīng)忘了一半了。
你等不及要帶著剩下的一半知識(shí)上手實(shí)踐一下。
我堅(jiān)信學(xué)習(xí)一個(gè)框架或一門語言的最好方法就是上手實(shí)踐。而寫一些個(gè)人項(xiàng)目則是實(shí)驗(yàn)新技術(shù)的最好選擇。
一個(gè)個(gè)人開發(fā)項(xiàng)目可以簡(jiǎn)單到只是一個(gè)頁面，也可以復(fù)雜到一個(gè)完整的Web應(yīng)用。我感覺用新技術(shù)重新設(shè)計(jì)你的個(gè)人網(wǎng)站難度剛剛好，另外，你估計(jì)也很久沒有更新過你個(gè)人站的架構(gòu)了。
我之前提到過，用單頁應(yīng)用展示靜態(tài)內(nèi)容確實(shí)有些大材小用了，不過React有一款很棒的工具Gatsby，一個(gè)React架構(gòu)的靜態(tài)站點(diǎn)生成器，可以讓你體驗(yàn)React的所有優(yōu)點(diǎn)。
使用Gatsby入門React的好處有以下幾條：
一個(gè)預(yù)先配置好的Webpack，這意味著你要省下很多麻煩（Webpack配置簡(jiǎn)直太反人類）。
根據(jù)你的目錄結(jié)構(gòu)自動(dòng)生成路由。
所有的HTML都會(huì)在服務(wù)器端渲染，彌補(bǔ)了客戶端渲染的不足。
靜態(tài)站點(diǎn)也可以不必?fù)?dān)心服務(wù)器端，并且可以輕松托管在Github Pages上。
State Of JavaScript就是我用Gatsby開發(fā)的，不需要操心路由、構(gòu)建工具配置、服務(wù)器端渲染等煩人的問題，為我節(jié)約了大量的時(shí)間。
第四周：熟悉ES6
在我學(xué)習(xí)React的過程中，我很快就發(fā)現(xiàn)我可以很輕松地復(fù)制粘貼代碼示例，但剩下的很多仍然不懂。
尤其是不熟悉ES6的語法：
箭頭函數(shù)Arrow functions
對(duì)象解構(gòu)Object destructuring
類Classes
展開操作符The spread operator
如果你也有相同的感受，那就是時(shí)候花些時(shí)間好好學(xué)學(xué)ES6了。ES6 for Everybody就是一個(gè)很不錯(cuò)的教程。
你想要免費(fèi)的教程也有，Nicolas Bevacqua的Practical ES6就不錯(cuò)。
ECMAScript 6入門
掌握學(xué)習(xí)ES6的一個(gè)比較好的實(shí)踐方法是重構(gòu)你在第三周寫的代碼，盡量都轉(zhuǎn)換為更簡(jiǎn)潔的ES6寫法。
第五周：掌握狀態(tài)管理
到現(xiàn)在這個(gè)階段你應(yīng)該已經(jīng)能寫一些靜態(tài)內(nèi)容的React前端了。
但真正的Web應(yīng)用肯定不是靜態(tài)的：他們需要從數(shù)據(jù)庫一類的后端獲取數(shù)據(jù)。
現(xiàn)在你可以用React給每個(gè)獨(dú)立的組件傳入數(shù)據(jù)，可應(yīng)用一旦復(fù)雜了使用這種方式就會(huì)很凌亂。例如當(dāng)兩個(gè)組件需要展示同一組數(shù)據(jù)，或者需要相互通信的時(shí)候。
這就是引入狀態(tài)管理概念的時(shí)候了。與在你的各個(gè)組件中一小塊一小塊存儲(chǔ)狀態(tài)(state)不同的是，你可以將所有的數(shù)據(jù)存儲(chǔ)在一個(gè)全局store中，然后再分發(fā)給每個(gè)React組件：
在React陣營里，Redux是最受歡迎的狀態(tài)管理庫。Redux不僅能幫助你集中管理數(shù)據(jù)，同樣可以將對(duì)數(shù)據(jù)的操作限制在一定規(guī)范內(nèi)。
你可以將Redux想象成一個(gè)銀行：你不能直接修改你賬戶的存款數(shù)字（來來來，讓我在后面多加幾顆零吧！）。而是需要填寫存款表單，讓銀行出納認(rèn)證后來完成這個(gè)操作。
相似的，Redux也不允許你直接修改全局state的數(shù)據(jù)。而是通過向reducers傳遞actions來進(jìn)行，reducer其實(shí)就是一個(gè)接收舊狀態(tài)和操作返回新狀態(tài)的方法。
這些看似多余的工作可以讓你很好地維護(hù)管理你應(yīng)用中的數(shù)據(jù)流。Redux Devtools這樣的工具可以很好地顯示數(shù)據(jù)流的變化。
同樣你也可以在Wes的網(wǎng)站上學(xué)習(xí)Redux 教程，這個(gè)是免費(fèi)的。
或者你喜歡視頻教程，也可以參考Dan Abramov在egghead.io上的視頻教程
Redux 入門教程
Redux 入門與最佳實(shí)踐
最后一周：使用GraphQL構(gòu)造APIs
到目前為止，我們談?wù)摰拇蟛糠謨?nèi)容都在客戶端，這只是整個(gè)應(yīng)用的一半而已。即便你現(xiàn)在不需要完全了解Node的生態(tài)體系，你也需要了解對(duì)任何Web應(yīng)用都至關(guān)重要的一點(diǎn)：數(shù)據(jù)是如何從服務(wù)器獲取并傳到客戶端的。
同樣也是由Fackbook開源的項(xiàng)目GraphQL，它可以作為傳統(tǒng)REST APIs的替代解決方案。
不同于REST API根據(jù)你預(yù)先定義的數(shù)據(jù)集（例如 /api/posts, /api/comments, etc.）分發(fā)出不同的REST路徑。GraphQL可以讓你只通過一個(gè)數(shù)據(jù)端像操作數(shù)據(jù)庫一樣按需查詢數(shù)據(jù)。
想象成一個(gè)人分別多次去生食店、面包店、果樹店與他帶著一個(gè)購物清單去的區(qū)別。
這種新的策略在你需要請(qǐng)求多組數(shù)據(jù)源的時(shí)候非常有意義。就像我們上面舉的購物清單例子，你只需要一次請(qǐng)求就可以獲取所有的數(shù)據(jù)。
GraphQL在過去的一年里火了起來，很多例如Gatsby的項(xiàng)目都開始打算使用它。
GraphQL本身只是一項(xiàng)協(xié)議，它最好的實(shí)現(xiàn)是能和Redux非常好地協(xié)同的Apollo這個(gè)庫。現(xiàn)在網(wǎng)上的相關(guān)教程確實(shí)比較少，不過Apollo 官方文檔已經(jīng)能讓你很好地了解它了。
除了React之外呢
我推薦你從學(xué)習(xí)React生態(tài)體系開始因?yàn)檫x它確實(shí)很靠譜。但并不意味著只有這一種可靠的前段技術(shù)棧。我這里還有兩個(gè)別的推薦：
Vue
Vue是新近火起來的一個(gè)框架，很多百度阿里一類的大公司也都開始使用了。它也同樣是PHP框架Laravel的官方前端實(shí)現(xiàn)。
相比React，它的主要賣點(diǎn)是：
官方提供維護(hù)的路由和狀態(tài)管理類庫
專注于性能表現(xiàn)
更低的學(xué)習(xí)成本，可以直接使用HTML模板而不是JSX
更少的模板代碼
React更強(qiáng)大的地方在于它龐大的生態(tài)體系，例如React Native一類的實(shí)現(xiàn)。不過Vue也在越來越壯大。
新手向：Vue 2.0 的建議學(xué)習(xí)順序
Elm
如果說Vue還和React比較類似的話，Elm是更加前衛(wèi)的一種實(shí)現(xiàn)。Elm不僅是一個(gè)框架，更是一種建立在JavaScript之上的語言，類似CoffeeScript/TypeScript等。
它有很多優(yōu)點(diǎn)，例如性能提升，語義化的版本，沒有運(yùn)行異常等。
在State Of JavaScript調(diào)查中，有84%使用過它的開發(fā)者都很滿意。
接下來學(xué)什么？
相信在學(xué)完上述的內(nèi)容之后你已經(jīng)熟練掌握了React的前端技術(shù)棧了。希望你在實(shí)際開發(fā)中也能很好地應(yīng)用它。
但這并不能證明你已經(jīng)精通了JavaScript！這僅僅是掌握整個(gè)JavaScript技術(shù)體系的開始而已。這里還有一些你可能感興趣的內(nèi)容（內(nèi)容本來也是英文所以就不翻譯啦）：
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…)
一篇文章遠(yuǎn)遠(yuǎn)不足以介紹所有這些內(nèi)容。萬事開頭難，不過你要對(duì)自己有信心。等到你了解了JS的各部分實(shí)現(xiàn)是如何協(xié)同之后，接下來要做的也不過就是每個(gè)月都學(xué)習(xí)點(diǎn)火起來的新技術(shù)而已。
更多精彩內(nèi)容請(qǐng)關(guān)注我們的公眾號(hào)：WOW1KE
聯(lián)系客服
