Micro Front-end Architecture for Healthcare Service Management

Front-end Engineering Solution

context

In an era defined by rapid digital evolution reshaping all sectors, including healthcare, the adoption of new, flexible, and reliable digital solutions has become crucial. In this context, a healthcare company necessitates the development of an innovative digital platform for managing healthcare services: a solution capable of integrating complex functionalities, including patient management, appointments, availability and scheduling of medical resources (both personnel and spaces), examinations, and medical records.

The realization of this system requires the coordinated effort of several independent development teams, each responsible for developing specific modules.While this organizational structure is necessary to optimize development timelines, it introduces the need to manage interdependencies between these modules.

Furthermore, the numerous user flows involve interaction between components developed by different teams. Consequently, coordinating communication at a technical level becomes critical for the project’s success.

Development planning must be parallelized across the various modules to adhere to overall project timelines: this necessitates the implementation of strategies to ensure team autonomy and minimize dependencies that could hinder simultaneous development.

PAIN POINTs

Multiple Teams: The presence of specialized teams, while functional, leads to a fragmentation of processes and responsibilities, making it difficult to maintain an overall vision.
Unsynchronized Planning and Releases: Lack of coordination between teams generates delays and inconsistencies, negatively impacting the timeliness of implementations and the coherence of the final product.
Module Segregation: Limited code reusability and hindered functionality integration increase development complexity.
Interdependent Functionalities: The need to coordinate interactions between modules developed by different teams introduces bottlenecks and increases the risk of errors.
Non-Uniform Technologies: The heterogeneity of technologies used complicates platform maintenance and updates, increasing development costs and time.

solution

To address the identified critical issues, Bitrock proposes a Micro Front-end (MFE) architecture organized as follows:

“Shell” Application: The main application and orchestrator of other micro front-ends.
“Remote” Application: A stand-alone application that can be imported into different contexts.

The event-driven communication system is the core of the synchronization between MFE component states.

This “Event Bus” enables the synchronization of authentication status (user information, tokens, context data) and the sending of customizable cross-component messages.

Message management with “replay” functionality is also implemented using a reactive programming strategy: the event bus allows access to the last sent message even if the component is instantiated after the message itself.

The MFE architecture also enables vertical and segregated technical development of modules: each team has visibility of its internal contracts (APIs) and communicates externally via messages with the event bus.

However, segregation does not restrict the reuse of components by other teams; on the contrary, it encourages it. For instance, it allows a single team to develop an alerting system that can be imported and used throughout the application.

Specifically, the application comprises several MFEs – even with multiple nesting levels – simultaneously in the same view.

benefits

Loose coupling between different components: different technologies or versions simultaneously
Independent deployments with runtime dependency resolution between MFEs
Native event-driven communication that does not create direct code dependencies (build time)
Segregation of functionality ownership: API contracts must be known only to the relevant FE team
Composition of multiple and nested MFEs

Technology Stack and Key Skills

Webpack Module Federation
Direct use of native browser events
Build tool: vite/webpack/rsbuild
React 18 / Next.js
TypeScript

Micro Front-end Architecture for Healthcare Service Management

context

PAIN POINTs

solution

benefits

Do you want to know more about our services? Fill in the form and schedule a meeting with our team!

Milano

Treviso

Trieste

Chiasso