您应该采用微前端架构的 5 个理由

微前端架构 Single-SPA:作为最早的微前端框架之一,它提供了基础的加载器和路由托管功能,但本身不包含沙箱隔离机制。qiankun:由阿里团队开发,基于single-spa,它不仅简化了子应用的接入方式,还实现了JS沙箱和CSS隔离,提供了更加完善的微前端解决方案。Micro-App:京东推出的框架,采用Web Component技术实现微前端,它通过组件化思维简化了微前端的实现,降低了技术门槛。 阅读详情

微前端是一种前端开发的架构方法,已经变得越来越流行。这很容易代表前端 Web 开发的未来,这就是为什么了解这种架构可以为您的应用程序和开发团队带来的主要好处至关重要的原因。

我和我的团队已经使用这种方法两年了,现在是时候分享我们所学到的一切,以及为什么你应该开始考虑在下一个项目中使用它的最重要原因。

让我们首先研究一下微前端架构是什么,然后深入探讨现在采用它的五个理由。

什么是微前端架构?

在过去的几年里,IT 公司已经开始将大型软件分解成更小、更易于管理的块。这种方法背后的想法是拥有许多可以独立开发、测试和部署的服务。

这就是微服务架构与后端开发相关的内容。但是同样的方法也可以应用于前端开发,它被称为微前端架构。在Martin Fowler 的官网上,微前端的做法是这样定义的:

一种架构风格,将可独立交付的前端应用程序组合成一个更大的整体。

由于传统的单体方法带来的众所周知的缺陷,这种前端 Web 开发的架构方法变得越来越流行。这主要是因为前端软件趋于快速增长,当使用单体架构时,一切都变得更加难以维护。

另一方面,微前端使您能够实现不那么复杂和繁琐的架构。特别是,借助微前端方法,您可以将整个应用程序拆分为小的独立部分。然后,它们中的每一个都可以由不同的前端团队实现,甚至可以使用不同的技术实现。这确保了与后端微服务架构相同的可扩展性、灵活性和适应性。此外,这种方法允许您在同一网页上混合使用库或不同框架开发的微前端组件。

因此,微前端现在已成为 IT 社区的一种趋势,并且这种方法正被越来越多地采用,这不足为奇。

微前端架构

今天选择微前端的 5 个好处

使用微前端进行开发教会了我这种前端开发方法的真正优势是什么。

现在,让我们看看使用它的五个最相关的原因,以我作为一名使用微前端超过两年的前端开发人员的经验为后盾。

为了创造一个平衡的画面,这篇文章之后将有另一篇文章介绍微前端带来的最重要的五个陷阱。

扩展到多个团队

我工作的团队由具有不同背景和技能的开发人员组成。有些是React、其他Vue.js或Angular方面的专家。有些人喜欢用JavaScript 编写代码,有些人喜欢用TypeScript编写代码。最初,这代表了一个障碍。唯一的解决方案是找到共同点,尽管这种选择会迫使一些开发人员学习新技术并失去他们的专业知识。因此,我们寻找解决方案并决定采用微前端架构方法。

多亏了这一点,我们才能将原始团队分成多个团队,每个人都可以发挥自己的最佳表现。这是因为不同的团队可以根据他们必须处理的业务逻辑在架构、测试和编码风格方面做出最佳决策。此外,这种方法固有地导致代码和样式隔离,使每个团队独立于其他团队。

就最终结果而言,微前端也很有帮助。这是我们团队在完全采用这种方法后所学到的。事实上,拥有多个可以自由使用他们喜欢的技术的小团队意味着他们在本质上受到的限制更少,因此更有动力编写更高质量的代码。

采用不同的技术栈

由于微前端由小而独立的部分组成,因此它们中的每一个都可以使用不同的技术堆栈来实现。这是一种难以置信的强大力量。首先,因为起始团队可以根据特定技术堆栈的专业知识分成许多小团队,这也尊重单一责任原则。其次,由于同一个项目将使用许多技术堆栈,因此雇用新开发人员变得更加容易。

此外,微前端方法实际上消除了对特定技术的锁定现象,或者至少大大减少了这种现象。这是因为您的团队始终可以决定选择新的技术堆栈,而无需翻译之前开发的内容。此外,微前端架构所包含的每个块肯定都比前端单体小,将其转化为新技术将花费更少的时间。

