Lazy Hydration of Low Code Controls via Visibility Watcher
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Existing methods for rendering and hydrating controls on webpages result in increased Time to Interactive (TTI) as the number of controls grows, leading to a scalable issue.
Innovation Solution
Implementing a lazy rendering and hydration method where only controls that fit within the viewport are hydrated and rendered, utilizing a visibility watcher element and the Intersection Observer API to determine visibility.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Reliability
If all controls are rendered and hydrated upfront, then the application is fully functional, but the Time to Interactive grows exponentially
Solution Approach 1:
The patent applies preliminary action by pre-defining control templates and their configurations before runtime. The control templates are prepared in advance with all necessary properties and bindings, allowing for rapid instantiation during runtime without requiring full hydration of all controls upfront. This enables the system to have controls ready for immediate use when needed, while avoiding the overhead of initializing every control before the user interacts with the application.
2Reliability
If all controls are rendered upfront, then the application is complete, but the DOM size increases causing browser lag
Solution Approach 1:
The patent applies segmentation by dividing controls into template definitions and instantiated instances. Instead of creating a single large DOM containing all controls, the system segments controls into reusable templates that are instantiated on-demand. Each control instance in the DOM is a lightweight reference to its template definition, which resides outside the DOM. This segmentation dramatically reduces DOM size while maintaining application completeness, as controls are created in the DOM only when needed for user interaction.
3Adaptability or versatility
If the number of controls increases, then the application functionality improves, but page load time increases
Solution Approach 1:
The patent applies copying by using control templates as reusable blueprints that can be instantiated multiple times without duplicating their full definitions in the DOM. Each control instance is a lightweight copy that references the master template definition stored in memory. This allows the application to include numerous controls with rich functionality while maintaining fast load times, as the system copies only the necessary instance data rather than duplicating entire control definitions for each instance.
Data Source
AI summary
A system and method for performing hydrating and rendering of controls on a low code application includes initiating a visibility watcher element. The system and method also includes continuously rendering a plurality of controls on the application when the visibility watcher element intersects with the viewport. The system and method further includes exiting from the visibility watcher element from the viewport when the visibility watcher element is no longer intersecting with the viewport.


