微前端架构【译】

时间:2022-05-19 16:23:06

作者:Muhammad Anser

来自????????的软件工程师,作家,演讲者和喜欢编写技术的技术极客。

 

微前端架构【译】

在深入研究微前端技术之前,我们必须了解什么是微服务架构,因为微前端的概念隐约受到微服务的启发并以微服务命名。

根据官方文档

微服务(也称为微服务架构)是一种架构风格,它将应用程序构建为一组服务,这些服务是:

  • 高度可维护和可测试
  • 松散耦合
  • 可独立部署
  • 围绕业务能力进行组织
  • 小团队

微服务架构支持快速、频繁和可靠地交付大型复杂应用程序。

现在回到微前端部分,微前端基本上是微服务模式的扩展,其中功能扩展到前端。 因此,微前端带来了广泛的优势,包括部署独立性、更容易测试功能等。

微前端背后的想法是将 Web 应用程序视为由独立团队拥有的功能组合。 每个团队都有自己关心和专攻的不同业务领域。团队是跨职能的,从数据库到用户界面,端到端地开发其功能。

微前端架构【译】

 

微前端背后的核心概念:

技术独立

每个团队都应该在不与其他团队协调的情况下选择和升级堆栈。自定义元素有助于隐藏实现细节,同时为其他人提供中立的界面。

隔离团队代码

永远不要共享运行时,即使团队使用相同的框架。构建独立的自包含应用程序。不要依赖共享状态或全局变量。

创建团队前缀

在尚无法隔离的地方使用命名约定。命名空间 CSS、本地存储、事件和 Cookie,以避免冲突并澄清所有权。

优先使用本机浏览器功能而不是自定义 API

使用浏览器事件进行通信,而不是构建一个全局的 PubSub 系统。如果需要构建跨团队的 API,请尽量保持简单。

构建弹性网页设计

即使 JavaScript 无法执行,这些功能也应该很有用。要提高感知性能,请使用通用渲染和渐进增强。

但是为什么我们需要微前端?让我们来了解一下。

在现代,随着新的 Web 应用程序的出现,前端变得越来越大,而后端变得越来越不重要。 大多数代码是微前端架构,而单体式方法不适用于更大的 Web 应用程序。 需要有一种工具将其分解为独立运作的较小模块。 问题的解决方案是微前端。

总结一下好处,以下几点:

  • 更好的可扩展性。
  • 快速开发,因为团队可以独立工作。
  • 可以在应用程序中使用多个框架。但是,应该谨慎和透明地进行操作以避免混淆。
  • 部署独立性。微前端的交付不会影响整个应用程序。这些更改将准确地影响它所涵盖的业务流程的那部分。
  • 使用微前端,可以比以前更顺利地升级、更新甚至重写前端的某些部分
  • 确保应用程序的其余部分保持稳定更容易,因为它是独立的。使用微前端,不再需要跟踪整个应用程序。
  • 代码库更小,更易于管理。
  • 更容易聘请专家。使用微前端,可以寻找专业人员来处理使用特定技术堆栈的应用程序的特定部分,因此您不需要他们了解其他团队使用的技术。
  • 更容易测试,因为只需测试单独的功能。

总结

这在很大程度上取决于业务案例,是否应该或不应该使用微前端。 如果有一个小型项目和团队,则不需要微前端架构。 同时,具有分布式团队和大量请求的大型项目从构建微前端应用程序中受益匪浅。 这就是为什么今天,微前端架构被许多大公司广泛使用,这就是为什么你也应该选择它。

原文:https://levelup.gitconnected.com/micro-frontend-architecture-794442e9b325