报名参加CloudWeGo黑客松,奖金直推双丰收! 了解详情
写点什么

微前端是否值得开发者采用?

  • 2020-08-04
  • 本文字数:2410 字

    阅读完需:约 8 分钟

微前端是否值得开发者采用?

在前端 Web 开发中,微前端(microfrontends)是一个备受争议的话题。它是否值得开发者采用?面对如此之多的神奇案例,人们无法否认微前端正日益流行这个事实。本文将探究微前端的具体使用场景和使用群体 ,并给出能快速轻松上手的现有解决方案。

什么是微前端?

微前端将大规模的后端系统切分为很多面向前端的微服务,力图实现一定程度的改进。


这里的主要问题是, 各个部分总是作为一个整体被使用和体验的。


用户体验(UX)是由前端直接负责的,因为后端系统从来不会被直接整体访问。


该问题存在多种解决方案。最简单的做法是将现有 API 的数据交换模型替换为 HTML 输出。只需一个超链接即可实现服务(视图)间的跳转。尽管这种解决方案是有效的,但缺点是在很多情况下并不能提供用户所需的 UX。



分布式 Web 应用的演进


显然,要将那些各自独立的较小 UI 部分聚合为一个整体的前端,需要的是一些更为复杂的解决方案。这应视为分布式 Web 应用演进的下一步。


一个重要的问题是,如何理解微前端与组件和模块的关系。事实上,组件、模块、微前端等概念,都是以构建单元的形式实现可重用性和所承担的功能。它们之间的唯一差别是所处的层级不同,具体而言:


  • 组件是底层 UI 库的构建单元;

  • 模块是相应运行时的构建单元;

  • 软件包是依赖解析器的构建单元;

  • 微前端是当前应用的构建单元。


如上,微前端可视为组成人体的各个器官,软件包则对应于组成各器官的细胞,而模块就是分子,组件对应于原子。

为什么要使用微前端?

使用微前端的原因多种多样, 常见的原因多是技术性的 ,但往往有现实的商业用例(或者提升 UX 的用例)在背后提供支持。


究其根本,微前端解决方案可提供如下特性:


  • 单个前端部分可独立开发、测试和部署;

  • 无需重新构建即可添加、移除或替换单个前端部分;

  • 不同的前端部分可使用不同的技术构建。


由此可见,微前端主要实现了解耦。在应用到达一定规模后,微前端就有了用武之地。其中一个潜在优点是, 它支持组织分割为更多团队,乃至创建更小的全栈团队。



微前端对全栈团队的支持


微前端在如下场景中将更发挥更大作用:


  • 多个团队贡献同一个前端

  • 一些独立的部分需由特定的用户或团队激活、 终止激活或 roll out

  • 需支持外部开发人员对 UI 进行扩展

  • UI 的特性集每日/每周都在增长,并不会影响系统其它部分

  • 不论应用如何增长, 都需要维持恒定的开发速度

  • 支持不同团队使用不同的开发工具

微前端的使用者

目前,微前端得到越来越多企业的积极采纳,下面给出部分最新列表:


  • 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 服务提供商。还有更多传统企业已经押注微前端,典型实例就是德国的隐形巨头 Hoffmann 集团。


Hoffmann 集团很好地展示了微前端并不需要多么大型的团队,也不需要占用多少内部资源。该集团与多家服务提供商有业务往来,这是其选择微前端的一个重要因素。

实例:微前端及所使用的组件

Bit.dev平台及其市场营销网站均使用 React 组件构建,并且由 Bit 自身维护。


用户在浏览网站查看其“原生服务”时,可停留在不同组件上。点击位于组件上方的名字,即可查看组件详情,进而安装到用户项目中。



构建该页面的组件,基于 GitHub 上两个不同的代码库,“ base-ui”( 在Bit上的访问位置)和“ evangelist”( 在Bit上的访问位置)。



base-ui代码库使用 Bit 发布,实现设计系统。 evangelist代码库用于市场营销页面,其中使用了 base-ui 提供的一些组件,以在不同 MF 之间保持统一的观感。


在此, Bit不仅用于自动交付特性,而且用来在不同微前端间维护一致的 UI。

如何构建微前端?

这个 问题没有确切答案。和微服务一样,并不存在适用于所有人的单一方法,也没有已确立的业界标准。


相比微服务实现,微前端不仅在实现细节上存在差异,而且在所有的细枝末节上均有所不同。因此需要区分主要使用场景。一些服务端框架也支持客户端组装,反之依然。

客户端框架

客户端微前端的可选择范围很广。其中部分支持服务端渲染。



客户端构成


下列框架实现了这种( 或类似 的)模式:


服务端框架

服务端框架有多种选项。但其中一些只是用于 express 的软件库或框架;还有一些以服务形式提供,需加载到用户的基础架构中。



服务端构成


下列框架实现这种( 或类似 的)模式:


Helper 库

还可考虑一些帮助(helper)库。这些帮助库或是提供共享依赖、路由事件的基础架构,或是将不同的微前端及其生命周期组织起来 。


下例通过 Import Maps 或打包特定 Chunk 实现对共享依赖的处理



