Updating Our URL & Populating Filter Field Values

Thank you, Jean! :)

I put this series on pause when it was announced V1 of Inertia would be released, out of fear it would invalidate what we already had and I'd have to restart. I still need to re-evaluate what has changed and whether I need to restart the series.

Thank you, Rene!

Yeah, absolutely! This site is actually built using Unpoly, which is in the same hypermedia category as HTMX. All our pages are rendered using EdgeJS despite our pages loading like a SPA and our player sticking with you throughout the site while it's playing.

Hi @gregory! Yeah, using HTMX for this would definitely be a reasonable option! You could also look into Unpoly; it's like HTMX but takes care of more automatically for you.

React is great if your app requires a lot of state management or interactivity. Things like dashboards, drag-and-drops, multi-step or complex if/else forms can be made easier with something like React because React can send requests to the server on an as-needed basis to persist or fetch data, all while maintaining the same state locally and dynamically updating the view with ease.

HTMX or Unpoly, on the other hand, are only going to have access to the state that is sent on a per-request basis. They are great if your flows are going to be more linear, as that allows your requests, and therefore state, to go through the server.

For example, say you're going on a trip and flying to get to your destination and back. Your roommate plans on staying home. The important things you'll need for your trip get packed into a luggage bag to go with you. Everything else you own stays home, with your roommate. You don't throw those things staying home away, however, because you will need them when you get back from your trip.

In this example, your belongings are state, and your roommate is a different portion of the page that doesn't need updating (maybe you're the form and your roommate is the shell/layout of the page).

React allows you to leave things at home via local state. Without React, everything must go with you (the request) or be thrown in the trash, meaning it won't be there when you get home (the response). You can, however, still use money you took with you to buy extra things to bring home (using IDs to query data from the database, for example).

Without React and without HTMX/Unpoly, everything must go with you or else it'll be thrown to the trash, and your roommate is forced to go with you as well. So HTMX/Unpoly gives you the flexibility to dynamically update specific portions of your page from the server on an as-needed basis, but for those updated portions, they only have access to the info that was sent with the request. Typically, that's form data, query strings, or route parameters. In most cases, this ends up being perfect, and that extra local state management provided by React isn't needed.

If you're using HTMX/Unpoly and there are one-off portions where you need more interactivity or state management, you can always reach for vanilla JavaScript or even a lightweight package, like AlpineJS, to add state and reactivity to your page. This is the exact setup I'm using for Adocasts (Adonis + Unpoly + Alpine). At the end of the day, whether to use HTMX/Unpoly or something like React is a scale. Each requirement can add weight to the scale, and eventually the heft may merit something like React. That could be something as small as familiarity and a tight timeline.

If you are leaning towards React, there's an integration with AdonisJS to help blend the two together called InertiaJS that will help make it less daunting as well.

If you're really early on in your journey, I'd recommend just making your app with AdonisJS first, using traditional form submissions. Then, sprinkling HTMX or Unpoly into it. That'll give you a foundation of familiarity before introducing a foreign object.

Hope this helps! ~ sorry my answer got really long