介绍

前端微服务,即将微服务的理念应用于web端,将web应用由单一的单体应用转变为多个小型前端应用聚合为一体的应用。

前端框架的多样性、版本的多样性导致很多前端项目技术战不统一,所用框架版本不统一。如vue经历了从2.0到3.0更新之后,提供了全新的组织代码的思维方式,这个时候如果在使用vue2的旧的项目上升级vue3,重构成本会很高,甚至会影响线上项目的稳定运行。所以较多的解决情况是:旧的项目仍然使用vue2,新的项目开始采用vue3,即在不重写原来项目的基础上,又可以开始开发新的任务。

微前端的优势就在这里,可以去兼容不同类型的前端框架而不会影响用户体验。并且随着单页面应用(SPA)的项目形态越来越流行,微前端可以将庞大的应用进行拆分并随之解耦,每个部分单独进行维护和部署,提升效率。

特点

理想的前端微服务,应该符合一下特性:

  • 无关技术
  • 独立开发
  • 独立部署
  • 不影响用户体验

实现方式

  1. 路由分发:使用HTTP服务器的路由重定向多个应用,通过路由将不同的业务分发到不同的独立前端应用上,具体可以通过HTTP的反向代理实现,或者是应用框架自带的路由解决。

  2. 在不同的框架之上设计通讯、加载机制:通过组合多个独立应用、组件来构建一个单体应用。所有的前端框架目前都离不开基本的DOM。我们只需要在页面合适的地方引入或者创建DOM,并在用户操作时,加载对应的应用,触发应用启动和卸载应用等。

  3. 使用iFrame创建容器及自定义消息传递机制:iFrame可以创建一个全新的宿主环境,这意味着所有前端应用之间可以相互独立运行。需要设置加载机制和通讯机制,即如何加载、卸载应用,如何监听应用事件等。

  4. 使用web Component 技术构建应用

Logo

前往低代码交流专区

更多推荐