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

2020-02-23 367浏览

  • 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