微前端的现状和趋势 _前端

原作授权
翻译
微前端是前端开发最具争议的话题之一。值得吗？真的需要切分应用吗？真的需要现在就转向微前端吗？这是不是又一个咨询公司为了多赚钱发明出来的概念？
尽管人们对微前端多有误解，我们不能否认微前端日益流行这一事实。让我们看下谁在使用微前端，到底为什么用微前端，还有一些方便上手的现成解决方案。
微前端到底是什么
微前端试图把拆分大型后端系统的一些益处引入前端。
最大的问题在于部分总是被整体使用。
后端系统从不被整体使用，而前端直接为用户体验（UX）负责。
应对这一问题有很多方式。最简单的方式是把现有的 API 数据交换模型换成 HTML 输出，只需一个超链接就可以从一个服务（视图）转到另一个服务（视图）。缺点是在大多数使用场景下，这么做肯定无法满足用户体验方面的需求。

文章插图
显然，我们需要更复杂的方法，将单独开发的用户界面小组件组合成一致的前端界面。这可以算是分布式 web 应用演进的下一步。
微前端和组件、模块的关系是什么？这是一个好问题。这些概念都意味着通过拆分单元的方式让代码更易复用，更易归责。唯一的差别是层次不同：
因此，如果把微前端比作器官，那么包就相当于细胞，模块就相当于分子，组件就相当于原子。
为什么要用微前端
采用微前端的原因有许多种，经常主要是为了技术本身，不过，理想情况下，采用微前端是基于真实业务场景，或是出于改善用户体验的需要。
微前端方案的核心在于追求以下特性：
因此，微前端的精髓在于解藕。应用达到特定规模后，微前端开始变得有意义。其中一个好处是更多潜在的团队划分可能性，包括组建更小的全栈团队。

文章插图
在满足以下一项或多项条件时，微前端值得考虑：
谁在用微前端
有越来越多的公司正在使用微前端，包括：
这些公司使用微前端的具体方式各不相同，不过，使用微前端的意图大同小异。

文章插图
（上图来自 Luca ）
这个列表每天都在增长，从、HLC 这样的咨询公司到、这样的 SaaS 提供商。但是很多传统的公司也开始押注微前端。德国的隐形冠军霍夫曼集团就是其中的一个例子。
霍夫曼集团是一个很好的例子，微前端不需要非常大的团队，也不需要公司内部的资源。霍夫曼集团选择微前端的原因正是因为它们要和多个服务提供商打交道。
微前端组件的例子
Bit.dev 平台和营销网站都是基于 React 组件构建，管理 React 组件是通过……Bit 。
看看它们的页面。悬停在不同组件上会显示这些组件原本属于哪个组件集。点击组件名可以查看组件，甚至在你的项目中加入这一组件。

文章插图
这个页面是通过两个组件集中的组件构建的，这两个组件集对应上两个不同的代码仓库，base-ui (Bit.dev 页面) 和。

文章插图
base-ui 组件集起到了设计系统的作用。组件集中的组件（用于营销页面）使用了 base-ui 中的一些组件，以便在不同的微前端上保持统一的风格。
在这个例子中，Bit 既用于实现自主交付，也用于保持不同微前端的界面一致。