标准微前端架构在蚂蚁的落地实践
如果无法正常显示，请先停止浏览器的去广告插件。
1.
2. 标准微前端架构
在蚂蚁的落地实践
有知
3. OSS Enthusiast & Web Developer
有知 @蚂蚁⾦服 • 体验技术部
@kuitos
4. 01.
微前端的场景域
02.
微前端的定义
03.
落地的关键问题
5. 为什么需要微前端
1. ⼯程上的价值
2. 产品上的价值
6. ⼀个三年陈的项⽬现状
commit log
dependencies
codebase overview
bundle size
7. 开发⼈员流
技术栈⽼旧
开发体验差
动，各种祖
传代码
不兼容的框
架 API，⽆
法升级
遗产项⽬
8. 产
品
体
验
上
的
问
题
控制台视觉不
统⼀
完成⼀个任务
跳多个控制台
产品
体验差
流程断点
重复的
加载 & 认证
·
·
9.
10. 微前端的概念定义
11. Techniques, strategies and recipes for building a modern web app
with multiple teams using different JavaScript frameworks.
—— Micro Frontends
12. 思路继承⾃微服务
13. Micro Frontend Architecture
Shared Stitching Layer
Ads Team Products Team Users Team
API Service
BFF API Service
graphql API Service
web server
14. 开发独⽴
发布、部
署独⽴
技术栈⽆关
应⽤隔离
动态组合
15. 微前端架构中的技术选择
16. 按架构类型区分
• MPA
• SPA
17. 2017 年各云产品控制台架构调研
18. 按运⾏时特性区分
• 单实例
• 多实例
19. https://cloud.alipay.com/appA
https://cloud.alipay.com
菜单 A
菜单 B
应⽤ A 应⽤ B
应⽤ C 应⽤ D
当前菜单对应应⽤渲染结果
菜单 C
菜单 D
单实例，⼀个运⾏时只有⼀个 App Actived
多实例，⼀个运⾏时同时有多个 App Actived
20. 怎
么
选
SPA OR MPA？
单实例 OR 多实例？
21. 我全都要.jpg
22. 技术细节上的决策
• 技术⽆关 • 路由及应⽤导⼊ • 应⽤隔离 • 资源及通信
23. 如何做到技术⽆关
24. 基于协议
👍
25. 不与某个具体框架的具体实现耦合
👎
26. 路由的问题
27. Future State 问题
这样⼀条访问链路后，刷新当前 URL 通常情况下会发⽣什么？
28.
29. 应⽤导⼊⽅式的选择
30. Config Entry
的问题
应⽤真实的元信息
31. HTML Entry
32. HTML Entry
Config Entry
优点： 优点：
• 接⼊应⽤的信息得到完整的保留
• 接⼊应⽤地址只需配⼀次
• ⼦应⽤的原始开发模式得到完整保留 • 相较于 HTML Entry，减少了运⾏时的解析消耗
缺点：
• 解析消耗留给了运⾏时
缺点：
• 主应⽤需配置完整的⼦应⽤信息，包含初始
DOM 信息、js/css 资源地址等
• js/css 地址通常是伴随每次⼦应⽤发布会变化的
，还需要⼀个配套的配置推送平台？
33. 样式隔离
34. BEM
CSS Module
Web Components
🤔
35. Web Components 的问题
antd
modal
antd 样式表
36. 解决⽅案
但并不是每个组件库都能像 antd ⼀样
完成度那么⾼
37. 动态 加载/卸载 样式表
38. JS Sandbox
39. 公共依赖加载
React
15.1
React
15.6.2
Semver
Map
In
Runtime
React
15.2
React
16.9.0
React
16.1
40. 应⽤之间数据共享及通信
基于 props 以单向数据流的⽅式传递给⼦应⽤
基于浏览器原⽣事件做通信
41. 兄弟节点间通信以主应⽤作为消息总线
⾃⼰封装的 Pub/Sub 机制
🔞🔞🔞 直接基于某⼀状态管理库做数据通信 👊👊👊
42. 其他 性能/优化
异步样式导致的闪烁问题
预加载
43.
44. 衡量⼀个微前端⽅案是否友好的标准
技术⽆关 接⼊友好
不论是⼦应⽤还是主应⽤
都应该做到框架不感知 ⼦应⽤接⼊应该跟接⼊⼀个
iframe ⼀样轻松⾃然
45. 蚂蚁的微前端落地实践
46.
47.
48.
49.
50.
51.
52.
53. ·
·
54. 落地成果
• 70+ 线上应⽤接⼊（阿⾥云 + 蚂蚁云 + 专有云）
• 最复杂⼀个控制台同时集成 15+ 应⽤
• 4+ 不同技术栈
• 开发 -> 发布上线全链路的⾃动化⽀持
• ⼀云⼊驻多云运⾏
55. 开源贡献
• 微前端内核
• umi 插件
56. qiankun（乾坤）
https://github.com/umijs/qiankun/
https://github.com/umijs/umi-plugin-qiankun
57. 推荐阅读
micro-frontends.org
martinfowler/micro-frontends
可能是你⻅过最完善的微前端解决⽅案
58. THANKS
59. Q&A