前端工程化之路—前后端协作发展史

简单明快的石器时代

这是个混沌的时代，项目开发没有前后端之分，页面是有JSP,PHP在服务端生成，前端只是个切图仔。当时对前端开发并不友好，前端开发需要安装后端开发环境，拉取后端项目，即便是改个样式也需要运行后端环境来验证改的是否正确，难以进行本地化，影响其研发效率。

以后端MVC为主的青铜时代

为了让前后端分工更加合理，提高代码维护性，协作开发也在不断演化。因此有了后端的架构升级。比如Structs、Spring MVC等。

代码可维护性得到了明显好转，为了让View层更简单干脆，还可以选择Velocity、Freemaker等模板，使得模板里写不了Java代码，让前后端分工更加清晰。那么问题又来了，前端还是需要依赖后端开发环境。这种架构下，前端写demo，后端套模板。

前后端职责依旧纠缠不清，在套模板的同时也会出一些粗心引起的问题，前端的路依旧很艰辛，继续往下看。

Ajax带来了白银时代

回归第一章讲的， 2005年，Ajax方法正式诞生。前后端之间的协作有了质的变化。

其关键的协作点就是Ajax提供数据接口，就此复杂度从JSP里已到了浏览器的JavaScript，浏览器端变得很复杂，类似于Spring MVC，这个时代的浏览器端也出现了分层架构：

但仍不足之处：

代码不能复用。比如后端依旧需要对数据做各种校验，校验逻辑无法复用浏览器端的代码。如果可以复用，那么后端的数据校验可以相对简单化。

全异步，对 SEO 不利。往往还需要服务端做同步渲染的降级方案。

性能并非最佳，特别是移动互联网环境下。

SPA 不能满足所有需求，依旧存在大量多页面应用。URL Design 需要后端配合，前端无法完全掌控。

Node带来了黄金时代

随着 Node.js 的兴起，JavaScript 开始有能力运行在服务端。这意味着可以有一种新的研发模式：

虽然通过Node.js也可以像Java一样提供后端支持，通过Node.js，服务端代码也是JavaScript代码。这意味着部分代码可以复用，需要SEO的场景可以在服务端同步渲染，由于异步请求太多导致的性能问题也可以通过服务端来缓解。前一种模式的不足，通过这种模式几乎都能完美解决掉。

与JSP模式相比，该模式看起来是一种回归，也的确是一种向原始开发模式的回归，不过是一种螺旋上升式的回归。

除了对服务端开发的贡献以外还丰富了前端的工具生态。在没有Grunt、Gulp、webpack等便捷且强大的工具的时候，静态资源的压缩合并，都是需要像Apache Ant这用工具完成的，但Node的出现，带来了Grunt、Gulp、webpack，结合JavaScript的灵活性与Node.js提供的API，前端工程师可以编写各种工具满足项目的开发需求。 本书所介绍的前端工程化解决方案中的各个功能模块全部是由JavaScript语言实现的。

前端工程化钻石时代

经过了以上几个时代，诞生了当下最流行的几个框架：React、Vue、Angular，前端工程化也在这里发挥的淋漓尽致。

(未完待续)

参考链接：https://github.com/lifesinger/blog/issues/184

我的博客：http://blog.rnode.me