Is Laravel Livewire the next big thing ?

Really ?

It might be … If you don’t need a single page application and if you don’t freak out by the idea that your backend is not decoupled from your frontend.

It’s a competitor for Vue.js, and now you can say “why did you start using Vue.js and not Livewire”. Well euh … It’s brand new, released in februari 2020.

What is Livewire, and what are the advantages ?

Livewire describes itself as follows

Livewire is a full-stack framework for Laravel that makes building dynamic interfaces simple, without leaving the comfort of Laravel.

Yes, you’ve read it well. You can create reactive applications without leaving your Laravel. In my opinion Caleb Porzio has done a massive good job by creating Livewire, and I’ll tell you why.

Simplicity

When you are a Laravel developer you are used to working with blade templates. With Livewire this is also true. You can stay in the environment and syntaxis you are familiar with.

it’s PHP

You even stay in PHP, in the simplest form you don’t even need to write javascript.

Installation

Installing Livewire is as simple as “composer install”. The package is installed into your application and ready to use. The package has some built-in artisan commands to speed up your development. No specific bootstrapping needed, it’s just Laravel.

In a popular video on my Youtube channel I explain to you how the setup Livewire from scratch in less than 5 minutes. The code of the demo can be found here : https://github.com/dietercoopman/livewire-crud-demo

No build process

No builds needed ! In contrast to frameworks like Vue.js, you don’t have to build your application. This is much faster than the npm build process that’s needed to build your Vue.js application.

How do you use it ?

The full documentation can be found on the Laravel Livewire website but I give you a quick shot on how it works. In fact, if you are familiar with Vue.js or any other javascript framework, some terminology will feel very familiar.

Properties : all of your public properties defined in your Livewire component are accessible in your views.

Data binding : <input wire:model=”message” type=”text”> This will bind the input model to the public message property of your component. This means that if you change your input, the component ( backend ) will get notified and the value will be changed.

Actions: <button wire:click=”like”>Like Post</button> If you click the button the like method will be called in your Livewire component.

Events : events can be fired and listened for via emit

How did I catch up with Livewire ?

I’ve noticed that Taylor created Jetstream with two hotly debated stacks. First stack is Vue.js + Inertia and the second stack is Livewire + blade. So this is where I picked it up, by reading documentation.

I say hotly debated because a lot of people found it irresponsible from Taylor to use such a new frameworks to build something like Jetstream. The answer from Taylor was, “hey can I please do what I want in my spare time … programming is my hobby, and I use what I like in my spare time”

The full answer of Taylor can be seen on his Youtube channel.