@rproenza/events-distributor

events-distributor

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

If you're README has a lot of info, section headers might be nice.

• Installation
• How to use
• Test
• Contributing
• Concepts
• Support
• License

Installation

npm install @rproenza/events-distributor --save

yarn add @rproenza/events-distributor

How to use

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: '[e-mail]',
        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

• GNU General Public License version 3
• Copyright 2025 © Atomic Coders.