我为什么这么强调前端工程化

35

关键时候有个 bug 要修复——图文无关
敬职敬业的程序员

没有比工程化推广更迫切的事情了!

历史状况

WEB 前端开发这几年发展非常迅速,非常多的开发框架和构建工具涌现,可能你昨天还在用的工具、插件,到了今天就过时了。在 2 年前,我面试别人的时候,会问一些有没有接触NodeJS、 Grunt、gulp、ES6、Babel 这类技能的问题,超过半数的面试者会回答『没有』,或者说『只是刚刚接触,并不是很深入』。迫于招人急迫,我并不会直接说 NO,然后继续问一些 HTML、CSS、JS 前端三板斧的知识。 然而今年,如果应聘者不会这些技能,那真的很抱歉, 我不会接受一个没有走在前沿的开发者 。任何面试者都不会喜欢一个墨守成规的人。难道没人告诉你,外面的世界已经变了吗?

需要解决的问题

web 开发发展了很多年,已经积累了大量的经验和工具,前辈们的经验已经经过了很多考验,有轮子借鉴参考的时候,一定不要拒绝。对于还没有接触 Gulp/Grunt/Webpack 的人来说,你们还在石器时代,不建议你继续看下去。

工具和语言虽然差异大,但是解决的都是相似的问题,归纳为:

  • 扩展 javascript 、html、css 本身的语言能力

  • 解决重复工作

  • 模板化、模块化

  • 解决功能复用和变更问题

  • 解决开发和产品环境差异问题

  • 解决发布流程问题

何为工程化

所有能降低成本,并且能提高效率的事情的总称为工程化。

在实际的工作和产品研发中,我不觉得还有什么事情比降低成本,提高效率更迫切的事情。我更不认同工程化只是项目经理,技术 Leader 去研究和推广的事情。每个团队都是不一样,技术栈不一样,产品不一样,工作环境背景不一样。大公司有大团队,多部门合作。小公司有小团队,各种职能配合更密切,或者你身兼数职,但是并不妨碍工程化的推进,你作为团队的一员,非常有义务和必要一起推进工程化,找到符合你们团队的工作习惯和规范。

因为,工程化的推进只是为了提高效率和降低成本。这里说的效率和成本,并不只是公司层面,还包括个人。良好的工程化,能降低沟通成本,实现更好的协同,节省开发和测试人员的重复劳动,降低发布的常见问题等等,经过有效实践,工程化的推广还能极大地减少加班的时间。

怎么做

规范化

  1. 文档。需求文档、设计文档、系统设计、测试单、项目报告。

  2. 工具。开发语言选型,开发工具,协同工具,测试工具,发布工具。

  3. 代码规范。javascript,css,html,技术文档。

  4. 质量规范。功能方便,是否可拓展,是否满足 RESTFul,是否安全性满足

流程化

  • 软件开发常见流程

  • 职责和协同

  • 目标明确的版本计划

  • 敏捷开发

自动化

  • 流程的自动化。即人员协同的自动化

  • 代码开发自动化,去掉重复劳动

  • 自动化单元测试

  • UI/API/兼容性 自动化测试

  • 自动化部署

  • 自动化问题反馈

创新

  • 发掘其他团队的优秀方法

  • 实践敏捷开发

  • 多交流,多观察业界

WEB 前端开发工程化

工程化应该出现在工作的任何环节,WEB 前端开发过程的工程化发展得尤为迅速。

把 Grunt、gulp、Nodejs 的技能应用到前端开发,实际上就是前端工程化的一部分。移动互联网的发展,跨平台服务的一致性体验,和要求快速迭代的互联网产品对前端领域提出了更高的要求,前端三板斧已经不能满足了。然后你看到了这几年百花齐放的场景。

前端语言、框架

  • CSS 模块化方案:LESS/ SASS

  • JS 模块化方案:AMD/CommonJS/UMD/ES6 Modlue

  • HTML 模板引擎:baiduTemplate(百度)artTemplate(腾讯)juicer(淘宝)doT tmpl handlebars easyTemplate underscoretemplate mustache kissytemplate

  • 前端集成框架 Bootstrap、Gumby、 Skeleton、Foundation

  • AngularJS

  • ReactJS

  • VueJS

  • Meteor

  • 还有 WEEX
    (排名不分先后)

前端构建工具

所以在实际前端构建流程里面,你会发现以下的流程。

代码优化

  • LESS、SASS 自动编译

  • Autoprefixer 前缀自动补全

  • 自动生成图片 CSS 属性,width & height

  • CSS Sprite 雪碧图合成

  • JS、CSS、HTML 压缩

  • 按需加载

  • 延迟加载

解决方案

  • 项目初始化。如果你用了 yeoman 或者 HTML5 Boilerplate,你就懂我说什么

  • 作用域污染。前端自带问题。

  • eslint 验证,代码验证验证

  • Retina @2x & @3x 自动生成适配

  • px -> rem 兼容适配方案

  • 智能 WebP 解决方案

  • 非覆盖式升级,文件指纹

  • CDN 文件缓存,缓存更新

  • 自动化测试

调试和部署

  • 监听文件变动,自动刷新浏览器 (LiveReload)

  • 文件指纹,hash 值生成

  • FTP 发布部署

  • ZIP 项目打包

自动化测试

  • Mocha

  • Jasmine

  • travis-ci

  • Jenkins

以上我只是列出了一些关键要点,或许你们还有更加厉害的方式来提升效率和降低成本,软件开发鼓励分享和交流。我也总能从大公司的技术交流会议学到不少技术方案和思想。不管是大团队,还是小团队工程化的推广都应该是工作环节中的一部分。

没有比工程化推广更迫切的事情了!


如果觉得我的文章对你有用,请随意赞赏
已赞赏

你可能感兴趣的

18 条评论
Jin · 2016年11月09日

这文章前后矛盾,首先工程化根本不是为了降低成本,第二,你确定你后面说的一大堆是为了降低成本? 这文章就是为了工程化而工程化。

+3 回复

0

我理解的工程化是降低项目迭代成本用的

jerry_tang · 2017年06月29日
0

一个问题说两遍,麻烦请组织你的语言和好好的理解工程化,如果没法子体会工程化降低成本,就回去撸个非这类工程化的,看看

DavidSam · 2018年10月15日
高阳Sunny · 2016年11月08日

这个配图绝了

+2 回复

邱权武 · 2017年06月01日

然而这些我都会。工资2800,

+2 回复

0

牛逼啊,大兄弟!

漠中风尘 · 2017年07月14日
0

@邱权武 这是开玩笑么

辰枫设计 · 2017年09月04日
0

@邱权武 扎心了老铁

tonychen · 2017年09月05日
huangsw · 2016年11月08日

这配图,哈哈

回复

无名小子 · 2016年11月08日

好邪恶的图

回复

xusenlin · 2016年11月10日

WEEX是前端框架??人家还java源码和ios平台的源码呢。

回复

justjavac · 2016年11月13日

ios和android不是前端吗?

回复

0

一切皆前端,哈哈

muzi13 · 2017年08月24日
键盘侠 · 2018年10月11日

被图吸引过来的

回复

元2014 · 2018年10月16日

bug改完都软了

回复

载入中...