Micro Frontend Fragment Loading Without a Shell Application
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Conventional shell applications lack flexibility and cause significant time delays due to their static design and the need for individual start-up processes of content applications, leading to user frustration and complex maintenance.
Innovation Solution
A Micro Frontend (MFE) service platform that hosts a function toggle repository, allowing micro frontends to load directly on the browser, eliminating the need for a shell application, and providing governance through a service platform with features like user authentication, reverse proxy, and a function toggle repository for flexible and scalable deployment of micro frontend fragments.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Reliability
If a shell application is used to host and manage micro frontends, then governance and security control are improved, but flexibility and adaptability deteriorate due to static design and predetermined content applications
Solution Approach 1:
The system segments the monolithic shell application into independent micro frontend fragments that can be dynamically selected and loaded. Each fragment is self-contained and can be independently developed, deployed, and managed, allowing the system to maintain governance while achieving flexibility through modular composition of UI components.
Solution Approach 2:
The system transitions from a static shell application structure to a dynamic composition model where micro frontend fragments are selectively loaded based on runtime conditions. The shell application dynamically determines which fragments to instantiate, enabling adaptability while maintaining centralized control through the shell's routing and loading logic.
2Shape
If a shell application is used to provide a framework for applications, then a cohesive user interface structure is improved, but loading time and user response delay worsen due to individual start-up processes of content applications
Solution Approach 1:
The system pre-loads and caches micro frontend fragments in the browser before they are needed. The shell application maintains a registry of available fragments and their dependencies, allowing the browser to prefetch resources and reduce cold-start delays. This preliminary preparation maintains UI structure integrity while significantly reducing loading times.
Solution Approach 2:
The system uses cached copies of micro frontend fragments stored in the browser's cache storage. When a fragment is requested, the shell application checks for cached versions and loads them directly without requiring a full re-download, thereby maintaining the structured UI composition while minimizing network latency and loading delays.
3Productivity
If micro frontends are injected into a shell application, then content delivery is improved, but complexity of the system increases due to the need for coordination between shell and multiple content applications
Solution Approach 1:
The system extracts the complexity of coordinating multiple content applications from the shell application by implementing a standardized fragment registration and loading protocol. Each micro frontend fragment independently declares its dependencies and routing requirements, allowing the shell to systematically manage them without complex inter-application coordination logic, thereby maintaining productivity while reducing system complexity.
4Adaptability or versatility
If the shell application is modified to support new functionalities, then adaptability is improved, but stability of existing features deteriorates due to potential corruption of support for other features
Solution Approach 1:
The system segments functionality into isolated micro frontend fragments that can be independently modified without affecting the shell application or other fragments. Each fragment encapsulates its own functionality and dependencies, allowing new features to be added by introducing new fragments rather than modifying existing shell code, thereby maintaining both adaptability and stability.
Solution Approach 2:
The shell application acts as an intermediary layer that manages the lifecycle of micro frontend fragments through standardized interfaces. When new functionalities are needed, developers create new fragments that communicate through the shell's established protocols rather than directly modifying the shell, thus enabling adaptability while preserving the stability of the core system composition.
Data Source
AI summary
Systems and methods for a frontend architecture that comprise a service platform that hosts a function toggle repository. The function toggle repository selects specific micro frontend fragments for specific applications. That is, the service platform may determine a particular set of functions to be performed and in turn selects the micro frontend fragments that service that function set. As the function toggle repository may select specific micro frontend fragments for specific applications at runtime and thus provide the needed governance, all new micro frontend fragments and their associated APIs may be onboarded immediately.