论前端工程化(转载)

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

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

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

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

前端工程化是什么?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

所以前端工程化是什么?

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

  1. 选择适宜的框架、库,之所以先这个,因为它会影响你工具选择和代码规范。
  2. 选择工具,包含开发工具、版本控制工具、构建工具、测试工具等。
  3. 制定代码规范,统一编程风格,附带工具做校验。
  4. 选择开发模式(类似之前说的组件化、模块化),但一般这个是与框架结合了。
  5. 使用工具将开发流程自动化。
    原文地址 :http://www.cnblogs.com/lovesong/p/6574579.html
时间: 2024-08-22 17:55:29

论前端工程化(转载)的相关文章

前端工程化(摘抄)

目前来说,Web业务日益复杂化和多元化,前端开发已经由以WebPage模式为主转变为以WebApp模式为主了.现在随便找个前端项目,都已经不是过去的拼个页面+搞几个jQuery插件就能完成的了.工程复杂了就会产生许多问题,比如:如何进行高效的多人协作?如何保证项目的可维护性?如何提高项目的开发质量?... 前端工程化是前端架构中重要的一环,就是为了解决上述各种效率方面的问题的.而前端工程本质上是软件工程的一种,因此我们应该从软件工程的角度来研究前端工程. 那么前端工程化需要考虑哪些因素?我认为前

谁妖魔化了前端工程化

在不知道什么时候,突然有人提起前端工程化这东西,一开始觉得又是某个大神故意提起的高深词汇,专门来吓唬人的. 继而我疯狂查找了很多的资料,在接近二十篇的相关资料,每一篇文章都写得神乎其神,大有唯我独尊的意味,但每篇看下来,总感觉不对经--就是大家都把自己一套比较规范的开发套路充当出前端工程化,前端工程化变成了前端优化,让人看了,"对啊,这样做规范多了,优化不错啊,巴拉巴拉",但又觉得工程化不应该只是这些,像缺什么,让人看得云里雾里,似懂非懂.这种文章虽不算误人子弟,但讳莫如深,妖魔化了前

爆栈之前端工程化技术小结备案

ps,前些天一90后同事说,要我多写些blog,因为你的实力要show给别人知道,就要怎样怎样的.. 同时建议写个工程化架构来简化工作等等.有时觉得有点对,又觉得有点可笑,有觉得有点无奈... 由于本人是重后端技术,所以对前端技术了解并不深入. 由于很多都是原始pc的web,而且大多都是轻前端项目.所以这里先说下以前用到过的前端js技术大多是: jquery,extjs,easyui,ko,bootstrap,dorado等等,当然还有各种各样的,如日历,上传,富编辑器,报表等等js插件. 但现

HTML5移动应用开发为什么需要引入前端工程化

使用HTML5和Javascript开发的移动应用,和典型的现代Web前端项目一样,有着大量的Javascript,HTML和CSS代码,因此前端工程化在HTML5移动应用开发中同样有着重要意义,可以避免大量重复性的工作,提供效率和质量,优化产品的性能. 目前前端工程化比较通用的框架主要有国外的grunt,gulp,百度的F.I.S等,这些框架基本上都是基于Node.js实现的(百度的F.I.S最早是基于PHP开发的,后来切换到Node.js).Node.js对前端工程师有着非常强的亲和力,有各

论前端工程化

在不知道什么时候,突然有人提起前端工程化这东西,一开始觉得又是某个大神故意提起的高深词汇,专门来吓唬人的. 继而我疯狂查找了很多的资料,在接近二十篇的相关资料,每一篇文章都写得神乎其神,大有唯我独尊的意味,但每篇看下来,总感觉不对经--就是大家都把自己一套比较规范的开发套路充当出前端工程化,前端工程化变成了前端优化,让人看了,"对啊,这样做规范多了,优化不错啊,巴拉巴拉",但又觉得工程化不应该只是这些,像缺什么,让人看得云里雾里,似懂非懂.这种文章虽不算误人子弟,但讳莫如深,妖魔化了前

到底是什么是前端工程化、模块化、组件化

引言 提到前端往往很多人的映像就是入门简单,HTML.CSS加一起一个星期基本上就能大概上手,JS难一点但也能很快写一些简单的小效果,在网上随便一搜索各种特效代码随意用,一个新手前端也能在很短的时间里写出炫酷的页面效果,然而入门简单并不意味着前端这碗饭很好吃,做惯了切图.布局.扣特效的前端新同学在向前发展的路上越来越觉得吃力,而没有任何编程思想和软件开发基础很多人对前端工程化.组件化.模块化.MVC这些"高大上"的词汇云里雾里.本文用最简单的语言介绍一下我对工程化.组件化.模块化的理解

前端优化带来的思考,浅谈前端工程化

重复优化的思考 这段时间对项目做了一次整体的优化,全站有了20%左右的提升(本来载入速度已经1.2S左右了,优化度很低),算一算已经做了四轮的全站性能优化了,回顾几次的优化手段,基本上几个字就能说清楚: 传输层面:减少请求数,降低请求量执行层面:减少重绘&回流 传输层面的从来都是优化的核心点,而这个层面的优化要对浏览器有一个基本的认识,比如: ① 网页自上而下的解析渲染,边解析边渲染,页面内CSS文件会阻塞渲染,异步CSS文件会导致回流 ② 浏览器在document下载结束会检测静态资源,新开线

58到家周俊鹏:webpack PK fis,实现前端工程化我更喜欢前者

责编:陈秋歌,关注前端开发领域,寻求报道或者投稿请发邮件chenqg#csdn.net. 欢迎加入"CSDN前端开发者"微信群,参与热点.难点技术交流.请加群主微信「Rachel_qg」,申请入群,务必注明「公司+职位」.另可申请加入CSDN前端开发QQ群:465281214. 2016年,SDCC(中国软件开发者大会)相继走进了上海.深圳.成都.杭州各地.11月18日-20日将在北京完美收官.作为大会的重要分专题,前端开发专题已邀请到58到家高级前端工程师周俊鹏担任大会讲师,现场将分

[转]基于gulp和webpack的前端工程化

本文样例代码 :https://github.com/demohi/learning-gulp 本文主要简单介绍一下基于gulp和webpack的前端工程化. 技术栈 React.js reFlux Node.js 我们的需求 基于CommonJS模块化开发 基于React.js的组件化开发(JSX) 为保证组件的复用,css需要打包到js中 有国际化需求,静态文件需要部署在CDN上面 工程化工具的选择 gulp(基于stream的构建工具,与grunt相比,速度快且可编程) webpack(前