前端 微服务demo

什么是微前端

微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。

微前端架构具备以下几个核心价值：

• 技术栈无关
  主框架不限制接入应用的技术栈，微应用具备完全自主权

• 独立开发、独立部署
  微应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新

• 增量升级

  在面对各种复杂场景时，我们通常很难对一个已经存在的系统做全量的技术栈升级或重构，而微前端是一种非常好的实施渐进式重构的手段和策略

• 独立运行时
  每个微应用之间状态隔离，运行时状态不共享

微前端架构旨在解决单体应用在一个相对长的时间跨度下，由于参与的人员、团队的增多、变迁，从一个普通应用演变成一个巨石应用(Frontend Monolith)后，随之而来的应用不可维护的问题。这类问题在企业级 Web 应用中尤其常见。

 

 

 

single-SPA  与qiankun 实现库 对比

特点：功能比较弱   样式隔离没有解决  没有js执行隔离   仅仅 single-SPA实现了路由劫持和应用加载。

qiankun乾坤基于SPA  解决了沙箱，文件导入 ，提供了开箱即用的API 和技术栈无关、并且接入简单  像iframe一样简单 

 

single-SPA 使用样式隔离问题解决：

1.子应用之间与子应用之间的样式隔离

2.BEM (block Element Modifier)约定的项目前缀

3.css-Modules 打包时生成不冲突的选择器名

4.shadow DOM 真正意义上的隔离

 

使用方式：

接入协议： 子应用必须有相关的协议 导出固定的方法，父应用去调用这些方法加载子应用，  （子应用需要提供bootstrap 、mount、unmount方法） 

这样可以做到和主应用完全解耦，和技术栈无关。而且是运行时 动态加载子应用。

 

single-SPA 安装方式 npm  install  single-spa-vue 或者yarn  add  single-spa-vue 

qiankun  安装方式 npm  install  qiankun  或 yarn add qiankun

 

iframe 存在的问题，为何不用iframe?

 1. 使用iframe ，iframe中的子应用切换路由时刷新数据页面就尴尬了 （状态会丢失）

 

应用通讯： 

1.基于URL进行数据传递，但是传递消息能力弱

2.基于CustomEvent 实现通信   即：window 原生api

3.基于props主子应用间通信

4.使用全部变量、redux进行通信

 

 

总结：

single-SPA 核心 路由劫持和应用加载

qiankun 是在single-SPA基础二次封装 用起来更简单、 便捷。子应用可以独立构建，运行时动态加载主自应用完全解耦，技术栈无关 靠的是协议接入 子应用必须导出bootstrap mount unmount方法

 

写了两个demo,分别Single和qiankun

Single-SPA demo:https://github.com/jingjing9061/microFont

qiankun demo :https://github.com/jingjing9061/microFont2

 

Single-spa学习地址：https://zh-hans.single-spa.js.org/docs/getting-started-overview

qiankun 学习地址 ：https://zh-hans.single-spa.js.org/docs/getting-started-overview/