初探 MicroApp,一个极致简洁的微前端框架

简介: 哈喽大家好,我是海怪。

image.png

前言




哈喽大家好,我是海怪。


在微前端的领域里,相信大家都听说过阿里的 qiankun。我自己在上几个月也一直用它来做一些实践:



在使用过程中我发现 qiankun 还是有一些缺点的:


  • 项目的侵入性依然很强。之前为了在组内推广,都做了 3 次分享,可把我口水说干了
  • qiankun 在沙箱方面依然有不少坑。看去年 qiankun 一年的 Change Log,发现都是在修复沙箱相关的问题


不仅我用 qiankun 难受,京东的小伙伴也用得很难受,所以,京东在去年 7 月推出了自己微前端解决方案 —— MicroApp。今天就带大家初探一下这个新星微前端框架吧。


特色




MicroApp 一上来就表明了自己的立场:


micro-app 并没有沿袭 single-spa 的思路


借鉴了 WebComponent 的思想,micro-app 通过 CustomElement 结合自定义的 ShadowDom,将微前端封装成一个类 WebComponent 组件,从而实现微前端的组件化渲染。


image.png


它在 基座应用子应用 之间充当桥梁胶水的作用。


image.png


有下面的优势:


  • 使用简单。 将功能封装到 WebComponent 中
  • 零依赖。 无依赖、更高的扩展性
  • 兼容所有框架 技术栈无关


下面我们直接开箱看看 micro-app 能给我们带来什么样的惊喜吧。


注:所有代码都放在 Github 项目 中。


架构




虽然官方也给出了完整的 样例 ,不过里面代码太多了,所以我就弄一个简单一点的项目,架构如下:


image.png


起步


主应用使用 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>
  );
}
复制代码


就有最简单的路由了:


image.png



添加 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 里访问它了。


image.png



接入 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-app
        name='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 应用了:


image.png



整个接入的过程非常的简单,侵入性的操作总结有:


  • 主应用
  • 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-app
        name='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)就接入了新的微应用了:




image.png

数据通信




数据通信也是 micro-app 的一大亮点,在使用层面上比 qiankun 的 EventBus 要好用那么 一丢丢。啊对,也就是那么一丢丢,因为使用方式还是比较 Hacky 的。


父传子


在基座应用的容器组件里添加一个 microApp.setData 就好了:


// ReactMicroApp
const ReactMicroApp = () => {
  const [microAppState, setMicroAppState] = useState(microApp.getData('react-app'));
  // 发送数据给 react-app
  const 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-app
        name='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-app
        name='react-app'
        url='http://localhost:3001/'
        baseroute='/react-app'
        onDataChange={onDataChange}
      >
      </micro-app>
    </div>
  )
}


虽然没有用到 jsxCustomEvent,但是也一定要 import 进来,且不能把注释给干掉!

然后我们就可以看到数据通信的效果了:


image.png


高级功能




上面都是 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-app
      name='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 的功能,元素不会逃离 元素边界,子应用只能对自身的元素进行增、删、改、查的操作。


静态资源处理


使用 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 经验积累,在解决问题方面更稳一点。




