imacrayon / alpine-ajax

An Alpine.js plugin for building server-powered frontends.
https://alpine-ajax.js.org
MIT License
558 stars 11 forks source link

[v0.6] Queues & Caches #65

Open imacrayon opened 5 months ago

imacrayon commented 5 months ago

This PR introduces a new request queuing and caching system that will support client-side routing features similar to hx-boost and Hotwire's Turbo.

The queue will handle concurrency issues in situations where multiple requests could cause race conditions, like when a user is clicking faster than the server can respond, or multiple AJAX requests target the same element on the page.

The cache will store AJAX responses in memory and reuse the response on subsequent requests before requesting fresh data. The user will experience instant UI changes as they navigate between pages that have been cached.

I'd also like to introduce support for pre-fetching requests to make page navigation feel even faster.

I also rewrote Alpine AJAX using a class-based architecture, concepts are better organized now, and the code base is a few kBs smaller when compressed. The project ended up growing considerably in size, so I reverted a lot of these changes.

So far I don't see any new APIs required to make this all work. My plan is that it will all just be automatically available after installing Alpine AJAX.

Fixes #40

imacrayon commented 5 months ago

Alright, all tests except for the redirect tests are passing now. Redirects will need to be handled a little differently now because full page reloads no longer exist. I still have a few bigger concerns to work through before I feel good about adding this features:

  1. Cache snapshots: Alpine AJAX caches previous page requests. When making a new request, if a cached request exists, Alpine AJAX will immediately render a "snapshot" of the cached request before issuing a request for fresh content. Once fresh content is received the snapshot is replaced with the new content. This makes page navigation feel super fast, but every request for content essentially triggers two render passes. I'm worried that on slow networks these two renders could produce a jarring experience as the UI swaps between stale and fresh content. I want to try out this "snapshot" feature it a few apps and make sure it feels good.
  2. Slow initial renders: Navigating to a page you've already visited now feels almost instant, however every request to a new page is slightly slower than a standard full page refresh. This is because Alpine AJAX has to spend extra cycles rendering content and merging the <head> element between page requests. After some testing I've found these same issue to be true for most other client side navigation libraries (Turbo, HTMX, Unpoly, Livewire), but I'm not convinced that this tradeoff is really worth it for users. I want to look into ways Alpine AJAX might be able to work around these trade offs using a Service Worker. We might be able to offload some of the extra rendering work to the browser (fast) instead of JavaScript (slow).
jdmry commented 4 months ago

Hey, that all sounds good and it's something I felt I missed from this library compared to others indeed. However I just read and tried the library you've mentioned in one of the issue 'instant.page' and tbh that does the trick.. really loving it!

saolof commented 4 months ago

I just want to mention that I am incredibly impressed by how everything just beautifully falls out of the basic rules of this library!