Open Source Uses About
BaseCode

Inertia vs. Livewire (Laravel Edition)

by Brian Faust – 4 minute read

Inertia and Livewire are packages that help developers to build server-driven web apps with 2 very different approaches. In this post we’ll go into what those differences are, what pros & cons each have and when you should use one over the other.

Common

Inertia and Livewire take completely different approaches to achieve their goals but at the core both of them get rid of all the complexity of modern SPAs by freeing you from client side routing and the need of an API that comes with it.

Those are great things that will increase productivity but both of them achieve this by making use of JavaScript & AJAX, so what do they do differently?

Inertia

Inertia is framework agnostic but that isn’t the full story. There are many adapters for different front-end and back-end frameworks like Vue, React, Svelte, Laravel and more to come but you are required to drop all your back-end framework templating.

For a lot of developers this won’t be a problem as they will already have a lot of their front-end split into Vue components because they were already planning to build out a SPA or at least an application with a lot of JavaScript so going the component route from the start obviously makes sense.

Now if you are like me and like to keep the amount of JavaScript as minimal as possible then this already is a major downside because in my case I am required to drop Blade, the templating engine that comes with Laravel and need to move everything to Vue.js components even if there would be no reason to use JavaScript for them.

Pros

  • Framework agnostic
  • No need for special authentication, APIs or middlewares
  • Most questions are quickly answered by browsing their well written documentation

Cons

  • Quite a bit of boilerplate setup needed
  • Required to drop all back-end framework templating and develop whole front-end with a JavaScript framework
  • More difficult and time consuming testing because JavaScript components need to tested

Livewire

Livewire is the complete opposite of Inertia. The first major difference is that it doesn’t try to be framework agnostic, it is strictly made for Laravel to integrate as tightly as possible to reap all the benefits of what Laravel has to offer out of the box. The second and probably most important difference is that it will not force you to move away from Blade but ask you to embrace it.

For me this is a major pro because it means that I can stay with PHP and Blade for all of my development needs without needing to branch out and bring JavaScript into the mix. I’ll write the logic of the Livewire Components in PHP and the templates in Blade, this makes it feel like a seemless integration into Laravel. The components I build are like small isolated controllers that have a view attached to them and are easily testable due to the high isolation and focus on a single functionality.

Pros

  • Tightly coupled to Laravel, providing a more in-depth integration
  • Component-based architecture results in better isolation and easier testing with built-in PHP tools
  • Vue like syntax which provides a quick jumpstart if you’re familiar with it

Cons

  • Using React or Svelte inside your Livewire components is rather difficult
  • Easy to end up with a highly fragmented application (same problem as front-end frameworks)
  • Smaller community and development team as Inertia (this will improve over time)

Use Cases

The use cases for Inertia and Livewire share some commonality but Livewire provides you more flexibility. Inertias goal is to help you to build single-page apps without the pain of building an API but it isn’t possible to drop in Inertia for specific sections of your website.

This is where Livewire shines and works more like Vue or React but for PHP. Livewire allows you to make use of a component based architecture which means you can start out small and sprinkle in some components here and there and slowly scale up to a full blown single-page like app powered by dozens or hundreds of components.

Conclusion

The choice between Inertia and Livewire for me boils down to 2 use cases and types of developers with different goals and ideals when building an application.

  • Go with Inertia if you want to build a SPA or love JavaScript and want to fully embrace it in your front-end to have your back-end framework only handle the business logic and no front-end tasks like templating.
  • Go with Livewire if you prefer to keep your tooling minimal, enjoy a tight integration with your choice of back-end framework and want to keep the amount of non-PHP you have to maintain to a minimum.

Now after reading all of this the architecture purist in you might think that Inertia sounds like the clear winner because it has less coupling to any specific framework but how often do you really switch frameworks? Once a framework is chosen it rarely happens that a switch is necessary and if it does it is usually years down the road at which point even that extra bit of less coupling wouldn’t do anything for you.

Disclaimer

This post focused mainly on the differences that will have the biggest impact on your tooling and workflow. This was intentional as the Inertia and Livewire documentations are great and will tell you all you need to know about them to make a decision but having those major differences pointed out early on helps to avoid choosing the wrong tooling and spending more time on a project than necessary.