Laravel Livewire vs Vue.js

Technology is taking the world, at a very high refresh rate ... What about Livewire and Vue.js

4 minutes

Laravel Livewire vs Vue.js

My opinion on Livewire vs Vue.js

I’m using Laravel since version 4.0, and I’m still a big ( in fact huge … ) fan of it. When frontend ( javascript ) frameworks like Angular and React became popular I’ve noticed the high interactivity on the frontend that came with it … No need to refresh browser screens to retrieve new data and super reactive applications was the result of those frameworks. Updating stuff on your screen without complex javascript logic was ( and still is ) mind-blowing ! The frameworks took the web-development scene by storm ! At that moment the Laravel framework didn't really incorporate one of those frameworks. Until Vue.js was released somewhat seven years ago ( late 2014 ).

Laravel decided to optionally include Vue.js in its Framework installation. So it was a logical decision to choose Vue.js as frontend framework, and so did I. Since 2016 I’m using Vue.js for all the new applications I build.

My opinion about Vue.js

In fact, I’m a fan of Vue.js. It gives the user a high interactive experience, and user is experience is the number one concern when building applications. Since I’m using Vue.js I never used jQuery again, and I write less javascript for building interactive stuff. So that’s a huge win. Better ui’s with less code to maintain. That's a win-win situation.

But ! While being a huge fan for interactivity I hate the bootstrap process. I hate the actions / mutations / getters ( the vuex approach for handling data in bigger applications ), bah … I hate the router, the slow build processes and the complexity when doing a lot of data handling in the frontend before we send it back to the server. Have you ever debugged javascript … That’s one of the biggest nightmares for me, no stack traces, no “error at line x” … But hey ! We have interactivity, the user will love our application that never refreshes. But, I am forgiving, so I still love it, and there is ( was ) no alternative that integrates that good with Laravel. And hey, everyone is using frontend Frameworks, so now I’m fancy too ? ( same quote as Caleb in his video mentioned below )

And then I saw Livewire ?

One day I wanted to build a documentation platform for our company. When building stuff like that, from scratch, I love to try the new things that come along. I noticed Laravel Jetstream, a new tool, being a hobby project of Taylor Otwell. I could choose between a Vue.js + inertia implementation or the Livewire implementation. The what, Livewire … I never heard about it, and it caught my attention. I wanted to discover this new piece of software.

I discovered the playground of Caleb Porzio, a former Laravel / Vue.js developer at Tighten. I read all his stories, and I was an instant fan of that guy, and his tool(s) … That man describes the same feeling as I feel in this video – you really MUST see this video – somewhat te same as my chapter about Vue.js. Damn, why haven’t I used Livewire before … oh yeah … the 1.0 release was in February 2020, it’s brand new !!

The power of Livewire

What is Livewire ? Livewire is a full-stack framework for Laravel. You can only use it with Laravel because it is tightly linked to the backend. So it is impossible to use it for applications that live totally separate from the backend – it is connected to the backend. So that is the negative part … For those applications where separation of backend and frontend is a must, via an API approach, you’ll have to stick to Vue.js.

Now the positive stuff ! Ready !?…

I’m using Livewire for a while now, testing its boundaries before using it in client projects. I’m testing it out with a friend of mine ( mister V. ), in a skeptic way. A skeptic way because we want to be sure that everything we do with Vue.js can be done with Livewire. Yesterday we ( he in fact ) tackled the last big challenge … Infinite scroll seemed a conceptual problem, but it is solvable in a neat and reusable way. Mister V. is even more skeptic than I am, but his enthusiasm is growing and the skeptic is disappearing !!

What is its power ?

The power of Livewire comes with the fact that it’s all around pure Laravel. Your views will all be blade views, coupled to your backend via magic called ‘wire’. You can wire the click action of a button directly to backend methods via a wire:click call. If you make a property in your backend publicly accessible then it will interact with your frontend via wire:model. This all without writing any javascript. The data handling can all be done in your backend, and you don’t need to use stuff like Vuex and Axios to communicatie with your backend.

No build process

There is no build process. I think the development process can be speed up with 50%, while keeping interactivity in place for the end user.

You can still use all the Laravel superpowers like routing, validation, error bags and so on. And because of the interactivity added via Livewire your error messages will automatically become visible without refreshing your screen.

this article has been read 37 times