聊聊微前端那些事儿

更新日期: 2022-05-23阅读: 902标签: 微前端

什么是微前端

根据Micro-Frontend 官网的定义,微前端是将网站或者 web 应用程序视为由独立团队拥有的功能组合。这么说你可能会感到难以理解,通俗地讲,微前端就是各个仓库组件独立,彼此可以独立开发和部署,它们彼此之间互不影响,通过通信进行沟通,它们整体对外提供一个完整的服务。


提到微前端,就不得不提微服务,可以说很多前端的想法或者逻辑概念,都是从后端演变出来的,曾经有人开玩笑地说,正是从那些原来做后端的人开始转向前端之后,前端就开始变得越来越复杂了。

微服务是一种开发软件的架构和组织方法,其中软件由通过明确定义的 api 进行通信的小型独立服务组成。这些服务由各个小型独立团队负责。


微服务架构使应用程序更易于扩展和更快地开发,从而加速创新并缩短新功能的上市时间。

为什么要微前端

之前我们的web应用都属于胖服务器,也就说所有处理都有服务器进行,而前端只是负责简单的展示,而现在的情况是,服务器处理的内容很少,很多时候都需要前端进行各种计算和处理。在这种情况下,就需要我们采用微前端来加快前端产品的开发和迭代。

微前端优点

  • 更容易和更快的功能开发。
  • 独立部署;
  • 跨职能团队;
  • 平行发展;
  • 松耦合;
  • 明确的合同;
  • 更容易添加、更改或删除任何代码
  • 更容易测试。

构建微前端应用程序有不同的方法,但主要我们可以将它们分为四个重要方面:

  • 路由微前端
  • 组成微前端
  • 微前端通信
  • 定义微前端

微前端的组合

微前端由客户端,服务器端,边缘测组合而成。

  • 客户端:所有微前端都是在构建时组合和捆绑的。


  • 服务器端:最初加载一个容器,微前端在 URL 更改时延迟加载:内容由服务器返回。
  • 边缘侧:视图在 CDN 级别组装。许多 CDN 提供商为我们提供了使用基于 XML 的标记语言的选项,称为 Edge Side Includes (ESI)。

微前端的路由

路由主要取决于组合的类型。在服务器端组合中,路由是通过服务器端完成的,因为整个应用程序逻辑都在服务器上。在边缘组合中,CDN 是突出的参与者,因为它通过基于请求的页面 URL 在边缘级别通过嵌入将它们组装在一起来为微前端提供服务。

在客户端组合中,微前端是根据需求和应用程序的当前状态加载的。例如,如果用户即将认证,则会加载认证微前端或加载登陆页面。


除了上述路由技术,我们还可以根据需要使用智能路由来配置应用程序。例如,如果我们使用将微前端加载为单页应用程序的应用程序外壳。然后,app shell 是所有路由逻辑的中心命令。app shell 将管理所有路由逻辑,然后根据其配置决定加载哪个微前端。当我们有复杂的路由时,这是最好的方法之一,因为只有一个故障点或配置。

微前端之间的通信

与路由一样,微前端之间的通信也取决于组合的类型。当我们在相同或不同页面上使用多个微前端时,我们总是希望可以和其他微前端用户交互。

不同微前端之间的沟通可能不是那么微不足道,尤其是当有不同的团队构建它们时。为了维持独立部署的原则,我们需要确保每个微前端都不知道其他微前端,即使它们是水平分割的并且是同一页面的一部分。


在这种情况下,我们有几个选项可以更好地沟通。

我们可以在前端开发中注入事件总线机制,允许解耦的组件通过在同一视图中发出事件或总线和不同的微前端来相互通信。如果组件感兴趣,它们可以监听这些事件并做出反应。


我们可以通过添加一个容器来实例化事件总线并将其注入页面的所有微前端来创建它。

或者,我们也可以使用自定义事件。这些是具有自定义负载的自定义事件。有效负载包括标识事件的字符串和为事件自定义的可选对象。这些自定义事件通过一个常见的类似对象的窗口进行调度,以便所有微前端都可以使用它。

定义微前端

在微前端我们可以使用不同的技术栈,我们可以将vuereact进行结合使用。其中可以单独为vue构建自己的single-spa,为react构建自己的single-spa,最后两者通过webpack共同引入使用,并且两者也可以独立访问。具体的代码在github上有很多实例。

结论

无论是微前端还是微服务,本质上都是为了让项目开发迭代变得更快,如果因为采用了某个技术而导致项目本身出现了各种问题,我们就是在本末倒置。

来自:https://www.toutiao.com/article/7099655328500843046/

链接: https://fly63.com/article/detial/11566

实施微前端的六种方式

微前端架构是一种类似于微服务的架构,它将微服务的理念应用于浏览器端,即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。由此带来的变化是,这些前端应用可以独立运行、独立开发、独立部署。

基于 React & TS & Webpack 的微前端应用模板

在 Web 开发导论/微前端与大前端一文中,笔者简述了微服务与微前端的设计理念以及微前端的潜在可行方案。微服务与微前端,都是希望将某个单一的单体应用,转化为多个可以独立运行、独立开发、独立部署、独立维护的服务或者应用的聚合

微前端的好处和缺陷

“微前端架构”是一种使用微服务模式构建前端应用的方法。微前端的理念是将你的前端拆分为一组可独立部署、松散耦合的应用。然后将这些应用组装在一起以创建面向用户的单个应用程序

微前端如何落地?

在过去的几星期里,随着 Martin Fowler 博客上,那篇 Cam Jackson 写的微前端的文章发布,到处都在讨论 Microfrontend。作为一个微前端 “专家”,我也分享一下:如何去落地微前端

微前端究竟好在哪?

微前端架构是一种设计方法,其中,前端应用被分解为多个松散而协同工作的半独立“微应用”。微前端的思想来源于微服务,其名称也遵循了微服务的命名方式。那么,微前端的优势和好处在哪?让我们一起通过这篇微前端教程来了解

从微前端聊聊架构演进

就目前来看,微前端已经不是一个新话题了。随着越来越多的公司的深入研究,当前也提出了很多的解决方案。不过本文不是想要来介绍微前端,更想介绍项目如何一步步到达微前端架构的实际需求

实现微前端需要了解的 Vue Genesis 渲染器

核心的就是渲染器,它提供了最基础渲染能力,有了它,你可以实现微前端、微服务、远程组件、首屏渲染,甚至可以和 React、EJS 等配合使用。

微前端开发常见问题汇总

微前端开发常见问题汇总,前端应用可以独立运行、独立开发、独立部署。微前端不是单纯的前端框架或者工具而是一套架构体系。其在开发中会有各种问题,今天小编整理了一下分享给大家!

用Single-spa 创建基于React和Vue的微前端

Single SPA 是一个用于前端微服务的 javascript 框架。它使你可以在单页应用中使用多个框架,这样就可以按功能拆分代码,并 能使 Angular、React、Vue.js 程序一起运行

5分钟带你了解微前端

不同于单纯的前端框架/工具,微前端是一套架构体系,这个概念最早在2016年底由 ThoughtWorks 提出。 微前端是一种类似于微服务的架构,它将微服务的理念应用于浏览器端,将 Web 应用从整个的「单体应用」转变为多个小型前端应用的「聚合体」。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!