Fallback Image
Fallback Image

Save Time with Laravel:

Livewire and Inertia in Comparison

At the 12th Laravel Meetup Germany we got insights into serverless deployment with Vapor and state-of-the-art UIs with the frontend variants Livewire and Inertia.

The new online edition of our Laravel Meetup brings together Laravelians from all over the German-speaking world to help each other and discuss current Laravel topics. In-depth technical input is provided by the Laravel experts from byte5.

We made a new start: On April 15, our 12th Laravel Meetup Germany took place – remote. Although remote calls and meetings have been part of byte5's daily work for a long time, we have now entered previously unknown territory with the new online event series. Old friends as well as some new faces were present, which we were very happy about.

Our speakers and Laravel experts Marcel, Jure and Janosch gave the participants an insight into the latest Laravel developments since version 8: Serverless deployment with Vapor as well as state-of-the-art UIs with Livewire and Inertia.js.

 

Laravel Vapor

© Laravel

Laravel Vapor

Marcel started with an introduction to Laravel Vapor, an automatically scaling serverless deployment platform available since 2019 and powered by AWS (Lambda). Vapor can be used to manage Laravel applications on AWS as well as their interfaces with databases (RDS/serverless), Redis clusters, and more. Some participants described their experience with Vapor and asked interesting questions, which Marcel explained among others using an application example.

 

In the second part of the Meetup, Jure and Janosch took over. They focused on Inertia and Livewire, two intuitive frontend components of Laravel that are used in the Jetstream application starter kit. The two frontend stacks offer templates for implementing interactive elements and many other components out-of-the-box. Livewire is responsible for the modern, reactive blade components, while Inertia is responsible for coupling the Laravel backend with Vue components.

 

Livewire – a full-stack framework for modern, dynamic interfaces

Livewire is a full-stack framework for Laravel that simplifies the creation of modern, dynamic interfaces without leaving the comfort of Laravel. In the first step, it renders the component outputs with the page, similar to Laravel Blade. It then executes an AJAX request to the server with updated data. The server, in turn, re-renders the components and responds with a new HTML. Finally, the framework modifies the Document Object Model (DOM) according to the changes.

 

Livewire Blade

© Livewire

Livewire Blade

Livewire Class

© Livewire

Livewire Class

Aufruf der Livewire Component in Welcome View

© Livewire

Aufruf der Livewire Component in Welcome View

 

In practical use, Livewire offers various advantages and disadvantages, which our experts briefly compared:

 

Inertia & Vue for Building Server-Driven Web Apps

Inertia is a new approach to building classic server-driven web apps. The small library allows users to render single-file Vue components from the Laravel backend. In doing so, fully client-side rendered, single-page apps can be created without the high complexity usually associated with modern single-page web apps (SPAs). Inertia works like a classic server-side rendered app: controllers, database operations and views are written as before, with JavaScript page components now replacing views.

In addition to Vue, Inertia also provides official support and documentation for React and Svelte. It is designed for teams that typically implement server-side applications and want to replace server-side rendered views with a JavaScript solution. In the case of Laravel, Inertia uses existing authentications, requires no development of the entire API, and blade views are replaced with JavaScript components.

 

Fallback Image

Like Livewire, Inertia offers users several advantages and disadvantages:

 

Livewire and Inertia.js in Comparison

The conclusion of our experts Jure and Janosch: Livewire is well suited for beginners with little JavaScript experience. Vue or React knowledge is required to use Inertia.js, although only Vue is currently supported by Jetstream. This makes Inertia particularly suitable for experienced users.

Which approach should be used for which project, then, depends on the nature of the application and the developer's experience with the underlying technology stack. Neither Livewire nor Inertia is the perfect solution for all use cases. Nevertheless, both technologies offer their users many useful features and do one thing above all: save them a lot of time.

 

We would like to thank all participants for the exciting insights and lively discussions. We are already looking forward to the next session on May 6 and to some special guests like Taylor Otwell!

For those who would like to further explore the topics discussed, we recommend two tutorial series on Vapor and Livewire.

 

 

Join us

at the Laravel Meetup Germany!

Sign up now for free!