微前端学习笔记

微前端是概念,iframe是实现

我之前理解错了,直接把这2个不是同一层级的进行了对比,一直在思考一个问题“微前端相比iframe有什么优势?”

这个问题是没有意义的。

微前端是一种架构设计的概念(可以理解为接口或者抽象类),而iframe是这种概念的具体实现(可以理解为实现的子类)。

常见的微前端实现方案

了解下每种方式在隔离、共享机制、生命周期管理方面是如何实现的。

  • iframe
  • WebComponents
  • ESM
  • 阿里qiankun
  • 欢聚时代EMP

为什么选择微前端?

蚂蚁的微前端落地实践

自去年年底伊始,我们便尝试基于微前端架构模式,构建出一套全链路的面向中后台场景的产品接入平台,目的是解决不同产品之间集成困难、流程割裂的问题,希望接入平台后的应用,不论使用哪种技术栈,在运行时都可以通过自定义配置,实现不同应用之间页面级别的自由组合,从而生成一个千人千面的个性化控制台

微前端的核心价值

我认为微前端的核心价值在于 “技术栈无关“,这才是它诞生的理由,或者说这才是能说服我采用微前端方案的理由。

我们只需要在主系统构造一个足够轻量的基座,然后让各子应用按照共同的协议去实现即可。这个协议可以包括,主应用应该如何加载子应用,以及子应用如何被主应用感知、调度,应用之间如何通信等。这个协议不应该包括,子应用要如何确保隔离性、安全性,也就是子应用除了实现一些较为简单的协议之外,跟开发一个正常的 spa 应用应该没有任何差别,包括不应该有 开发、构建、发布 等流程上的侵入。只要子应用实现了这几个协议,其他的东西怎么玩,我们都不需要关心或干预。

微前端=轻量级的基座+插件生态,打造基于运行时的插件平台

从这个描述来看,微前端很适合我们当前的场景,因为我们的设计中台、可视化配置平台、可视分析平台,都属于这类范畴,都是需要和其他平台结合使用来发挥价值的。

从这个来看,对于我们的短视频项目,微前端似乎价值有限,我能想到的只有2个:

1、将项目逐步升级到TypeScript

2、提升业务方组件的接入能力(不局限于Vue开发)

3、自由接入一些工具和功能(比如切换输出形式:视频、网页、图片;接入SVG滤镜)

架构设计

直接参考蚂蚁的:

架构图

参考资料

qiankun:

https://qiankun.umijs.org/zh/guide

qiankun介绍:

https://zhuanlan.zhihu.com/p/78362028