Skip to content

UI Rendering

Rendering of UI components and the data they display on a page is directly related to data binding and data models. Understanding UI rendering rules will help you build more responsive and better designed applications. Deciding how to structure your data models and where to use data binding is one of the best practices for building better apps.

What is "rendering"? Ultimately, it is a process of displaying data in a UI component. Suppose the component is drop-down list displaying some items. Rendering and re-rendering of the drop-down list will force the component to update its contents. From the terminology stand point, whenever we mention "rendering" (initial display) and "re-rendering" (subsequent update) we refer to updating the data in a UI component.

UI Builder applications run on top of a UI engine. The engine implements the following rules that every UI Builder application relies on:

  1. All data models are organized in a tree. It is similar to the UI component tree.
  2. The root of the tree is the App Data model.
  3. The first immediate child of the App Data model is the Page Data model.
  4. Adding or updating data in a data model causes re-render of the corresponding UI zone. UI re-rendering is handled hierarchically based on the tree of data models.

Let us review a sample application layout to understand how these rules work in action. Below is a schematic layout of a UI application:

schematic-app-flat

A layered view of the app would expose the following:

schematic-app-3d

The data models for the page are organized into a tree:

data-models-tree

This covers rules 1-3 from the list above. The rule #4 is the most interesting (and powerful) one. The rule describes how an update of a data model impacts a re-render of the UI. Since there are several data models in the tree, consider the following scenarios reviewing what happens when a data model is modified:

Updated Data Model
 Re-rendered UI Area. The highlighted area(s) are re-rendered.
App Data Model
 re-rendering-app-data-model
Page Data Model
 re-rendering-app-data-model
Zone Data Model 1
 re-rendering-zone1-data-model
Zone Data Model 2
 re-rendering-zone2-data-model
Zone Data Model 3
 re-rendering-zone3-data-model

As you can see, a modification in App Data or Page Data models forces a re-render of the entire page. However, when a specific data model is updated, it forces a re-render only of the corresponding UI area. One of the questions you may have is what is a "data-bindable UI area"?. This is covered in detail in the Data Containers section of this guide.