微前端架构体系

1. 云时代的前端架构 _ 微前端架构体系云安全前端克军阿里云智能安全前端团队负责人

2. 微前端（它是什么、从哪来、到哪去（怎么做））微前端大前端 App (SPA) 模板前端 App (SPA) 业务域业务域微应用微应用 TEAM 1 前端前端前后端分离 BFF 业务逻辑前置业务域自主迭代组合业务场景业务域 BFF 独立开发独立发布被集成不限技术栈 TEAM 2 业务域业务域 TEAM 3 服务端很久以前... 服务端 2010 微服务 2014 微服务 2016 2019 2020

3.

4. 不吹捧

5. ? 跟iFrame、Web Components、NPM包、BigPipe、插件有什么区别？多页应用需要微前端吗？为什么非要做成单页应用？

6. 微前端 Widget / 业务组件架构体系。用来实现大型Web应用以库（外联/npm）的形式实现复用生产方式生产工具通过隔离机制实现技术栈无关需要人工解决依赖和冲突问题单独构建 \ 单独发布 \ 热升级整体构建 \ 整体发布体系化治理，可控性强可控性差主从关系（路由映射、消息机制）相互无关微应用是产品的子集（粒度大）通用功能（粒度小）变化快变化小若干微应用的组合 “外挂”

7. 400万个零件、30个国家：空客A380是怎么造出来的？

8.

9. 微前端的工程价值优点 1. 2. 3. 4. 5. 独立开发和部署大型单页应用无限扩展不限技术栈快速整合业务多团队协作缺点（微前端之“熵”） 1. 2. 3. 4. 5. 体验有折损维护成本高管理版本复杂、依赖复杂开发体验不太友好粒度不宜太小

10. 微前端的业务价值 1. 产品“原子化”：扩展性、组合性、局部迭代 2. 解决能力输出 “最后一公里” 的价值 3. 云生态中的“新物种” — 微应用

11. 云生态 ⤬ 微前端集成顶尖的专家小程序服务企业云平台数字化转型算力 + 基础设施云计算的红利学习成本低被编排工具集成微应用 / 赋能力能力力能能学习成本高 OpenAPI 前端工程师

12. idea 1: 云时代的企业开发套件 + OpenAPI + 编排工具 + UI组件库微应用

