Micro Frontend Hibernation Using Screenshots and State Restore
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Micro frontends (MFEs) in web applications are resource-intensive due to their packaging with framework runtimes and additional code, leading to high computational and environmental costs, such as increased CO2 emissions.
Innovation Solution
Implementing intelligent hibernation of MFEs based on interaction metrics and policies, where inactive MFEs are replaced with screenshot images, saving their state and dependencies to local storage, reducing resource consumption.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Adaptability or versatility
If micro frontends are loaded and executed in web applications, then functionality and user interface components are provided, but resource consumption and carbon footprint increase
Solution Approach 1:
The system dynamically adjusts the state of micro frontends based on user interaction. Active MFEs are fully executed applications, while inactive MFEs are hibernated as static screenshots. This dynamic switching allows the system to adapt resource consumption to actual usage patterns, loading full functionality only when needed and using minimal resources during inactivity periods.
Solution Approach 2:
The system changes the operational parameters of micro frontends by transitioning them between two states: active (fully executed) and hibernated (static image). This parameter change from dynamic execution to static display significantly reduces resource consumption for MFEs that are not currently being interacted with, while preserving the ability to restore full functionality when needed.
2Use of energy by moving object
If micro frontends are replaced with screenshot images to reduce resource usage, then carbon footprint decreases, but interactivity and functionality are lost
Solution Approach 1:
The system implements periodic monitoring of user interactions with hibernated micro frontends. When interaction is detected (such as clicking on a screenshot), the system periodically restores the MFE from hibernation to full interactivity. This periodic activation ensures that interactivity is available exactly when needed while maintaining energy savings during extended periods of non-use.
Solution Approach 2:
The system extracts the interactive functionality from the visual display. The screenshot provides the visual interface, while the underlying MFE code remains separate and can be reactivated. This separation allows the visual element to remain static and low-resource while the interactive element can be restored on-demand, combining the benefits of both approaches.
3Productivity
If hibernation policy is implemented to manage micro frontends, then resource management efficiency improves, but system complexity increases
Solution Approach 1:
The hibernation system operates autonomously by monitoring user interactions and automatically transitioning micro frontends between active and hibernated states based on predefined policies. The system self-manages the complexity of tracking interaction metrics, determining hibernation candidates, and restoring MFEs when needed, without requiring manual intervention or complex external orchestration.
Data Source
AI summary
An example methodology includes, by a computing device, determining a micro frontend (MFE) on a page of an application to hibernate based on interaction metrics of the MFE and a hibernation policy and capturing a screenshot image of the MFE. The method also includes, by the computing device, saving information about a current state of the MFE in a manifest associated with the MFE and replacing the MFE on the page of the application with the screenshot image of the MFE to hibernate the MFE.