适用于城市操作系统的微前端改造之路
如果无法正常显示，请先停止浏览器的去广告插件。
1.
2. 适用于城市操作系统的微前端改造之路
吕柏敬 京东科技
3. 开发效
率低体
验
变大
项目量级
差
技术栈迁移成本高
用
应
体
单
型
大
多个
重复的加载
业务
接入
成本
重复建设严重
流程
视觉
不
统一
点
断
在
高
存
研发
交
付分
离
难
全
量
体验差
转
之间跳
应用
交
付
体
积
过
代码
传
种祖
各
动
员流
人
开发
项目
交付
自定
同步
义需
求
产品
回落
难
品
产
大
4. 技术栈无关
应用间隔离
应用间通讯
开发独立部署
动态组合模块
研发交付分离
5.
6.
7.
8. 技术无关
接入友好
自由组合
9.
10. 基座方式加载
或
Module Federation方式加载
html entry 形式加载子应用
config entry 形式加载子应用
11.
12. 自由组合其他状态管理库
发布订阅机制
postMessage
13. CSS Module
name space
动态加载/卸
载样式表
Shadow
DOM
14. CSS Var()
design-tokens
原子化 CSS
15. LegacySandbox
WebWorkerSandbox
ProxySandbox
SnapshotSandbox
Browser VM
16. 共存
借助Module Federation 提升模块复用能力
动态组合
17. 第三方接入隔离采用Iframe
访问
/iframe/just
/iframe / just
加载子项目 映射配置
URL
18. 特殊接入需求
提供统一的JSSDK
19.
20. @jd/enzo-cli
baseConfig
customConfig
自定义适用于当前团队cli工具
以及可选提供GUI界面的操作
21.
22. 200+交付
30+应用接入
5+种技术栈
多接入方式
交付分离友好
23. 独立于业务系统之外的微前端配置中心
24. 可视化搭建与管理
流程化构建工具
模块 单元
模块 模块
控制中枢
单元
25. 推荐阅读&参考
https://zhuanlan.zhihu.com/p/78362028
https://zhuanlan.zhihu.com/p/142025813
https://mp.weixin.qq.com/s?__biz=Mzg4MjE5OTI4Mw%3D%3D&idx=1&mid=2247
483871&scene=21&sn=49184495651a53d461dad65164cf6367#wechat_redirect
https://jasonformat.com/islands-architecture/
https://zhuanlan.zhihu.com/p/309250002
26. 感谢聆听
27.