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

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

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

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

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

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

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

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

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

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