关键时候有个 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
jdf
所以在实际前端构建流程里面,你会发现以下的流程。
代码优化
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
以上我只是列出了一些关键要点,或许你们还有更加厉害的方式来提升效率和降低成本,软件开发鼓励分享和交流。我也总能从大公司的技术交流会议学到不少技术方案和思想。不管是大团队,还是小团队工程化的推广都应该是工作环节中的一部分。
没有比工程化推广更迫切的事情了!
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。