Event Broadcasting with Event Emitters on Front-End— A must-have!

There are times when we need to communicate to all the components in the component tree, for something that occurred in one component. It may be a session expiry which all the components may need to know about or an API server notifying the client of some maintenance under way. Thus event broadcasting is a must for any Client application.

Imagine while making a Web API call, our session expires. We need to propagate this session expiry event to all the loaded components within our Client Application so that each component can react to this event in its way.

There are three ways to handle this scenario.

1 — Expect the component to reload the whole application.

2 — Expect all the loaded components to poll for changes.

3 — Implement an Event Bus to broadcast the events and let loaded components subscribe to it.

While the first two approaches seem to work in the beginning, as the application grows larger, the application becomes slow and we soon realize the complexity.

That is when we opt for option 3.

Event Bus

Event Bus is a service that, when implemented, uses Event Listeners to multicast events to subscribers.

Below is how an Event Bus works:

1 — It provides a means to subscribe to an Event.