微前端笔记

904 阅读4分钟

什么是微前端

微前端是一种类似于微服务的架构,它将单页应用、转变为多个小型化的的多个前端应用,采用某种方式进行聚合为一个统一的应用。各个子应用能够单独开发、维护、部署。这些子应用可以由多个团队开发,每个应用都是单一职责,相互间不存在明确的依赖关系。

微前端的作用与优点

  1. 实现遗留项目的迁移
  2. 聚合多个前端应用
  3. 能够整合任意技术栈的应用(技术无关

微前端的几种方案

1.路由分发

路由分发式微前端,即通过路由将不同的业务分发到不同的独立前端应用上。其通常可以通过HTTP服务器的反向代理来实现,或者通过应用框架自带的路由来解决。

2.前端微服务化

前端微服务化,是微服务架构在前端的实施,每个前端应用都是完全独立(技术栈、开发、部署、构建独立)、自主运行的,最后通过模块化的方式组合出完整的前端应用。如:single-spa、mooa 等框架

3.微应用

微应用化是指,在开发时应用都是以单一、微小应用的形式存在的,而在运行时,则通过构建系统合并这些应用,并组合成一个新的应用。

4.微件化

微件(Widget),是一段可以直接嵌入应用上运行的代码,它由开发人员预先编译好,在加载时不需要再做任何修改或编译。而微前端下的微件化则指的是,每个业务团队编写自己的业务代码,并将编译好的代码部署(上传或者放置)到指定的服务器上。在运行时,我们只需要加载相应的业务模块即可。在更新代码的时候,我们只需要更新相应的模块即可。

5.前端容器化

它能有效地将另一个网页/单页面应用嵌入当前页面中,两个页面间的CSS和JavaScript是相互隔离的——除去iframe父子通信部分的代码,它们之间的代码完全不会相互干扰。iframe便相当于创建了一个全新的独立的宿主环境,类似于沙箱隔离,它意味着前端应用之间可以相互独立运行。

6.应用组件化(结合WebComponents构建)

WebComponents是一套不同的技术,允许开发者创建可重用的定制元素(它们的功能封装在代码之外),并且在Web应用中使用它们。

微前端的架构模式

从微前端的应用间关系角度可以分为2种:基座模式(管理式)、自由组织式,分别对应两种不同的架构模式。

自组织模式

各个应用间是平等的,不存在相互管理的模式。设计难度大,不太方便实施,通用度较高。 系统内部各子系统之间能自行按照某种规则形成一定的结构或功能。采用这种模式可以使系统内的各种前端应用,都各自拥有一个小型的基座管理功能,也相当于每个应用都可以是基座。

基座模式

通过一个主应用来管理其他应用。这种模式设计难度小、方便实践,但通用度较低。 这个主应用既可以只带有单纯但基座功能,也可以带有业务功能。它所处理但业务功能是核心部分但业务功能,如:

  1. 维护应用注册表。在应用注册表上表明系统有多少个服务、能否找到对应的应用等。
  2. 管理其他子应用。如在何时加载应用、何时卸载应用等。
  3. 用户的登录、注册管理。
  4. 系统的统一鉴权管理。
  5. 导航菜单管理。
  6. 路由管理。
  7. 数据管理。
  8. 通信代理。

总结

微前端架构能够帮助开发者进行项目重构新旧项目阶段时的衔接;它也能够实现多个项目的业务整合。它是技术无关的,不论你的项目采用React、Vue、Angular还是JQuery都能使用较小的成本实现整合;同时,它能够提供一定的试错成本,在技术选型时能够给开发者尝试不同技术的机会。当发现某种技术选型无法满足业务需求时替换当前的微前端应用即可,而不影响整体系统。

微前端技术框架:

  1. single-spa.js
  2. mooa
  3. qiankun

个人博客地址,欢迎收藏😁