qiankun(乾坤)微前端框架简介

简介: qiankun(乾坤)微前端框架简介

qiankun(乾坤)微前端框架简介
最近在搞微前端项目,接下来整体介绍一下微前端。
在现代 Web 应用程序开发中,微前端架构逐渐成为一种趋势,它可以帮助我们更好地管理和组织复杂的项目。qiankun(乾坤)是一个基于 single-spa 的微前端实现库,旨在帮助开发者更简单、无痛地构建一个生产可用的微前端架构系统。
一、qiankun 简介

qiankun(乾坤)这个名字来源于“小世界有大乾坤”,意味着在微前端这个小世界里,通过乾坤这个框架可以创造出一个宏大的架构。qiankun 的主要特点有:

简单:无论你使用什么技术栈,都可以轻松地将子应用接入到主应用中,就像使用 iframe 一样简单。
完备:qiankun 提供了丰富的功能,包括样式隔离、沙箱、预加载等,为开发者解决微前端架构中的各种问题。
生产可用:qiankun 已经在蚂蚁金服内部和外部的 200+ 应用中得到验证,是一个值得信赖的生产可用解决方案。
二、qiankun 的设计理念

qiankun 的设计理念主要体现在两个方面:技术栈无关和技术栈无关。

技术栈无关:qiankun 不限制子应用的技术栈,无论是 React、Vue 还是 Angular,都可以轻松地接入到主应用中。这样可以消除应用之间的隐性依赖,实现真正的技术栈无关。
接入简单:qiankun 的目标是让接入微前端的过程就像使用 iframe 一样简单,从而尽可能减少对旧应用的改造工作量。
三、qiankun 的技术实现与选择

qiankun 在技术实现上主要解决了两个问题:应用的加载与切换和应用的隔离与通信。

应用的加载与切换:qiankun 通过使用 single-spa,实现了应用的懒加载、路由处理和应用入口选择等功能。
应用的隔离与通信:qiankun 使用 JS 沙箱和样式隔离技术,确保子应用之间的 JS 和 CSS 不会发生冲突。同时,qiankun 提供了父子应用和子子应用之间的通信机制,实现了应用之间的数据传递和交互。
总结

qiankun(乾坤)作为一个微前端框架,为开发者提供了简单、完备且生产可用的解决方案。通过技术栈无关和接入简单的设计理念,qiankun 可以帮助开发者更好地管理和组织复杂的 Web 应用程序,实现高效的协同开发

相关文章
|
21天前
|
前端开发 JavaScript 开发者
颠覆传统:React框架如何引领前端开发的革命性变革
【10月更文挑战第32天】本文以问答形式探讨了React框架的特性和应用。React是一款由Facebook推出的JavaScript库,以其虚拟DOM机制和组件化设计,成为构建高性能单页面应用的理想选择。文章介绍了如何开始一个React项目、组件化思想的体现、性能优化方法、表单处理及路由实现等内容,帮助开发者更好地理解和使用React。
55 9
|
2月前
|
人工智能 前端开发 JavaScript
前端架构思考 :专注于多框架的并存可能并不是唯一的方向 — 探讨大模型时代前端的分层式微前端架构
随着前端技术的发展,微前端架构成为应对复杂大型应用的流行方案,允许多个团队使用不同技术栈并将其模块化集成。然而,这种设计在高交互性需求的应用中存在局限,如音视频处理、AI集成等。本文探讨了传统微前端架构的不足,并提出了一种新的分层式微前端架构,通过展示层与业务层的分离及基于功能的横向拆分,以更好地适应现代前端需求。
|
2月前
|
JavaScript 前端开发 API
Vue.js:现代前端开发的强大框架
【10月更文挑战第11天】Vue.js:现代前端开发的强大框架
70 41
|
15天前
|
前端开发 JavaScript API
前端界的秘密武器:掌握这些框架,让你轻松秒杀99%的同行!
前端开发日新月异,掌握几个明星框架如React、Vue.js和Angular,不仅能让工作更得心应手,还能轻松超越同行。React以高效的虚拟DOM和组件化著称;Vue.js简洁易懂,灵活性高;Angular提供全面的解决方案,适合大型应用。此外,轻量级的Svelte也值得关注,其编译时处理设计提升了应用性能。掌握这些框架,结合深刻理解和灵活运用,助你在前端领域脱颖而出。
30 9
|
2月前
|
JavaScript 前端开发 测试技术
前端全栈之路Deno篇(五):如何快速创建 WebSocket 服务端应用 + 客户端应用 - 可能是2025最佳的Websocket全栈实时应用框架
本文介绍了如何使用Deno 2.0快速构建WebSocket全栈应用,包括服务端和客户端的创建。通过一个简单的代码示例,展示了Deno在WebSocket实现中的便捷与强大,无需额外依赖,即可轻松搭建具备基本功能的WebSocket应用。Deno 2.0被认为是最佳的WebSocket全栈应用JS运行时,适合全栈开发者学习和使用。
108 7
|
2月前
|
缓存 前端开发 JavaScript
前端serverless探索之组件单独部署时,利用rxjs实现业务状态与vue-react-angular等框架的响应式状态映射
本文深入探讨了如何将RxJS与Vue、React、Angular三大前端框架进行集成,通过抽象出辅助方法`useRx`和`pushPipe`,实现跨框架的状态管理。具体介绍了各框架的响应式机制,展示了如何将RxJS的Observable对象转化为框架的响应式数据,并通过示例代码演示了使用方法。此外,还讨论了全局状态源与WebComponent的部署优化,以及一些实践中的改进点。这些方法不仅简化了异步编程,还提升了代码的可读性和可维护性。
|
2月前
|
前端开发 JavaScript 中间件
前端全栈之路Deno篇(四):Deno2.0如何快速创建http一个 restfulapi/静态文件托管应用及oak框架介绍
Deno 是由 Node.js 创始人 Ryan Dahl 开发的新一代 JavaScript 和 TypeScript 运行时,旨在解决 Node.js 的设计缺陷,具备更强的安全性和内置的 TypeScript 支持。本文介绍了如何使用 Deno 内置的 `Deno.serve` 快速创建 HTTP 服务,并详细讲解了 Oak 框架的安装和使用方法,包括中间件、路由和静态文件服务等功能。Deno 和 Oak 的结合使得创建 RESTful API 变得高效且简便,非常适合快速开发和部署现代 Web 应用程序。
|
2月前
|
前端开发 JavaScript
乾坤qiankun(微前端)样式隔离解决方案--使用插件替换前缀
乾坤qiankun(微前端)样式隔离解决方案--使用插件替换前缀
364 8
|
2月前
|
前端开发 JavaScript 开发者
探索现代Web前端技术:React框架入门
【10月更文挑战第9天】 探索现代Web前端技术:React框架入门
|
2月前
|
存储 前端开发 JavaScript
前端技术深度探索:从基础到现代框架的实践之旅
前端技术深度探索:从基础到现代框架的实践之旅
37 2