微前端

简介: 内容引用自《前端架构:从入门到微前端》第9章。微前端是一种类似于微服务的架构,它将微服务的理念应用于浏览器端,即将单页面前端应用由单一的单体应用转变为把多个小型前端应用聚合为一的应用。各个前端应用还可以独立开发、独立部署。微前端的实现意味着对前端应用的拆分。拆分的目的并不只是为了在架构上好看,还可以提升开发效率。比如10万行的代码拆解成10个项目,每个项目1万行,要独立维护每个项目就会容易得多。


一、为什么需要微前端


(1)遗留系统迁移

(2)后端解耦,前端聚合

(3)热闹驱动开发


二、技术拆分方式


(1)路由分发式,将强求路由到对应的应用上。

(2)前端微服务化,在不同的框架之上设计通信和加载机制,以在一个页面内加载对应的应用。

(3)微应用,在部署构建环境中,把多个独立的应用组合成一个单体应用。

(4)微件化,开发一个新的构建系统,将部分业务功能构建成一个独立的chunk代码,使用时只需要远程加载即可。

(5)前端容器化,将iframe作为容器来容纳其它前端应用。

(6)应用组件化,借助于Web Components技术,来构建跨框架的前端应用。


三、业务划分方式


(1)按照业务拆分。

(2)按照权限拆分。

(3)按照变更的频率拆分。

(4)按照组织结构拆分。

(5)跟随后端微服务划分。


四、架构设计


(1)提取组件与模式库。样式、业务组件及共享库。

(2)应用通信机制。PostMessage、parent.window等。

(3)数据管理。URI传参、缓存、客户端存储、服务器JSON格式存储。

(4)专用的构建系统。


五、架构模式


(1)基座模式,通过一个主应用来管理其他应用。设计难度小,但通用性低。

(2)自组织模式,应用之间平等。设计难度大,但通用性高。


六、设计理念


(1)中心化:应用注册表。

(2)标识化,类似于唯一标识符。

(3)生命周期,加载、运行、卸载。

(4)模块内的关系高内聚,模块间的关系低耦合。

相关文章
|
5月前
|
前端开发 UED
微前端实战
微前端实战
58 2
|
4天前
|
前端开发 JavaScript 架构师
了解微前端,深入前端架构的前世今生
该文章深入探讨了微前端架构的起源、发展及其解决的问题,并详细讲解了微前端在现代Web应用中的实现方式与优势,帮助读者理解微前端的设计理念和技术细节。
|
5月前
|
前端开发 JavaScript 开发者
探索前端领域中的微前端架构
随着前端应用的规模不断增长,传统的单体应用架构已经无法满足需求。本文将深入探讨微前端架构的概念、优势以及实现方式,为前端开发者提供新的思路和解决方案。
|
5月前
|
监控 前端开发 Serverless
微前端解决方案
微前端解决方案
82 1
|
前端开发 应用服务中间件 nginx
微前端
微前端,听这名字感觉很超前,其实已经有很多公司都已经用上了该技术,例如我的项目组也用上了,跟后端的微服务很类似,用作解耦。现在的网站开发日渐复杂,通常会有很多独立的模块组成,分成不同的业务组,在之前用的是iframe 进行嵌套。
499 0
微前端
|
前端开发 数据可视化 JavaScript
为什么要用微前端?如何使用乾坤微前端?
为什么要用微前端?如何使用乾坤微前端?
为什么要用微前端?如何使用乾坤微前端?
|
存储 缓存 前端开发
理解微前端
我们就从微前端解决了哪些现存前端问题,并在解决这些问题的过程中做出了哪些取舍和权衡。
138 0
|
存储 前端开发 JavaScript
2022 你还不会微前端吗 (下) — 揭秘微前端核心原理(三)
2022 你还不会微前端吗 (下) — 揭秘微前端核心原理
132 0
|
存储 前端开发 JavaScript
2022 你还不会微前端吗 (下) — 揭秘微前端核心原理(一)
2022 你还不会微前端吗 (下) — 揭秘微前端核心原理
299 0
|
前端开发 JavaScript 数据格式
2022 你还不会微前端吗 (下) — 揭秘微前端核心原理(二)
2022 你还不会微前端吗 (下) — 揭秘微前端核心原理
156 0