Active
Project:
RefreshLess
Version:
2.x-dev
Component:
Code
Priority:
Major
Category:
Task
Assigned:
Reporter:
Created:
11 Oct 2023 at 00:24 UTC
Updated:
29 Nov 2024 at 10:44 UTC
Jump to comment: Most recent, Most recent file
👉 Live demo 👈
Omnipedia is running RefreshLess.
Problem/Motivation
Issue to organize and track the minimum viable implementation of a Hotwire Turbo port.
Proposed resolution
Move/disable the 8.x-1.x code and re-implement on top of Turbo.
Remaining tasks
Blocking issues
- #3397372: Turbo: Allow Ajax links and form submits to be handled by Drupal's Ajax framework
- #3397466: Turbo: Redirects cause double rendering
- #3397584: Turbo: Behaviours are often not attached if the script containing the behaviour finishes downloading/is evalutated after Turbo has rendered the new page
- #3478106: Turbo: Drupal messages are lost if Turbo does a full reload
Non-blocking issues
- #3397370: Turbo: Improve drupalSettings updating
- #3399566: Turbo: core/misc/batch.js forces an unnecessary full page load on hitting 100%
Postponed issues
Most of these have had workarounds implemented that are good enough for now but will need additional work to refine to a point that is satisfactory enough from code quality, robustness, and/or forward compatibility perspectives:
- #3399314: Turbo: CSS files merged into the <head> always appended instead of preserving full page load order, causing CSS specificity issues
- #3411449: Turbo: Support Turbo cache
- #3414538: Turbo: Implement additive JavaScript aggregation to prevent multiple evaluation
- #3416085: Turbo: In-page anchors and hashchange events can cause full page visits or otherwise behave unexpectedly
- #3422964: Turbo: Visiting pages with 4xx response codes causes re-evaluation of <head> JavaScript
- #3480618: Turbo: Drastically simplify installation for end users
Ongoing issues
These are ongoing in the sense that they don't have a clear finished state for the time being:
- #3401146: Turbo: Automated tests
- #3399243: Turbo: Tracking issue of core and contrib behaviours that need fixes to correctly detach and then attach
- #3423544: Turbo: Disable prefetching on various admin links to prevent unintended operations
User interface changes
Mostly none? Should just work.
API changes
TBD. Probably quite a bit.
Data model changes
Probably none unless we start adding some basic configuration.
Archived notes
Problem/Motivation
After thinking about and exploring the Symfony UX Turbo code (see #3238865: META: Incorporate Symfony UX Turbo Into Module), I'm not convinced that it's required to get Turbo Drive up and running, which is the Turbo equivalent of the homegrown JavaScript in the 8.x-1.x branch. Symfony UX Turbo does provide integration for Turbo Frames and Turbo Streams, which I'd want to eventually support, but I think the wise approach would be to start with basic vanilla support for Turbo Drive without the Symfony integration to keep things simple. After that, we can work on integrating the Symfony stuff as a nice to have.
Proposed resolution
Bypass the existing Ajax implementation and server-side optimizations for now; see #3294430: RefreshLess 2.x roadmap. This won't be a big deal for the time being:
- Serving a mostly standard Drupal response (i.e. full page HTML) removes some complexity, and Turbo Drive is built to handle this really well.
- All modern browsers support gzip compression, drastically cutting down on data sent over the wire compared to the dark old days. While it's still technically more data than if we only sent changed regions, it's not as big a deal as it used to be, unless you've got comically complicated pages that you're serving, in which case you probably have bigger problems you should fix.
- If you're doing Drupal right, you know how to use the cache API so that stuff only gets rendered (and thus render cached) when it has to be. Drupal's render cache is really fast if there's a cache hit.
Concerns
In #2692343-2, Wim Leers makes a good point that detaching and attaching JavaScript behaviours to entire pages is more work for the client than if we only updated the regions that change and detach/attach to those:
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.
While browsers have made a lot of performance optimizations since that was posted almost 8 years ago in 2016, Wim is right that it's not great for client-side performance to detach and attach behaviours to the whole page since we know what regions actually change. To that end, I've opened #3397367: Turbo: implement partial page updates
| Comment | File | Size | Author |
|---|
Comments
Comment #2
ambient.impactComment #3
ambient.impactComment #4
ambient.impactComment #5
ambient.impactComment #6
ambient.impactComment #7
ambient.impactReworked "Proposed resolution" section.
Comment #8
ambient.impactAdded checklist to "Remaining tasks" section.
Comment #10
ambient.impactAdded updated demo with behaviours now working.
Comment #11
ambient.impactAdded
drupalSettingslist item.Comment #14
ambient.impactComment #15
ambient.impactCompleted moving JavaScript to
<head>and updatedrupalSettings; added list of remaining issues that need to be solved.Comment #16
ambient.impactComment #17
ambient.impactComment #18
ambient.impactAdded current issues:
Comment #19
ambient.impactAdded reference to core issue #2711821: Drupal.behaviors.AJAX.attach() doesn't use context
Comment #20
ambient.impactMoved #3397370: Turbo: Improve drupalSettings updating to separate list for non-blocking follow-ups.
Comment #21
ambient.impactReplaced old "API changes" section with new note.
Comment #22
ambient.impactAdded #3399243: Turbo: Tracking issue of core and contrib behaviours that need fixes to correctly detach and then attach
Comment #23
ambient.impactAdded #3399314: Turbo: CSS files merged into the <head> always appended instead of preserving full page load order, causing CSS specificity issues to summary.
Comment #24
ambient.impactMinor issue summary wording change.
Comment #25
ambient.impactReworked Concerns section.
Comment #26
ambient.impactHiding old videos
Comment #27
ambient.impactEdits to the "Proposed resolution" section for tone and to clarify current approach.
Comment #28
ambient.impactAdded #3399566: Turbo: core/misc/batch.js forces an unnecessary full page load on hitting 100%
Comment #30
ambient.impactReworked "Current issues that still need to be solved" and "Follow-ups that aren't blocking" to "Blocking issues" and "Non-blocking issues" headings, respectively.
Comment #31
ambient.impactAdded #3401146: Turbo: Automated tests to blocking issues.
Comment #32
wim leersJust posted #3238865-7: META: Incorporate Symfony UX Turbo Into Module, but looks like I'm way behind?! 😅
Wow wow wow! I'll try to review this in the coming weeks 🤩
Comment #33
ambient.impactHeck yeah. Thanks!
Comment #34
ambient.impactAdded #3411449: Turbo: Support Turbo cache to non-blocking issues.
Comment #35
ambient.impactAdded #3414538: Turbo: Implement additive JavaScript aggregation to prevent multiple evaluation to blocking issues.
Comment #36
ambient.impactAdded #3416085: Turbo: In-page anchors and hashchange events can cause full page visits or otherwise behave unexpectedly to blocking issues.
Comment #37
ambient.impactMoved #3416085: Turbo: In-page anchors and hashchange events can cause full page visits or otherwise behave unexpectedly to non-blocking.
Comment #38
ambient.impactAdded #3416734: Turbo: Remove behaviours from Drupal.behaviors when Turbo removes their <script> elements? to non-blocking.
Comment #39
ambient.impactAdded #3422216: Turbo: Configuration and form for toggling Turbo features to non-blocking.
Comment #40
ambient.impactAdded #3422964: Turbo: Visiting pages with 4xx response codes causes re-evaluation of <head> JavaScript to blocking issues.
Comment #41
ambient.impactAdded live demo heading and links.
Comment #42
ambient.impactReformatted live demo as list for readability.
Comment #43
sebastixReally awesome work! Zero page refreshes ftw!
Comment #44
ambient.impactAdded #3423544: Turbo: Disable prefetching on various admin links to prevent unintended operations to blocking issues.
Comment #45
ambient.impactMoved #3414538: Turbo: Implement additive JavaScript aggregation to prevent multiple evaluation from blocking to non-blocking for the time being; see that issue's summary for more information.
Comment #46
ambient.impactMoved #3422964: Turbo: Visiting pages with 4xx response codes causes re-evaluation of <head> JavaScript to non-blocking as we now have a Turbo patch to work around it for the time being.
Comment #47
ujin commentedHello,
I tried a module on my local machine and works well. I can see you have addressed most of the task from the list. Is there anything I can help with?
Thanks.
Comment #48
ambient.impactGlad to hear it's working well for you. I'd say the following still need work:
Those are the main ones I can think of right now. Any help is appreciated!
Comment #49
ambient.impactAdded #3478106: Turbo: Drupal messages are lost if Turbo does a full reload to non-blocking tasks.
Comment #50
ambient.impactMoved #3414538: Turbo: Implement additive JavaScript aggregation to prevent multiple evaluation and #3478106: Turbo: Drupal messages are lost if Turbo does a full reload to blocking issues.
Comment #51
ambient.impactMoved #3401146: Turbo: Automated tests to non-blocking.
Comment #52
ambient.impactSignificant restructure of issue summary; moved the old stuff to a section at the end as archived notes.
Comment #53
ambient.impactRemoved some lingering old stuff that's no longer relevant.
Comment #54
ambient.impactAdded postponed issues and ongoing issues lists, and moved linked issues where appropriate.
Comment #55
ambient.impactRemoved #3416734: Turbo: Remove behaviours from Drupal.behaviors when Turbo removes their <script> elements? from issue summary.
Comment #56
ambient.impactRemoved #3422216: Turbo: Configuration and form for toggling Turbo features as it's not really relevant to a minimum viable implementation right now, though might be done down the road.
Comment #57
ambient.impactAdded #3480618: Turbo: Drastically simplify installation for end users to blocking issues.
Comment #58
ambient.impactMoved #3399243: Turbo: Tracking issue of core and contrib behaviours that need fixes to correctly detach and then attach to ongoing from blocking.
Comment #59
ambient.impactMoved #3480618: Turbo: Drastically simplify installation for end users to postponed as immediate goal is achieved.
Comment #60
ambient.impactComment #61
sebastixAwesome work on this @ambient.impact.
It's already quite long on my backlog, but I'm going to refreshless https://nostrver.se and will see how it goes!