Contrib.social

Turbo: implement partial page updates

Open on Drupal.org →
Created on 28 October 2023, about 1 year ago

Problem/Motivation

Turbo Drive works reasonably well but detaching and attaching behaviours over the entire page is arguably overkill when only some regions change. The 8.x-1.x branch had a lot of logic to update only regions that changed and we should re-implement this in the Turbo port. Wim Leers explains the issue in #2692343-2 → :

Finally, this means once again replacing the entire <body> and detaching/attaching Drupal behaviors (i.e. run all JS) on them. Which means it defeats a significant portion of the purpose: improve perceived speed by having the browser do less work. i.e. using the official Turbolinks JS significantly increases the amount of work the browser has to. This makes sense for that library because it wants to work on almost any HTML. But in the case of Drupal, we can take advantage of its cacheability metadata to automatically figure out which portions of the page change.

Caveats are that this was posted almost 8 years ago in 2016 before Hotwire Turbo existed, so this was about the predecessor, Turbolinks, which had less flexibility, and browsers have implemented more JavaScript/DOM optimizations since then. That said, he's right that this is still not optimal to update regions we don't have to.

Steps to reproduce

👀

Proposed resolution

One possibility would be to use a custom renderer as supported by Turbo to only swap out the regions that have changed in the response and attach behaviours to the updated regions rather than the whole document.

How we determine how a region has changed will need some thought, but re-using the logic from the 8.x-1.x branch is probably our best bet, in that it uses cacheability metadata to decide if a region needs updating.

Remaining tasks

TBD.

User interface changes

None.

API changes

Maybe some additions? Not sure yet.

Data model changes

None.

📌 Task
Status

Active

Version

2.0

Component

Code

Created by

🇨🇦Canada ambient.impact Toronto

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @ambient.impact
  • Comment 26 days ago →
    🇺🇸United States mortona2k Seattle

    I am interested in this feature to support theme development.

    When using a front end build tool like vite, CSS changes are reloaded on the page instantly.

    Changing template code (or SDC) requires a full page reload to see changes. When coding with tailwind classes, this can be a pain.

    I am thinking refreshless will have the architecture to trigger a reload by the build tool.

    The mechanism for this issue would need to be in place with a way to call it. The build tool can have a plugin that loads in the browser and triggers the refresh when code is changed.

    It seems like most people are working around this DX issue by theming entirely in another system like Storybook. But there is still a lot of integration work to do in Drupal, so it would be great if the DX was nice there too.

  • Comment 24 days ago →
    🇨🇦Canada ambient.impact Toronto

    If someone is willing to implement it in a robust and reliable way, I'd be happy to review and merge it. I can see the value of it, but my time and energy are limited right now so it's not a priority for me.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024