什么是微前端？

介绍

巨石

微前端

结论

这个术语在过去几年里一直在不断涌现。那么，微前端到底是什么呢？

介绍

自互联网时代伊始，我们一直在编写代码来使网络具有交互性。在过去的十年里，“Web 应用程序”一词已逐渐成为一种流行词汇。一直以来，前端代码都只是一块庞大、坚固且错综复杂的巨石。
当我们思考后端技术时，微服务方法已被广泛用于构建独立的应用程序，这些应用程序可以在用户旅程中相互通信并达成目标。
但是……如果我们可以将这种方法应用于前端开发呢？

巨石

编写 Web 应用时，我们通常会选择一个框架（React、Vue、Angular、Svelte 等），并将其架构在模型、视图和控制器等层上。所有代码都愉快地存储在一个大型代码库中。
时间流逝，人员来来去去，新技术层出不穷，最终形成了我们的单体应用。但我们知道系统必须不断发展，否则它会变成一堆笨重的旧代码，性能低下或难以维护。
如果我们现在需要更改前端的技术栈怎么办？嗯，在不破坏整个应用程序的情况下进行任何更改都将是一个大问题。但这只是单体应用的一个缺点，让我们来看看更多：

• 随着单体应用的增长，理解所有代码并明确业务需求变得越来越困难
• 大型编译的 JavaScript 单体可能需要很长时间才能构建
• 即使我们改变其中的一小部分，我们也需要重新部署整个应用程序

那么，我们如何才能将这个大应用程序分解成多个独立的应用程序呢？

微前端

这个词自2015年以来就在网上流传。看看谷歌的这个趋势。我们可以看到，自2018年末以来，利率一直在持续上升。

微前端遵循与后端微服务相同的原则。每个应用程序独立存在，并具有明确的目标。
让我们考虑一个非常简单的例子：电子商务。要构建这样的应用程序，我们可以预期以下要求：

• 首页展示推荐商品
• 购物车页面
• 结帐页面
• 付款页面

每个页面都可以写成一个单独的应用程序。当我们像这样分解一个单体应用时，也可以将其分解成专门的团队。
可以有一些开发人员只编写主页，另一些开发人员维护购物车页面，等等。
以下来自必读文章 Martin Fowler 的图片展示了这种情况：

这种方法也有助于与后端团队构建的微服务集成。我们可以选择构建主页的前端开发人员，以及构建主页微服务的后端开发人员。这样，我们就有了一个完整的团队，唯一的目标就是编写主页代码！请看Michael Geers 文章中的以下图片：

优势

微前端架构可以带来以下优势：

• 更改技术堆栈非常容易，因为每个应用程序自然包含更少的代码并且不会干扰其他应用程序。
• 快速维护：由于每个应用程序都有一个关注点，因此可以轻松发现和调整错误。
• 快速部署：构建和部署小型应用程序变得更容易、更快捷。
• 易于扩展：每个应用程序都有自己的规模要求，因此我们可以轻松提供不同的环境。

缺点

每个决策都有其缺点，微前端也不例外：

• 必须特别注意应用程序之间的共享库，这样浏览器就不会多次下载相同的库。
• 代码冗余：每个应用程序上可能都有一些重复的代码。我们当然可以编写一个辅助应用程序供其他人使用，但这会导致它们之间紧密耦合。
• 架构复杂性：管理单个单体应用比管理多个应用程序要容易得多。为了克服这个问题，必须有一些自动化措施和大量的文档来帮助开发人员提升体验。

构建微前端

好了……现在我们知道了什么是微前端，那么该如何构建它呢？
为了分解前端单体应用，我们有一些技巧：

• iframe：使用这种（旧）方法，我们可以在一个页面上包含多个内部应用程序，每个应用程序位于不同的 iframe 中。
• WebPack 模块联合：这项最近推出的功能旨在使用 WebPack 打包不同的应用程序。在这里，我们可以定义应用程序如何相互依赖以及如何共享公共库。
• import-map ：这是single-spa框架使用的策略。每个应用程序的 JavaScript 文件都通过一个地址暴露出来，并通过导入映射进行注册，从而使协调器能够知道每个文件的位置。
• Web 组件：每个应用程序都可以由可由主机应用程序协调的自定义 HTML 元素表示

一些优秀的框架可以帮助构建微前端：

• single-spa：通过使用 import-map 和协调器来处理应用程序之间的路由和通信，从而实现微前端
• Luigi：由 SAP 提供支持，使用 iframe 构建微前端
• Piral：使用称为Pilet的模块来提供模块化架构
• Frint：一个完整​​的框架，为微前端架构提供路由、状态管理、服务器渲染和其他功能

结论

正如我们所见，这个主题相当新颖，新的技术和框架仍在不断发展，以帮助我们开发微前端，但我们可以看到它对 Web 开发具有巨大的优势。
希望大家喜欢这篇内容！期待与您再次相见！