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

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

总之，但愿整个系列阅读下来，能让读者对如今的主流开发方式有个宏观的概念。同时也很但愿，其余杂七杂八的文章，可以让你们对于编程有个高层次的认识，再也不以为学习新语言、技术是很是困难的事，以及有信心通过一段时间的锻炼，可以阅读英文原文并领会其中的重点。