首页 > 其他分享 >微前端架构

微前端架构

时间:2024-03-22 20:33:03浏览次数:23  
标签:Web 架构 前端 开发 应用 团队

介绍

微前端的概念是由ThoughtWorks在2016年提出的,它借鉴了微服务的架构理念,核心在于将一个庞大的前端应用拆分成多个独立灵活的小型应用,每个应用都可以独立开发、独立运行、独立部署,再将这些小型应用融合为一个完整的应用,或者将原本运行已久、没有关联的几个应用融合为一个应用。微前端既可以将多个项目融合为一,又可以减少项目之间的耦合,提升项目扩展性,相比一整块的前端仓库,微前端架构下的前端仓库倾向于更小更灵活。

 前端解决什么问题

微前端主要解决了在构建大型Web应用时遇到的一系列问题。具体来说,它针对以下几个关键挑战提供了有效的解决方案:

  1. 技术栈多样化:在大型项目中,不同的团队可能采用不同的技术栈进行开发,这导致了技术栈的多样化和复杂性。微前端允许不同团队使用各自擅长的技术栈进行独立开发,然后将这些使用不同技术栈的应用集成到一个统一的界面中。
  2. 团队协作与并行开发:大型Web应用通常由多个团队共同开发,每个团队负责不同的功能模块。微前端架构使得每个团队可以独立地开发、测试、部署自己的应用,无需等待其他团队完成。这种并行开发的方式大大提高了团队协作的效率和灵活性。
  3. 应用的可维护性和可扩展性:随着项目的不断发展和需求的变更,Web应用需要不断地进行维护和扩展。微前端架构通过将应用拆分成多个小型的、可独立部署的微应用,使得每个微应用都可以独立地进行升级和扩展,而无需影响整个应用。这大大提高了应用的可维护性和可扩展性。
  4. 遗留系统的集成与兼容:许多企业在升级或重构Web应用时,都需要考虑与遗留系统的集成与兼容问题。微前端允许将遗留系统封装为微应用,与新开发的应用一起集成到统一的界面中。这既保留了遗留系统的功能,又使得新开发的应用能够采用最新的技术和框架。

     微前端通过其独特的架构和设计理念,有效地解决了大型Web应用在技术栈多样化、团队协作与并行开发、应用的可维护性和可扩展性以及遗留系统的集成与兼容等方面所面临的问题。

 

微前端架构的特点 

微前端架构的特点主要包括:

  1. 简单、松耦合的代码库:将庞大的整体拆分成可控的小块,并明确他们之间的依赖关系,使得代码库更小、更内聚、可维护性更高。
  2. 增量升级:由于每个应用都是独立的,因此可以独立地进行升级、更新甚至重写部分前端功能,而无需影响整个应用。
  3. 独立部署:每个微前端都可以独立地进行部署,这大大提高了团队的自治性和可扩展性。
  4. 团队自治:每个团队可以独立地开发、测试、部署自己的应用,无需等待其他团队,从而提高了开发效率。

 

微前端有应用场景 

        微前端的应用场景主要体现在以下几个方面:

  1. 大型Web应用:对于体量庞大的Web应用,微前端架构能够将其拆解成多个可以独立开发、部署和运行的微型应用。这样不仅可以提高开发效率和团队协作性,还能降低开发和维护成本。
  2. 兼容历史应用与增量开发:在需要兼容遗留系统的同时,使用新框架或技术去开发新功能时,微前端架构是一个理想的选择。遗留系统可以保持其原有的稳定性和功能性,而新开发的功能则可以使用最新的技术和框架,实现增量开发。
  3. 应用聚合:大型互联网公司或企业内部通常会部署大量的应用和服务。为了向用户或员工提供统一、高效的体验,可以使用微前端技术将这些应用和服务聚合在一起。这样不仅可以提高用户体验,还能提升工作效率。
  4. 团队间共享:不同的应用之间可能存在可以共享的功能和服务。通过微前端架构,这些共享的功能和服务可以被封装成独立的模块,并在不同的团队之间进行高质量的共享,从而提高研发效率。

 福利

    一、字节Garfish 微前端框架

  Garfish 微前端框架

 

