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 了。由于6、7、8、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 等等。还有一些关于学习新语言、架构的经验，使用英文搜索的技巧等等。

个人是鼓励学习基本的英文阅读技巧，阅读一手英文资料的，其实难度并不高。很快应该会写一篇文章来介绍一些个人的学习经验，并且介绍一下个人的一些背景，会大大增加各位直接阅读原文的信心的。

总之，希望整个系列阅读下来，能让读者对现在的主流开发方式有个宏观的概念。同时也很希望，其他杂七杂八的文章，能够让大家对于编程有个高层次的认识，不再觉得学习新语言、技术是非常困难的事，以及有信心经过一段时间的锻炼，能够阅读英文原文并领会其中的重点。