此外,由于我们的团队采用了微前端方法,我们受到激励去尝试新技术、库和框架。事实上,每当您必须在应用程序中移植新部分时,您都可以决定采用全新的技术堆栈。这是一个学习如何使用市场上众多 JavaScript 框架的宝贵机会。

开发和部署变得更快

另一个需要解决的重要方面是,通过采用微前端,我们作为一个团队的前端开发过程得到了极大的改进。主要原因是,我们不再让大型团队被迫处理不可避免的通信开销,而是成为较小的独立团队的一部分,同时处理不同的功能,而不管实现细节如何。

可以想象,这也代表着在发布新功能方面向前迈出了一大步。原因是我们的开发过程改进了很多,主要原因是构建小型微前端比大型单体软件更快、更容易。因此,您的部署时间也将显着改善。事实上,每当团队完成一项功能的工作时,他们都可以在线部署它而无需等待。

换句话说,微前端应用程序基于同时处理独立功能的独立团队。这不能不代表着实现更高发布率的机会,特别是随着小团队数量的增加。

它使您的 Web 应用程序更易于维护

如果您曾经处理过大型应用程序,就会知道它们很容易变得难以维护,尤其是当它们是单片的并且必然会变得很大时。另一方面,微前端基于分而治之的方法。这意味着,通过为您的 Web 应用程序选择这种架构,您可以使每一个业务需求更容易测试和维护。

这是我们团队很快学到的东西。测试大型单体应用程序具有挑战性并且需要大量时间,我们都知道这一点。但是自从我们采用了微前端方法之后,一切都变了。现在每个团队都负责测试其开发的功能,这些功能远小于完整的前端应用程序。这加快了整个过程并使其更容易。因此,现在没有人害怕测试。此外,每个单独的团队现在都可以自由使用他们喜欢的测试工具和技术。

此外,处理小块意味着了解正在发生的事情的流程变得更实惠。这导致构建在许多小部件上的 Web 应用程序更可靠,并且在需要时易于维护。

它代表了前端开发的未来

根据2020 年微服务状态报告,24% 的开发人员使用过微前端。这意味着越来越多的公司正在利用这种方法的力量,并且预计一些流行的前端应用程序将在不久的将来采用它。换句话说,微前端可能代表前端开发的下一步。

我的团队有机会处理这个问题,我毫不怀疑它代表了前端开发的单体方法的自然演变。另一方面,它仍然是一项相对较新且有些不成熟的技术,还有很长的路要走。这也是为什么有一些缺点需要讨论的原因(例如一些微前端实现导致依赖项重复)。我们将在下一篇文章中介绍这些。

与此同时,Web 应用程序也在不断发展,我和我的团队并不害怕说微前端是前端开发的自然演变。

结论

在本文中,我们根据我和我的团队两年来每天使用微前端架构方法所积累的经验,探讨了采用微前端架构方法的五个最重要的原因。微前端方法允许您将前端应用程序拆分为彼此独立的小块。

 虽然不如后端开发中使用的微服务架构流行,但其背后的思想几乎是一样的。微前端架构现在成为趋势并不奇怪,它可能代表了前端开发的自然演变。这也是为什么知道它是必不可少的,学习现在采用它的主要原因是本文的内容。

如果对Python有兴趣,想了解更多的Python以及AIoT知识,解决测试问题,以及入门指导,帮你解决学习Python中遇到的困惑,我们这里有技术高手。如果你正在找工作或者刚刚学校出来,又或者已经工作但是经常觉得难点很多,觉得自己Python方面学的不够精想要继续学习的,想转行怕学不会的, 都可以加入我们,可领取最新Python大厂面试资料和Python爬虫、人工智能、学习资料!微信公众号【Python大本营】等你来玩奥~

【微前端】ReactJS实现微前端的代码架构 微前端是一种构建Web应用程序的架构方法,涉及将单块前端拆分为更小、更易管理的组件。这些更小的组件称为微前端,可以独立开发、测试和部署。这种方法对于大型复杂应用程序特别有用,因为它允许不同团队在不干扰彼此的情况下处理前端的不同部分。 阅读详情

相关推荐

基于qiankun的微前端架构实践

