⼩小之美好 —— 前端⼯工程产品实践

QCon 2015 北京

臻⼉儿（郭旻桢）

@cloudwater 爱⽣生活 喜折腾

蚂蚁⾦金服· 体验技术部 · ⼯工程技术

⼀一个优秀⼯工程 师怎么⼯工作

百花齐放的⼯工具时代

脚⼿手架



构建



包管理



常见的前端⼯工程化

spmjs.io

问题就来了……



脚⼿手架



构建



包管理



如何实际发布



如何监控



⼯工具化



如何整体协作



前端⼯工X程化



如何……

前端⼯工程化

让前端⼯工程师团队良好协作

拿静态资源举例

• 静态资源测试机紧张 • 繁多的构建⽅方式 • 构建产物部署要和整个项⽬目同步 • 线上多种静态资源服务器

⾸首先，我们创造了蜻蜓

蜻蜓1.0

研发阶段 • ⽆无限量⼀一键获取静态资源测试机 • 本地域名代理

发布阶段 • 云端构建部署 • 静态资源⽆无版本⽅方案 • 图⽚片⼀一键上传发布

更多需求蜂拥⽽而⾄至

• 功能测试覆盖率统计 • ⼯工具插件功能 • 发布⾮非静态资源 • 和spm的分⼯工？ • ……

“要你命三千，西瓜刀、铁链、火药、硫酸、毒药、手枪、手榴弹、杀虫剂，每样都能独当 一面，现在集中在一起，看你怕不怕？ ”—— 《国产零零漆》

“认清不做什么更重要”

蚂蚁⾦金服前端⼯工程产品⼤大图



运⾏行时



CDN 源



应⽤用服务器



客户端



CMS 服务器



⼯工程产品



蜻蜓



⾬雨燕



待规划 …



基础服务 通⽤用设施



构建引擎



前端⼯工具、源服务

通⽤用基础设施

（GitLab、zPaaS、ACP 等）



部署引擎



研发模式



Java 全栈模式



JS 全栈模式



H5 研发模式



CMS 研发模式

做⼀一款⼩小⽽而美的蜻蜓2.0

蜻蜓 - 给前端⼯工程师的好产品

• 只做静态资源构建部署 • 细分⽤用户群

蜻蜓 2.0架构

蜻蜓web端

蜻蜓cli

怎么算是好的⼯工程产品？ • 定位清晰 —— 不做什么更重要 • 功能完备 —— ⽬目标是做“死”

第⼆二个⼯工程产品

解决营销活动的问题

“快乐⼯工作，认真⽣生活”

只为⼀一类⼈人服务

第三个⼯工程产品

雨燕

蚂蚁⾦金服前后端分离实践

基于node.js的web框架 • 轻巧便捷 • 丰富的web解决⽅方案

加⼊入 chair 的 web 系统



持久层：MySQL, tair, …



业务层：sofa core



web 层：chair

发起请求 返回结果



前后端分⼯工点

研发



监控



质量



部署

常见的解决⽅方案

chair已经很轻，但平台很多监控发、测布线应试新需上⽤c服前用求m前应服务前端s管端⽤管务项器用端快理⽩i信理器c⽬申白研速o、目板息监n管请e发发发fc视控oa理mp平布布np觉an平tp台平a包管gi稿ns台.x台f.平理x管xxo.xcxx.台xxc理iq.xccx.p.xno、oxx平..exnxnm.ctx测fxe台oxo.tnm.试ncedtot.数ecmmn据o.平xx台xx、.co⽂m文档中⼼心、前端

我们只做chair研发协作平台

雨燕

雨燕



开发



研发



发布



测试

• 基于gitlab创建项⽬目、关联 需求、缺陷管理

• 测试机Paas服务 • 质量保障Saas服务 • ⽇日志记录



• 关联研发项⽬目 • 部署test、预发环境 • ⾃自动化测试回归 • beta发布及监控 • 正式发布



解耦研发与发布流程



监控

• 单机监控 • 整体监控 • 报警后续处理

最后

蚂蚁⾦金服前端⼯工程产品⼤大图



运⾏行时



CDN 源



应⽤用服务器



客户端



CMS 服务器



⼯工程产品



蜻蜓



⾬雨燕



待规划 …



基础服务 通⽤用设施



构建引擎



前端⼯工具、源服务

通⽤用基础设施

（GitLab、zPaaS、ACP 等）



部署引擎



研发模式



Java 全栈模式



JS 全栈模式



H5 研发模式



CMS 研发模式

认清不做什么更重要 只做好⼀一件事

最终⽬目标是做“死” 不忘初⼼心 ⼩小之美好

为世界带来微⼩小⽽而美好的改变

蚂蚁⾦金服· 体验技术部