Livewire
😎

Livewire

Tags
LARAVEL
Livewire
Published
February 21, 2023
Author
Oussama Belhadi

What’s Livewire?

notion image
 
Building modern web apps is hard. Tools like Vue and React are extremely powerful, but the complexity they add to a full-stack developer's workflow is insane. It doesn’t have to be this way...
 
So Laravel Livewire is a library that makes it simple to build modern, reactive, dynamic interfaces using Laravel Blade as your templating language. This is a great stack to choose if you want to build an application that is dynamic and reactive, and is a great alternative to a full JavaScript framework like Vue.js.
 
It's not like anything you've seen before. The best way to understand it is to just look at the code. Strap on your snorkel, we're diving in.
 
App\Http\Livewire\SearchUsers.php
notion image
 
resources/views/livewire/search-users.blade.php
notion image
 
 
You can include this component anywhere in your app like so.
 
resources/views/welcome.blade.php
notion image
 
When a user types into the search input, the list of users updates in real-time.
Just Wow..

How it actually works :

  • Livewire renders the initial component output with the page (like a Blade include). This way, it's SEO friendly.
  • When an interaction occurs, Livewire makes an AJAX request to the server with the updated data.
  • The server re-renders the component and responds with the new HTML.
  • Livewire then intelligently mutates DOM according to the things that changed.
 
Here’s also a CRUD working example on my Github, click here to view
 
Â