本文分享了基于qiankun的微前端实践方案,通过React主应用集成Vue/React子应用,实现多技术栈协同开发。主应用负责整体布局和子应用管理,使用qiankun的registerMicroApps注册子应用,并通过全局状态管理实现主-子应用通信。子应用需导出bootstrap、mount、unmount生命周期函数,并配置webpack为UMD格式输出。该架构支持独立开发和部署,同时保持用户体验一致性,有效解决了大型前端应用的模块化拆分与整合问题。

Zhencode的博客 1979

这5个理由告诉你为什么要采用微前端架构

微前端是一种前端开发的架构方法,已经变得越来越流行,这也预示着它很可能代表 Web 开发的未来。所以学习这种架构带来的好处对你的应用程序和开发团队是不言而喻的。

pantouyuchiyu的博客 303

基于 React.js 的前端微前端架构

随着前端应用日益复杂化,传统的单体前端架构面临着维护困难、团队协作效率低下、技术栈升级成本高等诸多挑战。微前端架构应运而生,它借鉴了微服务的思想,将大型前端应用拆分为多个独立开发、独立部署的小型应用。微前端的基本概念和核心原则React.js 在微前端架构中的优势和适配方案主流微前端框架的技术实现对比实际项目中的架构设计和最佳实践微前端架构的性能优化和团队协作策略首先介绍微前端的基本概念和 React.js 的适配性然后深入分析微前端的核心实现原理和技术方案。

小白菜的博客 1048

你可能并不需要微前端

去年看到社区里一些关于微前端的讨论时,就想写篇文章梳理一下自己的观点,后来因为种种原因搁置了(主要是懒)。今天在微信群中看到又有不少人谈起微前端,虽遗憾错过了讨论,但也勾起了自己的表达欲。...

小生方勤 201

5.4 磁悬浮轴承控制系统仿真:在MATLAB/Simulink中搭建包含功放、传感器模型的闭环系统模型,进行稳定性与动态性能仿真

磁悬浮轴承控制系统仿真方法 摘要:磁悬浮轴承控制系统仿真需建立包含转子动力学、传感器、控制器、功率放大器和电磁执行器的高保真非线性模型。通过MATLAB/Simulink搭建闭环系统,重点建模传感器带宽限制与噪声、功放饱和特性以及电磁力非线性。仿真分析包括时域阶跃响应、扰动抑制测试,频域稳定性分析(伯德图、奈奎斯特图),以及参数摄动下的鲁棒性验证。关键要验证控制算法在非线性因素影响下的稳定性和动态性能,为实际系统实现提供可靠依据。仿真中需特别注意物理量单位一致性和数字控制离散化效应。

技术工作者 1108

Buck的振铃实验与分析

上上期我们提到了buck电路的开关的振铃波形,本质原因是LC的阻尼振荡。文章偏理论,那BUCK到底是怎么产生尖峰振荡呢? 要想把这个问题搞清楚,也很是不容易,所以文章有点长,请直接点赞转发加收藏。 问题 本期主要分析以下这两个问题: 1、死区时间是什么?这里有个小台阶是什么情况? 2、上下尖峰振荡是如何产生的?跟哪些因素有关? 理想的BUCK的SW波形 我们由浅入深,一步一步来,先看理想的开关SW波形—没有尖峰电压的波形。 为了能更好的看buck电路各个点的电压电流情况.

weixin_42005993的博客 3万+

微前端架构设计:从理论到实践的全面指南

在传统的单体前端架构中,整个应用由一个代码库组成,所有功能模块紧密耦合。代码库庞大:单一代码库可能包含数十万行代码,构建和部署耗时长。团队协作困难:多个团队同时开发,代码冲突频繁,合并成本高。技术栈限制:难以在不同模块中使用不同的框架或技术版本。迭代速度慢:新功能上线需要整体回归测试,发布周期长。可维护性差:老旧代码与新功能混杂,重构成本高。

2401_86373285的博客 1268

【AI实战派】从零部署YOLOv8:香橙派AIpro边缘端目标检测全流程解析

本文详细解析了在香橙派AIpro边缘设备上从零部署YOLOv8目标检测模型的全流程。内容涵盖硬件开箱、环境搭建、模型转换(ONNX到昇腾OM格式)以及编写Python推理脚本,并提供了性能优化与实战技巧,帮助开发者高效实现实时边缘AI应用。

weixin_29183637的博客 332

简单聊聊微前端

