Partials

Lazy Loading Components and Partials

What are Partials?

In Open Library, we often use an approach called "Lazy Loading" when we want to enable the web page to render quickly with only the essential components it needs for its initial display.

However, as the patron scrolls down the page, we may then want to load additional content "on the fly". When this happens, we need some way to load additional html for these components, and we use the Partials pattern to accomplish this.

On the backend, there is a series of openlibrary.org/partials endpoints that allow JavaScript to request HTML from the server on a per-component basis: https://github.com/internetarchive/openlibrary/blob/0ff31cdd2ee1e8421340a353cd09270dde50ec2c/openlibrary/plugins/openlibrary/partials.py#L315-L351

For instance, you might request the HTML for a related books carousel, or the HTML for one specific list that has changed and needs to be swapped out.

To implement a new partial, add a new backend handler (such as the LazyCarouselPartial at https://github.com/internetarchive/openlibrary/blob/0ff31cdd2ee1e8421340a353cd09270dde50ec2c/openlibrary/plugins/openlibrary/partials.py#L280-L312) which is responsible for returning the actual HTML. Then create a JavaScript method for fetching the partial:

e.g. the check-ins example fetches the /reading-goal/partials.json https://github.com/internetarchive/openlibrary/blob/master/openlibrary/plugins/openlibrary/js/check-ins/index.js#L590-L624