Micro Frontends https://martinfowler.com/articles/micro-frontends.html Integration approaches Server-side template composition Build-time integration Run-time integration via iframes Run-time integration via JavaScript Run-time integration via Web Co…

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

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

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

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

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

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 子应用,因此遇到了问题. 遇到的问题 结合项目诉求和遇到的问题,大家可以…

Micro Frontends - extending the microservice idea to frontend development https://micro-frontends.org/…

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 发布文章使用:只允许注册用户才可以访问!…

Micro Frontends & microservices https://micro-frontends.org/ https://github.com/neuland/micro-frontends Monolithic Frontends Organisation in Verticals Microservices micro services https://en.wikipedia.org/wiki/Microservices https://microservices.io/…

️本文为博客园社区首发文章,未获授权禁止转载 大家好,我是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 的项目.由…

封面 简介 从 single-spa 的缺陷讲起 -> qiankun 是如何从框架层面解决 single-spa 存在的问题 -> qiankun 源码解读,带你全方位刨析 qiankun 框架. 介绍 qiankun 是基于 single-spa 做了二次封装的微前端框架,通过解决了 single-spa 的一些弊端和不足,来帮助大家实现更简单.无痛的构建一个生产可用的微前端架构系统. 微前端框架 之 single-spa 从入门到精通 通过从 基本使用 -> 部署 -> 框架…

初步认识微前端 微前端是什么 现在的前端应用,功能.交互日益复杂,若只由一个团队负责,随着时间的推进,会越来越庞大,愈发难以维护. 微前端这个名词,第一次提出是在2016年底.它将微服务(将单一应用程序划分成一组小的服务,服务之间相同配合,为用户提供最终价值)这个应用于服务端的技术扩展到前端领域. 微前端背后的想法是:将网站或 web 应用程序视为由独立团队负责的子应用(或模块.功能)的组合. 微前端核心是:拆.和. 拆,即将一个应用拆成多个子应用.每个子应用由单独的团队负责,独立开发.发布 和…

一.背景 在电商领域内,商品是一个重要组成部分,与其对应的商品管理系统,则负责商品的新建.编辑.复制等功能.随着商品管理系统的成熟稳定和业务上的扩展需求,催化出了商品中台的诞生.它可以将现有商品功能最大效率的复用在很多业务上(公司内业务.公司外业务等).而不是仅限于当前团队的业务使用. 在设计商品中台的前端系统时,我们使用了微前端和可视化技术,其可以达到如下效果: 可视化技术可以让各个业务方的运营等相关人员,直观的看到其配置的数据在页面上的展示效果: 微前端可以帮助商品中台更快更好的适配到各个业…

前言 最近需要重构一个老项目,定的方案用微前端去改造.主应用是老的项目,微应用是新的项目,由于重构时间比较紧张,子应用还需要使用父应用的一些组件.过程中遇到一些问题,记录一下. 方案 我们知道qiankun,可以通过props通信传递数据,把组件通过props传递过去不就行了.来开始改造我们的代码 主应用 导入组件,通过props共享出去 import { registerMicroApps, start, setDefaultMountApp } from 'qiankun'; // 导入一些…

作者:vivo 互联网前端团队- Tang Xiao 本文梳理了基于阿里开源微前端框架qiankun,实现多页签及子应用缓存的方案,同时还类比了多个不同方案之间的区别及优劣势,为使用微前端进行多页签开发的同学,提供一些参考. 一.多页签是什么? 我们常见的浏览器多页签.编辑器多页签,从产品角度来说,就是为了能够实现用户访问可记录,快速定位工作区等作用:那对于单页应用,可以通过实现多页签,对用户的访问记录进行缓存,从而提供更好的用户体验. 前端可以通过多种方式实现多页签,常见的方案有两种: 通过C…

nginx 的ssi 功能让我们可以将不同的拼接起来,ngx_pagespeed 是pagespeed 的nginx 模块,可以帮助 我们解决前端的一些性能优化的问题,通过简单的配置就可以搞定 一张参考图 说明: demo 只简单使用了nginx ssi + ngx_pagespeed,ngx_srcache 暂时还没用 环境准备 docker-compose file   version: "3" services:  main:    build: ./    ports:    …

封装 React Native 原生组件(iOS / Android) 在 React Native中,有很多种丰富的组件了,例如 ScrollView.FlatList.SectionList.Button.Text.Image等: 常用的组件已经可以帮助我们实现并满足日常开发中所遇到的功能需求: 但是产品经理突发奇想还是会提出各种"新奇"的功能: 一些复杂的界面实现,在RN层面变得异常棘手,所以需要我们从原生层去组建View,在RN中完成渲染: https://github.com…