13 Work with Fragments
As you design a web application, some pages might quickly become large and unwieldy. One way to simplify the process of building and maintaining complex pages is to use fragments.
Large, complex pages broken down into several smaller fragments are easier to maintain. For example, when a page uses a foldout layout with multiple panels or includes multiple tabs, you might find it easier to keep each panel or tab's content in a fragment. This way, you modularize your app's logic and can maintain each panel or tab separately.
This might sound similar to what you'd accomplish with flows, but flows and fragments are fundamentally different. Flows group pages by business function and allow navigation between pages within or across flows. Fragments, on the other hand, break up a page into separate sections for easier organization and code management, and can even serve as entire page templates. Unlike flows, they can be used in multiple pages, even multiple times in the same page—which brings us to reusability, the most compelling reason to use fragments.
Because a fragment encapsulates parts of a page in its own HTML, JSON, and JavaScript files, it can be shared across pages, flows, even other fragments in your application. For example, suppose different sections of several pages use the same form, you can create fragments containing the form, then reuse those fragments in several other pages.
Besides the benefits of reuse, fragments provide performance gains. Typically, all resources used in a page (components, modules, and so on) load when the page renders. But sometimes you don't need all components and the related model, especially those triggered by UI events or hidden behind other UI components, to load right away. For example, you don't need components in a panel's edit version to show until the user clicks the edit icon. If you define the edit panel in a fragment, you could delay rendering until you actually need to show the fragment to improve the time it takes for the page to render initially.
Here's a video that provides a high-level look at fragments and walks you through a sample: Fragments in Visual Builder.