untuk mengawali perkenalan kita dengan Livewire, ada sebuah quote dari Caleb Porzie yaitu
“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…”
Image source : https://www.krishaweb.com/laravel-livewire
Livewire itu sendiri adalah full-stack framework untuk laravel, yang memungkinkan kita untuk membuat antar muka yang dinamis secara mudah, tanpa meninggalkan Laravel.
Berbeda dengan Vue & React yang membutuhkan API untuk mengambil data dan atau menampilkan data, di Livewire kita akan membuat 2 file yaitu Class PHP yang sekilas mirip dengan Controller pada Laravel dan file view.
Livewire memiliki cara kerja yaitu:
- Livewire merender component
- Livewire akan membuat AJAX request dengan data baru ketika terjadi interaksi (event)
- Server akan merender ulang component dan akan mengirimkan respons dengan HTML data yang baru.
- Livewire akan memutasi DOM sesuai hal-hal yang berubah.
“For the frontend, I often used Vue.js. If you asked a 6 months younger version of mine, I would count vue.js here instead of Livewire. But Livewire is killing it in speed points, syntax, and easiness. With Livewire, you don’t have to care about so many things. It’s directly serverside, so you don’t have to stress with double validations and all the annoying stuff.” — Vittorio Emmermann
untuk menggunakan Livewire kita cukup masuk ke project root Laravel kita dan menjalankan command
composer require livewire/livewire
setelah di install kita perlu menambahkan Blade directives @livewireStyles di tag head dan @livewireScripts di tag body pada di template kita :
Membuat Inline Components di Livewire
untuk membuat inline component maka hanya di butuhkan 1 file (tanpa blade) yaitu sebuah Class PHP.
Membuat component HelloWorld
kita akan membuat iniline component HelloWorld, pertama jalankan command berikut untuk membuat component
php artisan make:livewire HelloWorld --inline
akan terbentuk file di app/Http/Livewire/HelloWorld.php, edit menjadi seperti berikut :
class HelloWorld extends Component
{
public function render()
{
return <<<'blade'
<div>Hello World</div>
blade;
}
}
lalu untuk merender component kita bisa menggunakan blade directive seperti berikut
@livewire(‘some-component’)
ada beberapa command yang terdapat di Livewire, di antaranya adalah :
- Publish Livewire configuration
php artisan livewire:publish
- Create a new Livewire component
php artisan livewire:make <name>
- Copy a Livewire Component
php artisan livewire:copy <name <new_name>
- Move a Livewire Component
php artisan livewire:move <name> <new_name>
- Delete a Livewire Component
php artisan livewire:delete <name>
Referensi :