微前端是一种越来越流行的前端开发架构方法。这很容易代表前端 Web 开发的未来,这就是为什么了解这种架构可以为您的应用程序和开发团队带来的主要好处是至关重要的。
我和我的团队已经使用这种方法两年了,现在是时候分享我们学到的一切,以及您应该开始考虑在下一个项目中使用它的最重要原因。
让我们首先研究什么是微前端架构,然后深入探讨现在采用它的五个原因。
什么是微前端架构? {#whatisamicrofrontendarchitecture}
在过去几年中,IT 公司已开始将大型软件分解为更小、更易于管理的块。这种方法背后的想法是拥有许多可以独立开发、测试和部署的服务。
这就是微服务架构对于后端开发的意义。但同样的方法也可以应用于前端开发,它被称为微前端架构。在Martin Fowler 的官网上【https://martinfowler.com/articles/micro-frontends.html】,微前端方法定义为:
一种架构风格,将可独立交付的前端应用程序组合成一个更大的整体。
这种前端 Web 开发的架构方法变得越来越流行,因为传统的单体方法存在众所周知的陷阱。这主要是因为前端软件往往会快速增长,而当使用单体架构时,一切都变得更加难以维护。
另一方面,微前端使您能够实现不那么复杂和繁琐的架构。特别是,由于采用了微前端方法,您可以将整个应用程序拆分为独立的小部分。然后它们中的每一个都可以由不同的前端团队实现,甚至可以使用不同的技术。这确保了与后端微服务架构相同的可扩展性、灵活性和适应性。此外,这种方法允许您在同一网页上混合使用库或不同框架开发的微前端组件。
因此,微前端现在是 IT 社区的一种趋势,并且这种方法正被越来越多地采用,这一点并不会让您感到惊讶。
今天选择微前端的 5 个好处 {#5benefitsofchoosingmicrofrontendstoday}
使用微前端进行开发教会了我这种前端开发方法的真正优势。
现在,让我们看看使用它的五个最相关的理由,这些理由以我作为前端开发人员的经验为后盾,我已经在微前端工作了两年多。
为了创造一个平衡的画面,这篇文章之后将是另一篇关于微前端最重要的五个陷阱的文章。
扩展到多个团队 {#scalinguptomultipleteams}
与我一起工作的团队由具有不同背景和技能的开发人员组成。有些是React、其他Vue.js或Angular方面的专家。有些人喜欢用JavaScript编码,其他人喜欢用TypeScript编码。最初,这代表了一个障碍。唯一的解决方案是找到共同点,尽管这种选择会迫使一些开发人员学习新技术并失去他们的专业知识。因此,我们寻找解决方案并决定采用微前端架构方法。
多亏了这一点,我们才能够将最初的团队拆分为多个团队,每个人都可以表现出自己的最佳状态。这是因为不同的团队可以根据他们必须处理的业务逻辑在架构、测试和编码风格方面做出最佳决策。此外,这种方法固有地导致代码和样式隔离,使每个团队独立于其他团队。
就最终结果而言,微前端也很有帮助。这是我们的团队在完全采用这种方法后学到的东西。事实上,拥有多个可以自由使用他们喜欢的技术的小团队意味着他们本质上受到的限制更少,因此更有动力编写更高质量的代码。
采用不同的技术栈 {#adoptingdifferenttechstack}
由于微前端由小的、独立的部分组成,因此可以使用不同的技术堆栈来实现它们中的每一个。这是一种难以置信的强大力量。首先,因为起始团队可以根据特定技术堆栈的专业知识拆分成许多小团队,这也尊重单一职责原则。其次,由于许多技术堆栈将用于同一个项目,因此雇用新开发人员变得更加容易。
此外,微前端方法实际上消除了对特定技术的锁定现象,或者至少大大减少了这种现象。这是因为您的团队始终可以决定选择新技术堆栈,而无需翻译之前开发的内容。此外,微前端架构所包含的每个块肯定比前端单体小,并且将其转化为新技术将花费更少的时间。
此外,由于我们的团队采用了微前端方法,我们一直被激励去尝试新技术、库和框架。事实上,每当您必须在应用程序中移植一个新部分时,您都可以决定采用全新的技术堆栈。这是学习如何使用市场上众多 JavaScript 框架的宝贵机会。
开发和部署变得更快 {#developmentanddeploymentbecomefaster}
另一个需要解决的重要方面是,通过采用微前端,我们作为一个团队的前端开发过程得到了极大的改进。主要原因是,与其让大型团队被迫处理不可避免的通信开销,我们现在是小型独立团队的一部分,同时致力于不同的功能,而不管实现细节如何。
可以想象,这也代表着在发布新功能方面向前迈出了一大步。原因是我们的开发过程有了很大的改进,主要原因是与大型单体软件相比,构建小型微前端更快更容易。因此,您的部署时间也将显着改善。事实上,每当团队完成一项功能的工作时,他们就可以在线部署它而无需等待。
换句话说,微前端应用程序基于独立团队同时处理独立功能。这不能不代表一个实现更高发布率的机会,特别是随着小团队数量的增加。
它使您的 Web 应用程序更易于维护 {#itmakesyourwebapplicationmoremaintainable}
如果您曾经处理过大型应用程序,您就会知道它们很容易变得难以维护,尤其是当它们是整体式的并且必然会变大时。另一方面,微前端基于分而治之的方法。这意味着,通过为您的 Web 应用程序选择这种架构,您可以使每个业务需求更易于测试和维护。
这是我们团队很快学到的东西。测试大型单体应用程序具有挑战性并且需要大量时间,我们都知道这一点。但是自从我们采用了微前端方法后,一切都变了。每个团队现在负责测试其开发的功能,这些功能远小于完整的前端应用程序。这加快了整个过程并使其更容易。因此,现在没有人害怕测试。此外,每个独立的团队现在都可以自由使用他们喜欢的测试工具和技术。
此外,处理小块意味着了解正在发生的事情的流程变得更加容易。这导致构建在许多小部件上的 Web 应用程序更可靠且在需要时易于维护。
它代表了前端开发的未来 {#itrepresentsthefutureoffrontenddevelopment}
根据2020 年微服务现状报告,24% 的开发人员使用过微前端。这意味着越来越多的公司正在利用这种方法的强大功能,并且预计在不久的将来会有几个流行的前端应用程序采用它。换句话说,微前端可能代表了前端开发的下一步。
我的团队有机会解决这个问题,我毫不怀疑它代表了单体式前端开发方法的自然演变。另一方面,它仍然是一项相对较新且有些不成熟的技术,还有很长的路要走。这也是为什么存在应该讨论的缺点(例如一些微前端实现导致依赖项重复)。我们将在下一篇文章中介绍这些。
与此同时,Web 应用程序也在不断发展,我和我的团队敢于说微前端是前端开发的自然进化。
结论 {#conclusion}
在本文中,我们根据我和我的团队两年来每天使用微前端架构方法的经验,研究了采用微前端架构方法的五个最重要的原因。微前端方法允许您将前端应用程序拆分为彼此独立的小块。
虽然不如后端开发中使用的微服务架构流行,但其背后的想法几乎相同。微前端架构现在成为趋势并不奇怪,它可能代表了前端开发的自然演变。这也是为什么知道它是必不可少的,而现在学习采用它的主要原因是本文所要讨论的。
谢谢阅读!希望这篇文章对您有所帮助。随意接触到我的任何问题,意见或建议。