My last article Developing Micro Frontends with Single-Spa explained how to break down monolithic web applications in micro frontends using single-spa. In order to ensure loosely coupling between the micro frontends, I’ve used RxJS in my sample application.

This article is part of a series of articles that documents how to modernize a sample Java EE application from 2010 with modern technologies. The sample application is a simple e-commerce application. The original application and the source code of all subsequent modernization steps is available as open source on GitHub.

When breaking down backend monoliths in microservices or monolithic web applications in micro frontends, the amount of dependencies between components should be minimized. Event driven architectures provide several ways to do this.

For example, in my e-commerce application I use Apache Kafka as message broker together with Eclipse MicroProfile to communicate between Java backend services. The microservices which communicate with each other still need to understand which events occur and their data formats, but there is no blocking.

RxJS – Reactive Extensions For JavaScript

For the micro frontends in the sample application I looked for a similar capability. For me it feels like RxJS is the most natural JavaScript counterpart for web applications.

RxJS is a library for composing asynchronous and event-based programs by using observable sequences. It provides one core type, the Observable, satellite types (Observer, Schedulers, Subjects) and operators … (map, filter, reduce, every, etc) to allow handling asynchronous events as collections.

In addition to visible components single-spa also supports the usage of utility components. I’ve created a ‘messaging‘ component with three files.

#microservices #rxjs #web-development #programming #javascript