微前端概述

简介: 微前端概述

1. 发展历程


1990 年浏览器诞生、1991 年 W3C 组织诞生,标志着前端技术的开始,也拉开了前端技术光速发展的序幕。


在前端发展的最初期,并没有前端这个概念,更没有前后端分离这个说法。所有的 HTML 页面都是由后端生成,浏览器仅做展示。


1995 年,JavaScript 的诞生,才开启了前端发展的新历程。


最初的 JavaScript 主要用来进行表单校验或者一些简单的计算工作,直到 1999 年 W3C 发布新的 HTML 4.0 标准,加上各大浏览器厂商都实现了 XMLHttpRequest 来进行浏览器与服务器之间的通信。2005 年 AJAX(即“Asynchronous JavaScript and XML”)一词被正式提出。


2006 年,jQuery 发布。jQuery 内部提供了大量的浏览器兼容方案,并采用“链式调用”的形式,打破了当时的前端开发者的编程思维。并降低了当时的前端开发的入门难度。


虽然 jQuery 的出现使得前端开发更加简单和轻松,但是也带来了两个问题:


  1. 页面引用插件太多,导致 script 标签过多,影响页面解析


  1. 插件太多造成全局污染


为解决这个问题,当时的前端大佬们决定从后端技术中取经,引入“模块”机制。随着 Node.js 的发布和 RequireJS 的诞生,前端新技术层出不穷,前后端分离的述求愈演愈烈。


从 2009 年开始,各种 MVC/MVVM 框架横空出世,最终以 React、Vue、Angular (SPA, single page application, 也叫单页面应用) 三分天下结束。


2. 什么是微前端


微前端(中文概念见 Micro Frontends)。


是一种类似于后端微服务、应用于前端浏览器的技术架构,旨在将单一“SPA巨石应用”拆分为互不影响、能独立允许和部署的小型应用,也就是“微应用”。


微前端的中心思想是:复杂的 Web APP 或者网站,都应该是由不同的独立的功能模块组合成为一个整体,但是各模块相互独立,可以由 不同的团队 利用 不同的技术 来完成针对 特定业务领域 的功能开发。


实现一个微前端架构,首先要满足以下条件:


  1. 与技术栈无关,不影响各应用的原有技术体系


  1. 应用独立,各个应用之间不应该存在强关联,都可以独立开发、运行、部署,并且各应用的数据、样式等都应该完全隔离


  1. 不影响用户体验,各应用切换应该流畅,应用状态缓存,正常的加载过渡动画等


3. 为什么需要微前端


上面说了微前端的核心目的是拆分“巨石应用”,如果你的项目只有几个几十个小页面,那么微前端可能不怎么适合你。


而当一个项目足够“大”,功能足够“多”时,那么微前端就能帮你极大的降低开发“难度”。


qiankun 技术圆桌 - 你可能并不需要微前端 一文中大概解释了哪些情况下你可能不那么需要微前端。


  1. 你/你的团队 具备系统内所有架构组件的 话语权


  1. 你/你的团队 有足够动力去治理、改造这个系统中的 所有组件


  1. 系统及组织架构上,各部件之间本身就是强耦合、自洽、不可分离的


  1. 极高的产品体验要求,对任何产品交互上的不一致零容忍


那如果你需要使用微前端,除了用最原始的 Iframe 来解决之外,你还有下面几种选择。


4. 微前端开源框架(国内)


序号 框架名称 开源团队 文档地址 开源时间 Star
1 single-spa canopy 文档 2015.10 11.5k
2 ICESTARK 飞冰团队 文档 2019.06 1.8k
3 qiankun 蚂蚁金服 文档 2019.08 13.1k
4 Alfa 阿里云 文档 2019.12 700+
5 EMP YY直播 文档 2020.10 1.9k
6 micro-app 京东 文档 2021.07 3.1k
7 Garfish 抖音头条号 文档 2021.01 1.6k
8 Wujie 腾讯 文档 2022.06 200+


  1. single-spa 算是最早开源的微前端框架之一,于 2015 年发布 1.1.0 版本,通过给每个微应用添加生命周期函数,并在主应用路由中注册。 在主应用调用 registerApplication 时开始注册和下载一个微应用,并在 start() 时开始初始化,根据当前路由来调用不同微应用的 bootstrapmount 函数。


  1. qiankun 则算是国内最知名也是使用率最广的微前端框架。于 2019 年 8 月发布 1.1.4 版本,底层也是依赖 single-spa 进行的二次封装,在其基础上封装了沙箱隔离和数据共享的机制,并对部分 API 进行了简化。


5. 总结


以上 8 种微前端框架,大致采用的都是以下几种方案:


  1. 通过基座应用加载子应用 umd.js 格式入口文件,模拟 Iframe 实现css沙箱隔离


  1. 采用浏览器新特性 Web Components,但是兼容性很差


  1. 采用 ES ModuleCSS Module 实现,但一样有兼容性问题


  1. Webpack 5 的新特性联邦模块 Module Federation


所以不管是从 Star 数量还是兼容程度,以及国内前端大环境,首选还得是 qiankun


目录
相关文章
|
1月前
|
存储 前端开发 JavaScript
前端开发中的状态管理概述与工具选择
【10月更文挑战第7天】前端开发中的状态管理概述与工具选择
15 0
|
缓存 前端开发 JavaScript
《React设计原理》读书分享–前端框架概述
《React设计原理》读书分享–前端框架概述
|
Web App开发 XML 前端开发
Web前端开发概述(二)
随着Web的不断迭代更新,前端开发技术的不断发展,前端开发由此发生了很大的变化,网站不再是承载单一的文字和图片的信息提供者,软件化的交互形式为用户提供了更好的用户体验,前端的发展也更注重用户的交互作用,用户称为了网站内容的浏览者和提供者,网站需要更简便,更快捷的前端技术来实现。
Web前端开发概述(二)
|
XML 域名解析 前端开发
Web前端开发概述(一)
经过一段时间的整理和复习,我决定出《前端开发三剑客》这个专栏,想要学习前端开发,其基础知识必须稳扎稳打,这个专栏我打算从0开始详细的整理和总结一遍HTML,CSS,JavaScript三大部分。哈哈,其实我本人基础的也有很多东西都忘记了,这个问题我相信在很多人身上都有,很多东西不经常用,时间长了,自己也记得不太清了。所以我通过写博客的方式,再次帮自己复习前端的基础知识,同时呢,也希望我整理和总结的文章对于想学前端的小伙伴们有帮助。那么,废话不多说,在接下来的一段时间里,我将持续更新这个专栏。
Web前端开发概述(一)
|
并行计算 前端开发 JavaScript
前端3D技术概述(1)
前端3D技术概述
2074 2
|
机器学习/深度学习 前端开发 图形学
前端3D技术概述(2)
前端3D技术概述
179 0
|
前端开发
前端学习案例4-正则概述-字符组的简写
前端学习案例4-正则概述-字符组的简写
56 0
前端学习案例4-正则概述-字符组的简写
|
前端开发
前端学习案例3-正则概述-字符组和非字符组2
前端学习案例3-正则概述-字符组和非字符组2
68 0
前端学习案例3-正则概述-字符组和非字符组2
|
前端开发
前端学习案例1-正则概述-元字符
前端学习案例1-正则概述-元字符
71 0
前端学习案例1-正则概述-元字符
|
前端开发
前端学习案例2-正则概述-字符组和非字符组1
前端学习案例2-正则概述-字符组和非字符组1
75 0
前端学习案例2-正则概述-字符组和非字符组1