Ilmu Coding Ilmucoding.com - Merupakan situs yang membantu Anda belajar coding lebih mudah, nyaman, interaktif dan profesional. Belajar sekarang di ilmu coding. GRATIS

Pengenalan dan Cara Install Laravel Livewire SPA

2 min read

Pengenalan Apa Itu Laravel Liveware Single Page Application (SPA)

Membuat website modern atau fullstack nggak perlu ribet, sekarang sudah bisa install Laravel Livewire Single Page Application (SPA).

Apa maksudnya om nggak perlu ribet?

Gini, website modern biasanya menggunakan metode full-stack dengan framework populer seperti React Js atau Vue Js.

Tetapi, untuk membangun aplikasi web menggunakan keduanya, ditubuhkan tambahan-tambahan package / library yang kompleks.

Misalnya Node Package Manajer (NPM).

Banyak developer yang mengeluh besarnya folder pada NPM.

Bahkan tidak sebesar aplikasinya.

aplikasi kita < node_modules

Beruntung untuk saat ini folder node_modules bisa ditangani oleh Deno sebagaimana yang sudah saya jelaskan pada tutorial cara install Deno di Windows.

Tapi sebagian besar, developer sudah lama menggunakan React Js dan Vue Js di dalam aplikasi yang mereka buat.

… dan masih ada ketergantungan dengan NPM.

Oleh karena itu kehadiran Laravel Livewire menjadi “solusi” bagi kita yang tidak ingin menggunakan terlalu banyak package tambahan.

Sebagai pendukung tutorial kali ini, kita pun akan mempelajari apa itu Laravel Livewire, bagaimana ia bekerja, yang sering ditanyakan sampai cara install Laravel Livewire.

Let’s go!

Pengenalan Apa Itu Laravel Livewire

Livewire adalah framework full-stack untuk Laravel yang membuat user interface (UI) dinamis menjadi sederhana, tanpa meninggalkan kenyamanan Laravel.

Pengenalan Apa Itu Laravel Liveware Single Page Application (SPA)

Pengguna Laravel tidak perlu lagi menggunakan Ajax, React Js ataupun Vue Js untuk meningkatkan kinerja website.

Sekarang sudah ada Laravel Livewire yang powerfull dan bisa digunakan sebagai pengganti Ajax, React dan Vue.

Sekarang, kita bisa ucapkan say hello kepada Laravel Livewire.

Bagaimana Laravel Livewire Bekerja?

Saya akan memberikan gambaran bagaimana Laravel Livewire bekerja.

  • Livewire membuat output initial component dalam satu page(seperti Blade), dengan cara ini tetap mengutamakan SEO friendly.
  • Ketika interaksi terjadi, Livewire membuat permintaan AJAX ke server dengan data yang diperbarui (load request jadi lebih cepat).
  • Server merender ulang komponen dan merespons dengan HTML baru (DOM).
  • Livewire kemudian secara cerdas bermutasi DOM sesuai dengan hal-hal yang berubah.

Ini keren!

Kita nggak perlu lagi pusing-pusing dengan Javascript.

Sebab, persoalan Javascript dan Ajax sudah langsung ditangani oleh Laravel Livewire.

Saya mulai yakin ke depannya pengguna Laravel Livewire akan semakin banyak.

Sering Ditanyakan …

Apakah Laravel Liveware menggunakan web socket?

Tidak, Laravel Livewire hanya mengandalkan permintaan AJAX untuk melakukan semua komunikasi servernya.

Ini berarti Laravel Liveware dapat diandalkan dan terukur.

Apakah ini pengganti Vue?

Dalam beberapa hal ya, tetapi sebagian besar ada perbedaan di mana Vue mengirimkan permintaan melalui axios ataufetch. (Seperti searching, filters dan form).

Jika tidak menggantikan Vue, apa yang harus saya lakukan ketika membutuhkan Javascript seperti drop-down, modal, atau datepicker?

Livewire bekerja dengan indah menggunakan framework AlpineJS.

Untuk integrasi library pihak ketiga (seperti Select2, Pickaday, atau Dropzone.js), Livewire menyediakan API untuk menambahkan dukungan untuk ini.

Nggak cuma itu, Laravel Livewire pun menyediakan sistem validation, uploads, auth, pagination, redirect, flash message dan lain-lain.

Livewire juga memiliki plugin untuk mendukung penggunaan komponen VueJs di dalam komponen Livewire.

Keren banget.

Ahhhhh… Kenapa nggak dari dulu munculnya sih.

Nggak perlu lagi tuh menggunakan Vue.

Ini sih namanya ngeringanin … Hehehe.

Udah langsung install aja dah daripada penasaran.

Cara Install Laravel Livewire

Cara install Laravel Livewire sangat mudah, silahkan masuk ke direktori project.

cd ilmucoding

Lalu gunakan composer dan kemudian ketik perintah berikut ini:

 composer require livewire/livewire 
Cara Install Laravel Liveware via Composer

Tunggu sampai proses installasi selesai.

Jika sudah, kita akan dengan mudah menggunakan Laravel Livewire ke depannya.

Akhir Kata

Sudah saatnya kita “hijrah” ke Laravel Livewire demi meringankan tugas sebagai developer website.

Akan tetapi, kita jangan langsung puas.

… Sebab Ilmucoding.Com insya Allah akan membahas dan mengulas si Laravel Livewire ini ke depannya.

Misalnya pembahasan componentnya, pluginnya sampai studi kasus CRUD menggunakan Laravel Livewire.

Ditunggu ya.

Silahkan berikan pendapat kalian tentang Laravel Livewire di kolom komentar ya.

Ilmu Coding Ilmucoding.com - Merupakan situs yang membantu Anda belajar coding lebih mudah, nyaman, interaktif dan profesional. Belajar sekarang di ilmu coding. GRATIS

Leave a Reply

Your email address will not be published. Required fields are marked *

Jika terbantu dengan artikel ini, silahkan share, beri komentar dan "klik" 1 kali pada iklan ya.