Micro Frontend UI Platform for Multi-Device Adaptability
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Current digital transformation efforts face challenges in rapidly responding to market needs and adapting to new technologies like AI, IoT, and cloud computing, requiring multi-experience development platforms that can integrate various development activities across devices and environments while eliminating dependencies between UI elements.
Innovation Solution
A user interface platform development system with a microservices architecture that supports multi-browser, multi-device, and multi-OS, enabling flexible linking with external libraries, and configuring screens by fetching resources from multiple servers, using a micro frontend architecture with a cross-MSA resource sharing function and MSA message broker to eliminate dependencies between UI elements.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Adaptability or versatility
If a monolithic UI architecture is used, then development is simpler, but dependencies between UI elements cannot be eliminated and adaptability to different devices is reduced
Solution Approach 1:
The patent divides the UI architecture into independent micro-frontend modules that can be developed, deployed, and maintained separately. Each module encapsulates specific UI elements and their dependencies, allowing the system to adapt to different devices and OS without requiring complete architectural changes. This segmentation enables the UI to be composed of reusable, device-agnostic components.
Solution Approach 2:
The patent creates a universal UI framework that can operate across multiple devices, browsers, and operating systems through standardized component interfaces. The micro-frontend architecture allows the same UI components to function universally across different platforms while maintaining device-specific optimizations through configuration rather than structural changes.
2Productivity
If rapid response to market needs is pursued, then productivity increases, but code quality and maintainability may deteriorate
Solution Approach 1:
By segmenting the UI into independent micro-frontend modules, the patent enables parallel development of multiple features without affecting other parts of the system. Each module can be developed, tested, and deployed independently, accelerating time-to-market while maintaining code quality through modular boundaries that prevent cascading errors.
Solution Approach 2:
The patent establishes standardized component libraries and framework structures in advance, providing pre-built, reusable elements that developers can quickly assemble. This preliminary preparation of common UI patterns and component templates enables rapid feature development without sacrificing code quality, as the foundation has already been validated for reliability.
3Speed
If comprehensive resource management is implemented, then loading speed improves, but device complexity increases
Solution Approach 1:
The patent divides resources into module-specific bundles corresponding to each micro-frontend. This segmentation allows the system to load only the necessary resources for the current view rather than the entire application, improving loading speed. The resource management complexity is reduced by automatically mapping modules to their required resources through the standardized framework.
Solution Approach 2:
Each micro-frontend module automatically manages its own resource loading and dependency resolution through the framework's built-in mechanisms. The modules self-register their resource requirements, and the system automatically bundles and loads the appropriate resources without requiring complex centralized resource management logic.
Data Source
AI summary
A user interface platform integrated-development system and method having a microservice architecture are disclosed. A user interface platform development system according to one embodiment of the present invention may comprise: a development tool, which provides a WYSIWYG-type screen file development environment to generate a screen file source in which a user interface platform is formed into a structured component; a server for providing resources for screen file development through the development tool, and registering the developed screen file source; and a client which includes a client engine for loading the screen file source requested by the server and received as a response, and which executes same in a browser window to provide the user interface platform corresponding to a connected device.