04 猫眼移动前端研发体系建设

Razor

2019/07/04 发布于 技术 分类

安卓绿色联盟 

文字内容
1. 安卓绿⾊色联盟·第20期技术沙⻰龙 赋能产业-猫眼技术开放⽇日 北北京场 2018/9/1 主办⽅方:
2. 猫眼移动前端研发体系建设 王⽂文武 猫眼电影平台研发部前端负责⼈人 2
3. 王⽂文武 14年年加⼊入美团,曾先后负责美团主站及 酒店、旅游、电影、婚纱等业务的前端 开发。16年年加⼊入猫眼,负责过猫眼供应 链前端研发、选座交易易前端研发。⽬目前 为⽤用户平台前端负责⼈人,专注前端⼯工程 化及全栈⽅方向
4. ⽬目录 1 猫眼前端发展历程 contents 2 猫眼移动前端做什什么 3 融合之路路——多平台多终端 4 未来已来——猫眼全栈实践 4
5. 猫眼移动前端做什什么 • 所有猫眼的业务呈现:选座、卖品、影⽚片…… • 所有猫眼的端:美团、点评、猫眼、格瓦拉、 ⼩小程序、专业版、i版(⼿手Q、微信站、各种 站)、专业版…… • 所有猫眼的运营活动:砍价、拼团、集卡、⼩小 游戏
6. 猫眼移动前端发展历程 • 多套技术栈 • freemark+zepto+grunt • react+gulp+browserify • ejs+zepto+webpack
7. ⾯面临的困境 • ⽬目标:⼀一套代码,多处运营 • 问题⼀一:多个移动触屏版⽹网站(猫眼选座交易易、 猫眼媒体信息、⼤大众点评电影频道、美团电影 频道……) • 问题⼆二:只有⼀一个多⽉月的时间,完成四个系统 的融合
8. 具体情况 • 适配多端:美团、点评、猫眼、微信、QQ、格瓦拉、 美团钱包 • 多个账号体系:美团、点评、猫眼、微信 • 多种⽀支付⽅方式:美团收银台、微信⽀支付、QQ⽀支付 • 多个渠道的业务:选座、折扣卡、优惠券、合并⽀支 付、退改签 • 多种终端定制:华为、三星、⾦金金⽴立等 • 技术栈不不统⼀一,最好能够复⽤用⽼老老的代码,降低开发 成本
9. 选座购票 Touch Movie 卖品⼩小吃 m.maoyan.c 电影周边 ⽤用户 折扣卡 Nginx 券、红包 退票 影⼈人影⽚片、资讯、 分享落地⻚页、推荐、 微票微信站 Canary 微票⼿手Q站 美团APP 微票 点评APP 猫眼APP 点评微信站 格瓦拉、美 团钱包 ... … 点评m站 i.meituan.com 演出
10. 解决⽅方案 • 渠道归⼀一化处理理(促销活动、⽪皮肤⻛风格) • 业务组件抽取(定位、⽤用户、登录……) • ⽀支持多种模版引擎(nunjucks、ejs、react、 vue) • ⽀支持多种构建⽅方式
11. 解决⽅方案 01 猫眼融合 touch movie与Canary融 合 实现⼀一个完整购票流程 02 北北上融合 后端接⼝口融合 账号融合 卖品、衍⽣生品⾃自建 前端代码融合 03 猫眼微影融合 微信钱包服务替换 ⼿手Q钱包服务替换 渠道适配 ⽀支付适配 UI适配
12. 组件化 • 每个⽂文件各司其职 样式/公共变量量通过注解载⼊入
13. 质量量保证 • ⻚页⾯面级测试:mocha • controller级别告警 • cat告警
14. 基础能⼒力力增强 • 通⽤用定位组件 • 通⽤用渠道侦测组件 • ⽪皮肤⾃自动匹配 • ⾃自适应登录组件 • ⻚页⾯面级缓存配置组件
15. 业务抽象 • 登录组件 • ⽀支付体系 • 物流体系 • 退票(改签)流程 • 合并⽀支付+促销流程
16. 缓存控制 热映列列表:5⼩小时 即将上映:10分钟 ⼴广告banner:10分钟 更更细粒度的缓存控制,可根据业务形态修改
18. 核⼼心指标:完全加载时间、⾸首字节时间等⼤大幅度提升
19. 利利⽤用第三⽅方公共服务 它⼭山之⽯石可以攻⽟玉 • buildservice • mt-falcon • Cat
22. buildservice
23. mt-falcon报表
24. m.maoyan.com 猫眼i版.美团i版.点评m站.微信站.hrbird.⼿手Q.活动营销⻚页.API…… Env Checker Client Checker Feature Checker CSP Router freemark react nunjucks ejs Touch Movie Controller Java Server Node Server canary Data Source (e.g. resCul API) …… ……
25. 未来已来 • 猫眼前端使命 • 精确实现复杂的交互设计 • 保证开发和迭代速度 • 代码质量量 • 提升⽤用户交互性能 • 赋能公司业务
26. 猫眼全栈实践 • 前后端适度分离:效率⾄至上、⽅方便便测试 • 业务逻辑封装规范:常态化逻辑后移、运营及临时patch在 前端进⾏行行 • 关注扩展性:⽅方便便技术演进与业务扩展
27. 猫眼全栈构成 业务层 config router datasource controllers store framework(canary) extension middleware template engine
28. 猫眼全栈构成 • 基于ES6/NodeJS • 业务层与框架剥离,⽅方便便扩展与测试 • 每个⼦子系统单⼀一职责,⽅方便便替换
29. 全栈能⼒力力输出 • API接⼊入层 • 运营活动开发闭环 • 基础能⼒力力平台建设
30. 前端能⼒力力平台 问答游戏、各种运营活动、报表平台…… 需求能⼒力力 ⼩小程序分享卡⽚片、海海报合成、⼆二维码⽣生成…… 业务能⼒力力 截图 ⽔水印 合成图⽚片 基础能⼒力力
31. 以puppeteer为基础
32. 以puppeteer为基础 chrome&linux双端能⼒力力 ⽣生成截图/PDF 预展示SSR 爬⾍虫 ⾃自动化测试 性能监控 page.screenshot page.tracing page. emulate ……
33. 实践经验 线上线下同等重要 快速迭代⽽而⾮非快速上线——关注数据
34. 实践经验 为什什么做⽐比怎么做更更重要 确定技术⽅方案因⼈人⽽而异——只选最合适的
35. 实践经验 ⾯面向扩展性⽽而⾮非功能 业务⾼高速发展,提⾼高开发效率是第⼀一要解决的问题
36. THANKS FOR YOUR LISTENING
37. Q&A