广告
返回顶部
首页 > 资讯 > 前端开发 > node.js >关于web前端中微前端的误解有哪些
  • 577
分享到

关于web前端中微前端的误解有哪些

2024-04-02 19:04:59 577人浏览 八月长安
摘要

关于web前端中微前端的误解有哪些,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。本篇文章给大家分享的是有关关于微前端的误解有哪些,小编觉得

关于web前端中微前端的误解有哪些,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

本篇文章给大家分享的是有关关于微前端的误解有哪些,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

关于web前端中微前端的误解有哪些

微前端是多年来追溯到的新趋势。配备新的方式和解决挑战,他们现在正在慢慢进入主流。不幸的是,很多误解都很明显使得许多人难以掌握微抗议的困难。

简而言之,微前端是关于将微服务的一些好处进入前端。还有更多的是,一个人不应该忘记微服务者没有银弹。

提示:要在微前端或任何其他项目之间共享React / angular / Vue组件,请使用类似于位的工具。位允许您从任何代码库“收获”组件,并将其与位为位的集合中。它使您的组件可用于您的团队,在任何回购中使用和开发。使用它来优化协作,加速开发并保持一致的UI。

关于web前端中微前端的误解有哪些

> Example: searching for shared React components in bit.dev

误解

1.微前端需要javascript.

当然,许多当前可用的微前端解决方案是JavaScript框架。但这怎么可能是错的?JavaScript不再是可选的。每个人都想要高度互动的体验,js在提供它们时发挥重要作用。

除了给定的优势外,还应考虑快速加载时间,可访问的WEB应用程序和其他因素。因此,许多JavaScript框架提供了呈现成像的能力。最后,这导致不仅可以在客户端缝合而且在服务器上准备一切的能力。取决于所需的性能(即首次有意义的初始时间)此选项听起来很可爱。

请记住,后端渲染具有自己的挑战。

然而,即使没有JavaScript解决方案的同构渲染,我们也在这里处于良好状态。如果我们想在没有JavaScript的情况下建立微前端状态,我们肯定可以这样做。存在许多模式,并且它们的大量不需要JavaScript。

考虑“较旧”模式之一:使用

我听到你笑了吗?好吧,回到过去的日子里,已经允许人们今天尝试做的一些分裂(更多关于以下)。一个页面(也许由另一个服务呈现?)负责菜单,而另一页面负责标题。

今天我们使用更灵活的(并且仍然积极支持)元素。它们提供了一些良好的能力 - 最重要的是他们互相屏蔽不同的微前端。通过PostMessage仍然可以进行通信。

2.微前端仅适用于客户端

在JavaScript误解之后,这是一个下一级。当然,在客户端的方面有多种技术来实现微前端,但实际上,我们甚至不需要任何或类似的方法来获得微前端。

微前端可以像服务器端的“包括”一样简单。具有先进技术,如边缘侧包括,这变得更加强大。如果我们想排除在微店段功能中实现的场景,那么即使是简单的链接也很好。最后,微档案解决方案也可以像微小,分离的服务器侧渲染器一样简单。每个渲染器可以像单个页面一样小。

下图说明了在反向代理中发生的更高级拼接。

关于web前端中微前端的误解有哪些

> Server-side stitching via a reverse proxy

当然,JavaScript可能有几个优点,但它仍然高度取决于您尝试用微前端解决问题的问题。根据您的需求,服务器端解决方案可能仍然是最好的(或至少为更好的)选项。

3.应该使用多个框架

在几乎每个关于微前端的教程中,不同的部件不仅由不同的团队开发,而且使用不同的技术开发。这是虚假的。

是的,应该使用不同的技术使用不同的微前端,但是,它不应该是目标。我们也不做微服务只是为了拥有真正的拼凑而成(或者我们应该在我们的后端说“混乱”)。如果我们使用多种技术,那么只因为我们获得了特定的优势。

