Node.js 全棧開發（一）——Web 開發技術演化

這些年一直不斷接觸學習 Node 技術棧，我的的技術開發學習興趣也愈來愈傾向 node 流。也許是因爲英語的關係，也許是由於牆增長了學習國外一手資料的難度，加上如今流行的 web 開發技術並不太容易上手。因此我但願經過一系列文章來介紹如今 node 全棧開發的概念、工具以及開發方式等等。

我的是從2014年來到紐村後，纔開始正式學習 Web 開發技術。2015年由於工做須要，開始學習 Ruby on Rails，至今仍主要使用 Rails 從事 web 開發工做。因此從我開始正式學習前端技術時，已是 jQuery + JSON Ajax 的天下，Angular.js 1.0 紅遍半邊天，React.js 剛剛起步，對於「古代」 web 開發技術只有一些大概的印象。這裏給一篇《Web開發的發展史》的連接地址，基本上也是印證了個人印象：http://blog.jobbole.com/45169/ 。雖然這篇文章的英文原文連接地址已經失效，但從連接中的 full-stack-web-development 能夠看出，這篇文章更側重介紹全棧開發的工做方式。

我簡單歸納補充一下：

1. 最先的時候，只有靜態網頁。
2. 很快有了 CGI (Common Gateway Interface) 技術，簡單來講就是一種協議，把 http request 重定向到普通的控制檯程序的 stdin，而後這個程序生成 HTML 並輸出到 stdout，再由 web server 把 stdout 的內容做爲 response 返回瀏覽器。其中一個很是典型的表明，就是被戲謔爲「只寫（write-only）」語言的 Perl。
3. 有必定年紀的朋友大概能記得千禧年先後的傳奇「3P」：PHP、JSP、ASP，各類書籍佔領了書店計算機分類。PHP 至今仍然影響力極其巨大，經久不衰，被諷刺爲「世界上最好的語言」（THE best language in the world）。基本上就是在 HTML 裏面嵌入特殊 tag，用腳本語言來實現控制流，比 stdin/out 方便了不知多少倍。
4. 2005年 google 讓 Ajax 火了。最初的 Ajax 技術只不過是由返回整個頁面變成只返回部分 HTML，而後由 JavaScript 更新部分頁面。因爲瀏覽器不用再重繪整個頁面，用戶一會兒有個質的飛躍。以前的技術都是返回整個頁面，全部的工做都由服務端完成，換句話說，幾乎不存在「前端」（front-end）這個概念，Ajax 正式讓前端開發變得重要起來。從彼時開始，web 開發言必稱 Ajax，要是簡歷裏不寫 Ajax 你都會很差意思。
5. 接下來的一個質的飛躍就是 Ruby on Rails 帶來的 MVC 革命。無論是 CGI 仍是 3P，都沒有一個適合工程上的代碼重用方式。MVC 的概念最先出如今70年代，但在 Rails 以前並無什麼網頁開發使用了這種開發方式。打這以後，你不在 ppt 裏面寫點兒 MVC 啥的，你都很差意思稱本身是架構師。包括很快 iOS 橫空出世，MVC 開發理念也迅速在移動開發上獲得普及。10年以來，MVC 以及各類改版，已是深刻人心的 UI 開發理念。
6. 因爲 Ajax 把前端搞火了，前端開發無人不知的 jQuery 也在2006年橫空出世，至今仍在發揮着巨大的影響力。得益於前端的發展，JS 的優化獲得重視，具備劃時代意義的 V8 引擎在2008年由 google 發佈。我還依稀記得這以前，還有許多企圖替換掉 JS 的嘗試，好比那些年火得不要不要的 Python，不少 py 程序員就想爲毛不用 py 替換掉 js 呢。固然 py 如今也仍然火得不要不要的，也有人會想用 py 替換掉 js，然而一句「由於你慢啊」就夠了。很天然的比 XML(HTML) 更節省空間的 JSON 用於數據傳輸，再由比許多後端語言快不少的 JS 來生成 HTML 成爲了主流的開發方式。
7. 隨着 V8 的出現，node.js 也火了起來。我還記得和 node 同年出生的 go lang，做爲一門編譯型語言，當時執行迅速竟然被腳本語言 node 吊打，被人狠狠嘲笑了不少年。固然現在的 go 已非當日吳下阿蒙，已經開始吊打 jvm 了。因而很天然的，用比 Ruby、Python 更快的 JS 來作服務器的想法很快也就變成了現實。2010年 Express.js 出世，同年 node 界便提出了企圖抗衡 LAMP 的全棧開發名詞 MEAN。這裏的 A 就是 Angular.js，也就是前端的 MVC/MVVM 架構。也就是說，傳統的 MVC 已經由後端向前端轉移。雖然它並非第一個，但倒是影響最爲深遠的之一。ES5 也在2009年末正式發佈了，增長了 strict mode 改變了之前很容易出 bug 的一些代碼。能夠說，2010年先後是一個開發時代的分水領，JS 自此從各類被人嫌棄發展到現在開源界第一的語言。
8. 移動開發也在同一個時期飛速發展，很快 JSON 服務這塊功能就被單獨拿出來了。徹底能夠經過一個不須要渲染 HTML 的服務，用一套 REST API 來同時知足 web 與 mobile 開發的需求。不得不說，這個時期 python 的影響也是極其巨大的，JS 有按照縮進的 CoffeeScript，HTML 前後有了 HAML、Slim、Pug（由 Jade 更名而來），CSS 更是有 SASS、LESS、Stylus，理念都是同一個，用縮進來代替 XML 的 open/close tag。固然 YAML 早早就採用了這種思想，然而流行度仍是比 XML/JSON 差了很多。
9. ES6 在2015年正式發佈，因爲 Babel.js 有了很是充足的準備，2015年 JS 的開發方式也發生了質的飛躍。很遺憾 en.wikipedia 上面沒有 babel.js 的詞條，我在 github 上翻到手指快斷掉找到的首個 release 是2014年10月10日的 v1.7.7，但顯然它並非首次發佈的版本。這以後每一年定稿一個新版本，到今年 ES2018 應該發佈 ES9 了。因爲六、七、八、9的版本號比較混亂，如今你們也常常稱201x。然而你們也並不必定搞得清具體某個語法是哪一個版本發佈的，因此後來 babel preset 也改變了使用方式，我會在之後大概介紹一下。Babel 最初的目的是把 ES2015 編譯成瀏覽器都能認的 ES5，再後來功能就更增強大了，總之仍是主要面向前端的基礎庫。
10. 前端開發的方式也在這幾年裏發生了巨大的改變，之前都是寫個 HTML 把須要引用的 js 庫放進去，而後就能夠在本身的代碼裏使用了。但早期前端開發已經對這種方式有了反思，JS 也開始使用的模塊化(module)的開發方式，也出現了不一樣的模塊化規範 CommonJS、AMD、CMD，還有許多不一樣的打包工具把人搞得很暈。再後來 webpack 又一統前端開發天下，現在雖然也有很多替代品，然而都沒有 webpack 流行。簡單來講，就是庫的不提供能夠用於發佈 cdn、會污染全局變量空間的庫，而是使用模塊化的方式，打包成最小化後的文件。
11. 隨着 HTML5 標準的發佈，前端 router 現在也是一個很是重要的開發方式。直觀點兒來講，就是前端能夠管理當前網站在瀏覽器地址欄的變化和歷史按鈕的前進與後退。過去只能經過 hash 來進行瀏覽器的歷史管理，也就是在當前地址後面經過加上 #/foo/bar 的方式，這樣可以使地址欄發生變化，但卻又不須要瀏覽器從新得到整個頁面。
12. 因而很天然的，SPA (Single Page Application) 的概念也就流行了起來。技術上已經支持把後端的工做包括 routing 全都先到前端，API 服務也是徹底獨立的，那麼後端只須要作一個工做：讓全部的 HTML 請求所有返回同一個空白頁面，而後由前端去從新繪製整個頁面。可是這卻致使了另外一個問題，對 SEO（Search Engine Optimazition，搜索引擎優化）並不友好——搜索引擎拿到的只是一個空白 HTML。在許多年之前，天朝之外的搜索引擎，都已是拿到頁面後，有10秒的時間去進行 ajax 請求和繪製頁面。在當時我讀到那篇測試時，百度還並不支持，不知道現在狀況怎樣了。
13. 前端開發框架在 Angular.js 以後開了花，如今最流行的是 React，Anguar 從2.0開始一個版本一個花樣，Vue.js 是這兩年的後起之秀。回頭能夠跟你們扯扯這10年來，FP(Functional Programming，函數式編程) 對語言都產生了哪些影響。總之從 FP 來的概念也是開了花，Redux 立刻成爲了狀態管理的標配。
14. 再後來，你們又想讓前端拿到的不是一個空白頁面，而是已經繪製好的頁面，這樣可以增長用戶體驗。因而又出現了 SSR，Server Side Rendering。因爲如今的前端庫100%是由 JS 開發的，因此由 JS 的後端把它們渲染出來是最容易的。
15. HTML 後端和 API 後端分離後，又帶來了另一個問題。原本 REST 只給網站後端用，你們也都以爲體驗挺好的，可是如今 API 後端無論前端繪製的事兒了，而後一個 API 又要同時給 web、mobile 使用。若是需求不同，或者有須要定製的地方該怎麼辦？前端也很痛苦，後端也很痛苦，因而 facebook 又玩出來個很花樣：GraphQL，你們看出來它的名字長得跟 SQL 很像了吧？它的含義很簡單，活兒咱們前端全都幹了，前端向 API 請求一個查詢，你別管我爲啥要，總之你給我就行了。這樣後端也簡單了，只有一個 API 接口，CRUD 的具體業務邏輯我能夠無論，只要實現一個效率不錯的 gql 代理層就夠了。
16. 剩下的就是一些工具鏈上的新花樣了，好比 eslint、unittest 工具等等。

