前端工程化之路

时至今日，前端也在飞速发展，各种框架以及因框架产生的生态圈也拔地而起，满天都是概念，如数据绑定、虚拟DOM、前端构建系统、前端工程化、大前端等等。很多前端同学被困在前端框架里，学的是心力交瘁，但有些同学早已学会了透过现象看本质的本事，不管是什么样的框架都能运用自如。
下面就带大家先看看前端的发展历史。

前端发展史

• 1990年，Tim Berners Lee 发明了世界上第一个网页浏览器。

浏览器是被发明出来了，但问题来了，当时的网页都是静态的，如表单验证就需要后端完成，在那个年代带宽很差，发一次请求带代价是极其昂贵的，因此为了解决这一问题，急需要开发一种在浏览器执行的脚本语言，因此发生了下面的事情。

• 1995年，Brendan Eich 只用了不到半个月时间完成了第一版网页脚本语言的设计。
• 1996年，样式表标准CSS第一版发布。

至此 html 、 javascript 、 css 催生了前端的雏形。

• 2005年，Ajax方法正式诞生。
• 2006年，jQuery函数库诞生，为操作网页DOM结构提供了非常强大一用的接口，成为了使用最广泛的函数库，并让JavaScript语音的应用难度大大降低，推动了这门语言的流行。
• 2008年，V8编译器诞生。
• 2009年，Node.js项目诞生，标志着JavaScript可以用于服务器端变成。
• 同年，Angularjs项目诞生。
• 2013年，Facebook发布了UI框架React，使得UI层可以组件化开发。
• 2014年2月，尤雨溪发布了个人项目Vue,这是一个通过间接API提供高效的数据绑定和灵活的组建系统。
• 2015年3月，Facebook发布了React Native,将React框架移植到了手机端，可以用来开发手机App,它会将JavaScript转为ios平台的Objective-C代码，或者Android平台的Java代码，从而为JavaScript语言开发高性能的原生App打开了一条道路。

至此新事物仍在不断涌现。

前后端协作发展史

简单明快的石器时代

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

以后端MVC为主的青铜时代

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

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

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

Ajax带来了白银时代

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

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

但仍不足之处：

1. 代码不能复用。比如后端依旧需要对数据做各种校验，校验逻辑无法复用浏览器端的代码。如果可以复用，那么后端的数据校验可以相对简单化。
2. 全异步，对 SEO 不利。往往还需要服务端做同步渲染的降级方案。
3. 性能并非最佳，特别是移动互联网环境下。
4. 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，前端工程化也在这里发挥的淋漓尽致，前几个时代积累了大量的经验和工具，这个时代则将在前辈们的基础之上解决这个历史时代遗留的痛点，比如：

• 扩展javascript 、html、css本身的语言能力
• 解决重复工作的问题
• 模板化、模块化
• 解决功能复用和变更问题
• 解决开发和产品差异的问题
• 解决发布流程的问题

何为工程化

所有能降低开发成本，并且能提高开发效率的事情总称为工程化。

在实际的工作和产品研发中，我不觉得还有什么事情比降低成本，提高效率更迫切的事情。我更不认同工程化只是项目经理，技术 Leader 去研究和推广的事情。每个团队都是不一样，技术栈不一样，产品不一样，工作环境背景不一样。大公司有大团队，多部门合作。小公司有小团队，各种职能配合更密切，或者你身兼数职，但是并不妨碍工程化的推进，你作为团队的一员，非常有义务和必要一起推进工程化，找到符合你们团队的工作习惯和规范。

因为，工程化的推进只是为了提高效率和降低成本。这里说的效率和成本，并不只是公司层面，还包括个人。良好的工程化，能降低沟通成本，实现更好的协同，节省开发和测试人员的重复劳动，降低发布的常见问题等等，经过有效实践，工程化的推广还能极大地减少加班的时间。

后面会有一系列文章讲讲具体怎样实现工程化。

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