Hybrid App ListCell Reuse via Frontend Prototype
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
In hybrid application development, ListCells are created and reused at the native end, which limits the flexibility and efficiency of ListCell reuse, leading to performance issues due to the inability to efficiently reuse ListCells defined at the front end.
Innovation Solution
Defining a prototype of the ListCell at the front end and copying it at the native end, allowing for the reuse of invisible ListCells based on the current list presentation location, thereby enabling flexible creation, rendering, and reuse of ListCells at the native end.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Adaptability or versatility
If the front end triggers the native layer to create instances for all ListCells, then the ListCell structure can be defined at the front end, but memory and time are wasted due to creating all ListCells at the native layer
Solution Approach 1:
The patent segments the ListCell creation process into two parts: the front end defines the ListCell prototype and structure, while the native layer only creates instances for ListCells that need to be displayed. This segmentation allows the front end to maintain flexibility in defining ListCell structure while the native layer optimizes rendering performance by creating only necessary instances.
Solution Approach 2:
The front end performs preliminary action by defining the ListCell prototype and structure in advance. This prototype is then transmitted to the native layer, which uses it to create instances only when needed for display, avoiding the waste of creating all instances beforehand.
2Productivity
If the native layer creates and reuses ListCells, then rendering performance improves, but the front-end defined ListCell class cannot be transmitted to the native layer
Solution Approach 1:
The patent uses copying by transmitting the ListCell prototype (a template or blueprint) from the front end to the native layer. The native layer then creates instances by copying this prototype, ensuring that the front-end defined structure is preserved while enabling efficient native-layer instance creation and reuse.
Solution Approach 2:
The ListCell prototype acts as an intermediary between the front end and the native layer. It carries the structural definition from the front end to the native layer, enabling the native layer to create instances without directly receiving the full front-end class definition, thus bridging the two layers effectively.
3Productivity
If all ListCells are created and arranged at the native layer, then the ListCell can be reused, but the reconstruction of DOM requires higher costs
Solution Approach 1:
The patent segments the ListCell management into prototype definition (front end) and instance creation (native layer). This segmentation allows the native layer to reuse instances efficiently without needing to reconstruct the entire DOM structure, reducing DOM reconstruction time while maintaining reuse capability.
Data Source
Figure 1
Figure 2
Figure 3
AI summary
An objective of the present application is to provide a method and an apparatus reusing a ListCell in a hybrid application. A prototype of a ListCell is defined at a front end. The prototype of the ListCell is copied at a native end. The native end reuses an invisible ListCell based on a current list presentation location. As such, the prototype of the ListCell can be defined at the front end, and the ListCell can be freely created, rendered, and reused at the native end based on the prototype. Therefore, not only the flexibility of defining the ListCell in the hybrid development can be reserved, but also the ListCell can be reused at the native end, thereby greatly improving the large-list presentation and operation performance.