Laravel and Hotwire Intro
Janez Cergolj • January 15, 2021
— from their site
Hotwire is comprised of two tools Turbo and Stimulus. Today we'll take a look at Turbo.
— from their site
Hotwire in action
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.
Basic Navigation with Turbo Drive
Code: Turbo Drive Example
Apart from installing Turbo nothing has been changed. Navigation works out of the box with the help of ajax calls.
Navigation of slow pages
Code: Turbo Drive Slow page Example
Here you can see a bar at the top while the page is being rendered.
New Post & Validation
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
Turbo Frames Lazy loading
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!