前言 MicroApp是一款基于类WebComponent进行渲染的微前端框架,不同于目前流行的开源框架,它从组件化的思维实现微前端,旨在降低上手难度.提升工作效率.它是目前市面上接入微前端成本最低的框架,并且提供了JS沙箱.样式隔离.元素隔离.预加载.资源地址补全.插件系统.数据通信等一系列完善的功能.MicroApp与技术栈无关,也不和业务绑定,可以用于任何前端框架和业务. 本篇文章中我们会从业务背景.实现思路介绍MicroApp,也会详细介绍它的使用方式和技术原理. 背景 随着这些年互联网

微前端 & 微前端实践 & 微前端教程 微前端 micro frontends https://micro-frontends.org/ https://github.com/neuland/micro-frontends 2016, ThoughtWorks technology radar https://martinfowler.com/articles/micro-frontends.html 每个微型前端都独立部署到生产中 每个应用程序应由一个团队拥有 每个服务器都可以独立构建和

原文团队掘金平台:https://juejin.im/post/6891532248269783054 EMP项目github链接: https://github.com/efoxTeam/emp EMP教程整理: https://github.com/efoxTeam/emp/wiki 目前,EMP微前端方案已经在github开源了,可以立即开箱使用.具体详细的教程文档也在wiki更新,敬请期待. 什么是微前端 做好前端开发不是件容易的事情,而比这更难的是扩展前端开发规模以便于多个团队可以同时

序 这才2月中旬,广州就已经渐渐地进入了夏季,--夏天总是让人焦虑的.过年闲暇时间写下了微前端这系列的终章,欢迎拍砖.如果你习惯直接上手代码,不妨跳到实践一节,直接上代码教程玩一玩. qiankun原理和API介绍 qiankun是基于singlespa框架的一个上层应用,它提供了完整的生命周期,和一些钩子函数,通过路由匹配来动态加载注册微应用,同时提供了一系列api对微应用做管理和预加载等,它相对singlespa来说进步是比较大的. 所以---qiankun实质上是singlespa的一个封

10月份换了新的工作,参与完一个月的需求迭代后,接到了项目重构的任务.简单来说,需要在短时间内提出方案设想,同时进行本地验证,最终需要拿出一套技术替换方案来.于是,埋头苦干了一个月,总算干了点成绩出来,今天把当时的思考和实践做个简单总结,就当是个复盘吧. 一.老项目现状 最初接触到的老项目,使用到的前端技术栈主要是(jQuery1.8 + layui-v2.5.4 + ExtJS4.2.1.883),当时拿到这个项目的时候,上手书写起来竟然有点手生,毕竟这几年长时间使用的都是vue和react,

前言 本文介绍的是在做微前端 single-spa 项目过程中,遇到的 Vue 子应用和 React 子应用互相跳转路由时遇到的问题. 项目情况:single-spa 项目,基座用的是 React,目前是2个子应用一个 Vue 一个 React.路由方案是 Vue Router,React Router + history. 有交互场景是从 Vue 子应用跳转到 React 子应用,或者从 React 子应用跳转到 Vue 子应用,因此遇到了问题. 遇到的问题 结合项目诉求和遇到的问题,大家可以

vivo 互联网前端团队- Jiang Zuohan 一.背景 VAPD是一款专为团队协作办公场景设计的项目管理工具,实践敏捷开发与持续交付,以「项目」为核心,融合需求.任务.缺陷等应用,使用敏捷迭代.小步快跑的方式进行开发及质量跟踪,简化工作流程,帮助团队快速迭代并高效完成产品开发交付. 但早期VAPD以"一切皆可配置"的设计理念开发运行了两年,整个前端代码复杂混乱,组件庞大(需要支持多种配置),状态混乱,前端代码打包出来有50M之巨.这个项目难以为继,bug多.维护困难.新增功能处

piral有一个微前端开发框架,功能强大,文档比较全,扩展能力也比较好 包含以下特性: 特性 高度模块化 多框架兼容 支持资源文件的拆分 全局状态管理 独立开发和部署 CLI工具 与同类框架的比较 参考资料 https://docs.piral.io/reference/documentation#core-features https://github.com/smapiot/piral

podium 是一个比较全的微前端开发框架. 具有以下特性 自治开发 强大的组合能力 基于约定的开发模式 podium 包含的组件 podlets 页面片段,是一个独立的http 服务,独立运行的,实际行可以使用任何语言编写,podium 提供了@podium/podlet 模块 可以方便的开发基于nodejs 的podlets layouts 布局,也是独立的http 服务,用来组合一个或者多个podlets到一个完整的web页面,layouts 可以使用@podium/layout 模块编写