相关文章
|
4月前
|
前端开发 JavaScript 开发者
颠覆传统:React框架如何引领前端开发的革命性变革
【10月更文挑战第32天】本文以问答形式探讨了React框架的特性和应用。React是一款由Facebook推出的JavaScript库,以其虚拟DOM机制和组件化设计,成为构建高性能单页面应用的理想选择。文章介绍了如何开始一个React项目、组件化思想的体现、性能优化方法、表单处理及路由实现等内容,帮助开发者更好地理解和使用React。
126 9
|
11天前
|
安全 前端开发 开发工具
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
43 5
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
|
5月前
|
人工智能 前端开发 JavaScript
前端架构思考 :专注于多框架的并存可能并不是唯一的方向 — 探讨大模型时代前端的分层式微前端架构
随着前端技术的发展,微前端架构成为应对复杂大型应用的流行方案,允许多个团队使用不同技术栈并将其模块化集成。然而,这种设计在高交互性需求的应用中存在局限,如音视频处理、AI集成等。本文探讨了传统微前端架构的不足,并提出了一种新的分层式微前端架构,通过展示层与业务层的分离及基于功能的横向拆分,以更好地适应现代前端需求。
108 0
|
5月前
|
JavaScript 前端开发 API
Vue.js:现代前端开发的强大框架
【10月更文挑战第11天】Vue.js:现代前端开发的强大框架
140 41
|
4月前
|
前端开发 JavaScript API
前端界的秘密武器:掌握这些框架,让你轻松秒杀99%的同行!
前端开发日新月异,掌握几个明星框架如React、Vue.js和Angular,不仅能让工作更得心应手,还能轻松超越同行。React以高效的虚拟DOM和组件化著称;Vue.js简洁易懂,灵活性高;Angular提供全面的解决方案,适合大型应用。此外,轻量级的Svelte也值得关注,其编译时处理设计提升了应用性能。掌握这些框架,结合深刻理解和灵活运用,助你在前端领域脱颖而出。
53 9
|
5月前
|
JavaScript 前端开发 测试技术
前端全栈之路Deno篇(五):如何快速创建 WebSocket 服务端应用 + 客户端应用 - 可能是2025最佳的Websocket全栈实时应用框架
本文介绍了如何使用Deno 2.0快速构建WebSocket全栈应用,包括服务端和客户端的创建。通过一个简单的代码示例,展示了Deno在WebSocket实现中的便捷与强大,无需额外依赖,即可轻松搭建具备基本功能的WebSocket应用。Deno 2.0被认为是最佳的WebSocket全栈应用JS运行时,适合全栈开发者学习和使用。
232 7
|
5月前
|
前端开发 JavaScript 中间件
前端全栈之路Deno篇(四):Deno2.0如何快速创建http一个 restfulapi/静态文件托管应用及oak框架介绍
Deno 是由 Node.js 创始人 Ryan Dahl 开发的新一代 JavaScript 和 TypeScript 运行时,旨在解决 Node.js 的设计缺陷,具备更强的安全性和内置的 TypeScript 支持。本文介绍了如何使用 Deno 内置的 `Deno.serve` 快速创建 HTTP 服务,并详细讲解了 Oak 框架的安装和使用方法,包括中间件、路由和静态文件服务等功能。Deno 和 Oak 的结合使得创建 RESTful API 变得高效且简便,非常适合快速开发和部署现代 Web 应用程序。
206 2
|
5月前
|
缓存 前端开发 JavaScript
前端serverless探索之组件单独部署时,利用rxjs实现业务状态与vue-react-angular等框架的响应式状态映射
本文深入探讨了如何将RxJS与Vue、React、Angular三大前端框架进行集成,通过抽象出辅助方法`useRx`和`pushPipe`,实现跨框架的状态管理。具体介绍了各框架的响应式机制,展示了如何将RxJS的Observable对象转化为框架的响应式数据,并通过示例代码演示了使用方法。此外,还讨论了全局状态源与WebComponent的部署优化,以及一些实践中的改进点。这些方法不仅简化了异步编程,还提升了代码的可读性和可维护性。
119 1
|
5月前
|
前端开发 JavaScript 开发者
qiankun(乾坤)微前端框架简介
qiankun(乾坤)微前端框架简介
529 1
|
5月前
|
前端开发 JavaScript 开发者
探索现代Web前端技术:React框架入门
【10月更文挑战第9天】 探索现代Web前端技术:React框架入门

热门文章

最新文章

  • 1
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 2
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 3
    从前端视角聊聊通义灵码使用经验,如何更好地提升研发效率
  • 4
    详解智能编码在前端研发的创新应用
  • 5
    巧用通义灵码,提升前端研发效率
  • 6
    智能编码在前端研发的创新应用
  • 7
    VSCode AI提效工具,通义灵码前端开发体验
  • 8
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
  • 9
    课程预告|前端开发者如何用好通义灵码,这份实战指南请查收
  • 10
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex