微前端的现状以及趋势

Florian Rappl 原作，授权 New Frontend 翻译。

微前端是前端开发最具争议的话题之一。值得吗？真的需要切分应用吗？真的需现在就转向微前端吗？这是不是又一个咨询公司为了多赚钱发明出来的概念？

尽管人们对微前端多有误解，我们不能否认微前端日益流行这一事实。让我们看下谁在使用微前端，到底为什么用微前端，还有一些方便上手的现成解决方案。

微前端到底是什么
微前端试图把拆分大型后端系统的一些益处引入前端。

最大的问题在于部分总是被整体使用。

后端系统从不被整体使用，而前端直接为用户体验（UX）负责。

应对这一问题有很多方式。最简单的方式是把现有的 API 数据交换模型换成 HTML 输出，只需一个超链接就可以从一个服务（视图）转到另一个服务（视图）。缺点是在大多数使用场景下，这么做肯定无法满足用户体验方面的需求。

前后端不分离 > 前后端分离 > 微服务 > 微前端

显然，我们需要更复杂的方法，将单独开发的用户界面小组件组合成一致的前端界面。这可以算是分布式 web 应用演进的下一步。

微前端和组件、模块的关系是什么？这是一个好问题。这些概念都意味着通过拆分单元的方式让代码更易复用，更易归责。唯一的差别是层次不同：

组件构成界面库。
模块构成相应的运行时。
包构成依赖关系。
微前端构成呈现的应用。
因此，如果把微前端比作器官，那么包就相当于细胞，模块就相当于分子，组件就相当于原子。

为什么要用微前端
采用微前端的原因有许多种，经常主要是为了技术本身，不过，理想情况下，采用微前端是基于真实业务场景，或是出于改善用户体验的需要。

微前端方案的核心在于追求以下特性：

前端各部分可以单独开发、测试、部署。
前端各部分的增加、移除、替换无需重新构建。
前端各部分可以采用不同的技术。
因此，微前端的精髓在于解藕。应用达到特定规模后，微前端开始变得有意义。其中一个好处是更多潜在的团队划分可能性，包括组建更小的全栈团队。

微前端和全栈团队

在满足以下一项或多项条件时，微前端值得考虑：

多个团队贡献前端代码
面向特定用户或用户组激活、关闭、推出前端的某一部分
允许外部开发者扩展用户界面
用户界面每天或每周都会加入新特性，同时又不能影响系统的其他部分
在应用增长的情况下保持开发速度恒定
不同团队能够使用自己的工具
谁在用微前端
有越来越多的公司正在使用微前端，包括：

DAZN
Elsevier
entando
Fiverr
Hello Fresh
IKEA
Bit.dev
Microsoft
Open Table
OpenMRS
Otto
SAP
Sixt
Skyscanner
smapiot
Spotify
Starbucks
Thalia
Zalando
ZEISS
…… 以及更多
这些公司使用微前端的具体方式各不相同，不过，使用微前端的意图大同小异。

使用微前端的公司

（上图来自 Luca Mezzalira）

这个列表每天都在增长，从 ThoughtWorks、HLC 这样的咨询公司到 SalesPad、Apptio 这样的 SaaS 提供商。但是很多传统的公司也开始押注微前端。德国的隐形冠军霍夫曼集团就是其中的一个例子。

霍夫曼集团是一个很好的例子，微前端不需要非常大的团队，也不需要公司内部的资源。霍夫曼集团选择微前端的原因正是因为它们要和多个服务提供商打交道。

微前端组件的例子
Bit.dev 平台和营销网站都是基于 React 组件构建，管理 React 组件是通过……Bit。

看看它们的页面。悬停在不同组件上会显示这些组件原本属于哪个组件集。点击组件名可以查看组件，甚至在你的项目中加入这一组件。

Bit.dev 截屏

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

base-ui 和 evangelist 的 Bit.dev 页面

base-ui 组件集起到了设计系统的作用。evangelist 组件集中的组件（用于营销页面）使用了 base-ui 中的一些组件，以便在不同的微前端上保持统一的风格。

在这个例子中，Bit 既用于实现自主交付，也用于保持不同微前端的界面一致。

如何构建微前端
很不幸，这个有趣的问题只有一个含混的答案：就像微服务一样，并不存在适用于所有人的单一方法，也没有业界标准。

不同于微服务，微前端引入了基本性的差异，而不仅仅是实现细节上的差异。所以，我们需要区分微前端的使用范围。一些服务端框架也允许客户端复合（client-side composition），不过，相反的情况也是成立的。

客户端框架
客户端微前端框架有很多，有些也同时支持服务端渲染。

客户端复合

以下框架实现了微前端模式（或类似微前端的模式）：

