About

out-of-box micro-frontends solution

• Full Documentation
  • Motivation
  • Principle
  • Runtime Core
  • x-view
  • x-sandbox

Introduction

Let's eat some food

Runtime Core

Define App component with "sidecar"

// index.js
import { connect } from "@arice/core";
import UserInfo from "./UserInfo";
import effects from "./effects";

function App({ dispatch, provide }) {
  provide('App')({
    openPage: page => {
      openPage(page)
    }
  });

  return <Layout>
    <UserInfo />
    <Footer onClick={() => dispatch('logout')}></Footer>
  </Layout>;
}

export default connect({ effects })(App);

// effects.js
export default ({ $, inject }) => {
  const service = inject({
    'userInfo': '@component/UserInfo'
  });

  $('logout').subscribe(() => {
    service.userInfo.logout();
  });
})

Define UserInfo component with "sidecar"

// index.js
import { useState } from 'react';
import { connect } from "@arice/core";
import effects from "./effects";

function UserInfo({ dispatch, provide }) {
  const [user, setUser] = useState('');

  provide('UserInfo')({
    logout: () => {
      logoutService.call();
    }
  });

  return <div/>
    <span>{user}<span>
    <Link onClick={url => dispatch('openPage', url)} title="open user detail page" />
  </Link>;
}

export default connect({ effects })(UserInfo);

// effects.js
export default ({ $, inject }) => {
  const service = inject({
    'app': '@component/app'
  });

  $('logout').subscribe(() => {
    service.app.openPage();
  });
})

Start

import Rice from "@arice/core";
import App from "./App.jsx";

const app = Rice();

app.load(() => <App />);

app.start("#container");