陈成—GMTC 蚂蚁金服的前端框架和工程化实践 20190620

前端狗

2019/07/09 发布于 编程 分类

GMTC2019 

文字内容
1. 蚂蚁金服的前端框架和工程化实践 陈成(云谦) 高级前端技术专家
2. 在此键入姓名 在此键入tittle
3. 在此键入姓名 在此键入tittle
4. 自我介绍 杭州 wife, 2 kids 淘宝 5 年年 ⽀支付宝 6 年年 spm awesomejavascript atool- babelbuild plugindora import roadhog dva umi father https://sorrycc.com
5. 目录 • • • • • • 框架发展历史 为什么我们能成? 框架大图 拳头功能 专题深入 未来和规划
6. 框架发展历史 从刀耕火种的时代跨入工业化时代
7. 框架时间线 Arale 2015.6 2015.9 2016.2 2017.8 2017.12 2018.6 2019.11 Roof Redux Dva Umi Bigfish Umi +Bigfish Umi Sea.js SPM React atool-build dora Koi roadhog https://www.yuque.com/afx/blog/those-days
8. 跨入新时代
9. 框架现状 • • • umi 对外开源 bigfish 对内服务 公式: • • bigfish = umi + umi-plugin-bigfish 类似案例: • chair 和 eggjs
10. 框架数据在蚂蚁 1100+ 80%+ 100+ 1500+ 内部应⽤用数 新增产品覆盖率 插件数量量 内部使⽤用者
11. 为什么我们能成? 人、业务、流程、开源
12. 技术、人、插件体系
13. 为什么我们能成? • 每个人都可以参与贡献,根据自己的业务提取适用于自己业务的插件,反哺 umi/ Bigfish 框架 • • 100 多人的内部开发群 5 层架构 • 低贡献成本
14. Bigfish 的五层架构
15. 插件生命周期图 • 编译时 • • 运行时 • • node 浏览器 编辑时 • ui 辅助
16. 写一个插件
17. 插件市场
19. 紧贴业务、打通流程 通过 appType 和 deployMode 两个维度对接所有应⽤用和部署类型。
20. 开源 • • • • 代码质量 bugfix 额外的代码贡献 umi core developer group
21. 框架大图 umi、Bigfish、配套设施、外部服务、开发者、设计师 …
23. 👊 拳头功能 资产市场、微前端、场景完备性
24. 资产市场
25. 资产市场 - 区块演示
26. 资产市场 - 区块方案迭代 2018.12 2019.6 来源 区块 1.0 区块 2.0 • • • • • • • • angular theme market • 飞冰 页面级 支持 mock、dva model 等 重复添加 无限嵌套 区块集 结合布局 umi ui
27. 资产市场 - 打通上下游
28. 微前端
29. 微前端
30. 微前端
31. 微前端 - 关键技术
32. 微前端 - 关键技术实现
33. 微前端 - 开源 乾坤 + umi-plugin-qiankun
34. 微前端 社区你能找到的最完善的微前端架 构实践,没有之⼀一。 -- 有知
35. 场景完备性
36. 场景完备性 - SSR • 通用方案 • https://prerender.io/ • react-snap • react-snapshot • 缺点:动态路由 • 标准方案 • umi 内置支持,配置 ssr: true 实现 • 缺点:依赖 node • 进阶方案 • prerender • 通过 umi-plugin-prerender 实现 • 缺点:动态路由 ⽀支持 SSR ⽀支持 Prerender
37. 专题研究 路由、编译提速、性能优化、补丁方案、编辑器插件、测试、监控体系
38. 路由
39. 路由 - 按需编译的实现 • next.js • 动态 entry • umi • 临时文件
40. 编译提速 • 目标 • 提升开发效率,目标是秒开(10s 内) • 常规优化 • dll、hard-source、cache-loader、happypack、external • 硬件升级、简化配置、按需编译、webpack@5、Plug'n'Play • 进阶优化 • auto-external、uglify hash cache • “变态”优化 • 不一定是 webpack,codesandbox、stackbliz • rust、systemjs、cloud ide、esm in browser
41. 性能优化 • • • • • • • • • 按需加载 一键切换框架(preact、nerv、anu.js 等) 公共文件提取策略 SSR 和 Prerender Prefetch 和 Preload Modern Mode Critical CSS 补丁方案 …
42. 性能优化 - 补丁方案 • 组件不打补丁 • 常规方案 • 通过 targets 配置同时处理 babel 和 postcss 的兼容问题 • 极限方案 • 手动指定补丁 + eslint 插件限制 • 终极方案 • 在线补丁(类 polyfill.io) + 特性检测
43. 编辑器插件 • • • • • 路由自动补全 路由文件跳转 dva 的 action 提示、跳转、补全和引用查看 国际化字段提示 …
44. 编辑器插件 Dva Action 点击跳转 路路由⾃自动补全
45. 测试 • 测试金字塔 • 单测 • UI 测试 • e2e • 集成测试 • 基本方案 • Jest + test-react-library + puppeteer • 进阶 • 测试的录制和回放 • 基于路由的自动化测试方案
46. 监控体系
47. 监控体系
48. 未来和规划 分分合合,统一 Umi 和 Bigfish,今年里程碑
49. 框架终态
50. 发布计划 • 2019.5 • 微前端 • ant-design-pro 发布 4.0 • 2019.6 • SSR + Prerender • 2019.8 • dva@3 • umi ui • 2019.11 • umi@3 • antd@4
51. 在此键入姓名 在此键入tittle
52. 在此键入姓名 在此键入tittle
53. THANKS THANKS! THANKS!