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

最新推荐文章于 2021-10-25 11:48:50 发布

说雾

最新推荐文章于 2021-10-25 11:48:50 发布

阅读量79

点赞数

原文链接：https://segmentfault.com/a/1190000007414499

版权

关键时候有个 bug 要修复——图文无关
在这里插入图片描述
没有比工程化推广更迫切的事情了！

历史状况

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

需要解决的问题

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

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

扩展 javascript 、html、css 本身的语言能力
解决重复工作
模板化、模块化
解决功能复用和变更问题
解决开发和产品环境差异问题
解决发布流程问题

何为工程化

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

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

怎么做

规范化

文档。需求文档、设计文档、系统设计、测试单、项目报告。
工具。开发语言选型，开发工具，协同工具，测试工具，发布工具。
代码规范。javascript，css，html，技术文档。
质量规范。功能方便，是否可拓展，是否满足 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
(排名不分先后)

前端构建工具

webpack
Grunt
gulp
yeoman
FIS
athena
tmt-workflow
jdf
所以在实际前端构建流程里面，你会发现以下的流程。

代码优化

LESS、SASS 自动编译
Autoprefixer 前缀自动补全
自动生成图片 CSS 属性，width & height
CSS Sprite 雪碧图合成
JS、CSS、HTML 压缩
按需加载
延迟加载
解决方案

项目初始化。如果你用了 yeoman 或者 HTML5 Boilerplate，你就懂我说什么
作用域污染。前端自带问题。
eslint 验证，代码验证验证
Retina @2x & @3x 自动生成适配
px -> rem 兼容适配方案
智能 WebP 解决方案
非覆盖式升级，文件指纹
CDN 文件缓存，缓存更新
自动化测试