当前位置: 首页 > 科技观察

说说微前端的那些事儿

时间:2023-03-22 17:20:32 科技观察

什么是微前端?根据微前端官网的定义,微前端是将一个网站或Web应用程序视为一个独立团队拥有的功能组合。你可能会觉得很难理解。通俗地说,每个仓库组件都是独立的,可以相互独立开发和部署。他们互不影响,通过交流沟通。他们作为一个整体提供完整的对外服务。说到微前端,就不得不提微服务。可以说很多前端的思想或者逻辑概念都是从后端演化而来的。曾经有人开玩笑说,原来是做后端的,开始转做前端了,前端开始变得越来越复杂。微服务是一种架构和组织方法,用于开发由通过定义明确的API进行通信的小型独立服务组成的软件。这些服务由各种小型独立团队处理。微服务架构使应用程序更易于扩展,开发速度更快,从而加速创新并缩短新功能的上市时间。为什么我们需要微前端?之前我们的web应用属于胖服务器,也就是说所有的处理都由服务器来完成,前端只负责简单的展示。但是目前的情况是服务器处理的内容很少,往往需要前端处理。进行各种计算和处理。在这种情况下,我们就需要借助微前端来加速前端产品的开发和迭代。微前端受益于更容易和更快的功能开发。独立部署;跨职能团队;并行开发;松耦合;明确的合同;更容易添加、更改或删除任何代码;更容易测试。构建微前端应用程序有不同的方法,但主要我们可以将它们分为四个重要领域:路由微前端组成微前端微前端通信定义微前端组合微前端组合。客户端:所有微前端都是在构建时组合和捆绑的。服务器端:最初加载一个容器,微前端在URL更改时延迟加载:内容由服务器返回。边缘端:视图在CDN级别组装。许多CDN提供商为我们提供了使用称为EdgeSideIncludes(ESI)的基于XML的标记语言的选项。微前端的路由主要取决于组合的类型。在服务器端组合中,路由是在服务器端完成的,因为整个应用程序逻辑都驻留在服务器上。在边缘组合中,CDN是突出的参与者,因为它通过基于请求的页面URL在边缘级别嵌入将它们组装在一起来服务于微前端。在客户端组合中,微前端根据应用程序的需求和当前状态加载。例如,如果用户要进行身份验证,则加载身份验证微前端或加载登录页面。除了上述路由技术,我们还可以根据需要使用智能路由来配置应用。例如,如果我们使用将微前端加载为单页应用程序的应用程序外壳。然后,appshell是所有路由逻辑的中央命令。AppShell将管理所有路由逻辑,然后根据其配置决定加载哪个微前端。当我们有复杂的路由时,这是最好的方法之一,因为只有一个故障点或配置点。微前端之间的通信与路由一样,微前端之间的通信也取决于组合的类型。当我们在相同或不同的页面上使用多个微前端时,我们总是希望能够与其他微前端用户进行交互。不同微前端之间的通信可能不是那么微不足道,尤其是当有不同的团队构建它们时。为了保持独立部署的原则,我们需要确保每个微前端都不知道其他微前端,即使它们是水平分割和同一页面的一部分。在这种情况下,我们有几种选择可以更好地沟通。我们可以在前端开发中注入事件总线机制,让解耦的组件通过在同一视图中发出事件或总线和不同的微前端来相互通信。组件可以监听这些事件并在它们感兴趣时做出反应。我们可以通过添加一个容器来创建它来实例化事件总线并将其注入页面的所有微前端。或者,我们也可以使用自定义事件。这些是具有自定义负载的自定义事件。负载由一个标识事件的字符串和一个为事件定制的可选对象组成。这些自定义事件通过一个通用的类似对象的窗口进行调度,以便所有微前端都可以使用它。定义微前端我们可以在微前端使用不同的技术栈,我们可以结合Vue和React。其中,可以为vue搭建自己的single-spa,为react搭建自己的single-spa。最后可以通过webpack将两者引入一起使用,也可以将两者独立访问。github上有很多具体代码的例子。结语无论是微前端还是微服务,本质都是为了让项目开发迭代更快。如果因为采用了某种技术而导致项目本身出现各种问题,我们就是本末倒置。