Game-Changer: Laravel Livewire

Just a small thing I want to drop here because I think it's a game-changer: Laravel Livewire

What is Livewire?

To answer it I'll quote the official Homepage:

Livewire is a full-stack framework for Laravel that makes building dynamic interfaces simple, without leaving the comfort of Laravel.
So in easy words: You can code with it more or less like a JS framework but with PHP. Nice hm? I personally love it. I love this idea so much that I decided to sponsor the project with my company.

When should you use Livewire?

In general, I can say that 99% of my projects are qualified for Livewire. We're mainly creating data-driven web apps, but I can imagine a few types of projects can be solved better with a framework like vue or react. For example, if you want to build something like webflow, Figma, or framer. These kinds of apps are quite massive in the direct interaction at the user-side, so every time an update with the server can be a bit laggy.

But isn't it a step back?

Maybe you think: "Wait, isn't it the idea we had years ago already with turbolinks and all the DOM replacing stuff?"

And I have to say: A small yes but a considerable NO. Let's talk about the yes: The idea to dynamically replace the body or parts of it isn't an idea from 2020, but the way of doing it wasn't very helpful or intuitive. Livewire is not replacing the whole body; it's just calling the backend and receiving a small DOM part, one component, which will be replaced then. This is a technique that is implemented at GitHub by the way. If you checkout your dev-console while tinkering at GitHub, you'll see that, for example, at a search input, the data is not provided via API, but the HTML which has to be displayed is entirely passed to the frontend. Like Livewire is doing it.

My "user-side" App-experiences

Let's talk about our experience with three apps: GitHub, Everhour, and JIRA. You'll see why I'm doing it here.

JIRA

First, my experience with JIRA is that it's sweet from UI, but not really impressive from the performance side. It's sometimes laggy, and sometimes I had bugs that got solved by refreshing the page.

Everhour

We use Everhour for time-tracking and billing our customers at Cierra. After configuring the hourly fees for a project and then went to the reports to create a billing statement, I often had a huge problem that the changed hourly rates for the team member didn't change in the report. I actually lost money with this! And this is just because of wrong API communication. With Livewire, this cannot happen (ok it could, but not so easy).

GitHub

GitHub is fast, relatively bugfree (for me), and all devices are running with it smoothly. Did you try to run JIRA on an old laptop? It's not really glorious.

So which app would you choose if somebody asks you from where to adapt the Tech-Stack? I would say GitHub! And that's the reason why I'm talking about my experiences here.

The SEO aspect

Let's also talk about the SEO thing. Like you maybe already know: Vue.js, especially with vue-router active, is not very SEO friendly without adding SSR, pre-generating HTML, or a prerenderer. With Livewire, you receive SEO-friendly pages without any workaround! And if you want to have a SPA? No problem, Turbolinks can help out. It's integrated with Livewire in no-time.

Just one language

Shout out to all PHPlers there: Didn't you had the dream vue.js would be available in PHP-Syntax? I think I don't have to say more. Livewire is doing it really well. Of course, you have to rethink a bit, and some structures are not available. For example, you'll not be able to nest your components the same way you did it before with vue.js because you don't have the same emit features to parents as you have at vue.js, but it's quite similar!

Fast Programming

With Livewire, I build a full SaaS in 4 working days. No joke! Of course, there are other things to do to launch a SaaS then coding it. But the actual coding part took 4 days for the MVP with 2 CRUD Elements (with create, edit, delete, etc.) with form validation, sweet notifications, profile management, billing, and all this stuff.

With vue.js and, for example, an API solution, I would say I would have to spend at least 2 weeks for the same result.

And if I would continue thinking about it and writing about it, I'm pretty sure that I would find more and more pros for using Livewire. It's fantastic in performance, syntax, programming speed, and it's stable. Ah, and it's actively maintained for a long time, I would say because I know Caleb, the creator of Livewire, a little bit, and he is a guy who does the things he does with continuity and best of all. Thanks for Livewire, @Caleb.