Layout Service for Micro-Frontend Composition
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Complex web applications with multiple components developed by different teams face challenges in efficient execution, reliable testing, and consistent release due to disparate components and monolithic interface backends, leading to increased computational complexity, resource utilization, and delayed testing.
Innovation Solution
The implementation of technology-agnostic user interface micro-services that compose web applications from multiple micro-frontends, allowing independent development and deployment of micro-services by different teams, using a layout service to onboard and render micro-frontends without inline frames, and caching resources to reduce network requests.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Adaptability or versatility
If inline-frames are used to integrate micro-services into a single web application interface package, then the user interface can be composed of multiple micro-services developed by different teams, but the release cycle of the parent container web application is negatively impacted and the system becomes dependent on a monolithic interface back-end
Solution Approach 1:
The patent extracts the interface rendering logic from the monolithic back-end and places it in the client's web browser. The layout service generates HTML code that the browser executes locally, eliminating the dependency on a centralized monolithic interface back-end while maintaining the ability to compose multiple micro-services in the user interface.
2Adaptability or versatility
If inline-frames are used to integrate micro-services, then multiple micro-services can be rendered in a larger user interface, but testing becomes challenging because individual components can only be tested once the full web application has been assembled
Solution Approach 1:
The layout service performs preliminary actions by generating the HTML structure and resource references before the actual micro-service components are fully assembled. This allows early validation of the interface composition logic and resource loading strategy, enabling testing of the integration mechanism itself without requiring all micro-services to be complete.
3Productivity
If multiple micro-services are integrated using traditional methods, then different teams can develop independently, but computational complexity and resource utilization increase
Solution Approach 1:
Instead of loading and executing multiple separate micro-service applications, the system creates a single HTML representation that references the necessary resources. The browser then renders this unified view, eliminating the computational overhead of managing multiple concurrent application contexts while preserving independent development capabilities.
Data Source
AI summary
Described embodiments provide systems and methods for providing a web application composed of micro-frontends. The systems and methods can receive a request to access a micro-frontend of a user interface for a web-application from a client application executing on a client device. The systems and methods can retrieve one or more user interface specifications corresponding to a micro-service that provides the micro-frontend. The systems and methods can identify a plurality of resources used by the micro-service corresponding to the user interface specification. The systems and methods can add a plurality of tags to a web page based on the plurality of resources. The systems and methods can load the plurality of resources to establish data objects for the micro-service, in response to adding the plurality of tags to the web page, to construct a document object model for rendering via the client application executing on the client device.