@rallie/core

it's an experimental libarary now, do not use in production enviroment

简体中文 ｜ English

Introduction

Obvious is a progressive micro-front-end library. In the micro-front-end architecture, Obvious focuses on solving the problem of scheduling and communication between micro frontend applications. It aims to help users quickly build a basic micro-front-end system and support deeper customization to achieve a complete and reliable micro-front-end architecture by providing easy-to-understand APIs and flexible middlewares.

Features

• Provide flexible and convenient communication capabilities based on global state, event broadcast, and event unicast
• Support declaring dependencies when defining micro applications, and automatically activate dependencies when activating micro applications, allowing micro applications to be freely split and combine
• Provide a flexible middleware mechanism: users can flexibly control the resource loading and execution process of micro-applications by writing middleware, thereby elegantly expanding functions such as automatic registration of micro-application resources, logs, html-entry and js sandboxes
• Naturally supports loading multiple micro-applications in a single-screen page, based on which a high-end spa micro-front-end framework can be encapsulated, and the activation conditions of the micro-applications are completely freely set by the developer, no longer limited to routing hijacking.
• The concept is simple, the functional API is clear and easy to understand, and it can be developed without documentation

Installation

npm:

npm install @obvious-js/core

umd:

<script src="https://unpkg.com/@obvious-js/core@{version}/dist/index.umd.js"></script>

Quick Start

In host enviroment, create a bus and declare the resource info

import { touchBus } from '@obvious-js/core';

const [bus] = touchBus()
bus.config({
  assets: {
    'react-app': {
      js: [
        'http://localhost:3000/static/js/bundle.js',
        'http://localhost:3000/static/js/0.chunk.js',
        'http://localhost:3000/static/js/main.chunk.js'
      ]
    },
    'vue-app': {
      js: [
        'http://localhost:8081/js/app.js',
        'http://localhost:8081/js/chunk-vendors.js'
      ]
    }
  }
});

micro frontend application can get the bus, and create an App with it, at the same time, a socket can be created to communicate with other App

vue-app

import Vue from 'vue';
import App from './App.vue';
import { touchBus } from '@obvious-js/core';

Vue.config.productionTip = false;

const [bus] = touchBus();
const socket = bus.createSocket();

type BroadcastType = {
  broadcastEvent: () => void
};

type UnicastType = {
  unicastEvent: () => void
}

const off = {};
let vm = null

bus.createApp('vue-app')
  .relyOn(['vue'])
  .bootstrap(async (config) => {
    off.unicast = socket.onUnicast<UnicastType>({
      unicastEvent() {
        // do something
      }
    });
    off.broadcast = socket.onBroadcast<BroadcastType>({
      broadcastEvent() {
        // do something
      }
    });
    const [user, theme] = await socket.waitState(['user', 'theme']);
    socket.setState('theme', theme => {
      theme.value = 'dark';
    });
    socket.watchState('user', user => user.name).do((userName) => {
      // do something
    });
    vm = new Vue({
      render: h => h(App),
    }).$mount(config.mountPoint);
  })
  .destroy(() => {
    vm.$destroy();
    off.broadcast();
    off.unicast();
  });

react-app

import React from 'react';
import ReactDOM from 'react-dom';
import { touchBus } from '@obvious-js/core';

type BroadcastType = {
  broadcastEvent: () => void
};

type UnicastType = {
  unicastEvent: () => void
}

const [bus] = touchBus();
const socket = bus.createSocket();
const broadcaster = socket.createBroadcaster();
const unicaster = socket.createUnicaster();

bus.createApp('react-app')
  .relyOn(['react'])
  .bootstrap(async (config) => {
    broadcaster.broadcastEvent();
    unicaster.unicastEvent();
    socket.initState('user', { name: 'Philip' });
    socket.initState('theme', { value: 'light' });
    console.log(socket.getState('theme', theme => theme.value));
    ReactDOM.render(<App />, document.querySelector(config.mountPoint));
  });

In host enviroment, activate the application

bus.activateApp('react-app', {mountPoint: document.getElementById('#react-app')});
bus.activateApp('vue-app', {mountPoint: document.getElementById('#vue-app')});

Example

npm run demo:install
npm run demo:react
npm run demo:vue
npm run demo:host

Document

obvious.js: the progressive micro frontend library (Not the latest)

License

obvious is MIT Licensed