前端工程:前端发展历程

  前端工程       2016-01-07

工程的本质,是改善生产力和用技术降低工程和协作成本。

记得10年,第一次写网页,废寝忘食通宵达旦,只为写一些自认为好看的网站;体验过Dreamweaver的臃肿,因无法便利的自定义而舍弃,投入了table布局的怀抱中,现在想想,不堪回首。而如今,前端可谓包罗万象,产品形态五花八门,涉猎极广,下面一张图很能说明问题:

前端知识结构图

一些复杂的Web应用,它们功能完善,界面繁多,为用户提供了完整的产品体验,可能是新闻聚合网站,可能是在线购物平台,可能是社交网络,可能是金融信贷应用,可能是音乐互动社区,也可能是视频上传与分享平台……

从本质上讲,所有Web应用都是一种运行在网页浏览器中的软件,这些软件的图形用户界面(Graphical User Interface,简称GUI)即为前端。

尽管Web应用的复杂程度与日俱增,用户对其前端界面也提出了更高的要求,但时至今日如何从软件工程的角度去思考前端开发,来助力团队的开发效率,是前端开发工程师应该思考的问题。

历史悠久的前端开发,始终像是放养的野孩子,原始如斯,不免让人慨叹!

前端工程化包含的内容

  • 前端开发规范
  • 开发组织结构
  • 模块化
  • 单元测试
  • 性能优化
  • 打包编译
  • ......

前端工程的三个阶段

1、库/框架选型

libs

前端工程建设的第一项任务就是根据项目特征进行技术选型。

基本上现在没有人完全从0开始做网站,jQuery等库的出现、React/Angularjs等框架横空出世,解放了不少生产力,合理的技术选型可以为项目节省许多工程量这点毋庸置疑。

2、简单构建优化

tools

选型之后基本上就可以开始敲码了,不过光解决开发效率还不够,必须要兼顾运行性能。前端工程进行到第二阶段会选型一种构建工具,对代码进行压缩,校验,之后再以页面为单位进行简单的资源合并。

前端开发工程化程度之低,常常出乎我的意料,我之前在百度工作时是没有多少概念的,直到离开大公司的温室,去到业界与更多的团队交流才发现,能做到这个阶段在业界来说已然超出平均水平,属于“具备较高工程化程度”的团队了,查看网上形形色色的网页源代码,能做到最基本的JS/CSS压缩的Web应用都已跨入标准互联网公司行列,不难理解为什么很多前端团队对于前端工程构建的认知还仅停留在“压缩、校验、合并”这种程度。

3、模块化开发

libs

分而治之是软件工程中的重要思想,是复杂系统开发和维护的基石,这点放在前端开发中同样适用。在解决了基本开发效率运行效率问题之后,前端团队开始思考维护效率,模块化是目前前端最流行的分治手段。

很多人觉得模块化开发的工程意义是复用,我不太认可这种看法,在我看来,模块化开发的最大价值应该是分治,是分治,分治!(重说三)。
不管你将来是否要复用某段代码,你都有充分的理由将其分治为一个模块。

JS模块化方案很多,AMD/CommonJS/UMD/ES6 Module等,对应的框架和工具也一大堆,说起来很烦,大家自行百度吧;CSS模块化开发基本都是在less、sass、stylus等预处理器的import/mixin特性支持下实现的。

虽然这些技术由来已久,在如今这个“言必及React”的时代略显落伍,但想想业界的绝大多数团队的工程化落后程度,放眼望去,毫不夸张的说,能达到第三阶段的前端团队已属于高端行列,基本具备了开发维护一般规模Web应用的能力。

然而,做到这些就够了么?Naive!

总结

前端是一种技术问题较少、工程问题较多的软件开发领域。

当我们要开发一款完整的Web应用时,前端将面临更多的工程问题,比如:

  • 大体量:多功能、多页面、多状态、多系统;
  • 大规模:多人甚至多团队合作开发;
  • 高性能:CDN部署、缓存控制、文件指纹、缓存复用、请求合并、按需加载、同步/异步加载、移动端首屏CSS内嵌、HTTP 2.0服务端资源推送。

这些无疑是一系列严肃的系统工程问题。

前面讲的三个阶段虽然相比曾经“茹毛饮血”的时代进步不少,但用于支撑第四阶段的多人合作开发以及精细的性能优化似乎还欠缺点什么。

到底,缺什么呢?

参考链接:

(1)前端工程——基础篇
(2)大公司里怎样开发和部署前端代码?

本文最后更新于2016-01-16 21:20:23