如何与专门的本机应用团队一起实施微前端？

Question

（找朋友；-））

我正在与 Web（React）和移动（IOS、Android）团队合作。我发现即使使用微服务架构，我们最终也总是在前端/客户端级别做重复的工作。 如何实现微前端架构，减少前端重复工作，同时仍为原生客户端提供高质量的体验？

更多背景：

我读过 Cam Jackson 的 微前端文章并浏览了 Michael Geers 的微前端博客。我意识到我们更接近微服务模式：

比微前端：

这主要是由于康威定律。即使拥有拥有完整产品的专门团队，我们仍然有专门的团队只负责 IOS 和 Android 原生工作。 每个新的离散功能，即使在 API/服务级别有明确的有界上下文，最终也会被分割成同一功能/组件的多个不同前端实现，主要是为了支持本机应用程序（这要求每个运行在本机应用程序必须是本机的）。这让我考虑实施微前端。 在理想的世界中，不会有任何专门的原生应用团队，iOS 和 Android 开发人员会整合相应的产品团队（如上图所示）。但这不是一个选择。

鉴于我们的网络应用程序与移动应用程序具有相同的外观和感觉。创建单个 Web 组件作为微前端的一部分并在具有嵌入式 Web 视图的本机应用程序中使用它是一个好主意吗？这会被视为微前端架构吗？这种方法有什么缺点？

这样，构建响应式 Web 组件的同一团队将负责端到端的功能。仅保留核心用户旅程和本机特定功能（例如 AR 和条形码扫描）作为本机组件运行。

Answer 1

通过执行以下步骤，您可以实现微前端架构，减少前端工作的重复，同时为跨 Web 和移动平台的本机客户端提供高质量的体验。

识别业务域：将您的应用程序划分为更小的、独立的业务域。每个域应该代表一组有凝聚力的功能或特性。

定义微前端边界：确定业务领域后，为微前端建立清晰的边界。每个微前端应该负责一个或多个相关的业务领域。

选择框架：选择支持微前端的框架或工具，例如 single-spa、webpack 中的模块联合或基于 Web 组件的自定义解决方案。这些框架允许您独立开发、部署和更新微前端。

设计契约和接口：定义微前端之间的契约和接口，以确保互操作性和无缝通信。这包括定义每个微前端公开和使用的 API、事件系统和数据格式。

使用共享组件和库：开发一组可跨微前端使用的共享组件和库。这有助于减少代码重复并确保用户界面的一致性。

实现延迟加载：利用延迟加载根据用户操作或导航动态加载微前端。这可以优化应用程序的初始加载时间并提高性能。

启用横切关注点：在平台级别实现横切关注点，例如身份验证、授权、日志记录和错误处理，以避免在每个微前端中重复这些功能。

去中心化数据管理：通过使用GraphQL或REST API等技术从后端服务获取数据来实现去中心化数据管理。每个微前端应该负责获取和管理自己的数据。

持续集成和部署（CI/CD）：为每个微前端设置 CI/CD 管道，以自动化构建、测试和部署过程。这确保了可以快速、安全地将更改部署到生产中。

监控和维护：使用 Prometheus、Grafana 或自定义监控解决方案等工具监控微前端的性能和运行状况。定期更新和维护您的微前端以解决错误、安全漏洞和性能问题。

祝你好运！