With the plethora of Javascript frameworks available today, web pages became smoother and smoother in terms of User Experience, a field Symfony has been trying to improve too with initiatives like Symfony UX.
That’s great for users, as it provides them with a seamless and intuitive experience, but it does mean that we have to change our way of making websites, in brand-new ways, every day. Solutions such as Symfony UX started to see the light of day to simplify the development of UX oriented components / Website. We covered this one specific tool in another blog post before, and it works great! However, just because we use Symfony, it does not make it our only option!
This article is about a library that has recently been making waves in the realm of UX-enhancing libraries, htmx.
htmx is a library that allows you to access modern browser features directly from HTML, rather than using javascript.
— htmx docs
This library was born on the realization that hypermedia, our main door into web development via HTTP and HTML, hasn’t evolved in 20 years! Using HTML is mandatory, but feels like driving an old car: sure it drives, but there’s so much more it could do!
htmx allows any DOM element to trigger any event from any interaction, and to make a request using any HTTP method, without reloading the entire page, without a single line of javascript.
It is used a lot in the Django community, a Python framework, but it is not tied to any sort of back-end. It means that we are free to couple it to a Symfony app to create a great UX, and even create a SPA (sort of) with it.
The Single Page Application approach has really been put forward in recent years. It offers a more interactive and immersive experience than what old hypermedia-based applications could ever offer. But it comes with a cost, as it requires a lot of Javascript to work, a lot of abstraction, and it is not always the best solution for every project / team size / budget.
Well, most of what SPA offers is possible using htmx, while still keeping a hypermedia-friendly approach. That means no JSON API to develop, no implicit contract between the frontend and the backend, no duplication of the application state between frontend and backend, and so on! 😍
For this introduction to htmx, I am going to create a tiny SPA with Symfony and h...
[Courte citation de 8% de l'article original]