微前端不是一个框架,也不是一种技术,它是一种架构。把一个庞大的应用,按一定的规则切分成一系列可以单独部署的松耦合应用,再通过基座将这些应用组合成单个面向用户的应用程序。通常,项目有不同大小的体积和不同的要求,如果你的项目很简单,只有简单的一些页面,一个团队可以全部搞定,那完全没有必要使用微前端,市面上有许多框架可以快速完成这个项目开发。但是,如果你的应用,是另一个大应用的其中一个子应用或者你的应用包含很多由多个不同的团队负责的功能,那么你就可以考虑一下使用微前端。

一群专业码农的笔记本 1452

基于sklearn实现LDA主题模型(附实战案例)

目录LDA主题模型1.LDA主题模型原理2.LDA主题模型推演过程3.sklearn实现LDA主题模型(实战)3.1数据集介绍3.2导入数据3.3分词处理 3.4文本向量化3.5构建LDA模型3.6LDA模型可视化 3.7困惑度 其实说到LDA能想到的有两个含义,一种是线性判别分析(Linear Discriminant Analysis),一种说的是概率主题模型:隐含狄利克雷分布(Latent Dirichlet Allocation,简称LDA)。 现在讨论的是主题模型

m0_64336780的博客 2万+

基于STM32、HAL库的MICRF112YMM-TR 无线收发器驱动程序设计

内部集成了 VCO、PLL、PA、LNA、混频器、滤波器等射频功能单元,极大减少了外部元件数量,降低了设计和布线难度。: 具有多种工作模式(睡眠、待机、接收、发射),待机电流极低,非常适合电池供电的物联网(IoT)设备。是 Microchip 公司生产的一款高性能、低功耗的单片 UHF ASK/FSK 收发器芯片。: 支持 ASK (幅移键控) 和 FSK (频移键控) 调制,适应不同应用需求。// 可以添加其他配置参数,如中心频率、数据速率等。智能家居(安防、遥控、传感)远程钥匙进入系统 (RKE)

corlin6688的博客 419

谈谈微前端

是一种架构理念,它将较大的前端应用拆分为若干个可以独立交付的前端应用。在合理拆分应用的前提下,微前端能降低应用之间的耦合度,提升每个团队的自治能力。另外,在保证子应用和主应用同源的前提下,将子应用的路由变化同步到主应用中,从而保证刷新页面后,路由地址正常。开发,可以天然契合微前端的一些特性:技术栈无关,应用间隔离。方案引入子应用的好处是浏览器兼容性强,接入成本低,样式及脚本天然隔离。,实现运行时依赖共享的能力。的宿主环境,可以采用快照的思路:对进入子应用前的。合理划分应用,可以避免频繁的跨应用通信。

楠姐的博客 801

AI自瞄原理剖析(一)屏幕内容循环截取及代码实现

尽管Yolo框架在推理时其实是可以输入不同大小的图片的,但这些作者大多不会去处理图像尺寸的改变,所以目前大部分开源源码主要是以输入320或者640尺寸的图像为主。只要截图的效率足够快,能够满足一秒采集60张图片,也就是稳定的截图速度达到60帧以上,那么就可以实现内存级别的AI锁死自瞄效果。这里强调了截图速度对于最终实现特定自瞄效果的重要性,只有达到这样的速度标准,才能让整个自瞄相关的功能在内存层面有效地运作起来。在实现自瞄功能的情境下,只需要以游戏准星为中心向外的正方形区域图像就够了,没必要进行全屏截取。

代码简单说 Vue、JAVA、PHP、Node.js 熟练运用,接口、架构、性能全搞定。 1100

【架构】微前端

微前端是一种类似于微服务的架构,它将微服务的理念应用于浏览器端,即将单页面前端应用由单一的单体应用转变为把多个小型前端应用聚合为一的应用。各个前端应用还可以独立开发、独立部署。 微前端架构旨在解决单体应用在一个相对长的时间跨度下,由于参与的人员、团队的增多、变迁,从一个普通应用演变成一个巨石应用(Frontend Monolith)后,随之而来的应用不可维护的问题。这类问题在企业级 Web 应用中尤其常见。

欢迎指错||纠正||建议||水评+点赞&&评论&&关注&&转发 1975

精度0.01%决定续航多20km|新能源汽车研发测试:功率分析仪到底有多硬核?

