Web Component Styling via ML and Caching

Resolve Bottlenecks,
Find Innovative SolutionsGenerate Solutions

Solution Overview

Problem

Cloud platforms face inefficiencies in reusing user interface (UI) components across different web pages, leading to increased development costs, latency, and decreased user satisfaction due to the need for manual redesign and re-download of similar UI components, which existing technologies fail to mitigate effectively.

Innovation Solution

The implementation of a web service that uses a combination of application programming interfaces (APIs) and machine learning techniques to automatically determine and apply styles to UI components, allowing for dynamic theming and local caching of components across web pages, reducing manual interaction and latency.

Engineering Contradictions & Design Principles

VSEngineering Contradiction Analysis

1Adaptability or versatility

If UI components are manually redesigned for each web page, then design flexibility and customization are improved, but development time and costs increase

Engineering Contradiction:

Improvedesign flexibilityVSAvoiddevelopment time

Core Design Contradiction:

Adaptability or versatilityVSLoss of time

Solution Approach 1:

The patent implements a UI component library that stores pre-designed components which can be copied and reused across multiple web pages. Instead of manually redesigning components for each page, developers can retrieve and instantiate components from the library, significantly reducing development time while maintaining design consistency through the standardized component templates.

Inventive Principle:

Principle #26Copying

Solution Approach 2:

The system performs preliminary design work by creating standardized UI component templates in advance within the component library. These pre-configured components include predefined structures, styles, and functionalities that are prepared beforehand and can be directly applied to multiple web pages, eliminating the need for repeated manual design efforts.

Inventive Principle:

Principle #10Preliminary action

2Adaptability or versatility

If UI components are redesigned separately for each web page, then page-specific customization is improved, but development costs increase

Engineering Contradiction:

Improvepage-specific customizationVSAvoiddevelopment costs

Core Design Contradiction:

Adaptability or versatilityVSEase of manufacture

Solution Approach 1:

The patent creates universal UI components that can serve multiple web pages and purposes. These components are designed with configurable parameters that allow them to adapt to different page contexts and requirements, enabling a single component to fulfill multiple functions across different pages without requiring separate custom designs for each instance.

Inventive Principle:

Principle #6Universality (Multi-functionality)

Solution Approach 2:

The system allows customization of UI components through parameter adjustments rather than complete redesigns. Developers can modify component properties such as colors, sizes, labels, and other attributes to achieve page-specific customization needs while reusing the same base component structure, thereby reducing development costs associated with creating entirely new components for each page.

Inventive Principle:

Principle #35Parameter changes

3Reliability

If UI components are re-downloaded for each web page, then component freshness is improved, but latency increases

Engineering Contradiction:

Improvecomponent freshnessVSAvoidlatency

Core Design Contradiction:

ReliabilityVSSpeed

Solution Approach 1:

The patent implements a caching mechanism that pre-loads and stores UI component data in the browser's local storage or memory. When components are first loaded, they are cached for subsequent reuse, eliminating the need to re-download them for each page view. This preliminary caching action reduces latency significantly while maintaining component availability and consistency.

Inventive Principle:

Principle #10Preliminary action

4Ease of operation

If manual redesign of UI components is required, then design control is improved, but productivity decreases

Engineering Contradiction:

Improvedesign controlVSAvoiddevelopment efficiency

Core Design Contradiction:

Ease of operationVSProductivity

Solution Approach 1:

The patent segments the UI development process into two distinct parts: component creation (done once in the library) and component instantiation (done repeatedly on pages). This segmentation allows developers to exercise full design control when creating the master component templates, while subsequent page development becomes a simpler process of selecting and configuring existing components, thereby dramatically improving overall productivity without sacrificing design control.

Inventive Principle:

Principle #1Segmentation

Data Source

PatentUS11727084B1Techniques for automatically configuring web components

Publication Date: 2023.08.15 SALESFORCE INC

AI summary

A method for data processing is described. The method includes receiving, from a client of a web service, a request for a web component included in a web page supported by the web service, where the web component is associated with a data structure that defines design characteristics of the web component. The method further includes determining configuration parameters that define stylistic characteristics of the web component based on data attributes of the web page and the data structure associated with the web component, where the configuration parameters are determined using a model trained on a corpus of web pages supported by the web service. The method further includes transmitting, to the client and in response to the request, an indication of the configuration parameters for the web component, where the indication is configured to display the web component according to the stylistic characteristics defined by the configuration parameters.