RefreshLess layers JavaScript-based navigation on top of Drupal's existing server-rendered HTML to provide the kind of smooth, fast, and responsive experience users expect. By fully embracing progressive enhancement, you don't need to choose between a web site/web app that works even if JavaScript is broken or something that feels like a single page app (SPA) user experience - you can have both.

Compared to an SPA:

• Provides much higher resiliency in unexpected or adverse network or runtime conditions where JavaScript fails to load or execute correctly. In such situations, your users still have a functioning site/app that falls back to traditional page loads. The browser is the most hostile runtime environment after all.

• Reuses Drupal's server-rendered HTML, saving you the development time and cost of re-implementing a whole new front-end, while making use of Drupal's Twig templates, asset library system, caching, security, and so on.

Compared to a plain server-rendered HTML site:

• Navigation feels faster and more fluid because the browser no longer needs to re-initialize all CSS and JavaScript on every page request.

• Page transitions and morphing are now possible.

• Everyone thinks you're super cool.

Hotwire Turbo implementation

RefreshLess implementation built on the Hotwire Turbo library. See modules/refreshless_turbo/readme.md for important installation instructions. This is the current implementation but other implementations are planned.

Classic Drupal Ajax framework implementation

This is the classic RefreshLess implementation using Drupal's Ajax framework from the 1.x branch created by Wim Leers and contributors. See modules/refreshless_ajax/readme.md.

Note that this is not maintained, not guaranteed to continue functioning at this time, and planned to be removed as all development is focused on the Hotwire Turbo implementation.

Guidelines

• Writing your JavaScript behaviours:

  • They must have detach callbacks that fully clean up changes the attach callbacks make, restoring the elements as if the attach was never applied.

  • Don't store references to elements outside of behaviour callbacks. They can and will get out of sync with the DOM, resulting in references to elements no longer on the page.

• Test your sites with and without RefreshLess. All necessary functionality your users need must not require RefreshLess or even JavaScript - it doesn't have to be pretty, but an ugly form is still far better than not being able to sign in to a site, pay bills, or send a message.

Credits

Special thanks to Wim Leers and contributors on the 1.x version of this module, which inspired the 2.x rework and provided a foundation to build on.

Branding

Logo and title created with Inkscape with the Rubik font.