前端工程化探讨

惠学洁 / @leohxj

主要内容

  • 什么是前端工程化
  • 如何构建前端工程化
  • 前端工程化具体分析
  • 工作计划与分配

什么是前端工程化?

前端的困惑

  • 开发过程逐渐繁琐
  • 代码零碎缺乏规范
  • 开发经验缺乏沉淀
  • 技术发展与迭代太快
  • 给人感觉技术含量低
  • ...

前端的解决过程

  • 库和框架
  • 简单的构建优化
  • JS/CSS模块化
  • 工程化/集成解决方案

我的理解是:把项目进行抽象,通过技术手段,将开发的各个环节串联起来,以提高开发效率和维护成本。

手机淘宝前端工程化

So...

我们也要通过一定的技术手段,把这些积累变成工具。
这个实际上对前端的要求是高的,需要很高的实现成本,制作的过程中涉及的内容可能远远超过前端的范围,比如涉及到构建工具,资源管理。

如何构建前端工程化?

前端涉及的技术元素

张云龙: 浅谈前端集成解决方案(一)

八大技术元素

  • 开发规范
  • 模块化开发
  • 组建化开发
  • 组件仓库
  • 性能优化
  • 项目部署
  • 开发流程
  • 工程工具

"以上8项,1-3是技术和业务相关的开发需求,4是技术沉淀与共享需求,5-8是工程优化需求。"

需要考虑的内在联系

  • 模块化开发涉及到性能优化、对构建工具又有一定的配套实现要求,也会影响开发规范的定制
  • 组件化开发应该基于模块化框架来加载其他依赖的组件
  • 组件仓库中的组件都应该按照相同的标准来实现,否则下载的组件不具有可复用性、可移植性,就是去了仓库的意义
  • 考虑开发规范工具是否能很容易的实现,如果部署上有特殊要求,工具是否能很容易的做出调整,而不是修改规范
  • 工具是否能提供接入公司已有流程中的接口,比如命令调用,如果工具需要一些系统环境支持,公司的ci流程中是否能支持等问题

前端工程化具体分析

我们需要解决什么?

  • 开发流程与规范
  • js/css文件模块化开发
  • 功能模块组建化开发
  • 工程工具: 开发与调试
  • 工程工具: 构建与优化
  • 静态资源与组件管理

开发流程与规范

  • 与设计师,产品经理合理沟通
  • 图片处理流程
  • 约定工程结构和编码规范
  • 维护技术文档和bug记录
  • 开发工具与插件配置(不做硬性要求)

js/css文件模块化开发

  • AMD/CMD/ES6 Modules
  • TypeScript/ES6
  • LESS/SASS
  • PostCSS
  • 方便工具进行模块构建

功能模块组建化开发

  • 依赖模块化加载
  • 通过版本控制
  • 通过配置文件管理
  • 数据绑定,减少DOM操作

工程工具: 开发与调试

  • 项目生成与依赖安装
  • 开启web服务器
  • 开发过程的自动化编译与刷新
  • 浏览器调试数据的模拟

工程工具: 构建与优化

  • 项目的静态资源构建
  • 代码的压缩与合并等优化
  • 方便与后台开发人员代码的对接
  • 构建选项可配置
  • 与开发过程形成一个整体的命令行工具

静态资源与组件管理

  • 缓存控制与文件指纹
  • 资源请求合并
  • 模块/组件的按需加载/webpack
  • 可学习fis,使用资源表

工作计划与分配

工作计划

  • 每周能找机会相互沟通一下进度与想法
  • 3-4周后出一个版本
  • 利用alpha版本,开发一个项目主页
  • 开发过程迭代和修改需求
  • 后续再考虑和java模版层的进一步融合

工作分配

根据个人关注点,尽量安排各自想要尝试的方向

One More Thing

给项目起个代号吧!

Dawn

dawn 英:[dɔ:n] 美:[dɔn]

n: 黎明,拂晓; 开端; 醒悟;

THE END

谢谢!