微前端
内容引用自《前端架构:从入门到微前端》第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)模块内的关系高内聚,模块间的关系低耦合。
相关文章
- 从源码层面理解 React 是如何做 diff 的
- 如何计算浏览器页面的帧数 FPS?
- web前端面试技巧-如何自我介绍?如何应对hr?
- 软件测试面试,如何自我介绍?
- 揭开 Python super() 的真面目
- 移动端适配viewport缩放方案
- 移动端适配动态rem方案
- 移动端适配vw方案
- appium 处理存webview页面与webview和native混合页面
- Python 面向对象进阶
- Python 面向对象编程基础
- 函数式编程(一) 认识“编程范式”和“函数”
- C#中使用Socket实现简单Web服务器
- C#中使用Socket请求Web服务器过程
- comet在asp.net中的实现
- 依赖倒置(DIP)与依赖注入(DI)
- 软件设计原则与模式
- .NET开发笔记(二十三) 谷歌地图下载
- .Net开发笔记(二十一) 反射在.net中的应用
- .Net开发笔记(二十)创建一个需要授权的第三方组件