我们的目标应该永远是一定的统一。最好的方法是考虑一个绿色领域:那我们会做什么?如果答案是“使用单个框架”,我们就在正确的轨道上。

现在,在长期运行中,多个框架在您的应用程序中可能会变得显而易见。它可能是由于遗产。这可能是一种方便。它可能是一个概念证明。无论原因是什么:能够玩这种情况,仍然很好,但它永远不应该是所需的状态。

无论您的微前端框架有多效率 - 使用多个框架将始终以不可忽略的成本来实现。初始渲染不仅需要更长时间,但内存消耗也会朝着错误的方向迈出。便利型号(例如,某个框架的模式库)不能使用。需要进一步重复。最后,错误的错误,不一致行为和应用程序的感知响应性将受到影响。

4.通过技术组件拆分

一般来说,这并没有很大的意义。我尚未看到一个服务器在一个服务中的微服务后端,并且api在另一个服务中。通常,服务包括多个层。虽然日志记录等一些技术人员肯定会被带到共同的服务,但有时会使用像边车的技术。此外,还预期了服务内的常见编程技术。

对于微前端,这是相同的。为什么一个微前端只能做菜单?不是一个菜单,每条微前端都是相应填充的吗?拆分应由业务需求完成,而不是通过技术决策来完成。如果您读过有关域驱动的设计,您就知道它是关于定义这些域的所有域 - 以及此定义与任何技术要求无关。

考虑以下拆分:

关于web前端中微前端的误解有哪些

> Decomposition into microfrontends by layout

这些是技术组件。这与Microfrontends无关。在真实的微前端应用中,屏幕可能更愿意如下:

关于web前端中微前端的误解有哪些

> Decomposition into microfrontends by domain

绘制的缝合在这里更复杂,但这是一个声音微街的应用程序应该为您提供!

5.你不应该分享任何东西

不。您应该分享与共享有意义的原因。你绝对不分享一切(见下一个点)。但要保持一致,您需要至少分享一组原则。现在,如果是通过共享库,共享URL,或只是在构建或设计应用程序时使用的文档无关紧要。

对于微服务,这个“无共享”架构看起来像下图。

关于web前端中微前端的误解有哪些

> “Share nothing” architecture applied to microservices

在浏览器中,这将导致使用,因为目前没有其他方法可以防止资源泄露。可以隔离阴影DOM CSS,但脚本级别仍然能够触摸所有内容。

即使我们想遵循架构,我们将遇到麻烦。重复的资源只是为了保持简单的组件活着将使感知性能瘫痪。

授予,共享更深是(例如,使用附加到DOM的共享库)可能会出现问题。但是,另一方面,宽松的共享是(例如,只是一个指定基本设计元素的文档)会产生的不一致。

6.你应该分享一切

绝对不。如果这是这个想法,那么一只巨石更有意义。表现明智这可能已经是一个问题。我们懒得加载什么?我们可以删除什么吗?但实际问题是依赖管理。没有什么可以更新,因为它可能会破坏一些东西。

共享零件的美是一致保证。

现在,如果我们分享一切,我们会引入复杂性以获得一致性。但这种一致性是不可保持的,因为复杂性将在每个角落都会引入错误。

这个问题的起源在于“依赖地狱”。下图略显说明。

关于web前端中微前端的误解有哪些

> Entering the dependency hell

简而言之,如果一切都取决于我们有依赖问题的一切。只需更新单个盒子对整个系统产生影响。持续的?真的。简单的?绝对不。

7.微前端仅限网站使用

他们为什么要么为什么?真的,到目前为止,我们大多触及了网络,但是可以将概念和想法带到任何类型的应用程序(移动应用程序,客户端应用程序,……,即使是CLI工具)。我看到它的方式微前端只是一个花哨的“插件架构”的新词。现在如何设计插件界面以及使用插件运行应用程序所需的内容是一个不同的故事。

下图显示了相当通用的插件架构。信用进入Omar Elgabry。

关于web前端中微前端的误解有哪些