使用 Import Maps 共享依赖。


下面的库可用于削减模板代码:


微服务的下一步发展

虽然 有些人觉得 Module Federation 之类的帮助库很好用 ,但多数人还是会继续用原来的解决方案 。好的一面是,有很多不受大厂商控制的框架可以用来轻松编写代码 。但至少从技术上看,微前端依然缺少便于解决方案互通的通用标准。


另一个问题是,微前端的社区接受度和采用率仍显不足。


尽管微前端模式已经有一定知名度,但是社区中大多数人仍对其存疑。


究其原因,其一是微服务被视为一种后端设计的最佳实践和标准,但并未当作是一种新的, 可用于特定场景的工具。显然这并不是人们当初想的那样,所以微前端也不应该被视为灵丹妙药。

小结

微前端现有解决方案的可用数量及其在全球许多项目中的用途都发出了强烈的信号:微前端已经随时可以使用!我建议,在实际开始大型/生产级项目之前, 先考察各种模式和解决方案。


我想了解大家的观点及原因,对微前端持喜爱、可容忍态度,还是弃若敝屣?


英文原文:


The State of Micro Frontends


2020-08-04 14:035194
用户头像

发布了 391 篇内容, 共 142.3 次阅读, 收获喜欢 257 次。

关注

评论 2 条评论

发布
用户头像
说了什么现状....
2020-08-05 15:04
回复
用户头像
交互设计工具,可以直接通过模板直接生成代码,然后部署到云上。进一步拉近业务和市场的距离。
2020-08-04 14:50
回复
没有更多了
发现更多内容

“阿里巴巴”再次出手,这份Github新开源303页Spring全家桶高级笔记,让你打开眼界

热爱java的分享家

Java 架构 面试 程序人生 编程语言

制作 Flask 程序容器镜像

wong

Python flask k8s Dockerfile

Python爬虫采集,中介网互联网网站排行榜, 样本数量:58341

梦想橡皮擦

11月日更

uniapp+若依 开发租房小程序

詹Sir

大前端

​Qt全球峰会2021中国站深入解读最新Qt 6.2长周期版本,助力企业数字化转型

.NET6 引入Autofac

面向对象的猫

.net6 快速上手.net6

轻松搞懂MySQL的执行计划,再也不怕SQL优化了

华为云开发者联盟

MySQL 数据库 sql 执行计划 检索

肝!Spring JDBC持久化层框架“全家桶”教程

热爱java的分享家

Java 架构 程序人生 编程语言 架构师

有一说一,阿里内部SpringBoot王者晋级之路全彩小册开源,让我开了眼

热爱java的分享家

Java 架构 面试 程序人生 编程语言

熵简技术谈 | 熵简科技在资管数据中台的探索与实践

熵简科技

数据挖掘 数据库 大数据 数据中台 数据分析

SCTL 涅槃重生:投入 RAL 的怀抱

SphereEx

Java 数据库 大前端 ShardingSphere SCTL

问题也许没有看上去那么简单

神策技术社区

神策数据

基于MySQL binlog日志,实现Elasticsearch近实时同步实践

热爱java的分享家

Java 架构 程序人生 编程语言 经验分享

Python量化数据仓库搭建系列1:数据库安装与操作

恒生LIGHT云社区

量化投资

一周信创舆情观察(11.8~11.14)

统小信uos

鱼龙混杂的低代码市场,企业选型需关注哪些重点?

优秀

低代码 企业数字化转型

教你用SQL进行数据分析

华为云开发者联盟

Python sql 数据分析 数据 BI 分析工具

快速剪辑-助力度咔智能剪辑提效实践

百度Geek说

架构 后端

【等保】等保3.0是什么意思?有等保3.0吗?

行云管家

网络安全 等保 等级保护 等保2.0

想一个问题,在高并发中,如何部署奇数个节点?

热爱java的分享家

Java 架构 程序人生 编程语言 经验分享

一文读懂Hive数据存储格式

五分钟学大数据

11月日更

dart系列之:元世界pubspec.yaml文件详解

程序那些事

flutter dart 程序那些事 11月日更

元数据管理在数据仓库的实践应用

大数据技术指南

11月日更

更改Apollo数据库为oracle

小鲍侃java

11月日更

请说说RPC的一个请求的流程是怎么样的?

热爱java的分享家

Java 架构 程序人生 编程语言 经验分享

HBase shell get命令从二进制还原真实值

WindFlying

低代码——不应该只是玩具

行云创新

云原生 低代码 开发 高效

【混合云小知识】混合云四种形式简单说明

行云管家

云计算 公有云 私有云 混合云 云管理

SpringBoot+WebSocket实时监控异常

热爱java的分享家

Java spring 架构 程序人生 编程语言

【高并发】从源码角度深度解析线程池是如何实现优雅退出的

冰河

Java 并发编程 多线程 高并发 异步编程

论文解读丨LayoutLM: 面向文档理解的文本与版面预训练

华为云开发者联盟

CV 预训练 LayoutLM模型 无标注 文档理解

微前端是否值得开发者采用?_架构_Florian Rappl_InfoQ精选文章