因此這也就是個人介紹思路。

• 先是 ES 201x 的語法打基礎，基本上就是照着現成的文章翻譯。
• 前端庫我主要介紹 Vue.js，跟 React 相比更符合華人的思惟習慣，上手難度也最低。理所固然也要介紹 Vuex，畢竟二者的概念很容易對應上。
• 我還打算講講狀態管理，爲何如今都是單向數據流，而不是早期 Angular.js 的雙向數據綁定。畢竟這也是 MVC 以後最具備革命性的概念變化了。有機會也打算介紹一下 Elm，還有詳細介紹一下 Redux。
• 關於 Babel、Webpack 我打算主要介紹理念，反正我的從頭開始寫的機會也不高，只要瞭解概念知道怎麼改就行了。
• 而後是如今經常使用的工具鏈，好比 eslint 之類，跟上面的東西相似，基本上也是先抱一個大腿而後改改。
• 後端可能也會概念性的介紹一下 Express.js 和 Koa，但不會是重點，畢竟如今後端意義對於網站開發已經沒那麼重要了。
• 最後大概介紹一下 GraphQL 和 Apollo。
• 因爲沒有打算嘗試 SSR 的計劃，也許不必定會講到。

中間應該也會穿插一些對於語言或者框架的比較，包括一些很是有名的庫，如 lodash、moment 等等。還有一些關於學習新語言、架構的經驗，使用英文搜索的技巧等等。

我的是鼓勵學習基本的英文閱讀技巧，閱讀一手英文資料的，其實難度並不高。很快應該會寫一篇文章來介紹一些我的的學習經驗，而且介紹一下我的的一些背景，會大大增長各位直接閱讀原文的信心的。

總之，但願整個系列閱讀下來，能讓讀者對如今的主流開發方式有個宏觀的概念。同時也很但願，其餘雜七雜八的文章，可以讓你們對於編程有個高層次的認識，再也不以爲學習新語言、技術是很是困難的事，以及有信心通過一段時間的鍛鍊，可以閱讀英文原文並領會其中的重點。