初探 MicroApp,一个极致简洁的微前端框架
前言
哈喽大家好,我是海怪。
在微前端的领域里,相信大家都听说过阿里的 qiankun。我自己在上几个月也一直用它来做一些实践:
微前端x重构实践落地总结
当企微侧边栏遇上微前端
在使用过程中我发现 qiankun 还是有一些缺点的:
项目的侵入性依然很强。之前为了在组内推广,都做了 3 次分享,可把我口水说干了
qiankun 在沙箱方面依然有不少坑。看去年 qiankun 一年的 Change Log,发现都是在修复沙箱相关的问题
不仅我用 qiankun 难受,京东的小伙伴也用得很难受,所以,京东在去年 7 月推出了自己微前端解决方案 —— MicroApp[1]。今天就带大家初探一下这个新星微前端框架吧。
特色
MicroApp 一上来就表明了自己的立场:
micro-app
并没有沿袭single-spa
的思路 。
借鉴了 WebComponent
的思想,micro-app
通过 CustomElement
结合自定义的 ShadowDom
,将微前端封装成一个类 WebComponent
组件,从而实现微前端的组件化渲染。
它在 基座应用 和 子应用 之间充当桥梁胶水的作用。
有下面的优势:
使用简单。 将功能封装到 WebComponent 中
零依赖。 无依赖、更高的扩展性
兼容所有框架 技术栈无关
下面我们直接开箱看看 micro-app
能给我们带来什么样的惊喜吧。
注:所有代码都放在 Github 项目[2] 中。
架构
虽然官方也给出了完整的 样例 ,不过里面代码太多了,所以我就弄一个简单一点的项目,架构如下:
起步
主应用使用 create-react-app 创建 React 项目:
npx create-react-app bigass-micro-app
然后安装 micro-app
:
npm i @micro-zoe/micro-app --save
创建完了后,先用 React Router 来搭建基座应用的路由系统:
const App = () => {return (<BrowserRouter><div><header className={styles.header}><Link to="/">基座 Home</Link><Link to="/about">基座 About</Link></header><Routes><Route path="/" element={<Home/>}/><Route path="/about" element={<About/>}/></Routes></div></BrowserRouter>);
}
就有最简单的路由了:
添加 React 微应用
接下来我们再添加一个 React 应用作为这个项目的微应用。/apps
目录下也用 create-react-app
创建一个新的 React 应用,并在 pcakge.json
里更改访问端口:
"scripts": {"start": "BROWSER=none PORT=3001 react-scripts start",
}
添加 public-path.js
:
// __MICRO_APP_ENVIRONMENT__和__MICRO_APP_PUBLIC_PATH__是由micro-app注入的全局变量
if (window.__MICRO_APP_ENVIRONMENT__) {// eslint-disable-next-line__webpack_public_path__ = window.__MICRO_APP_PUBLIC_PATH__
}
在微应用的 入口的第一行 引入它:
import './public-path'
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';ReactDOM.render(<App />, document.getElementById('root'));
这一步主要是避免子应用的静态资源使用相对地址时加载失败的情况。
并在 devServer 设置跨域访问:
headers: {'Access-Control-Allow-Origin': '*',
}
同样添加简单的路由:
function App() {return (<div><BrowserRouter basename={window.__MICRO_APP_BASE_ROUTE__ || '/'}><div><header className={styles.header}><Link to="/">react-app Home</Link><Link to="/about">react-app About</Link></header><Routes><Route path="/" element={<Home/>}/><Route path="/about" element={<About/>}/></Routes></div></BrowserRouter></div>);
}
现在 npm run start
后就可以在 http://localhost:3001
里访问它了。
接入 React 微应用
首先在基座应用的 入口 处启用 micro-app
:
// index.jsx
import microApp from '@micro-zoe/micro-app'microApp.start()ReactDOM.render(<App />, document.getElementById('root'));
接下来在基座应用里添加一个承载微应用的组件 ReactMicroApp
:
// ReactMicroApp.jsx
const ReactMicroApp = () => {return (<div><h1>react-app</h1><micro-appname='react-app'url='http://localhost:3001/'baseroute='/react-app'></micro-app></div>)
}
最后在 App
组件中添加 react-app
的路由:
const App = () => {return (<BrowserRouter><div><header className={styles.header}><Link to="/">基座 Home</Link><Link to="/about">基座 About</Link><Link to="/react-app">React 子应用</Link></header><Routes><Route path="/" element={<Home/>}/><Route path="/about" element={<About/>}/><Route path='/react-app' element={<ReactMicroApp/>}/></Routes></div></BrowserRouter>);
}
现在我们就已经完美地接入了 React 应用了:
整个接入的过程非常的简单,侵入性的操作总结有:
主应用
microApp.start()
添加微应用的容器组件
添加路由指向这个容器组件
微应用
修改 public-path
添加跨域访问
自动切换路由的
basename
对比 qiankun
在完成一个 Hello World 后,我们来对比一下 qiankun
的起手式。
主应用
micro-app | qiankun |
---|---|
指定 container element | 添加自定义标签元素 |
registerMicroApps
|
普通路由切换 |
start()
|
microApp.start()
|
微应用:
micro-app | qiankun |
---|---|
更改 public path | 更改 public path |
指定路由的 basename | 指定路由的 basename |
- | 导出生命周期 |
配置跨域访问 | 配置跨域访问 |
- | 配置 Webpack 的 output |
不得不说,micro-app
确实对新手更友好了,使用上也更简洁明了。
接入 Vue 微应用
有了上面的了解后,接入 Vue 微应用就更快了。
微应用
直接用 vue-cli
创建 Vue 项目,这里我选用了 Vue3。
第一步,添加 public-path.js
:
// public-path.js
if (window.__MICRO_APP_ENVIRONMENT__) {// eslint-disable-next-line__webpack_public_path__ = window.__MICRO_APP_PUBLIC_PATH__
}
并在 入口 main.js
引入:
// main.js
import './public-path'
import {createApp} from 'vue'
...
第二步,更改 Vue Router 的 basename
:
// main.js
const router = createRouter({history: createWebHistory(window.__MICRO_APP_BASE_ROUTE__ || process.env.BASE_URL),routes: [{ path: '/', component: Home },{ path: '/about', component: About }],
})const app = createApp(App).use(router)app.mount('#app')// 监听卸载操作
window.addEventListener('unmount', function () {app.unmount()
})
第三步,更改 Webpack DevServer 的跨域访问:
// vue.config.js
module.exports = {devServer: {headers: {'Access-Control-Allow-Origin': '*',}}
}
主应用
添加 Vue3MicroApp
容器:
const Vue3MicroApp = () => {return (<div><h1>vue3-app</h1><button onClick={sendVue3AppData}>基座 => vue3-app</button><p>子应用消息 {microAppState ? microAppState.msg : '无'}</p><micro-appname='vue3-app'url='http://localhost:3002/'baseroute='/vue3-app'></micro-app></div>)
}
然后添加路由:
const App = () => {return (<BrowserRouter><div><header className={styles.header}><Link to="/">基座 Home</Link><Link to="/about">基座 About</Link><Link to="/react-app">React 子应用</Link><Link to="/vue3-app">Vue3 子应用</Link></header><Routes><Route path="/" element={<Home/>}/><Route path="/about" element={<About/>}/><Route path='/react-app' element={<ReactMicroApp/>}/><Route path='/vue3-app' element={<Vue3MicroApp/>}/></Routes></div></BrowserRouter>);
}
很快啊(马保国.jpg)就接入了新的微应用了:
数据通信
数据通信也是 micro-app
的一大亮点,在使用层面上比 qiankun
的 EventBus 要好用那么 一丢丢。啊对,也就是那么一丢丢,因为使用方式还是比较 Hacky 的。
父传子
在基座应用的容器组件里添加一个 microApp.setData
就好了:
// ReactMicroApp
const ReactMicroApp = () => {const [microAppState, setMicroAppState] = useState(microApp.getData('react-app'));// 发送数据给 react-appconst sendReactAppData = () => {microApp.setData('react-app', {name: `react-app 随机数: ${Math.random()}`})}return (<div><h1>react-app</h1><button onClick={sendReactAppData}>基座 => react-app</button><p>子应用消息 {microAppState ? microAppState.msg : '无'}</p><micro-appname='react-app'url='http://localhost:3001/'baseroute='/react-app'></micro-app></div>)
}
需要注意的是 setData
的值必须为对象!
微应用在接收数据的时候也是一样通过事件监听来获取:
// react-app App.js
function App() {const [mainAppData, setMainAppData] = useState( window.microApp.getData());// 监听基座数据useEffect(() => {if (window.microApp) {const dataListener = (data) => {console.log('主应用传的数据', data);setMainAppData(data);}window.microApp.addDataListener(dataListener)return () => {window.microApp.clearDataListener()}}})return (<div><p>主应用的数据:{mainAppData ? mainAppData.name : '无'}</p><BrowserRouter basename={window.__MICRO_APP_BASE_ROUTE__ || '/'}><div><header className={styles.header}><Link to="/">react-app Home</Link><Link to="/about">react-app About</Link></header><Routes><Route path="/" element={<Home/>}/><Route path="/about" element={<About/>}/></Routes></div></BrowserRouter></div>);
}
子传父
同时地,微应用发送数据也是一行 window.microApp.dispatch
就 OK 了,而且入参必须也为对象:
// react-app App.js
function App() {const [mainAppData, setMainAppData] = useState( window.microApp.getData());useEffect(() => {if (window.microApp) {const dataListener = (data) => {console.log('主应用传的数据', data);setMainAppData(data);}window.microApp.addDataListener(dataListener)return () => {window.microApp.clearDataListener()}}})// 发送数据给基座const sendToMain = () => {window.microApp.dispatch({msg: `我是 react-app 随机数 ${Math.random()}`})}return (<div><p>主应用的数据:{mainAppData ? mainAppData.name : '无'}</p><button onClick={sendToMain}>给基座应用发送</button><BrowserRouter basename={window.__MICRO_APP_BASE_ROUTE__ || '/'}><div><header className={styles.header}><Link to="/">react-app Home</Link><Link to="/about">react-app About</Link></header><Routes><Route path="/" element={<Home/>}/><Route path="/about" element={<About/>}/></Routes></div></BrowserRouter></div>);
}
基座的监听稍微有点 Hacky:
// ReactMicroApp.js
import microApp from '@micro-zoe/micro-app'
import {useState} from "react";
/** @jsxRuntime classic */
/** @jsx jsxCustomEvent */
import jsxCustomEvent from '@micro-zoe/micro-app/polyfill/jsx-custom-event'const ReactMicroApp = () => {const [microAppState, setMicroAppState] = useState(microApp.getData('react-app'));const sendReactAppData = () => {microApp.setData('react-app', {name: `react-app 随机数: ${Math.random()}`})}const onDataChange = (e) => {console.log('react-app onDataChange', e);console.log('react-app 数据', e.detail.data);setMicroAppState(e.detail.data);}return (<div><h1>react-app</h1><button onClick={sendReactAppData}>基座 => react-app</button><p>子应用消息 {microAppState ? microAppState.msg : '无'}</p><micro-appname='react-app'url='http://localhost:3001/'baseroute='/react-app'onDataChange={onDataChange}></micro-app></div>)
}
虽然没有用到 jsxCustomEvent
,但是也一定要 import 进来,且不能把注释给干掉!
然后我们就可以看到数据通信的效果了:
高级功能
上面都是 micro-app
入门的一些基础操作,它还提供了一些高级功能。
KeeyAlive
保持微应用的状态 Keep-Alive
:
<micro-app name='xx' url='xx' keep-alive></micro-app>
生命周期
/** @jsxRuntime classic */
/** @jsx jsxCustomEvent */
import jsxCustomEvent from '@micro-zoe/micro-app/polyfill/jsx-custom-event'const App = () => {return (<micro-appname='xx'url='xx'onCreated={() => console.log('micro-app元素被创建')}onBeforemount={() => console.log('即将被渲染,只在初始化时执行一次')}onMounted={() => console.log('已经渲染完成,只在初始化时执行一次')}onAfterhidden={() => console.log('已卸载')}onBeforeshow={() => console.log('即将重新渲染,初始化时不执行')}onAftershow={() => console.log('已经重新渲染,初始化时不执行')}onError={() => console.log('渲染出错')}/>)
}
应用之间跳转
window.history
通过数据通信控制跳转
传递路由实例方法
隔离
JS 方面使用 Proxy
拦截了用户全局操作的行为,防止对 window
的访问和修改,避免全局变量污染。
CSS 方面有两种隔离:
默认添加 CSS 选择器前缀
ShadowDOM
元素隔离方面,micro-app
模拟实现了类似 ShadowDom
的功能,元素不会逃离 <micro-app>
元素边界,子应用只能对自身的元素进行增、删、改、查的操作。
静态资源处理
使用 globalAssets
共享资源:
// index.js
import microApp from '@micro-zoe/micro-app'microApp.start({globalAssets: {js: ['js地址1', 'js地址2', ...], // js地址css: ['css地址1', 'css地址2', ...], // css地址}
})
或者使用 global
属性:
<link rel="stylesheet" href="xx.css" global>
<script src="xx.js" global></script>
以及对资源的过滤:
<link rel="stylesheet" href="xx.css" exclude>
<script src="xx.js" exclude></script>
<style exclude></style>
渲染微前端模式
默认模式:每次都按顺序执行一次 JS,具有幂等性
umd 模式:只在初次渲染时执行所有 JS,对于需要频繁切换微应用的项目可以提高其性能
插件系统
插件系统的主要作用就是对js进行修改,每一个js文件都会经过插件系统,我们可以对这些js进行拦截和处理,它通常用于修复js中的错误或向子应用注入一些全局变量。
这个插件系统主要可以在中间层处理一下 JS,避免一些由于固定模板而无法处理的 JS 报错。总的来说,这个系统还是个新生儿,需要后续其它开发者一起共建。
总结
总的来说,micro-app
是一个京东推出的一个微前端新星框架,在使用上比较简洁易懂,配置方面也无需太多操作,类似 Vue 风格的 API 对新手算是十分友好了,也推荐大家一起玩玩这个新框架。
当然了因为这个项目也是 21 年 7 月才推出的,现在版本(2022年1月28号)为 0.8.4
,还没到 1.0
,所以想要在生产环境上使用的话,建议还是要谨慎一点。
qiankun
虽然侵入性较大,但是它有着 3 年的微前端使用场景以及 Issue 经验积累,在解决问题方面更稳一点。
参考资料
[1]
MicroApp: https://zeroing.jd.com/
[2]
Github 项目: https://github.com/haixiangyan/bigass-micro-app
往期推荐
解密初、中、高级程序员的进化之路(前端)
程序员一定会有35岁危机吗?
近 20k Star的项目说不做就不做了,但总结的内容值得借鉴
但凡早知道这28个网站,都不至于学得那么不扎实
如果你觉得这篇内容对你挺有启发,我想邀请你帮我三个小忙:
点个「在看」,让更多的人也能看到这篇内容(喜欢不点在看,都是耍流氓 -_-)
欢迎加我微信「huab119」拉你进技术群,长期交流学习...
关注公众号「前端劝退师」,持续为你推送精选好文,也可以加我为好友,随时聊骚。
点个在看支持我吧,转发就更好了
如果觉得这篇文章还不错,来个【转发、收藏、在看】三连吧,让更多的人也看到~
初探 MicroApp,一个极致简洁的微前端框架相关推荐
- 微前端框架qiankun项目实战(一)--本地开发篇
❝ 作者:黑化程序员 https://juejin.cn/post/6970310177517993998 ❞ 大家好,我是小黑. 公司使用技术栈是vue,最近遇到了一个需求,要把原有后台管理系统的功 ...
- 极简微前端框架-京东MicroApp开源了
前言 MicroApp是一款基于类WebComponent进行渲染的微前端框架,不同于目前流行的开源框架,它从组件化的思维实现微前端,旨在降低上手难度.提升工作效率.它是目前市面上接入微前端成本最低的 ...
- 微前端框架哪个好?QianKun还是MicroApp
在当前云原生微服务.业务中台.低代码平台等IT架构下,不再是传统的烟囱式应用系统建设,而是打破企业业务部门竖井,建立企业级的信息化平台(数据中台.业务中台),那么对业务开发的解耦和聚合将成为关键技术, ...
- 三、如何手动实现一个微前端框架雏形
如何手动实现一个微前端框架雏形 一.了解微前端 1. 什么是微前端 为了解决一整块儿庞大的前端服务所带来的变更和拓展方面的限制,将整体前端服务拆分成一些更小.更简单的,能够独立开发.测试部署的小块儿. ...
- 手写一个微前端框架(内含源码地址)
来源:伊撒尔 https://zhuanlan.zhihu.com/p/169800579 halo,大家好,我是 132,前阵子冥思了一会儿微前端,然后周六日趁热打铁,马上写了一个微前端框架,名叫 ...
- 基于京东micro-app微前端框架的项目实践
1.微前端应用介绍 1.1.微前端概念 微前端的概念是由ThoughtWorks在2016年提出的,它借鉴了微服务的架构理念,核心在于将一个庞大的前端应用拆分成多个独立灵活的小型应用,每个应用都可以独 ...
- 微前端解决方案初探 02 微前端框架 single-spa
single-spa 概述 single-spa 是一个实现微前端架构的框架. 在 single-spa 框架中有三种类型的微前端应用: single-spa application / parcel ...
- 极致的微前端框架,成本低、速度快、原生隔离、功能强
◆ 一.开源项目简介 无界微前端是一款基于 Web Components + iframe 微前端框架,具备成本低.速度快.原生隔离.功能强等一系列优点. ◆ 二.开源协议 使用MIT开源协议 ◆ 三 ...
- 微前端框架micro-app实践
随着项目规模扩大,项目越来越臃肿:早期项目依赖iframe来解决: iframe的缺点我就不在这描述的,大家都懂: 通过nginx配置将不同项目正好在一个域名下: 微前端框架乾坤等等: 无意中发现 m ...
最新文章
- c语言查单词小程序,【附源码】小程序初窥之简单查单词
- Jupyter notebook 入门教程
- 作者:曾嘉(1980-),男,博士,华为诺亚方舟实验室高级研究员和项目经理。...
- 使用telnet命令测试网络时连接建立后无法退出解决办法
- Java 设计模式之 State 状态模式
- Invalid Gradle JDK configuration found_build.gradle里dependencies标签页的实现原理
- 20191208_神经网络交叉验证
- 《数字图像处理 冈萨雷斯》数字图像基础——学习笔记
- Fastjson小于1.2.67 UnSerializable RCE分析研究
- 数据库面试复习_数据科学面试复习
- 使用Windows 10自带工具 校验MD5 SHA1 SHA256类型文件
- 华为matex搭载鸿蒙系统,华为MateX推迟至9月上市,或预装鸿蒙系统
- 邮政局计算寄往美国的国际物品快递资费
- 大白菜装机教程win10_如何用光盘快速重装系统(图文教程)
- 叶子结点和分支节点_树的度和结点数的关系
- wannacry 勒索病毒_WannaCry:勒索软件尸检
- 守护线程(Daemon)、钩子线程(Hook)简述
- Qt问题:QDilog按下回车键竟然关闭了,想屏蔽Return键结果和Enter键弄反了,最后还接收不到Return的键盘事件了,气人不
- 56个民族数组Json文件
- Linux下区分物理CPU、逻辑CPU、CPU核数、线程数以及查看命令
热门文章
- 示范性微电子院校“抢人”,芯片赛道黄不了!
- 程序设计之HardCoding
- Spark一路火花带闪电——Spark常用算子(参数及其返回值)探究
- Wireshark抓包 任意qq好友IP精准定位
- 研讨会 | “数据星河”系列活动—大数据人才培养现状和思考
- (转)从程序员角度看ELF-译文
- [MFC]: 找不到标识符“xxxx“,或者vs报错“错误 LNK2019 无法解析的外部符号”
- android手机自带表情符号,android系统自带Emoji表情与表情描述互相转换
- 用Python爬取糗事百科段子,可视化后结果发现
- Python中设置横坐标间距,进行绘图