Micro Frontend Layer for Host Integration
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Implementing micro frontend architecture in web applications is challenging due to difficulties in integrating multiple micro frontends with the host application to provide a cohesive user experience, especially when some micro frontends originate from external sources, requiring seamless communication and controlled access to host system resources.
Innovation Solution
A micro frontend layer manages interactions between the host application and internal and external micro frontends, ensuring seamless communication and controlling access by distinguishing between internal and external micro frontends, limiting external micro frontend privileges and data access, and facilitating data exchange based on type.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Ease of manufacture
If multiple micro frontends are integrated with the host application, then the web application can provide modular and maintainable code structure, but it becomes difficult to integrate multiple micro frontends to provide a cohesive user experience
Solution Approach 1:
The patent introduces a gateway as an intermediary component that mediates between micro frontends and the host application. The gateway manages communication protocols, data exchange formats, and integration logic, allowing micro frontends to be integrated without direct complex interactions. This intermediary layer standardizes the integration process and maintains cohesive user experience while preserving code modularity.
2Adaptability or versatility
If external micro frontends are hosted in frames, then external developers can contribute to the web application, but it raises security concerns regarding access to host system resources
Solution Approach 1:
The patent implements different security policies and access controls for different micro frontend types. Internal micro frontends receive full access to host resources, while external micro frontends hosted in frames are restricted to specific authorized resources only. The gateway enforces these localized security policies based on the origin and type of each micro frontend, allowing external integration while maintaining security through differentiated access rights.
3Ease of operation
If a micro frontend layer is introduced to manage interactions, then seamless communication can be achieved between host and micro frontends, but the system complexity increases
Solution Approach 1:
The patent designs the gateway with multi-functional capabilities that handle multiple concerns within a single component. The gateway simultaneously manages communication protocols, authentication, data exchange, and security policies for all micro frontends. This universal approach consolidates what could be multiple separate layers into one gateway, achieving seamless communication while minimizing the increase in system complexity through functional consolidation.
Data Source
AI summary
A host-side system for displaying a web page includes at least one processing circuitry which discovers at least one micro frontend in web page code. Each micro frontends has a respective type, internal or external. Internal micro frontends are inline with the web page code and external micro frontends are hosted in a frame in the web page code. A host application is executed for rendering the web page. Data exchange between the host application and the micro frontends is managed using a micro frontend layer in accordance with the respective types of the micro frontends.