前端工程化之路

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

前端发展史

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

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

  • 1995年,Brendan Eich 只用了不到半个月时间完成了第一版网页脚本语言的设计。

  • 1996年,样式表标准CSS第一版发布。

至此 htmljavascriptcss 催生了前端的雏形。

  • 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在服务端生成,前端只是个切图仔。当时对前端开发并不友好,前端开发需要安装后端开发环境,拉取后端项目,即便是改个样式也需要运行后端环境来验证改的是否正确,难以进行本地化,影响其研发效率。

image

以后端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

作者

任裕斌 | robin

发布于

2018-09-05

更新于

2015-01-01

许可协议

You need to set install_url to use ShareThis. Please set it in _config.yml.
You forgot to set the business or currency_code for Paypal. Please set it in _config.yml.