二、京东MicroApp

MicroApp

 

标签:Web,架构,前端,开发,应用,团队
From: https://blog.csdn.net/qq_15557073/article/details/136916847

相关文章

  • 前端实现用户名密码国家注册(Eclipse Jee软件)
    <!DOCTYPEhtml><html><head><metacharset="UTF-8"><scriptsrc="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><title>注册页面</title></head><body> <lab......
  • 从零开始的terraform之旅 - 3命令部分- 部署基础架构 (plan apply destroy)
    3命令部分-部署基础架构(planapply)文章目录3命令部分-部署基础架构(planapply)部署基础架构planplanningmodes**Refresh-onlymode**仅刷新模式,非常有用PlanningOptions规划选项apply命令Plan**Options**apply选项destroy命令部署基础架构terraform的......
  • 前端使用StreamSaver.js流式下载大文件
    最近有个需求,要求批量下载腾讯云cos文件,并打包压缩。1.方案一起初用的方案,文件数据一直是以blob方式传递的,小文件可以成功下载,但是遇到大文件(比如几个G)一直等待且不加遮罩层loading的情况下体验效果很差。import{saveAs}from'file-saver';importJSZipfrom'jszip';......
  • 探索云原生时代:技术驱动的业务架构革新
    云原生技术正重塑IT领域,本文深度剖析了其发展历程、核心概念、生态系统及实践案例,展望未来趋势,揭示了这一技术如何引领企业转型与创新。关注【TechLeadCloud】,分享互联网架构、云服务技术的全维度知识。作者拥有10+年互联网服务架构、AI产品研发经验、团队管理经验,同济本复旦......
  • 万字心路历程:从十年老架构决定重构开始
    作者:笃敏概述走近iLogtailiLogtail是一款高性能的轻量级可观测数据采集器,由阿里云SLS团队官方提供,可以运行在包括服务器、容器和嵌入式等多种环境中,其宗旨在于帮助开发者构建统一的数据采集层,助力可观测平台打造各种上层应用场景。iLogtail多年来一直稳定服务阿里集团、蚂蚁集......
  • 【前端面试题-07】typescript 内置类型有哪些,分别简单介绍下用法
    TypeScript提供了一系列内置类型,这些类型有助于编写类型安全的代码。以下是TypeScript中一些重要的内置类型及其用途的简介:基本类型:boolean:表示布尔值,只有两种可能的值true或false。number:表示任何数值,包括整数和浮点数。string:表示文本字符串。bigint(ES2020):表示......
  • 前端基础 - 数据类型篇(高频面试!!!)
    数据类型在JavaScript中,数据类型可以分为两类:基础数据类型、引用/复杂数据类型1.基础类型:String->表示文本类型,如"HelloWorld!"Number->表示数字,可以是整数或者浮点数,例如3或者3.141592,在JavaScript中,所有数字都是浮点数类型,即使没有小数部分Boolean->表示......
  • Centos7交叉编译QT5.11.1+AArch64架构
    一、准备工作1、更新系统软件,目的是使用新版本的gcc等,还要保证磁盘空间足够1yumupdate2yuminstallgccgcc-c++3yuminstallmesa-libGL-develmesa-libGLU-develfreeglut-devel2、到linaro下载编译链工具安装aarch64(arm64)编译链工具。国产CPU,如飞腾、华为麒麟等......
  • 前端学习-vue学习012-插槽
    官方教程链接父组件还可以通过插槽(slots)将模板片段传递给子组件:App.vue<scriptsetup>import{ref}from'vue'importChildCompfrom'./ChildComp.vue'constmsg=ref('fromparent')</script><template><ChildComp>{{msg......
  • 数据仓库的数据处理架构Lambda和Kappa
    1.数据仓库数据仓库(Data Warehouse),简写DW。顾名思义,数据仓库是一个很大的数据存储集合,为企业分析性报告和决策支持而创建,是对多元业务数据的筛选与整合,具备一定的BI能力,主要用于企业的数据分析、数据挖掘、数据报表等方向,指导业务流程改进、监视时间、成本、质量以及控......