标准微前端架构在蚂蚁的落地实践

如果无法正常显示,请先停止浏览器的去广告插件。
分享至:
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

trang chủ - Wiki
Copyright © 2011-2024 iteam. Current version is 2.137.1. UTC+08:00, 2024-11-11 14:23
浙ICP备14020137号-1 $bản đồ khách truy cập$