微前端的出现的背景和意义

简介: 微前端的出现的背景和意义

微前端是什么

微前端是一种类似于微服务的架构,是一种由独立交付的多个前端应用组成整体的架构风格,将前端应用分解成一些更小、更简单的能够独立开发、测试、部署的应用,而在用户看来仍然是内聚的单个产品。


微前端诞生在两个大的背景下,在提倡拥抱变化的前端社区可以看到新的框架、技术、概念层出不穷,并且随着 Web 标准的演进,前端应用已经具备更好的性能、更快的开发效率。但随着而来的是应用的复杂程度更高、涉及的团队规模更广、更高的性能要求,应用复杂度已经成为阻塞业务发展的重要瓶颈。


微前端就是诞生于 Web 应用日益复杂化的场景中,因为随着网络速度、计算机硬件水平的提升和 Web 标准的演进,过去 Web 应用用户体验远不如传统的应用软件时代已逐渐远去,两者之间在用户体验上的差距不断缩减,并且由于 Web 应用开发速度快、用完即走等特性,导致的一个最终结果就是「能用 Web 技术实现的应用,最终都会通过 Web 来实现」。在近几年涌现了一大批之前只能在传统 PC 软件中才能看到的优秀产品,例如:Photoshop、Web Office、Web IDE。尽管随着 Web 标准的演进,前端工程化也在不断演变,从模块化到组件化在到现在的工程化,但在面对跨团队大规模开发、跨团队企业级应用协作,现有的分治设计模式仍然显得有心无力。


大规模 Web 应用的困局

尽管 Web 应用的复杂度和参与人数以爆炸式的增长速度,但却没有一种新的架构模式来解决现有的困境,并同时兼顾 DX(developer experience)和 UX(user experience)。

以字节跳动内「研发中台」举例,在研发日常工作中需要使用非常多的研发系统,例如:代码管理、代码构建、域名管理、应用发布、CDN 资源管理、对象存储等。站在整个公司研发的角度考虑,最好的产品形态就是将所有的研发系统都放置同一个产品内,用户是无法感知他在使用不同的产品,对于用户而言就是单个产品不存割裂感,也不需要去学习多个平台,仅仅需要学习和了解字节跳动内的「研发中台」即可


传统 Web 应用的利与弊

这里简单分析一下传统 Web 应用在开发大规模应用和涉及多研发团队协作时遇到的一些困境,以上面案例中的「电商运营平台」举例,对于电商运营而言商品、商家、品牌等都是电商运营平台能力的一部分,而不是独立之间的孤岛。若以传统的前端研发模式进行开发,那么此时有两种项目设计策略:

  • 将平台内多个系统放置同一个代码仓库维护 ,采用 SPA(Single-page Application) 单页应用模式
  • 将系统分为多个仓库维护,在首页聚合所有平台的入口,采用 MPA(Multi-page Application)多页应用模式

若采用多个系统放置同一个项目内维护:


优势:

  • 统一的权限管控、统一的 Open API 开发能力
  • 更好的代码复用,基础库复用
  • 统一的运营管理能力
  • 不同系统可以很好的通信
  • SPA 应用特有优势:
  • 更好的性能
  • 具备局部更新,无缝的用户体验
  • 提前预加载用户下一页的内容
    劣势
  • 代码权限管控问题
  • 项目构建时间长
  • 需求发布相互阻塞
  • 代码 commit 混乱、分支混乱
  • 技术体系要求统一
  • 无法同时灰度多条产品功能
  • 代码回滚相互影响
  • 错误监控无法细粒度拆分


若采用拆分成多个仓库维护

优势

  • 可以以项目维度拆分代码,解决权限管控问题
  • 仅构建本项目代码,构建速度快
  • 可以使用不同的技术体系
  • 不存在同一个仓库维护时的 commit 混乱和分支混乱等问题
  • 功能灰度互不影响
    劣势
  • 用户在使用时体验割裂,会在不同平台间跳转,无法达到SPA 应用带来的用户体验
  • 只能以页面维度拆分,无法拆分至区块部分,只能以业务为维度划分
  • 多系统同灰度策略困难
  • 公共包基础库重复加载
  • 不同系统间不可以直接通信
  • 公共部分只能每个系统独立实现,同一运维通知困难
  • 产品权限无法进行统一收敛


背景和意义总结

其实可以发现由于 Web 应用在逐步取代传统的 PC 软件时,大规模 Web 应用在面对高复杂度和涉及团队成员广下无法同时保证 DX 和 UX 的困境。传统的分而治之的策略已经无法应对现代 Web 应用的复杂性,因此衍生出了微前端这样一种新的架构模式,与后端微服务相同,它同样是延续了分而治之的设计模式,不过却以全新的方法来实现。

相关文章
|
前端开发 JavaScript 开发者
第一章(概念篇) 微前端介绍与背景
第一章(概念篇) 微前端介绍与背景
485 0
|
存储 前端开发 文件存储
前端常用PS技巧总结之将图片背景透明化
前端常用PS技巧总结之将图片背景透明化
207 0
|
前端开发
【零基础入门前端系列】—浏览器内核、背景渐变、转换(二十二)
【零基础入门前端系列】—浏览器内核、背景渐变、转换(二十二)
|
前端开发
【零基础入门前端系列】—背景属性(十二)
【零基础入门前端系列】—背景属性(十二)
|
前端开发
【前端切图】CSS文字渐变和背景渐变
【前端切图】CSS文字渐变和背景渐变
232 0
|
前端开发
【我的前端】玻璃拟态效果实战开发:比毛玻璃更好看的CSS背景玻璃拟态效果
玻璃拟态是目前市面上的新风格,越来越受欢迎,新拟态 (Neumorphism) 模仿受到挤压的塑料材质,这种新的视觉风格更加注重垂直空间z轴的使用。它的典型特征是:
【我的前端】玻璃拟态效果实战开发:比毛玻璃更好看的CSS背景玻璃拟态效果
|
前端开发 JavaScript
前端代码分享——星空背景特效(内含源码)
前端代码分享——星空背景特效(内含源码)
|
机器学习/深度学习 前端开发 JavaScript
《智能前端技术与实践》——第 2 章 前端开发基础 ——2.1 背景知识概述
《智能前端技术与实践》——第 2 章 前端开发基础 ——2.1 背景知识概述
223 0
|
前端开发 开发者
前端祖传三件套CSS的CSS3新特性之背景
在现代的前端开发中,CSS3已经成为了很多前端开发者必备的技能之一。其中,CSS3提供了丰富的新特性,其中包括了背景相关的新特性。本文将为大家介绍CSS3中与背景相关的新特性,包括背景色渐变、背景图片相关属性、背景滤镜等。
166 0
|
前端开发
第34/90步《前端篇》第8章 重构记分板、背景、页面和游戏对象 第25课
今天学习《前端篇》第8章 重构记分板、背景、页面和游戏对象 第25课 重构游戏对象,这节课我们继续模块化重构,将页面类拆分到单独的文件中,清除一些不再需要的变量等,让游戏代码的结构更加合理。
197 0

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
    670
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    280
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    251
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    195
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    302
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    443
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    194
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    137
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    205
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    280