專治前端焦慮的(de)學習方案

　　最近讀了(le／liǎo)Jose Aguinaga的(de)博文2016年裏做前端是(shì)怎樣一(yī / yì ／yí)種體驗。這(zhè)篇博客引發了(le／liǎo)廣泛的(de)關注與讨論，無論是(shì)在(zài)Hacker News還是(shì)Reddit還是(shì)Medium上(shàng)，都有很多人(rén)參與到(dào)了(le／liǎo)它的(de)讨論中。我也(yě)是(shì)很早之(zhī)前就(jiù)感覺到(dào)了(le／liǎo)目前JavaScript生态圈中的(de)群雄逐鹿，并且我們還特地(dì / de)對目前JavaScript庫流行現狀進行了(le／liǎo)調查，希望能夠在(zài)異彩紛呈的(de)各式各樣的(de)庫中尋找到(dào)真正的(de)爲(wéi / wèi)大(dà)衆所接受的(de)。不(bù)過今天我們希望能夠更進一(yī / yì ／yí)步，不(bù)僅僅再抱怨現狀，而(ér)是(shì)從我個(gè)人(rén)的(de)角度來(lái)給出(chū)一(yī / yì ／yí)個(gè)逐步深入學習JavaScript生态圈的(de)方案。（如果你尚對HTML/CSS/JavaScript并不(bù)了(le／liǎo)解，那麽可以(yǐ)閱讀前端攻略：從路人(rén)甲到(dào)英雄無敵）。而(ér)在(zài)文本中我們會涉及以(yǐ)下幾個(gè)方面:
　　
　　● 一(yī / yì ／yí)個(gè)現代的(de)JavaScript web應用會包含哪些部分
　　● 爲(wéi / wèi)什麽不(bù)推薦使用jQuery？
　　● 爲(wéi / wèi)什麽React是(shì)個(gè)不(bù)錯的(de)選擇
　　● 爲(wéi / wèi)什麽并不(bù)需要(yào / yāo)你首先學透JavaScript？
　　● 如何學習ES6語
　　● 緣何與如何學習Redux?
　　● GraphQL到(dào)底解決了(le／liǎo)什麽問題？
　　● 下一(yī / yì ／yí)步又會走向何方
　　
　　Background
　　
　　JavaScript vs JavaScript
　　在(zài)正式開始之(zhī)前，我們先要(yào / yāo)搞清楚這(zhè)裏所要(yào / yāo)說(shuō)的(de)和(hé / huò)你目前理解的(de)是(shì)不(bù)是(shì)同一(yī / yì ／yí)個(gè)東西。如果你在(zài)Google中搜索‘Learn JavaScript’或者‘JavaScript study plan’，你能得到(dào)一(yī / yì ／yí)坨一(yī / yì ／yí)坨的(de)資料與教程指導你如何學習。不(bù)過實際上(shàng)在(zài)我們的(de)真實項目中，我們隻會用到(dào)一(yī / yì ／yí)些相對簡單的(de)語法。換言之(zhī)，可能你在(zài)學習Web應用編寫中所需要(yào / yāo)的(de)80%的(de)知識點都包含在(zài)了(le／liǎo)任何一(yī / yì ／yí)本JavaScript書籍的(de)前幾章。另一(yī / yì ／yí)個(gè)角度來(lái)說(shuō)，真正麻煩的(de)點在(zài)于(yú)如何掌握整個(gè)JavaScript生态圈，這(zhè)裏包含了(le／liǎo)數不(bù)盡的(de)框架與庫。不(bù)過我相信本文可以(yǐ)給你一(yī / yì ／yí)點啓示。
　　
　　Building Blocks Of JavaScript Apps
　　
　　● State Of JavaScript：前端框架現狀調查
　　爲(wéi / wèi)了(le／liǎo)便于(yú)理解現代JavaScript爲(wéi / wèi)啥看起來(lái)如何複雜，我們首先要(yào / yāo)明白其工作原理。我們首先來(lái)看下2008年左右流行的(de)所謂傳統Web應用的(de)架構:
　　1.服務端從數據庫中獲取數據。
　　2.服務端讀取這(zhè)些數據然後渲染到(dào)HTML中。
　　3.HTML文件被發送到(dào)浏覽器，浏覽器将HTML轉化爲(wéi / wèi)DOM樹并且展示出(chū)來(lái)。
　　
　　現在(zài)很多的(de)應用會在(zài)客戶端使用JavaScript來(lái)保證應用的(de)可交互性，不(bù)過本質上(shàng)浏覽器還是(shì)從收到(dào)HTML文件開始。下面我們再比較下2016年流行的(de)所謂現代Web應用，典型的(de)就(jiù)是(shì)所謂的(de)單頁應用:
　　
　　注意到(dào)區别了(le／liǎo)嗎？與傳統的(de)Web應用相比，現在(zài)的(de)服務端更多的(de)承擔起是(shì)提供數據的(de)功能，而(ér)渲染HTML文件這(zhè)一(yī / yì ／yí)步交由客戶端進行處理。這(zhè)一(yī / yì ／yí)個(gè)根本性的(de)變化也(yě)會導緻很多或好或壞的(de)結果，好的(de)一(yī / yì ／yí)方面呢:
　　
　　● 對于(yú)某一(yī / yì ／yí)塊内容，僅僅發送數據會比發送整個(gè)HTML文件快很多
　　● 以(yǐ)單頁應用爲(wéi / wèi)例，客戶端可以(yǐ)刷新局部數據而(ér)不(bù)需要(yào / yāo)刷新整個(gè)浏覽器窗口

