Skip to content

NPM Module. Enable the events/actions communication between Micro Frontend/UI applications. Vanilla javascript implementation. Framework agnostic. CI/CD release train. 100% meaningful unit test coverture.

License

Notifications You must be signed in to change notification settings

rproenza86/events-distributor

Repository files navigation

events-distributor

Build Status Code Factor/Quality Coverage Status npm (scoped) npm license

System to enable communication between Micro UI/Frontend applications

Description

Node.js package to use as NPM module. It will work as a helper utility to support Micro UI/Frontend architectures allowing the event communications among applications or modules.

The use of the events-distributor enable the proper encapsulation, low coupling and high cohesion which all scalable system must to have in order to achieve total indecency on his release train and Software Development Life Circle.

Table of Contents

Installation

npm install @rproenza/events-distributor --save

yarn add @rproenza/events-distributor

Usage

Module instantiation

import GlobalEventDistributor from '@rproenza/events-distributor';

const eventDistributor = new GlobalEventDistributor();

Application registration

/**
 * appStore = {
 *    dispatch: () => {},
 *    getStore: () => {}
 * }
*/
eventDistributor.registerStore(appName, appStore);

Events communications

Broadcasting event

/**
 * eventToBroadCast = {
 *    type: 'YOUR_GREAT_ACTION_SUCCESS,
 *    payload: {}
 * }
*/
eventDistributor.dispatch(eventToBroadCast);

Sent event to specific application

/**
 * directEventToAppB = {
 *    type: 'YOUR_GREAT_APP_A_ACTION_SUCCESS,
 *    payload: {}
 * }
*/
eventDistributor.dispatch(directEventToAppB, appB.name);

Get an application state

/**
 * The function parameter is optional.
 * If omitted it will be returned the parent's app state
*/
eventDistributor.getState(appTarget: string = '');

Test

npm run test

Contributing

*(see Contributing Doc)

Concepts

This module was inspired by redux and its actions communication system.

Store

Object with a dispatch function.

Ex. this appA.store :

// Applications
const appA = {
    name: 'MicroAppA',
    store: {
        dispatch: function(event) {
            // App's event manipulation
            const appACatch = {
                ...event,
                meta: 'Event catch on A'
            };
            // App logic
            eventCatchQueue.push(appACatch);
        }
    }
};

Events

Object passed as parameter to the dispatch function.

The events objects are like Redux's actions. They could hold any structure but there is a preferred framework which will ensure the proper module functioning under good practices.

Ex. of a basic and well structured event:

// Applications
const event = {
  type: 'UPDATE_TEST_DRIVE_DAY',
  payload:{
      date:  '2018-12-21T05:00:00.000Z'
  },
  meta: {
    appSource: 'AppointmentDatePicker',
    eventType: 'BROAD_CAST_ACTION',
    state: {
      testDrive: {
        day: '2018-12-21T05:00:00.000Z',
        email: 'Raul@gmail.com',
        firstName: 'Raul',
        hasError: false,
        isCalculating: false,
        lastName: 'Proenza',
        phone: '123-624-4321',
        time: 'Morning'
      }
    }
  }
};

Support

Create an Issue for any bug or feature request.

Expect a response within 2 business days after submitted your bug report or feature request. However, in many cases you'll see a response within 24 hours.

License

license

About

NPM Module. Enable the events/actions communication between Micro Frontend/UI applications. Vanilla javascript implementation. Framework agnostic. CI/CD release train. 100% meaningful unit test coverture.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published