HTML5技术

论前端工程化 - 海角在眼前

字号+ 作者:H5之家 来源:H5之家 2017-03-21 10:20 我要评论( )

在不知道什么时候,突然有人提起前端工程化这东西,一开始觉得又是某个大神故意提起的高深词汇,专门来吓唬人的。 继而我疯狂查找了很多的资料,在接近二十篇的相关资料,每一篇文章都写得神乎其神,大有唯我独尊的意味,但每篇看下来,总感觉不对经——就是

    在不知道什么时候,突然有人提起前端工程化这东西,一开始觉得又是某个大神故意提起的高深词汇,专门来吓唬人的。

    继而我疯狂查找了很多的资料,在接近二十篇的相关资料,每一篇文章都写得神乎其神,大有唯我独尊的意味,但每篇看下来,总感觉不对经——就是大家都把自己一套比较规范的开发套路充当出前端工程化,前端工程化变成了前端优化,让人看了,“对啊,这样做规范多了,优化不错啊,巴拉巴拉”,但又觉得工程化不应该只是这些,像缺什么,让人看得云里雾里,似懂非懂。这种文章虽不算误人子弟,但讳莫如深,妖魔化了前端工程化。

    我照例是询问了几个前端好友,答案却出其的一致,前端工程化就是规范标准化、构建自动化、测试自动化,还有模块化、组件化,达到提升协作开发效率和开发质量。这样说却不能让我满意,我心里感觉最关键的点没有指出来。

    于是在我了解这些后,觉得先撇清他们所讲,自己静下心来思考这个话题。

    前端工程化是什么?

    前端工程化是一种思想!在一个瞬间,我头脑里给我这么一个答案。前端工程化首先应该是一个思想,而不是一个个具体的工程化方案,前面绝大多数文章、人都在讲方案,以一个方案去讲清一个思想,太轻浮了。就像模块化,使用webpack/broswerify,或者requirejs/seajs,AMD/CMD/CommonJS就是模块化,哪能这么去解释,连webpack得官网都说了,webpack is a module bundler,我们甚至不用到前面所说的工具就能实现模块化思想。举另外一个简单例子,就是实现社会主义现代化,首先它应该是一个指导思想,而那些五年规划,就是具体方案,这些五年规划是为了达到社会主义现代化的具体方针,方针有很多针对性解决的东西,但都是围绕着指导思想走了。

    所以!认请思想,才能在这个思想指导下,制定出合适自己的项目的方案。(切莫直接照搬方案,至少在理解思想前)

    那么,前端工程化是什么?

    前端开发,首先是软件开发,那么前端工程化,应该是软件工程的一部分。

  『软件工程(software engineering)这个概念,研究和应用如何以系统性的、规范化的、可定量的过程化方法去开发和维护软件,以及如何把经过时间考验而证明正确的管理技术和当前能够得到的最好的技术方法结合起来的学科。』 (维基百科)

    仔细剖析这句话是非常重要的。

    怎么理解这个系统性。照着系统的概念,系统就是若干相互联系、相互作用、相互依赖的要素结合而成的,具有一定的结构和功能,并处在一定环境下的有机整体。我们所要做的事,肯定是互相关联的,不会单一出现某一元素是置身事外,并且是有序的整理、编排形成的具有整体性的整体。强调的是关联性、完整性。就软件的生命周期来讲,定义及规划、需求分析、软件设计、程序编码、软件测试、运行维护,每个步骤都是息息相关的,继而形成一个完整的过程。说个题外话,常用的生命周期模型,在现代软件产品中,讲究的快速迭代,就是迭代式模型。

    规范化。规范这个字面上就很好理解,但是问题就在于,我们需要规范化的是什么?其实软件的生命周期的每个步骤,都需要规范标准。作为一个软件工程师,我大多是关注程序编码的规范,其他的生命周期里的不甚了解。从开发环境(版本控制工具、IDE、数据库等)、编程风格(代码格式、命名规范),到编程经验、自动化构建与测试。这些都应该有标准,当然,规范的深度也是值得考虑的问题,因为太多的具体标准,有时难以记住、实施,所以有时又提倡约定大于配置。

    可定量的过程化方法。跟前面所说的系统性、规范性一样,可定量也是在描述这个过程化方法(开发流程)。可定量这个没啥好说的,可以规定数量(这解释解释得我脸红)。

    正确的管理技术。管理是人、事、物,从人来讲,就是如何进行团队协作的方法;从事来讲,是协调这件事的起始过程;从物来讲,是对于某个具象的东西控制;例如代码的版本控制。

    最好的技术方法。从编程开发上讲,可简单理解为,使用什么语言、工具、框架/库,可最好适用于你的项目。(没有最好的技术方法,只有最合适的)

    所以从上面的方法论,软件工程的目的就是:提高效率、保证质量。

    那么,如果从软件工程概念理解前端工程化,那么前端工程化可解读成什么?

    美团点评技术团队有篇文章《前端工程化开发方案app-proto》总结的特别好。根据具体的业务特点,将前端的开发流程、技术、工具、经验等规范化、标准化就是前端工程化。将该概念细细品味,就会发觉跟软件工程的概念一一对应了。可能有人会说,组件化、模块化、自动化怎么没有,我觉得组件化、模块化应该归类到编程经验里,还没重要到要提出来强调说明,而自动化这个的确是可以加上(毕竟是提高效率的大杀器)。 这里我要特别赞许的是,文章的标题指明是前端工程化方案,没有误导人。

    所以前端工程化是什么?

    将前端的开发流程、技术、工具、经验等规范化、标准化、自动化就是前端工程化。到此为止,前端工程化不再是个模棱两可的概念。在这概念下,如何指示自己的项目开发,我觉得软件工程师可以这样:

  • 选择适宜的框架、库,之所以先这个,因为它会影响你工具选择和代码规范。

  • 选择工具,包含开发工具、版本控制工具、构建工具、测试工具等。

  • 制定代码规范,统一编程风格,附带工具做校验。

  • 选择开发模式(类似之前说的组件化、模块化),但一般这个是与框架结合了。

  • 使用工具将开发流程自动化。

  •     好了,长篇大论了那么多,这就是我对前端工程化的理解的艰辛路程。

     

    本文为原创文章,转载请保留原出处,方便溯源,如有错误地方,谢谢指正。

    本文地址 :

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • 记一次前端面试经历 - 渔歌

      记一次前端面试经历 - 渔歌

      2017-03-10 15:00

    • 前端工具Sublime Text 3 的安装与使用 - smile_to_warm

      前端工具Sublime Text 3 的安装与使用 - smile_to_warm

      2017-02-26 13:01

    • 构建自动化前端样式回归测试——BackstopJS篇 - laden666666

      构建自动化前端样式回归测试——BackstopJS篇 - laden666666

      2017-02-13 16:03

    • 前端技术之浅见 - 棉花糖_30

      前端技术之浅见 - 棉花糖_30

      2017-02-08 15:00

    网友点评
    6