When it comes to choosing a tech stack for your application, there are chances you’ll have to reiterate it. At the beginning of this year, we developed Garchi’s SaaS application using Livewire. The app helps you to create a multi-vendor e-commerce store without having to code a single line or do a single drag-and-drop (like CMS).
I decided to go with Livewire because of its simplicity and ease of use. The way it handles AJAX requests without having to write a single line of JS is remarkable. However, recently we have had to make the call to convert the entire application from Livewire to Vue.js. Well, you might be thinking, why? What for? Let me tell you 3 key reasons for the shift.
Reason 1: DOM manipulation and involvement of JS
The app demanded a certain level of DOM manipulation which was kind of complicated with Livewire. Also with Livewire, you might get to a point where you need to sacrifice a certain level of UX. With Livewire it is difficult to use third party JS plugins. Wire:ignore for certain editor plugins might work but not always.
Reason 2: SPA
Livewire has a feature of the full-page component which allows you to create SPA. However you need to add turbolinks to give it a real SPA feel.
Reason 3: Scalability
This is something which is a topmost priority. Component management became cumbersome with the stack of piling components. Reusing them is not an issue when your component structure is simple. But, for complex nesting scenarios, it is quite unwieldy. One emit could cause all the components to re-render and, if not done correctly, you might see some typical Laravel errors like 500.
Another thing I found with Livewire is that it kind of limits you from achieving higher UX. Maybe it’s just me but you have to be very careful and think a lot for higher UX.
If these were the problems then why not choose Vue over Livewire at the beginning?
Well, you can call it a mistake from my side that I didn’t see the big picture before making the decision. The beauty of Livewire is that you can swiftly manage simple AJAX CRUD operations and that was perfect for the MVP. But over a period of time, I thought, okay, let’s keep moving with Livewire as it is doing great.
Now let’s talk about the process of conversion, shall we :)
So the code was a huge pile of files and converting it from one tech to another was not that simple. But thanks to Inertia JS, it literally saved me a huge amount of time as its purpose is very close to Livewire except it is for Vue/React/Svelte. I had to write a lot of extra code but it was worth it. One thing I like about it is it does not restrict you from scaling and achieving higher UX. Component management with Vue is straightforward. Thanks to Vuex as well. The plus point of Inertia is I do not have to worry about APIs as it literally handles Vue and back-end connections for you swiftly. I will admit that there was extra front-end coding involved but it is worth it.
Conclusion
Due to certain confidential reasons, I cannot share every detail of the process. I will definitely say that the process was worth it and I enjoyed it a lot. Both Livewire and Inertia are fantastic tech stacks and after using them I have become a big fan of their creators and team. I will say that Livewire is more suitable for CRUD operations at a simple level while Inertia and Vue are more suitable for complex CRUD operations and components’ structure.