Piral
Open Components
qiankun
Luigi
Frint.js
服务端框架
服务端微前端框架也不少。有些不过是基于 express 的库或框架，但另一些框架则需要依托于你的基础设施。

服务端复合

以下框架实现了微前端模式（或类似微前端的模式）：

Mosaic
PuzzleJs
Podium
Micromono
辅助库
还有一些辅助库提供了一些基础设施，例如共用依赖、路由事件、组合不同的微前端及其生命周期。

下面是一个处理共用依赖的例子，利用了 import maps、chunk （webpack 内部使用的一个概念）之类的机制。

基于 import maps 共用依赖

下面这些库有助于减少模板代码：

Module Federation
Siteless
Single SPA
Postal.js
EventBus
微前端调研
我希望以后基于社区数据重新梳理一下这部分的内容。但我需要你们帮忙提供数据。

我用谷歌表单做了一份简单的调查表，应该能在 5 分钟之内填完。请帮忙扩散（比如通过 Twitter）。非常感谢！

调查到八月底截止，九月初会发表结果。

微前端的下一步
尽管有些人觉得微前端会集体转向模块聚合（module federation）之类的辅助库，大多数人仍将使用自研解决方案。好消息是在许多框架下很容易编写避开强供应商锁定的代码。不管怎么说，微前端缺少一个公共标准，方便在技术层面交换解决方案。

另外，目前微前端仍未被社区广泛接受和采用。

尽管微前端模式变得流行，社区中仍有很多人心存疑虑。

有一个原因是微服务并没有被视为面向特定场景的另一个工具，而是被视为设计后端时的一种最佳实践和标准。显然微服务不应该这么用。因此，微前端也不应该被视为银弹。

结语
微前端有许多现成的解决方案，许多项目也已经采用微前端，这是一个强烈的信号：微前端已就绪！我建议在开始一个具有一定规模的生产环境项目前，先调研下各种模式和方案。

我希望你喜欢这篇文章！我希望知道你持哪一方的观点及其原因。你喜欢微前端，可以容忍微前端，还是讨厌微前端？

微前端的现状以及趋势相关推荐

目前互联网的技术发展现状和趋势如何？
目前互联网的技术发展现状和趋势如何? 悬赏分:200 - 解决时间:2008-8-13 16:37 如ajax,flex,php,.net,jsp,前端开发,mvc什么的,都可以谈一下. 提问者: q ...
乾坤微前端_微前端架构初探以及我的前端技术盘点
前言最近几年微前端一直是前端界的热门议题, 它类似于微服务架构, 主要面向于浏览器端,能将一个复杂而庞大的单体应用拆分为多个功能模块清晰且独立的子应用,且共同服于务同一个主应用.各个子应用可以独立运 ...
前端dashboard框架_微前端在网易七鱼的实践
一.前言网易七鱼是提供围绕客户服务与智能营销的 SaaS 平台.在七鱼业务中,有在线系统.呼叫系统.机器人.工单系统.数据大屏等业务线,它们分布在两个业务端,管理端和客服端.这两个端的功能框架类似, ...
微前端在网易七鱼的实践
一.前言网易七鱼是提供围绕客户服务与智能营销的 SaaS 平台.在七鱼业务中,有在线系统.呼叫系统.机器人.工单系统.数据大屏等业务线,它们分布在两个业务端,管理端和客服端.这两个端的功能框架类似, ...
微前端概述(Micro Frontends) 以及相比单体应用，微前端能带来什么好处
原文地址好的前端开发很难. 扩展前端开发,让多个团队可以同时开发一个大型复杂的产品就更难了.在本文中,我们将描述将前端单体分解成许多更小.更易于管理的部分的最新趋势,以及这种架构如何提高处理前端代码 ...
关于前端开发 Framework Agnostic 和微前端的话题
1 What does it mean by Framework agnostic? 框架不可知一般意味着确切地说,即不可知或独立于任何框架. 举个例子,公司或产品团队经常处理以下优先事项: 通常在大 ...
2020年Web前端技术的三大趋势（干货）
总体来说,在2019年的大前端领域虽然并没有出现什么颠覆性技术.但是随着Flutter.WebAssembly.Serverless的广泛被运用和火爆发展还是超出了大家的预期,同时也让我们进一步看到了 ...
【报告分享】2020-2021视频号发展现状与趋势.pdf（附下载链接）
大家好,我是文文(微信号:sscbg2020),今天给大家带来LEAP于2021年3月份发布的干货报告<2020-2021视频号发展现状与趋势.pdf>,短视频赛道尤其是关注视频号的伙伴别 ...
当 Vite 遇上微前端
什么是微前端微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略. 微前端借鉴了微服务的架构理念,将一个庞大的前端应用拆分为多个独立灵活的小型应用,每个应用都 ...

微前端的现状以及趋势

微前端的现状以及趋势相关推荐

最新文章

热门文章