　　壞的(de)方面:
　　● 由于(yú)現在(zài)數據的(de)加載與渲染放在(zài)了(le／liǎo)客戶端，初始加載與渲染會耗費更長的(de)時(shí)間
　　● 現在(zài)需要(yào / yāo)在(zài)客戶端提供一(yī / yì ／yí)個(gè)存儲與管理數據的(de)地(dì / de)方，也(yě)就(jiù)是(shì)我們目前所熟悉的(de)狀态管理工具
　　
　　惡心的(de)地(dì / de)方
　　● 随着客戶端應用邏輯與交互的(de)日漸複雜，你需要(yào / yāo)掌握像服務端技術棧一(yī / yì ／yí)樣複雜的(de)前端技術棧
　　
　　The Client-Server Spectrum
　　
　　實際上(shàng)很多才接觸現代前端開發技術棧的(de)同學，特别是(shì)才從後端轉前端的(de)同學都會有個(gè)疑問，既然這(zhè)麽麻煩爲(wéi / wèi)何還要(yào / yāo)進行轉變？舉個(gè)例子(zǐ)，如果用戶希望得到(dào)2+2的(de)結果，肯定不(bù)需要(yào / yāo)我們将這(zhè)個(gè)計算發送到(dào)服務端然後等待結果，浏覽器完全能夠支持這(zhè)種簡單的(de)計算。換言之(zhī)，如果你是(shì)打算構建一(yī / yì ／yí)個(gè)純粹的(de)靜态内容站，譬如博客這(zhè)樣的(de)，那麽在(zài)服務端直接生成最終的(de)HTML文件是(shì)個(gè)不(bù)錯的(de)選擇。不(bù)過實際上(shàng)很多Web應用中我們并不(bù)能很好地(dì / de)界定這(zhè)個(gè)分割點，并且整個(gè)光譜并不(bù)是(shì)連續的(de)，你并不(bù)能先構建一(yī / yì ／yí)個(gè)純粹的(de)服務端應用然後慢慢地(dì / de)向客戶端遷移。當到(dào)達某個(gè)分割點時(shí)，你不(bù)得不(bù)停止這(zhè)種遷移過程而(ér)去重構大(dà)量的(de)代碼，或者你就(jiù)會面對一(yī / yì ／yí)個(gè)龐雜無序難以(yǐ)維護的(de)垃圾代碼庫。
　　
　　這(zhè)一(yī / yì ／yí)點與不(bù)建議使用jQuery不(bù)謀而(ér)合，你可以(yǐ)将jQuery看做膠帶一(yī / yì ／yí)類的(de)存在(zài)。對于(yú)房子(zǐ)的(de)修修補補很是(shì)不(bù)錯，但是(shì)如果你想不(bù)斷地(dì / de)增加内容與功能，你就(jiù)會發現你的(de)房子(zǐ)歪歪扭扭，到(dào)處都是(shì)狗皮膏藥，越看越醜。而(ér)大(dà)部分的(de)現代JavaScript框架則是(shì)更像3D打印技術，可能在(zài)開始之(zhī)前需要(yào / yāo)大(dà)量的(de)準備時(shí)間，但是(shì)它能還你一(yī / yì ／yí)個(gè)更整潔穩定的(de)房屋。
　　
　　Week 0:JavaScript Basics
　　
　　除非你是(shì)一(yī / yì ／yí)個(gè)純粹的(de)服務端應用程序開發者，你肯定知道(dào)些JavaScript基礎的(de)内容。如果你還不(bù)是(shì)很了(le／liǎo)解的(de)話那麽也(yě)不(bù)需要(yào / yāo)擔心，這(zhè)裏推薦個(gè)不(bù)錯的(de)教程Codecademy’s JavaScript lessons。
　　
　　Week 1:Start With React
　　
　　● React的(de)未來(lái)特性