> Generic plugin architecture

没有概念运行在哪里。它可以在手机上运行。它可以在windows上运行。它可以在服务器上运行。

8.微前端需要大规模团队

再次,为什么?如果解决方案是超级复杂的那么我肯定会寻找更简单的。有些问题需要复杂的解决方案,但通常,一个很好的解决方案是一个简单的解决方案。

根据场景,甚至可能甚至不需要分布式团队。分布式团队是微前端怪人首先有意义的原因之一,但它们不是唯一的原因。另一个好理由是特征的粒度。

如果您从商业角度查看微前端,那么您将看到有能力打开和关闭特定功能可能有意义。对于不同的市场,可以使用不同的微前端。已经回到了一个简单的特权级别这是有道理的。不需要编写代码以根据某个条件打开或关闭某些事项。所有这些都留给公共层,可以根据(可能的动态)条件来激活或停用。

这种方式可以(或应该)不使用,也不会传递。虽然这不应该是保护层,但它肯定是一种方便(和性能)层。用户并不困惑,因为他们所看到的只是他们能做的事情。他们没有看到功能。该功能甚至没有传递,因此在无法使用的代码上没有浪费字节。

9.微前端无法调试

我担心这是部分真实的,但一般来说,它不应该是和(扰流器!)不必是。对于任何类型的实施(或符合论证的底层架构),可以瘫痪发展经验。战斗的唯一方法是开发者 - 先。实施中的第一个规则应该是:可以调试和开发。拥抱标准工具。

一些微前端框架根本不拥抱这个。有些需要在线连接,专用环境,多个服务,…这不应该是常态。它绝对不是规范。

10.微服务需要微前端(或反之亦然)

虽然结隔膜的模块化后端可能是对前端解耦的良好基础,但通常,这不是这种情况。它是完全可行的,可以具有要求模块化前端的单片后端,例如,允许简化个性化可能与授权,权限和市场相结合。

实际上,同样的意义,微服务后端不仅仅是将类似模式应用于前端的标准。许多微服务后端由不在功能中长大的单一目的应用程序操作,而是仅仅发生了外观。

11.微前端需要一个单一代码仓

几次我已经读过它来创建一个微型状态解决方案,可以利用Mono Repo,最好是使用Lerna等工具。我不相信。当然,一个单一代码仓有一些优势,但它们也有明确的缺点。

虽然有微型框架框架需要关节CI / CD构建。联合CI / CD构建的要求通常导致单一代码仓库,因为首先要将其设置得更加简单。但对我来说 - 这是重新包装的巨石。如果您在单一代码中有一个联合版本,那么可以划上两个非常重要的因素,以便首先使微前端更有趣:

  • 独立部署

  • 独立发展

在任何情况下,如果您看到需要一个单代码仓的微前端解决方案:运行。在长期等待着等待的分布式系统的所有问题,精心制作的巨石可能更好。

monorepos / lerna的一个很好的替代方案是位。位允许您在存储库中协作组件 - 使团队能够独立提供功能。

结论

微前端仍然不是每个人。我不相信微前端是未来的,但我也是他们在未来发挥着重要作用的积极作用。

关于关于web前端中微前端的误解有哪些问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注编程网node.js频道了解更多相关知识。

--结束END--

本文标题: 关于web前端中微前端的误解有哪些

