MULTA - MULTiple Application

Solution to have multiple standalone app executed on a single browser tab

Table of contents

1. Description
2. Installation
3. Usage
   • Client Side
   • Server Side
4. API
5. Example

Description

MULTA - is a module for detecting, launch, switch few applications on the single browser tab, which has complex logic for detecting and launching apps and very simple interface of usage.

MULTA this is simple tool for organized and do work your BigApp from many other applications, modules, libraries and etc...

Using appGroupConfig the MULTA always knows about changes in any of apps and use only actual data. All apps are independent, it does scaling more simple

MULTA does not bind to any of frameworks or library you will be able to choose your own stack!

Installation

• Set private repository:

  npm config set registry https://registry.npmjs.org/:_authToken=[NPM_TOKEN]

• Install MULTA library:

  npm install @ciklum/multa --save

Usage

Client Side

• Import Multa to file

  import { Multa } from '@ciklum/multa';
  // or
  import { Multa } from '@ciklum/multa/client';
  ...

• Construct Multa with appGroupConfig

  import { Multa } from '@ciklum/multa';
  
  const multa = new Multa({ appGroupConfig });
  ...

• Launch Multa with currentUrl

  import { Multa } from '@ciklum/multa';
  
  const multa = new Multa({ appGroupConfig });
  multa.launch({ currentUrl: '/offer/full-information' });
  ...

Server Side

• Import Multa to file

  import { Multa } from '@ciklum/multa/server';
  ...

• Construct Multa with appGroupConfig

  import { Multa } from '@ciklum/multa/server';
  
  const multa = new Multa({ appGroupConfig });
  ...

• Call getEmbedSources for getting data for application by url

  import { Multa } from '@ciklum/multa/server';
  
  const multa = new Multa({ appGroupConfig });
  multa.getEmbedSources({ url: '/offer/full-information' }).then(embedSources => {
      // ...
  });
  ...

API

Multa

• .launch() - multa/client - for application rendering

  ...
  multa.launch({ currentUrl: '/offer/full-information' });
  
  multa.launch({
      // 'preDetectedApps' _optional_ - for preventing render if application was rendered on the server
      preDetectedApps: ['app-shared', 'app-offer'],
      currentUrl: '/offer/full-information',
  });
  ...

• .update() - multa/client - actualizing application state

  ...
  multa.launch({ currentUrl: '/offer/full-information' })
  
  // will re-render applications if detected apps different
  multa.update({ currentUrl: '/order/checkout' });
  ...

• .getEmbedSources() - multa/server - for getting of data which using for SSR

  ...
  const embedSources = multa.getEmbedSources();
  // {
  //    baseHref: '/offer',
  //    detectedApps: ['app-shared', 'app-offer'],
  //    appSources: {
  //      'head-content': '<link href="..." rel="stylesheet" />...',
  //      'body-content': '<script src="..."></script>...'
  //      'header-container': '<app-shared>...</app-shared>',
  //      'content-container': '<app-offer>...</app-offer>',
  //    },
  // }
  ...

• .on() - multa/client - for subscribe to MULTA lifecycle (load, bootstrap, mount, unmount)

  ...
  multa.on('*', ({ eventType, payload }) => {
    // eventType = 'bootstrap';
    // payload = { id: 'app-offer' };
  });
  
  multa.on('load', (payload) => {
    // payload = { id: 'app-offer' };
  });
  ...

  | Lifecycle event | Description | | ------ | ------ | | * | On all lifecycle events | | load | On start of application preparing | | bootstrap | On start of application rendering | | mount | On end of application rendering | | unmount | On end of application destroying |

ApplicationWrapper

import { ApplicationWrapper } from '@ciklum/multa';

const applicationWrapper = new ApplicationWrapper(appData);
// appData = { id, appConfig, appSvcConfig };
// see example in sandbox (app-dad)

• .initialize() - multa/client - async method for app preparation for rendering

  applicationWrapper.initialize({
      currentUrl: '/offer/full-information',
  });
  ...

• .render() - multa/client - async method for app render

  ...
  applicationWrapper.render();
  ...

• .destroy() - multa/client - method for app destroy and clearing space (container, styles, scripts)

  ...
  applicationWrapper.destroy();
  ...

Example

In the repository placed sandbox for presentation of module.

Sandbox QuickStart

$ npm i
$ npm run sandbox:install

// for starting in production mode
$ npm run sandbox:start

// for starting in development mode
$ npm run sandbox:start:dev

// open http://localhost:8000 in the browser

Sandbox structure

/sandbox -> root of web-app
    /config/
        /appGroupConfig.json -> general config
    /src/
        /app/
        /app-svc/
            /routes/
                /api/
                    /embed.js -> /api/embed route handler
    /static/
        /apps/ -> sources of micro applications
            /app-offer/
            /app-order/
            /app-shared/
            /app-splash/
                /main.js
                /style.css
        /vendors/
            /core.js -> common part of applications