新能源汽车测试、功率分析仪、电驱系统、效率MAP、谐波THD、GB/T18488、CLTC工况、三电测试、台架标定、能量流分析。中的核心作用,用公式、思维导图、实战金句与避坑指南,帮研发测试人员把准数据、提效率、降返工,看完就能落地用。点击关注,进公众号主页查看历史文章,**台架接线图、效率MAP模板、GB/T18488测试清单等。优化弱磁/调制策略,高效区占比提升5%,CLTC续航直接+8~20km。同样工况,两次数据差0.8%,报告根本没法交。结果:数据飘、定位慢、反复返工、认证不过。

优快云-新能源汽车研发测试专业博主 174

【QNX Hypervisor 2.2 用户手册】2.6 处理qvm终止

你可以注册通知,以在qvm进程实例退出时得到通知。这样你就可以采取相应的措施来响应这种终止事件。

从0到1,突破自己 1108

微前端架构初探以及我的前端技术盘点

前言最近几年微前端一直是前端界的热门议题, 它类似于微服务架构, 主要面向于浏览器端,能将一个复杂而庞大的单体应用拆分为多个功能模块清晰且独立的子应用,且共同服于务同一个主应用。各个子...

趣谈前端 7773

Devexpress16.2.6破解工具

Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具

微前端架构详解

了解后端开发的同学应该听说过微服务架构,而微前端和微服务是一个道理,都是通过拆分单体应用程序为独立的、可以独立开发、部署和运行的小型应用来提高可维护性和团队的灵活性。独立开发和部署: 微前端允许不同的团队独立地开发和部署其部分,而不会干扰其他部分的开发和部署。独立运行时: 每个微前端部分都有自己的运行时环境,可以独立运行,也可以被组合成完整的应用程序。松耦合: 微前端的部分之间应该是松耦合的,彼此不依赖于具体的实现细节,可以用不同的技术栈实现。集成。

qq_43774332的博客 1728

lwip-2.0.3

lwip是瑞典计算机科学院(SICS)的Adam Dunkels 开发的一个小型开源的TCP/IP协议栈。实现的重点是在保持TCP协议主要功能的基础上减少对RAM 的占用。

霍尼韦尔SoftMaster使用说明

霍尼韦尔SoftMaster使用说明

前端架构--从入门到微前端

年中,自己做规划(2019Thinking(上) – 一个前端开发者的个人思考)时,考量了一段时间「微前端」,也关注到了《微前端的那些事儿》的文章,从而了解了作者「黄峰达」,也就购买了下面将要聊的书《前端架构:从入门到微前端》 本书围绕前端架构的实施,从基础的架构规范,到如何设计前端架构,再到采用微前端架构拆分复杂的前端应用。 设计:架构设计的模式,以及设计和制定前端工作流 基础:通过深入构...

李刚的学习专栏 5308

一文读懂微前端架构

转载本文请注明出处:微信公众号EAWorld前端开发在程序猿中无疑是一个比较苦逼的存在,作为一个前端开发,你必须要掌握Javascript,HTML,CSS这三大基础。Javascript...

低代码开发,数据,中间件,企业架构原创技术分享 1134

【前端架构】微前端架构设计

一、微前端 微前端架构 应用自治 单一职责 技术栈无关 为什么需要微前端 遗留系统迁移 后端解耦,前端聚合 热闹驱动开发 二、微前端的技术拆分方式 路由分发式:通过HTTP服务器的反向代理功能,将请求路由映射到对应的应用上 前端微服务化:在不同的框架之上设计通信和...

881

生产可用:是时候来一个微前端架构了!

微前端的场景域 在选择一个微前端方案之前,常常需要思考这样一个问题,我们为什么需要微前端。通常对微前端的诉求有两个方面,一是工程上的价值,二是产品上的价值。 对于工程上的价值,可以从一个三年陈的项目来看,如下所示, commit 的记录显示,第一次提交是 2016 年 8 月。 依赖树 dependencies: 打包体积: 虽然这个三年陈的项目看上去版本比较低,但仍然是相对主流的...

阿里云开发者 2652
上一篇: 快速提示:了解 Python 中的 Yield 关键字
下一篇: 面向 Java 人员的 Python
程序员孔乙己
博客等级 码龄5年 1190粉丝 81原创
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值