本文链接: https://www.lsjlt.com/news/81608.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 关于web前端中微前端的误解有哪些
    关于web前端中微前端的误解有哪些,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。本篇文章给大家分享的是有关关于微前端的误解有哪些,小编觉得...
    99+
    2022-10-19
  • web前端中应该了解的微型前端框架有哪些
    本篇文章为大家展示了web前端中应该了解的微型前端框架有哪些,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。发现最好的工具,以帮助您构建伟大的微观前端。将长期的后端整...
    99+
    2022-10-19
  • web前端和移动前端的区别有哪些
    这篇文章主要介绍了web前端和移动前端的区别有哪些的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇web前端和移动前端的区别有哪些文章都会有所收获,下面我们一起来看看吧。 ...
    99+
    2022-10-19
  • 前端关于HTML的面试题有哪些
    这篇文章主要讲解了“前端关于HTML的面试题有哪些”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“前端关于HTML的面试题有哪些”吧!1.什么是HTML?HT...
    99+
    2022-10-19
  • 关于angular的前端面试题有哪些
    这篇文章主要介绍了关于angular的前端面试题有哪些,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。1,ng-if 跟 ng-show/hide 的区别有哪些?第一点区别是,...
    99+
    2023-06-14
  • web前端开发中的常见错误有哪些
    本篇内容介绍了“web前端开发中的常见错误有哪些”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!定义首先,我...
    99+
    2022-10-19
  • Web前端和后端的区别有哪些
    这篇文章将为大家详细讲解有关Web前端和后端的区别有哪些,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。什么是 Web 前端?Web前端,顾名思义是来做web的前端页面的。...
    99+
    2022-10-19
  • web前端的面试题有哪些
    web前端的面试题有哪些,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。又到了一年中的招聘旺季的时...
    99+
    2022-10-19
  • 有用的web前端技巧有哪些
    这篇文章主要介绍“有用的web前端技巧有哪些”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“有用的web前端技巧有哪些”文章能帮助大家解决问题。伪元素动态改变其样式我们都用过伪元素,什么::befor...
    99+
    2023-07-05
  • 移动前端开发和Web前端开发的区别有哪些
    本篇内容介绍了“移动前端开发和Web前端开发的区别有哪些”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!回顾...
    99+
    2022-10-19
  • web前端中HTML的笔试题有哪些
    今天小编给大家分享一下web前端中HTML的笔试题有哪些的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来...
    99+
    2022-10-19
  • web前端中CSS的笔试题有哪些
    本篇内容主要讲解“web前端中CSS的笔试题有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“web前端中CSS的笔试题有哪些”吧!1、Q: CSS 属性是否...
    99+
    2022-10-19
  • 常用的web前端技术有哪些
    常用的Web前端技术包括:1. HTML:网页结构标记语言,用于定义网页的结构和内容。2. CSS:层叠样式表,用于定义网页的样式和...
    99+
    2023-06-12
    web前端技术 web前端
  • Web前端必看的书籍有哪些
    这篇文章将为大家详细讲解有关Web前端必看的书籍有哪些,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。JavaScript 要学的内容实在很多,如果没有其他编...
    99+
    2022-10-19
  • Web前端开发的趋势有哪些
    本篇内容介绍了“Web前端开发的趋势有哪些”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!1、智能聊天机器人...
    99+
    2022-10-19
  • Web前端有哪些整洁的代码
    本篇内容主要讲解“Web前端有哪些整洁的代码”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Web前端有哪些整洁的代码”吧!一、DOCTYPE的声明如果我们想做好...
    99+
    2022-10-19
  • web前端和ui的区别有哪些
    这篇文章主要介绍“web前端和ui的区别有哪些”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“web前端和ui的区别有哪些”文章能帮助大家解决问题。 ...
    99+
    2022-10-19
  • 常用的web前端框架有哪些
    本篇内容主要讲解“常用的web前端框架有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“常用的web前端框架有哪些”吧!BootstrapBootstrap 来自 Twitter,是目前最受欢...
    99+
    2023-06-27
  • web前端的经典面试题有哪些
    这篇文章主要讲解了“web前端的经典面试题有哪些”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“web前端的经典面试题有哪些”吧!  1、如何利用Webpack把代码上传服务器以及转码测试  ...
    99+
    2023-06-03
  • 基于Node.js的前端面试题有哪些
    这篇文章主要介绍基于Node.js的前端面试题有哪些,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!一、Node基础概念1.1 Node是什么Node.js 是一个开源与跨平台的 Ja...
    99+
    2022-10-19
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作