更好的微型前端和具有独立组件的设计系统MFEs介绍

229 阅读7分钟

为什么你应该停止使用为单体项目制作的工具和方法论来开发和协作模块?

从多个范围导入的独立组件,并以新的版本导出回来

微型前端和设计系统旨在解决不同的挑战。然而,正如你很快就会看到的,它们都因为同样的原因而存在缺陷。两者都是使用同样的不恰当的方法来开发和交付的,而这些方法只适合于单体项目。本文将探讨独立组件作为不良工具和实践的模块化替代方案,这些工具和实践本质上预设了一个单体设计。

独立组件是指独立开发和版本的组件和模块,并在远程 "范围 "内共享(后面会有更多的介绍)。它们是使用Bit编写和组成的。

独立组件都是单一_虚拟_单体的一部分。这意味着一个组件的更新将通过组件的CI传播到它的所有依赖组件(每个组件有自己的CI)。这使得项目内和项目间的协作变得简单而安全。

微型前台

MFEs是一种架构风格,旨在优化前端开发。它通过将前端分解成小的和解耦的代码库来实现。这些代码库更容易理解和维护。它们能够实现平行的独立构建和交付,以及自主工作的团队之间更有效的协作。

根据MFEs模式的不同类型,次要目标可能包括初始加载的更小的包(当集成MFEs在客户端运行时),增量更新,以及在一个应用程序中使用不同技术和框架的自由。

不是每个人都支持MFEs的

MFEs架构是一个有争议的架构,尽管它似乎主要是由于一个特定的用例,即在一个应用程序中整合不同的技术和框架。

那些反对它的人这样做是对的。对后端(即微服务)很有效的东西对前端来说并不那么好用,共享造型、全局状态、共享依赖性以及单个前端应用的其他全局属性。

事实上,MFEs,在大多数情况下,_需要_一种方式来共享代码和第三方库。否则,一个单一的前端应用程序看起来更像一个马赛克,而不是一个连贯的界面,它将包含许多重复的代码,并且很可能遇到只需要一个实例就能正常运行的库的错误(即像React、Redux等同行的依赖性)。

简而言之,多种技术意味着更多的维护和更高的运行时冲突概率(也就是生产中的bug 🙂)。一个好的MFEs架构是限制代码的重复,共享第三方库,并保持UI的一致性。

组件库/设计系统

设计系统通常以组件库的形式实现,以实现跨项目的代码重用和技术、设计模式、以及 "外观和感觉 "的标准化。

理想与现实之间的差距

组件库也有自己的缺点。它们在加速开发方面不是很有效,因为它们提供的是简单而相当抽象的组件(这样做是为了让它们尽可能的可组合)。

此外,它们经常执行的意见对托管项目来说是不够的,以至于建设该项目的团队宁愿根本不使用它们。这反过来又降低了设计系统在一个组织中被采用的水平,并为代码重复和完全缺乏标准化的各种麻烦打开了大门。

解决方案:独立组件

对于MFE和DS所带来的挑战,可以用独立组件和Bit来解决。

独立组件是指独立开发、版本控制和协作的组件。它们可以是JavaScript模块、React组件、React钩子、CSS模块等。

最重要的是,独立组件虽然是分布式的,但它们之间形成了一个依赖网络。这个依赖关系网络被Bit使用,在更大的范围内,被Bit.dev使用,将一个CI从一个修改过的组件传播到它所有的依赖关系,在项目中和跨项目中。

独立的组件是在Bit工作区编写的,工作区提供了组件独立开发和版本管理所需的所有工具,只需最小的努力。这包括隔离渲染、预配置(和可扩展)的组件开发环境、自动生成的依赖图,以及更多。

在Bit的工作区UI中探索的一个 "下拉 "React组件。左图:该组件被单独呈现。右图:该组件的运行时依赖关系图。

一旦一个独立的组件发布了新的版本,它就携带了其运行环境的 "遗传密码",也就是其运行时的依赖图,以及其开发环境的 "遗传密码"。这包括组件的开发依赖性和它们的具体配置。

这意味着一个独立的组件可以被克隆到一个新的比特工作区,在那里它可以被开发,而不需要浪费任何时间来设置它的开发环境。

一个独立的组件包含其源代码、配置和工件的整个版本历史。

正如你可能已经猜到的,一个Bit工作区并不局限于一个单一的组件。这意味着,多个独立的组件,具有不同的开发环境和CI,都可以在一个工作区中一起开发和组成。

将IC用于设计系统和微观前台

独立组件使我们能够更认真地对待组件驱动的开发。我们可以用共享组件来组成我们所有的网络项目,从非常初级的项目,一直到非常大的复杂项目(即MFE和应用程序)。这使得微型前端、设计系统、甚至是组件和应用程序之间的边界几乎完全消失了。

一个由独立组件组成的网络的设计系统

一个独立的组件可以在设计系统/组件库中扮演一个组件的角色(因为它也提供一个自动生成的可分发的Node包)。

与传统的设计系统不同,这个由独立组件组成的网络,构成了 "设计系统",是无限的。更广泛的共享组件的选择使得这个 "设计系统 "在加速开发方面更加有效,因为这些组件的消费者可以准确地找到他们的新组合所需要的东西。这反过来又使标准化得到加强,只需要最小的调整来适应一个特定的项目(或一组项目)。

作为独立组件的微型前台

一个独立的组件也可以扮演一个微型前端的角色,因为它有自己的CI/CD。这意味着它不仅可以在构建时,而且可以在客户端运行时和服务器运行时被集成。也就是说,在大多数情况下,最好是在构建时集成MFE。这允许团队独立工作(可以说是MFE的主要目的),同时保持一个强大的应用程序,共享组件和库。

一个MFE组件不仅是作为一个独立的组件构建的,而且也是由独立的组件组成的。这意味着MFE之间的一致性是通过共享组件来维持的。而且,每当这些共享组件中的一个被更新时,所有的MFE也将被测试。这为整个(分布式)项目增加了稳健性,同时保持了优秀的用户体验。

总结

独立组件不只是另一种网络技术,而是一种完全的范式转变。它们从根本上改变了我们对网络开发的思考方式,并极大地改变了我们的合作方式。