13. idea 2: OpenComponents (https://opencomponents.github.io) 开放的微应用市场 (2014)

14. icestark MicroX qiankun 乾坤 WidgetJS 敬请期待 single-spa Ara Framework https://martinfowler.com/articles/micro-frontends.html

15. 建体系：微前端不是一个框架 / 工具而是一套架构体系

16. 微前端体系 (分布式体系的中心化治理很重要) 1. 微前端基础设施（No Framework特点） 2. 微前端配置中心（版本管理、发布策略、动态构建） 3. 微前端观察工具（运维职能：可见、可控性）

17. 版本管理异常监控代码健康度依赖管理访问策略行为日志性能指标灰度、A/B 参数配置安全检测运维数据配置中心配套设施 CSKit 观察工具平台项目脚手架动态构建一键部署依赖分析代码质量访问控制开发环境集成测试国际化对接层接囗编排数据网关平台平台异步加载生命周期沙盒隔离异常处理路由映射消息机制微应用容器本地开发工作台 Mock数据微应用市场微前端 MicroX 微应用列表工具集 GraphQL 平台 / 库 Serverless服务库

18. 微前端的基本工作原理 MicroApp Configure 3 微前端配置中心发布策略观察工具异常监控动态构建同步 Meta 信息动态构建环境切换配置管理 CSS https:// domain / path?query React 环境主应⽤初始化 JS HostApp 构建 Vendor 微应用容器 4 HostApp Router Redux Utils CSS 依赖环境 ( 可配置) 路由映射下发消息 Bootstrap过程 <MicroApp name=“AppId” className=“…” {…props} !/> React Angular Vue 其它环境 JS MicroApp 构建 2 1 本地开发工作台沙盒容器构建发布国际化路由管理调试测试专有云消息机制访问配置静态检验接囗编排 MicroApp MicroApp 鉴权机制 5 Vendor 发布 CDN

19. 微前端的10个问题（10-factor） 1. 微应用的注册、异步加载和生命周期管理 2. 微应用之间、主从之间的消息机制 3. 微应用之间的隔离措施 4. 微应用的框架无关、版本无关 5. 公共依赖的库、业务逻辑(utils)以及版本管理 6. 微应用独立调试、和主应用联调 7. 微应用的发布流程 8. 微应用打包优化问题 9. 微应用专有云场景的出包方案 10.渐进升级：平滑改造老项目

20. 微应用的加载和运行机制 2. 依赖环境的运行时部署 “安装”过程注册信息加载依赖文件列表 Service Worker 加载失败请求主文件 throwError(加载失败) 更新注册表 1. 配置信息 & 注册表微应用微应⽤ ID Fallback 回调查询注册表拿到微应用对象应用配置 Manifest 3. 沙盒预加载 / 预解析处理 4.监控 / 映射路由初始化 publishEvent(startRender) 渲染 • throwError • useHostStates • publishEvent({type, payload}) • subscribeEvent(listener) 开放的微应用市场 Unmount publishEvent(Unmount)

21. 安全隔离微应用容器能力回弹可见通讯分级 • 可信（一 / 二方 / 可信任的平台） • 不可信（三方 / ISV） • 隔离样式: ShadowDOM • 隔离 JavaScript / DOM 侵入性 • iFrame方案 • 前置的静态检查 • 安全的DSL • 加载失败的Fallback • 容错(Error Boundaries)、上报错误信息 • 埋点监控 • 性能、健康度 • Inspector • 消息机制

22. 路由管理 https:// domain / path?query 路由映射 HostApp MicroApp 配置中心路由配置： { routeMapping: { ‘/vulManage’: ‘<AppId>’, !// 默认前缀 ‘/vulManage/linux’: ‘<AppId>linux’, ‘/vulManage/window’: ‘<AppId>window’, ‘/vulManage/cve/:id’: ‘<AppId>detail/:id’, …… } }

23. 消息机制 HostApp 下发注册 / 触发订阅 MicroApp MicroApp

24. 望楼系统

25. 微前端的“望楼系统”（可观察性工具）除了监控（系统健康度指标、告警和阀值），系统运行状态和可控性（观察工具、跟踪、调试…）配置 - 版本灰度 - 版本回滚 - A/B测试 - 访问控制代码质量 - 健康状况 - 安全检测 - 维护者观察 - 微应用列表 - 微应用参数 - 公共依赖 - 公共组件 - 异常监控 - 行为日志数据服务 - 接囗编排 - GraphQL 度量 - 加载速度 (性能指标) - 访问量（PV/UV）

26. 前端架构体系不可忽略运维能力运维系统的设计原则可控可观察分拆⾃动化 y e n a e M b o 来⾃ R https://twitter.com/RobMeaney/status/1177010238307934210/photo/1

27. 微前端配置中心方案可灰度、可回滚、中心化管理

28. type version 微应⽤ 50% appid (MicroApp ID) desc sas-asset 安全中⼼-资产中⼼ errors 3 微应⽤列表 1.0.12 maintainability complexity jscpd 82 17 2.4 % eslint 0 / 11 resources storybook http://g.alicdn.com/{group.name}/{project.id}/{app.version}/index.min.js http://g.alicdn.com/{group.name}/{project.id}/{app.version}/index.min.css type version 微应⽤ 1.0.12 50% appid (MicroApp ID) desc sas-vulmanage 安全中⼼-漏洞管理 errors 3 resources maintainability complexity jscpd 82 17 2.4 % eslint 0 / 11 storybook http://g.alicdn.com/{group.name}/{project.id}/{app.version}/index.min.js http://g.alicdn.com/{group.name}/{project.id}/{app.version}/index.min.css

29. type 微应⽤基本信息编辑、隐藏等操作 version 1.0.12 appid (MicroApp ID) desc sas-asset 安全中⼼-资产中⼼ errors 异常监控 3 资源文件 resources 当前版本 & 灰发控制 50% maintainability complexity jscpd 82 17 2.4 % eslint 0 / 11 storybook http://g.alicdn.com/{group.name}/{project.id}/{app.version}/index.min.js http://g.alicdn.com/{group.name}/{project.id}/{app.version}/index.min.css 代码健康度演示、文档

30.

31. 总结微前端是云时代的前端架构体系建体系基础设施治理配置中心术语微前端微应用微应用容器全链路机制核心能力运维能力引导 (Bootstrap) 观察性公共依赖微应用配置文件本地工作台微前端治理配置中心

32. Q & A 谢谢! 扫码参与调查