AICon 上海站|90%日程已就绪,解锁Al未来! 了解详情
写点什么

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

  • 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:035232
用户头像

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

关注

评论 2 条评论

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

揭秘环境管理 Noah 的技术实现

Qunar技术沙龙

测试 Dev QA 环境 资源池

微信小程序图片流&本地图片转base64处理方案

页面仔小杨

微信小程序

烂大街的Spring循环依赖该如何回答?

Java spring 程序员 架构 面试

迅雷不及掩耳盗铃

escray

生活记录 8月日更 搜房记

LeetCode题解:28. 实现 strStr(),暴力法,JavaScript,详细注释

Lee Chen

算法 大前端 LeetCode

写作——开启技术成长之路

神策技术社区

程序员 写作 日志

小米和网易两位资深工程师联合编写的HBASE原理与实践PDF

公众号_愿天堂没有BUG

Java 编程 程序员 架构 面试

膜拜!终于拿到了美团大佬分享的Netty源码剖析与应用PDF

公众号_愿天堂没有BUG

Java 编程 程序员 架构 面试

大数据实战训练营-sparkcore作业

Clarke

新思科技推出Rapid Scan新功能帮助开发团队在编写云原生应用的同时确保安全性

InfoQ_434670063458

新思科技 静态应用安全

80W美团架构师整理分享出了Spring5企业级开发实战文档

公众号_愿天堂没有BUG

Java 编程 程序员 架构 面试

2021 年 8 月国产数据库排行榜:秋日胜春朝

墨天轮

数据库 TiDB oceanbase 国产数据库 达梦

架構實戰營 - 畢業設計

Frank Yang

架构实战营

从 FFmpeg 性能加速到端云一体媒体系统优化

阿里云CloudImagine

开源 ffmpeg 视频处理 视频流 视频云

神策分析 Web JS SDK 功能介绍

神策技术社区

程序员 代码 埋点

小布助手在面向中文短文本的实体链指比赛中的实践应用

OPPO小布助手

人工智能 算法 模型训练 智能助手 短文本

阿里专家分享的SpringCloudNginx高并发核心文档

公众号_愿天堂没有BUG

Java 编程 程序员 架构 面试

FL Studio基本功能介绍

懒得勤快

神策 Android 全埋点插件介绍

神策技术社区

程序员 数据分析 埋点

书单 | 无所不能的Python,从技术到办公,总有一款适合你!

博文视点Broadview

Golang高并发:生产者消费者模型

Regan Yue

Go 语言 8月日更 生产者消费者模型

“人人皆可成为AI开发者”!百度世界大会官宣百度松果学堂成立

百度大脑

人工智能

阿里专家分享内部绝密RocketMQ核心原理与最佳实践PDF

公众号_愿天堂没有BUG

Java 编程 程序员 架构 面试

MySQL information_schema 系统库介绍

Simon

MySQL

spring-boot 2.5.4,nacos 作为配置、服务发现中心,Cloud Native Buildpacks 打包镜像,GitLab CI/CD

Zhang

gitlab nacos CI/CD spring-boot 2.5.4 CNB

神策分析 iOS SDK 代码埋点解析 | 数据采集

神策技术社区

程序员 数据 代码 埋点

Android SDK 之用户路径采集

神策技术社区

数据 路径规划 分析 行为数据

其实TCP聪明得很!详解TCP常见的五个异常处理场景

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

TronChain波场链智能合约开发详情|智能合约DAPP搭建

量化系统19942438797

智能合约 波场链

4轮技术面+1轮HR面,成功拿到腾讯40k*16的Offer ,详解面试流程和真题解析

Java 程序员 架构 面试

iOS SDK 架构解析

神策技术社区

程序员 数据 埋点

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