蚂蚁集团-刘奎-规模化场景下的微前端架构实践.pdf

1、规模化场景下的微前端架构实践刘奎 前端程师个简介刘奎 前端程师开源软件爱好者，微前端解决案 qiankun 作者。在社区/GitHub/知乎通常以 kuitos 这个 ID 出现。前端相关的技能都点在了 web 应架构、前端程化等向，前在蚂蚁主要负责微前端及中后台等研发模式的建设及探索。kuitos录1.蚂蚁微前端经历过哪些阶段 2.过程中我们碰到的问题 3.建设微前端研发平台需要关注哪些问题蚂蚁微前端经历过哪些阶段1.早期融云产品对的问题 2.针对这些问题我们诞出的微前端案 3.微前端案下 ProCode 和 LowCode 的结合 4.微前端研发平台的诞回顾蚂蚁整体的微前端历程个三年陈巨应

2、引发的案程问题Codebase 庞技术栈法升级构建部署慢开发体验差产品问题完成个功能 多个控制台跳进跳出品牌视觉不统流程断点重复加载&认证彼时蚂蚁融云程及产品问题解决案：技术产品 OneX统导航统菜单umi 插件配置管理统关商业化收OneX 技术产品体系解决案：技术产品 OneX本地配置研发流程平台在线配置后台配置解决案：技术产品 OneX总结OneX=融云主应+在线配置弄潮LowCode 的兴起LowCode 解决的问题致性降本提效保证下限LowCode 的困境哥低代码建站不，快好呵呵不要这样嘛后如果碰到些复杂需求，低代码暂时搭不出来的，那我不是死翘翘了佬我这好多CRUD，不想写了咋办欢迎使

3、低代码建站可是我的 ProCode 应已经开发半了那.iframe 嵌下？UhhhUhhhProCode 和 LowCode 的友好会晤渐进式研发体化部署资产管理ProCode 和 LowCode 的友好会晤路由级别引组件级别引组件组件组件组件组件组件ProCode 和 LowCode 的友好会晤体化部署ProCodeLowCode迭代迭代部署总结微前端视下的低代码解读“LowCode-种特殊的微前端资产”Whats Next业务域微前端研发平台和混合案都有了，我们还缺什么？先看这个典型诉求 谁在依赖我？我消费了谁？我是保站点，微应需要有基本准要求 我不是融云的业务，我能直接吗？研发体系安全产

4、模型统关键实践怎么解决？统的微前端三层模型基座站点微应1N1N微应1N主应关系应关系统的微前端三层模型基座NodeJS统渲染服务Redirects灰度微前端屏加速登录鉴权Rewrites11微前端 Schema统的微前端三层模型（站点）站点域名微应配置中多环境配置通配置配置1N11微应编排信息微应配置统的微前端三层模型（应）应JSHTML构建产物11CSSRegistry总结模型统后，标准研发流程就相对容易设计了标准化研发流程基于应ID统注册基于应ID消费编排 没有其他的硬编码描述依赖关系概览个微前端站点实际渲染流程微应产物 登录认证获取站点配置成站点 HTML屏应渲染站点配置基座容器应 Re

5、gistry总结下做完这些，我们已经能解决部分问题了问题回顾 我不是融云的业务，我能直接吗？统模型不与具体业务域耦合，其他业务域只需要提供统的主应，即可达成与融云致的产品效果问题回顾 谁在依赖我？我消费了谁？依赖关系由平台元数据统描述，不再由应硬编码管理，能让我们在平台上快速的了解到微应的消费及产关依赖关系概览消费列表还剩最后类问题 谁在依赖我？我消费了谁？我是保站点，微应需要有基本准要求 我不是融云的业务，我能直接吗？研发体系安全产模型统总结下先要明确的是 有了标准研发流程之后 我们才有机会做微前端的安全产如何确保微应之间正确的关联关系案例：个可等级的主应，核链路依赖了低可等级应？站点发到线

6、上了，发现关联的应还没发？外的站点，集成了个内的应？应模型统之后，各模型之间依赖关系是以元数据式存在的，平台只需要在研发流程中加元数据校验即可如何实现微前端灰度站点/主应 配置灰度(消费端灰度)微应身灰度（产端灰度）VS如何实现微前端灰度案优点 对基础设施没有特殊要求 缺点 应发布变更，需要触发站点/主应侧配置变更 多个应同时变更的抢占问题优点 站点/主应跟应完全解耦 应灰度不依托于主应，独运也能灰度 缺点 需要个持灰度策略的统静态资源托管容器站点配置灰度模式微应身灰度模式如何构建微前端监控体系应该关注哪些指标如何