编程知识 cdmana.com

微前端是什么,可以带来什么收益

本文将讲解微前端诞生的背景,详细解说微前端概念的缘由以及其深入理解,读完本文,相信你对微前端有一个比较全面的认知,明白它可以解决您团队以及整个企业什么问题,带来怎么样的收益。

转自掘金原文《微前端究竟是什么,可以带来什么收益》

本文将讲解微前端诞生的背景,详细解说微前端概念的缘由以及其深入理解,读完本文,相信你对微前端有一个比较全面的认知,明白它可以解决您团队以及整个企业什么问题,带来怎么样的收益。

一.背景

现在很多企业,基本在物理上进行了应用代码隔离,实行单个应用单个库,闭环部署更新测试环境、预发布环境和正式环境。于是,我们的探讨的是,基于不同应用不同库并独立部署的情况下,如何实现多个应用之间的资源共享?

之前比较多的处理方式是npm包形式抽离和引用,比如多个应用项目之间,可能有某业务逻辑模块或者其他是可复用的,便抽离出来以npm包的形式进行管理和使用。但这样却带来了以下几个问题:

  • 发布效率低下。如果需要迭代npm包内的逻辑业务,需要先发布npm包之后,再每个使用了该npm包的应用都更新一次npm包版本,再各自构建发布一次,过程繁琐。如果涉及到的应用更多的话,花费的人力和精力就更多了。
  • 多团队协作容易不规范。包含通用模块的npm包作为共享资产,“每个人”拥有它,但在实践中,这通常意味着没有人拥有它。它很快就会充满杂乱的风格不一致的代码,没有明确的约定或技术愿景。

npm方式的繁琐更新流程

这些问题让我们意识到,扩展前端开发规模以便于多个团队可以同时开发一个大型且复杂的产品是一个重要但又棘手的难题。

因此,早在2016年,微前端概念诞生了。

二. 微前端概念

Micro Frontends 官网定义了微前端概念:

Techniques, strategies and recipes for building a modern web app with multiple teams that can ship features independently.

翻译成中文:

微前端概念中文翻译

从Micro Frontends 官网可以了解到,微前端概念是从微服务概念扩展而来的,摒弃大型单体方式,将前端整体分解为小而简单的块,这些块可以独立开发、测试和部署,同时仍然聚合为一个产品出现在客户面前。可以理解微前端是一种将多个可独立交付的小型前端应用聚合为一个整体的架构风格。

值得留意的几个点:

  • 微前端不是一门具体的技术,而是整合了技术、策略和方法,可能会以脚手架、辅助插件和规范约束这种生态圈形式展示出来,是一种宏观上的架构。这种架构目前有多种方案,都有利弊之处,但只要适用当前业务场景的就是好方案。
  • 微前端并没有技术栈的约束。每一套微前端方案的设计,都是基于实际需求出发。如果是多团队统一使用了react技术栈,可能对微前端方案的跨技术栈使用并没有要求;如果是多团队同时使用了react和vue技术栈,可能就对微前端的跨技术栈要求比较高。

三. 微前端的优势

同步更新

对比了npm包方式抽离,让我们意识到更新流程和效率的重要性。微前端由于是多个子应用的聚合,如果多个业务应用依赖同一个服务应用的功能模块,只需要更新服务应用,其他业务应用就可以立马更新,从而缩短了更新流程和节约了更新成本。

微前端的同步更新

增量升级

由于历史包袱,有团队依旧存.........

版权声明
本文为[程序猿欧文]所创,转载请带上原文链接,感谢
https://my.oschina.net/mikeowen/blog/4711736

Scroll to Top