前端工程化之路

时至今日，前端也在飞速发展，各类框架以及因框架产生的生态圈也拔地而起，满天都是概念，如数据绑定、虚拟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