Fresh, the web framework used by Deco, is known for enabling the creation of high-performance pages. One of the reasons why pages created in Deco are so efficient is due to the island architecture. This architecture allows developers to remove non-interactive parts of the final JavaScript package, reducing the total amount of JavaScript on the page and freeing up the browser to perform other tasks.

However, one of the limitations of this architecture is that very complex pages, with a lot of interactivity and therefore many islands, still require a large amount of JavaScript. Fortunately, this limitation is now a thing of the past, thanks to the introduction of Partials.

How It Works

Partials, inspired by htmx, operate with a runtime that intercepts user interactions with button, anchor, and form elements. These interactions are sent to our server, which calculates the new state of the page and responds to the browser. The browser receives the new UI state in pure HTML, which is then processed and the differences are applied, changing the page to its final state. For more detailed information about Partials, see the Fresh documentation.

Partials in Action

We are migrating the components of the Deco store to the new Partials solution. So far, we have migrated the SKU selector, which can be viewed in action here. More changes, such as infinite scroll and improvements to filters, are coming soon.

Another unlocked feature is the ability to create folds on the page. E-commerce pages are usually long and contain many elements. Browsers often face problems when there are many elements in the HTML. To deal with this, the fold technique was invented.

The basic idea of this technique is to divide the content of the page into two parts: the content above and the content below the fold. The content above the fold is loaded on the first request to the server. The content below the fold is loaded as soon as the first request is completed. This type of functionality used to be difficult to implement in older architectures. Fortunately, we have embedded this logic in a new section called Deferred. This section accepts a list of sections as a parameter that should have their loading delayed until a later time.

To use this new section:

1. Access the Deco administration panel and add the Rendering > Deferred section to your page.
2. Move the sections you want to defer to the Deferred section.
3. Save and publish the page.
4. Done! The sections are now deferred without the need to change the code!

See Deferred in action at this link.

Note that, for the Deferred section to appear, you must be on the latest version of fresh, apps, and deco!

A question you may be asking yourself now is: How do I choose the sections I should include in the deferred? To do this, use the performance tab and start with the heaviest sections that offer the greatest return!

For more information, see our docs