Nested Micro Front End Routing via URL Parsing

Resolve Bottlenecks,
Find Innovative SolutionsGenerate Solutions

Solution Overview

Problem

Micro front ends (MFEs) in web applications face difficulties when dynamically updated, as existing methods require knowledge of internal routes and subroutes, which can be complex and restrictive, limiting flexibility in development and deployment.

Innovation Solution

A system and method for providing routing to nested MFEs by parsing URLs to identify route labels and other data, allowing the shell application to load MFEs and nested applications agnostically, distributing routing responsibilities between the shell application and MFEs, and enabling dynamic updates without full knowledge of routing structures.

Engineering Contradictions & Design Principles

VSEngineering Contradiction Analysis

1Reliability

If the host application learns routes for each MFE after deployment, then routing control is achieved, but the process becomes complex and time-consuming

Engineering Contradiction:

Improverouting controlVSAvoidroute learning process

Core Design Contradiction:

ReliabilityVSLoss of time

Solution Approach 1:

The patent applies preliminary action by having MFEs register their routing information with the host application before actual routing occurs. The host application maintains a pre-built routing table that maps MFE identifiers to internal routes, eliminating the need for real-time route learning during deployment or updates.

Inventive Principle:

Principle #10Preliminary action

2Device complexity

If MFE routes are proscribed to reduce route learning overhead, then routing complexity is reduced, but MFE development flexibility is restricted

Engineering Contradiction:

Improverouting complexityVSAvoidMFE development flexibility

Core Design Contradiction:

Device complexityVSAdaptability or versatility

Solution Approach 1:

The patent implements dynamics by allowing MFE routing configurations to be updated dynamically without requiring host application restarts or complex relearning processes. The host application can adapt to MFE updates by receiving new routing information through standardized registration mechanisms, maintaining flexibility while reducing complexity.

Inventive Principle:

Principle #15Dynamics

Solution Approach 2:

The patent applies feedback by implementing a registration system where MFEs provide routing information to the host application. This feedback mechanism allows the host to automatically update its routing table with new MFE configurations, eliminating the need for manual route provisioning while maintaining MFE development flexibility.

Inventive Principle:

Principle #23Feedback

3Adaptability or versatility

If MFEs are dynamically updated during application life, then development flexibility is improved, but routing structure changes require additional route learning

Engineering Contradiction:

ImproveMFE update flexibilityVSAvoidadditional route learning

Core Design Contradiction:

Adaptability or versatilityVSLoss of time

Solution Approach 1:

Inventive Principle:

Principle #10Preliminary action

Data Source

PatentUS20240394082A1Complex, dynamic routing for nested runtime micro front ends

Publication Date: 2024.11.28 CAPITAL ONE SERVICES LLC

AI summary

Provided herein are systems and method for providing routing of complex dynamically updated website applications using micro front ends (MFEs). The MFEs can be instantiated in a nested fashion. Each MFE can be agnostic to other levels of the website application structure that are not directly adjacent to the MFE in the hierarchy of the nesting. Navigation events can be bubbled up to a shell application to retain top-level control of routing within the website application without requiring the shell application to have all levels of routing in the hierarchy.