单体应用对比前端微服务化 普通的前端单体应用 微前端架构 1.基本概念 实现一套微前端架构,可以把其分成四部分(参考:https://alili.tech/archive/11052bf4/) 加载器:也就是微前端架构的核心,主要用来调度子应用,决定何时展示哪个子应用, 可以把它理解成电源. 包装器:有了加载器,可以把现有的应用包装,使得加载器可以使用它们,它相当于电源适配器. 主应用:一般是包含所有子应用公共部分的项目—— 它相当于电器底座 子应用:众多展示在主应用内容区的应用—— 它相当于你

心之所向,勇往直前!记录开发过程中的那些小事,给自己加点经验值. 前言 作为一个.Net后端开发,在竞争愈加激烈的当下,掌握点前端配菜好像已经是家常便饭了. 刚好在工作的第5个年头,辞去小主管职务的我要再次踏上面试之路,为了要避免被面试官吊打,除了复习<吊打面试官>相关的题目,当然也要对自己掌握的技能温故知新. 项目使用了Vue cli3.0作为基础架构,这个版本和2.0的有一些不同.具体参考: 1. <vue cli3.0快速搭建项目详解> 2. <vue-cli2.0与v

微前端大赏二-singlespa实践 微前端大赏二-singlespa实践 序 介绍singleSpa singleSpa核心逻辑 搭建环境 vue main react child 生命周期 结论 参考文章 序 介绍singleSpa singleSpa是一个javascript库它可以让很多小页面.小的组件.不通架构的前端组件在一个页面应用程序中共存. 这里有一个演示: (https://single-spa.surge.sh/) 这个库可以让你的应用可以使用多个不同的技术栈(vue.rea

原文作者: Wael Kdouh 原文链接:https://medium.com/@waelkdouh/microfrontends-with-blazor-webassembly-b25e4ba3f325 我聊下最近我在做的事情,然后分享下在Blazor WebAssembly 微前端的实现细节,这篇文章是我的一些心得,以及一个示例的 Demo 项目,展示了如何使用Blazor 实现多模块分布式的应用程序的微前端,如下图所示. 为了实现上面的架构,这是我使用到了.NET 5 对与 Blazor

iframe & sandbox & 微前端 沙箱,容器,隔离 sandbox demo svg progress bar https://stackoverflow.com/questions/38437325/svg-progress-bar xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!

️本文为博客园社区首发文章,未获授权禁止转载 大家好,我是aehyok,一个住在深圳城市的佛系码农‍♀️,如果你喜欢我的文章,可以通过点赞帮我聚集灵力️. 个人github仓库地址: https:github.com/aehyok 本文讲解微前端qiankun demo仓库地址 : https:github.com/aehyok/vue-qiankun 目前基于dev分支进行开发和测试 本demo已部署腾讯云 http://139.186.205.7:8080/(服务器配置较低,如有访问比较慢,

前言 最近入职的一家公司采用single-spa这个微前端框架,所以自学了此框架. single-spa这个微前端框架虽然有中文文档,但是有些零散和晦涩. 所以我想在学习之余,写篇博客拉平一下这个学习曲线. 什么是微前端? 微前端的灵感来源于服务端微服务的理念. 可以简单理解为,在开发一个复杂前端应用时,将其划分为一系列更小更简单的前端应用. 这些前端应用可以单独开发.测试.部署,松耦合,可维护性强,还可以让前端代码实现增量升级和使用不同的框架. 它的懒加载还能让整个复杂应用加载速度变快. 常用

后台管理系统使用的是umi框架,随着公司业务的发展,目前已经变成了一个巨石应用,越来越难维护,有必要对其进行拆分了. 计划是从市面上挑选一个成熟的微前端框架,首先选择的是 icestark,虽然文档中有说明umi框架的改造,但版本得是 3 以上. 而当前我们自己使用的版本是 1,差了整整两个版本.然后再去搜索,发现另一个微前端框架:qiankun,并且它有一个 umi插件. 但是又遇到了 umi版本的问题,好不容易找到一个咨询umi改造微前端的问题,版本也是2. 本来是打算将老项目作为主应用,新

在理解微前端技术原理中我们介绍了微前端的概念和核心技术原理.本篇我们结合目前业内主流的微前端实现 single-spa 来说明在生产实践中是如何实现微前端的. single-spa 的文档略显凌乱,概念也比较多,初次接触它的同学容易抓不住重点.今天我们尝试整理出一条清晰的脉络,让感兴趣的同学能够快速理解它. 在 single-spa 的架构设计中,有两种主要角色,主应用和子应用,如下图. 主应用力求足够简单,只负责子应用的调度,业务逻辑都由子应用来承担. 核心能力 其实总结来说,single-s

我们在single-spa 技术分析 基本实现了一个微前端框架需要具备的各种功能,但是又实现的不够彻底,遗留了很多问题需要解决.虽然官方提供了很多样例和最佳实践,但是总显得过于单薄,总给人一种"问题解决了,但是又没有完全解决"的感觉. qiankun 在 single-spa 的基础上做了二次开发,完善了很多功能,算是一个比较完备的微前端框架了.今天我们来聊一聊 qiankun 的技术原理. 在本系列的开头,我们提到微前端的核心问题其实就是解决如何加载子应用以及如果做好子应用间的隔离问

得益于 esbuild 的超高性能,vite 在诞生之初就备受关注,且一直保持着活跃的开发迭代.截至目前,vite 已经迭代到了 2.7.10 版本,各方面也基本具备了在生产使用的条件.这段时间,我在项目中尝试了使用 vite 进行打包构建,本文就是这次构建的过程记录. 基础配置 首先使用vite 官方脚手架生成项目. yarn create vite vite-demo --template react-ts 上面这行命令使用 react-ts 模板创建了一个叫 vite-demo 的项目.由