D2-2019

2019年12月14日，我在杭州和达希尔顿逸林酒店参加了第十四届D2前端技术论坛。虽然现在已过去半年多，最近认识到部分内容（如微前端）可能需要进行实践，所以把部分内容作重新回顾。

那天听了三部分内容：微前端、Serverless、wasm。

微前端

微前端是一套前端架构体系，是 分治思想 和 望楼系统 的组合。

“微前端”最初是在2016年由 ThoughtWorks 提出。

微前端体系构成

• 基础设置
  • 微应用的注册、消息机制、隔离机制
• 配置中心
  • 版本管理、发布策略
• 观察工具
  • 运维方面的可观察性工具。除了监控，可以方便查看系统运行状态，对问题进行跟踪、调试

“微应用容器”应该具有的能力

主应用 会通过一个 微应用容器 把 微应用 异步加载进来。

其中的 微应用容器 应该具备以下能力：

• 安全性
• 隔离性
  • 隔离样式（ShadowDOM）
  • 隔离JavaScript/DOM入侵
• 可通讯
  • 路由管理：主应用配置路由，对应映射微应用
  • 消息机制：微应用注册事件、主应用下发事件（微应用之间不允许通讯）
• 可见性
  • 埋点监控、性能检测
• 容错性
  • 加载失败的Fallback、容错、Error上报

微前端的价值

方面	优点	缺点
工程价值	1、单独构建、单独发布、热升级 2、不限技术栈 3、大型单页应用无限扩展 4、多团队合作	1、体验有折损 2、维护成本高 3、管理版本/依赖复杂 4、粒度要合适
业务价值	对于ToB -> 功能性强 -> 客户定制化需求 -> 需要更灵活的业务整合能力	/

微前端需要关注的问题

1、微应用的注册、异步加载和生命周期管理

2、微应用和主应用之间的消息机制

• 微应用之间不允许通讯；
• 微应用注册事件、主应用下发事件

3、微应用之间的隔离

4、公共依赖的库、版本管理

5、微应用独立调试

衡量一个微前端是否友好的标准

• 技术无关：无论是子应用还是主应用，都应该做到框架无感知
• 接入友好：子应用接入应该跟接入一个Iframe一样轻松自然