Synchronizing Variable Values Between Application Shell and Micro-Frontends

Resolve Bottlenecks,
Find Innovative SolutionsGenerate Solutions

Solution Overview

Problem

In micro-frontend architectures, inconsistencies in variable values between the application shell and micro-frontends can lead to errors and operability issues, as they often compute different values for the same variables, causing confusion and cascading impacts on the web application's quality and usability.

Innovation Solution

A synchronization system is introduced, comprising shell and micro-frontend synchronization handlers that communicate via a messaging bus to bi-directionally share updates of shared variables, ensuring consistency without requiring specific browser context configurations, thus simplifying development and reducing compatibility problems.

Engineering Contradictions & Design Principles

VSEngineering Contradiction Analysis

1Adaptability or versatility

If micro-frontends compute variable values independently, then each micro-frontend can be developed and deployed autonomously, but inconsistencies in variable values occur between the application shell and micro-frontends

Engineering Contradiction:

Improveautonomous development capabilityVSAvoidvariable value consistency

Core Design Contradiction:

Adaptability or versatilityVSReliability

Solution Approach 1:

The patent introduces a synchronization handler as an intermediary component that mediates between the application shell and micro-frontends. This handler subscribes to variable value changes in the application shell and automatically pushes updated values to subscribed micro-frontends, ensuring consistency without requiring the micro-frontends to compute values independently

Inventive Principle:

Principle #24Intermediary (Mediator)

Solution Approach 2:

The synchronization system implements a feedback mechanism where the application shell's variable value changes are automatically detected and communicated back to the micro-frontends through the synchronization handler. This feedback loop ensures that all components are always synchronized with the latest values without manual intervention

Inventive Principle:

Principle #23Feedback

2Reliability

If a synchronization system is implemented to maintain variable consistency, then reliability improves, but system complexity increases

Engineering Contradiction:

Improvevariable value consistencyVSAvoidsynchronization system complexity

Core Design Contradiction:

ReliabilityVSDevice complexity

Solution Approach 1:

The synchronization handler operates autonomously by automatically subscribing to variable changes and pushing updates to micro-frontends without requiring explicit configuration or manual coordination between components. The system self-manages the synchronization process, reducing the operational complexity despite adding structural elements

Inventive Principle:

Principle #25Self-service

Solution Approach 2:

The synchronization system is segmented into discrete, manageable components: the synchronization handler, the subscription mechanism, and the value pushing logic. This segmentation allows each component to be implemented and maintained independently, reducing overall system complexity while ensuring reliable synchronization

Inventive Principle:

Principle #1Segmentation

3Reliability

If browser context configurations are required for synchronization, then synchronization can be achieved, but development difficulty and compatibility problems increase

Engineering Contradiction:

Improvesynchronization functionalityVSAvoiddevelopment simplicity

Core Design Contradiction:

ReliabilityVSEase of manufacture

Solution Approach 1:

The synchronization handler implements a universal interface that works across different browser contexts without requiring specific configurations. The same synchronization mechanism can operate in various browser environments, making the system universally applicable and reducing compatibility issues across different platforms

Inventive Principle:

Principle #6Universality (Multi-functionality)

Data Source

PatentUS12067429B2Synchronizing variable values between an application shell and micro-frontends of a web application

Publication Date: 2024.08.20 RED HAT LLC

AI summary

Variable values can be synchronized between an application shell and micro-frontends by using a synchronization system described herein. In one example, an application shell that is executable in a browser window can include a first synchronization handler. The first synchronization handler can determine an updated value for a shared variable that is to be synchronized between the application shell and one or more micro-frontends in the browser window. The first synchronization handler can determine that a micro-frontend in the browser window is subscribed to receive updates for the shared variable. In response to determining that the micro-frontend is subscribed to receive the updates, the first synchronization handler can provide the updated value to a second synchronization handler of the micro-frontend for use by the micro-frontend.