Basecamp released a new tool called Hotwire that helps build new modern SPA like web apps without much javascript. It is a backend framework agnostic.
Hotwire is an alternative approach to building modern web applications without using much JavaScript by sending HTML instead of JSON over the wire.
— from their site
In essence, rather than sending over JSON where front-end framework deals with it, HTML is parsed on the server and javascript is only responsible for displaying new content.
Hotwire is comprised of two tools Turbo and Stimulus. Today we'll take a look at Turbo.
The heart of Hotwire is Turbo. A set of complementary techniques for speeding up page changes and form submissions, dividing complex pages into components, and stream partial page updates over WebSocket. All without writing any JavaScript at all. And designed from the start to integrate perfectly with native hybrid applications for iOS and Android.
— from their site
Today I'll omit any code, and I'll reference jcergolj/hot-la-wire repository commits. I think it is easier that way.
Installing Hotwire to Laravel can be done like this: Installation.
Code: Turbo Drive Example
Apart from installing Turbo nothing has been changed. Navigation works out of the box with the help of ajax calls.
Code: Turbo Drive Slow page Example
Here you can see a bar at the top while the page is being rendered.
Code: New Post & Validation Example
Due to some limitation, you have to manually create Validator instance and redirect it, if validation fails.
Turbo frames are iframes on steroids. If you have a normal edit.blade file only content inside of it replaces content on the index.blade page. Very useful for inline editing.
Code: Turbo Frames
If you have parts of a page that is slow. You can envelop it into the turbo frame. Once the content is ready, it's going to be rendered on the page. Neat!
Code: Turbo Frames Lazy loading
In Laravel world a Livewire & Alpinejs combo is very popular. In essence, they both share the same idea of sending HTML over rather than JSON. At the moment of writing, Livewire has the edge because Laravel community embraced it. There are also tons of examples and tutorials, including from the author of Livewire Caleb Porzio himself.
At the moment of writing, hotwire is a new kid on the block. There aren't so many tutorials out there. And you are left on your own. There is a package for Laravel called turbo-laravel by Tony Messias that you should check it out though.
Personally, I love the idea behind it, and I will play with it more in the future. What I love about Hotwire is that you don't need to change anything on the backend. Everything just works out of the box. Due to all those tools and frameworks, building SPA and SPA like apps have never been more comfortable. Hurray!