　　● React 入門與最佳實踐
　　在(zài)你了(le／liǎo)解了(le／liǎo)JavaScript基礎語法知識之(zhī)後，我推薦你下一(yī / yì ／yí)步開始學習React。
　　
　　React是(shì)由Facebook開發并且開源的(de)UI庫，換言之(zhī)，其專注于(yú)完成将數據渲染到(dào)HTML這(zhè)一(yī / yì ／yí)步驟，也(yě)就(jiù)是(shì)所謂的(de)View層。不(bù)過需要(yào / yāo)注意的(de)是(shì)，我在(zài)這(zhè)裏并不(bù)是(shì)安利React爲(wéi / wèi)最優秀的(de)庫，這(zhè)個(gè)是(shì)因項目而(ér)定的(de)，不(bù)過我覺得React是(shì)個(gè)挺不(bù)錯的(de)合适初學者的(de)庫：
　　
　　● React不(bù)一(yī / yì ／yí)定就(jiù)是(shì)最受歡迎的(de)庫，不(bù)過其受歡迎程度相當高
　　● React不(bù)一(yī / yì ／yí)定是(shì)最輕量級的(de)庫，不(bù)過其談不(bù)上(shàng)是(shì)一(yī / yì ／yí)個(gè)重量級的(de)庫
　　● React不(bù)一(yī / yì ／yí)定是(shì)最簡單易學的(de)庫，不(bù)過其并不(bù)難學
　　● React不(bù)一(yī / yì ／yí)定是(shì)最優雅的(de)庫，不(bù)過其看上(shàng)去還是(shì)很舒心的(de)
　　
　　總而(ér)言之(zhī)，React并不(bù)一(yī / yì ／yí)定适用于(yú)所有的(de)場景，但是(shì)我覺得它是(shì)所謂最安全的(de)，學了(le／liǎo)不(bù)吃虧。React還會引導你去了(le／liǎo)解一(yī / yì ／yí)些像組件、應用狀态與無狀态函數等等現代Web應用框架的(de)概念。最後，React的(de)整個(gè)生态圈非常繁榮，你可以(yǐ)從Github上(shàng)有關React的(de)項目中找到(dào)很多可用的(de)組件，或者在(zài)Stack Overflow上(shàng)找到(dào)很多關于(yú)React的(de)答疑解惑。我個(gè)人(rén)是(shì)比較推薦Wes Bos的(de)React for Beginners這(zhè)一(yī / yì ／yí)課程。這(zhè)課程包含了(le／liǎo)React從入門到(dào)最佳實踐的(de)全部知識。
　　
　　Week 2:Your First React Project
　　
　　● 使用Facebook的(de)create-react-app快速構建React開發環境
　　● 在(zài)重構腳手架中掌握React/Redux/Webpack2基本套路
　　
　　到(dào)了(le／liǎo)這(zhè)裏我假設你已經完成了(le／liǎo)React的(de)基礎課程，如果你跟我差不(bù)多的(de)話，那麽我估計你現在(zài)的(de)狀态可能是(shì):
　　
　　● 估摸着你已經忘了(le／liǎo)一(yī / yì ／yí)大(dà)半學過的(de)知識點
　　● 你很想能夠盡快付諸實踐
　　
　　衆所周知，實踐是(shì)學習某個(gè)框架的(de)不(bù)二法訣，并且開始一(yī / yì ／yí)個(gè)簡單的(de)個(gè)人(rén)項目也(yě)是(shì)學習新技術的(de)不(bù)錯的(de)試驗點。一(yī / yì ／yí)個(gè)個(gè)人(rén)項目可以(yǐ)是(shì)簡單的(de)單頁應用，也(yě)可能是(shì)像Github客戶端這(zhè)樣複雜的(de)Web應用。這(zhè)裏我推薦你可以(yǐ)嘗試着去做一(yī / yì ／yí)個(gè)簡單的(de)個(gè)人(rén)主頁。不(bù)過還是(shì)要(yào / yāo)補充一(yī / yì ／yí)句，如果你打算用React做一(yī / yì ／yí)個(gè)簡單的(de)靜态内容頁就(jiù)有點大(dà)材小用了(le／liǎo)，這(zhè)裏推薦一(yī / yì ／yí)個(gè)不(bù)錯的(de)工具Gatsby，這(zhè)是(shì)一(yī / yì ／yí)個(gè)React靜态網站生成器。
　　
　　這(zhè)裏我把Gatsby推薦爲(wéi / wèi)你可以(yǐ)在(zài)初步實踐React階段一(yī / yì ／yí)個(gè)不(bù)錯的(de)參考項目，主要(yào / yāo)是(shì)因爲(wéi / wèi):
　　
　　● 其提供了(le／liǎo)配置好的(de)Webpack，可以(yǐ)省去你很多學習配置的(de)煩惱
　　● 能夠基于(yú)你目錄結構動态設置路由
　　● 所有的(de)HTML内容同樣可以(yǐ)服務端渲染
　　● 生成的(de)靜态内容頁意味着你可以(yǐ)簡單地(dì / de)就(jiù)可以(yǐ)部署在(zài)Github主頁上(shàng)
　　
　　Week 3:Mastering ES6
　　
　　随着我學習React的(de)深入，我很快就(jiù)感覺到(dào)了(le／liǎo)現在(zài)能夠看得懂簡單的(de)代碼示例，不(bù)過還有很多語法尚不(bù)能完全理解。舉例來(lái)說(shuō)，我還不(bù)熟悉ES6中的(de)一(yī / yì ／yí)些常見特性:
　　
　　● Arrow functions
　　● Object destructing
　　● Classes
　　● Spread Operator
　　
　　如果你跟我一(yī / yì ／yí)樣也(yě)不(bù)是(shì)很熟悉，那麽建議可以(yǐ)花個(gè)幾天時(shí)間來(lái)認真學習下ES6的(de)特性。如果你喜歡上(shàng)面推薦的(de)React基礎課程，那麽你也(yě)可以(yǐ)看下ES6 for Everybody系列教程。不(bù)過如果你想找點免費的(de)資源，那麽這(zhè)裏推薦Nicolas Bevacqua’s book, Practical ES6.。最後，我還是(shì)想提到(dào)下對于(yú)ES6的(de)好的(de)學習方法就(jiù)是(shì)回顧參照各種各樣的(de)代碼庫，學習人(rén)家的(de)用法與實踐。
　　
　　Week 4:Taking On State Management
　　
　　● 思考:我需要(yào / yāo)怎樣的(de)前端狀态管理工具?
　　● 你不(bù)一(yī / yì ／yí)定需要(yào / yāo)Redux
　　● 深入理解Redux:10個(gè)來(lái)自專家的(de)Redux實踐建議
　　
　　到(dào)這(zhè)裏我們已經能夠構建基于(yú)靜态内容的(de)簡單的(de)React的(de)前端項目，不(bù)過真實的(de)Web應用項目不(bù)可能全是(shì)靜态内容，他(tā)們需要(yào / yāo)從服務端獲取數據然後交與React進行動态渲染。最直觀的(de)做法就(jiù)是(shì)将數據一(yī / yì ／yí)層一(yī / yì ／yí)層地(dì / de)傳遞給組件，不(bù)過這(zhè)很容易引發整個(gè)系統的(de)混亂。譬如當兩個(gè)組件需要(yào / yāo)去展示同樣的(de)數據時(shí)候，它們應該如何交互呢？

