我眼里的前端工程化

如果你不了解一个人的过去,那你根本不会明白他/她为何是现在的样子。所以,在开始聊前端工程化之前,让我们先来回顾下前端的过去。前端的发展可以总结为三个阶段:

后端附属物

可以说浏览器的诞生孕育了前端,而前端诞生之初更多的是作为后端的附属物。在我刚接触前端时,我其实先学的php。那时候前后端是不分离的,前端用来写样式和模版yi以及js动效然后交由后端渲染及输出。所以整个过程是由后端主导的,前端还只是玩具。 那这时候会有工程化吗?答案是肯定的,任何软件工程都需要工程化,只是前端尚未独立成一项工程,还谈不上工程化。而后端早就作为一项成熟的软件工程,有着各种工程化的实现。

前后端分离

随着ajax等技术以及nodejs语言的诞生,前后端开始出现分离,前端开始接手模版渲染的工作,而后端则更专注于接口等服务的提供。分离之后,前端得到了解放,众多出色的框架相继诞生,如backbone, angular, reactjs, vue等优秀框架。随着前端自主性增强,前端慢慢具备了作为独立一项软件工程的条件,工程化变成了必要。于是基于nodejs实现的开源工程化工具开始出现,如grunt, gulp, webpack等。当然像google,facebook等大公司早就有前端工程化方案,只是没有对外开源。

入侵全端

09年,天才的Ryan Dahl给前端界带来了nodejs,赋予了JS在后端运行的能力以及开发客户端的能力。而HybridApp,React Native等技术又让前端拥有开发移动APP的能

力。

至此,前端已经演进成一项成熟的软件工程,即所谓的前端工程化。

软件工程

前端发展成了一项软件工程,那什么是软件工程呢?我们先来看下它的定义:

软件工程是一门研究用工程化方法构建和维护有效的、实用的和高质量的软件的学科。它涉及程序设计语言数据库软件开发工具、系统平台、标准、设计模式等方面。

所以,我认为前端工程化就是以工程化方法构建和维护有效、实用和高质量的前端应用。

流程

 上面说了一大堆理论,那么怎么实现工程化呢?相信很多人脑中会冒出grunt、gulp、webpack这些打包工具以及一堆脚手架。但是前端工程化绝不是等同于一堆脚手架工具,这些脚手架工具只是为了实现工程化,即构建和维护前端应用。软件交付一般流程如下:

 

每个阶段都需要用工程化的方法去实现,这又涉及到前端开发所用到的技术。

前端技术

 

总结起来,前端归根到底也就是html、css、js这三项技术。但在前端的演进过程中,发展出了这些基本技术的衍生品。如jsx是recatjs发明的对html语法的扩展;sass是对css语法的扩展;typescript是js语言的变种。这些衍生物最终还是需要还原成最基本的html,css,js后前端应用才能运行起来。这些都需要一些工具来辅助处理,如bable,postcss等,这些工具是我们构建前端应用必不可少的。而grunt、gulp、webpack则可以帮助我们集成这些工具,方便前端开发调试,并构建出最终可以用于生产环境的高质量应用。当然构建只是工程化的一部分,软件交付后还需要持续维护。像日志上报、异常监控及恢复等都措施都要进一步跟进。

 

总结

我认为前端工程化就是用工程化方法构建和维护有效的、实用的和高质量的前端应用。