Lazy Hydration of Low Code Controls via Visibility Watcher

Resolve Bottlenecks,
Find Innovative Solutions
Generate 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

VSEngineering Contradiction Analysis

1Reliability

If all controls are rendered and hydrated upfront, then the application is fully functional, but the Time to Interactive grows exponentially

Engineering Contradiction:
Improveapplication functionalityVSAvoidTime to Interactive
Core Design Contradiction:
ReliabilityVSLoss of time

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.

Inventive Principle:
Principle #10Preliminary action

2Reliability

If all controls are rendered upfront, then the application is complete, but the DOM size increases causing browser lag

Engineering Contradiction:
Improveapplication completenessVSAvoidDOM size
Core Design Contradiction:
ReliabilityVSDevice complexity

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.

Inventive Principle:
Principle #1Segmentation

3Adaptability or versatility

If the number of controls increases, then the application functionality improves, but page load time increases

Engineering Contradiction:
Improveapplication functionalityVSAvoidpage load time
Core Design Contradiction:
Adaptability or versatilityVSLoss of time

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.

Inventive Principle:
Principle #26Copying

Data Source

PatentUS20250181320A1Hydrating and rendering of controls on a low code application
Publication Date: 2025.06.05 UIPATH INC
  • US20250181320A1 patent drawing
  • US20250181320A1 patent drawing
  • US20250181320A1 patent drawing

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.