　　這(zhè)也(yě)就(jiù)是(shì)所謂狀态管理工具的(de)用武之(zhī)處，不(bù)同于(yú)将你的(de)數據存放到(dào)組件内，你可以(yǐ)創建一(yī / yì ／yí)個(gè)獨立的(de)全局單例Store來(lái)爲(wéi / wèi)組件樹存放狀态:
　　
　　在(zài)React的(de)生态圈中，最著名的(de)狀态管理工具當屬Redux。Redux不(bù)僅能夠幫助你集中管理數據，還能強制使用者對于(yú)數據的(de)修改操作進行統一(yī / yì ／yí)規範。
　　
　　你可以(yǐ)将Redux想象爲(wéi / wèi)銀行，你并不(bù)能直接進入自己的(de)賬戶然後修改賬戶中的(de)餘額，你需要(yào / yāo)通過前台來(lái)發出(chū)一(yī / yì ／yí)系列的(de)指令控制操作。Redux也(yě)是(shì)這(zhè)樣，并不(bù)允許你直接修改全局狀态，你必須将Actions傳入Reducers，然後由這(zhè)些純函數來(lái)返回新的(de)狀态值。這(zhè)樣整個(gè)系統的(de)流程就(jiù)清晰可見并且可回溯:
　　
　　同樣的(de)，我們這(zhè)裏也(yě)推薦一(yī / yì ／yí)些Redux 教程，以(yǐ)及免費的(de)Redux作者的(de)系列分享。
　　
　　Week 5: Building APIs With GraphQL
　　
　　● GraphQL初探:從REST到(dào)GraphQL，更完善的(de)數據查詢定義
　　
　　現在(zài)我們已經讨論了(le／liǎo)很多客戶端開發中所需要(yào / yāo)的(de)知識棧，不(bù)過對于(yú)有追求的(de)前端開發者而(ér)言這(zhè)遠遠不(bù)夠。不(bù)談整個(gè)Node生态社區，我們還需要(yào / yāo)注意這(zhè)個(gè)服務端的(de)數據是(shì)如何傳遞到(dào)客戶端的(de)。這(zhè)裏要(yào / yāo)着重介紹下GraphQL，一(yī / yì ／yí)個(gè)由Facebook出(chū)品的(de)可以(yǐ)替代傳統的(de)REST API的(de)标準。
　　
　　傳統的(de)REST API會通過暴露多個(gè)REST路由來(lái)允許用戶訪問些數據集，譬如/api/posts,/api/comments。而(ér)GraphQL将多個(gè)後端的(de)REST接口整合爲(wéi / wèi)單個(gè)端點，允許用戶從單個(gè)端點獲取所需要(yào / yāo)的(de)數據。
　　
　　Beyond & Next Steps
　　
　　章節所限，在(zài)我的(de)調查裏也(yě)提到(dào)Vue與Elm都是(shì)很優秀的(de)框架，推薦有興趣的(de)朋友可以(yǐ)了(le／liǎo)解下。另外，在(zài)學完了(le／liǎo)這(zhè)些基礎知識，你還可以(yǐ)了(le／liǎo)解以(yǐ)下幾個(gè)方面:
　　
　　● 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…)