使用Web Components 构建前端微服务
介绍前端微服务,即将微服务的理念应用于web端,将web应用由单一的单体应用转变为多个小型前端应用聚合为一体的应用。前端框架的多样性、版本的多样性导致很多前端项目技术战不统一,所用框架版本不统一。如vue经历了从2.0到3.0更新之后,提供了全新的组织代码的思维方式,这个时候如果在使用vue2的旧的项目上升级vue3,重构成本会很高,甚至会影响线上项目的稳定运行。所以较多的解决情况是:旧的项目仍然
介绍
前端微服务,即将微服务的理念应用于web端,将web应用由单一的单体应用转变为多个小型前端应用聚合为一体的应用。
前端框架的多样性、版本的多样性导致很多前端项目技术战不统一,所用框架版本不统一。如vue经历了从2.0到3.0更新之后,提供了全新的组织代码的思维方式,这个时候如果在使用vue2的旧的项目上升级vue3,重构成本会很高,甚至会影响线上项目的稳定运行。所以较多的解决情况是:旧的项目仍然使用vue2,新的项目开始采用vue3,即在不重写原来项目的基础上,又可以开始开发新的任务。
微前端的优势就在这里,可以去兼容不同类型的前端框架而不会影响用户体验。并且随着单页面应用(SPA)的项目形态越来越流行,微前端可以将庞大的应用进行拆分并随之解耦,每个部分单独进行维护和部署,提升效率。
特点
理想的前端微服务,应该符合一下特性:
- 无关技术
- 独立开发
- 独立部署
- 不影响用户体验
实现方式
-
路由分发:使用HTTP服务器的路由重定向多个应用,通过路由将不同的业务分发到不同的独立前端应用上,具体可以通过HTTP的反向代理实现,或者是应用框架自带的路由解决。
-
在不同的框架之上设计通讯、加载机制:通过组合多个独立应用、组件来构建一个单体应用。所有的前端框架目前都离不开基本的DOM。我们只需要在页面合适的地方引入或者创建DOM,并在用户操作时,加载对应的应用,触发应用启动和卸载应用等。
-
使用iFrame创建容器及自定义消息传递机制:iFrame可以创建一个全新的宿主环境,这意味着所有前端应用之间可以相互独立运行。需要设置加载机制和通讯机制,即如何加载、卸载应用,如何监听应用事件等。
-
使用web Component 技术构建应用
更多推荐
所有评论(0)