Livewire vs. Inertia beim Laravel Meetup Germany

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.

Friday, April 23, 2021

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.

 

Example Vapor - © Laravel

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 Component - © Livewire

Livewire Class - © Livewire

Opening the Livewire Component in Welcome View - © Livewire

 

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

 

Advantages:

  • Beginner-friendly, since AJAX requests can be made with little or no JavaScript knowledge
  • SEO-friendly, as the HTML is sent to the browser on first rendering
  • Integration into existing Laravel pages possible
  • Automated testing possible due to included test suite

Disadvantages:

  • Increased server load, since all status changes are done via AJAX request
  • More difficult troubleshooting possible due to mixing of back- and frontend logic

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.

 

Like Livewire, Inertia offers users several advantages and disadvantages:

 

Advantages:

  • All application routes are contained in a single file
  • Eliminates complexity of client-side routing
  • Can be set up with React

Disadvantages:

  • If an Android/iOS application is desired, the backend API must be recreated
  • Laravel Jetstream is currently configurable only for Inertia and Vue
  • The developer must be proficient in both PHP and Vue
  • Limited usability without Vuex

Deploying Vue and Laravel applications in the same domain has often led to undesirable behavior. So maintaining one router instead of two is a big step forward. Now we can develop simple Vue applications much faster than we could before Inertia.

Jure Knezovic, Junior Developer

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!

News, discussions, questions - be part of it! The next Laravel Meetup Germany about performance enhancement with Octane and Laravel fuckups will take place online on May 06, from 17:30 - 19:30.

Sign up now for free!