Laravel Livewire: Mengubah Personal Workflow Blade-esque ke Komponen Class

Sekitar enam bulan tidak berinteraksi dengan blade pada Laravel, sejak sepekan terakhir mulai lagi dengan mencoba Laravel + Livewire. Berhubung saya menggunakan boilerplate dengan Laravel versi 6, jadinya Livewire yang kompatibel hanya sampai pada versi 1.3.5.

Sebelum ada Livewire, hanya ada dua pilihan metode untuk membuat tampilan antarmuka pada Laravel;

• dengan Blade yang merupakan standar dan bawaan Laravel untuk frontend nya, file-nya berekstensi blade.php, pada dasarnya merupakan file PHP yang berisi skrip-skrip frontend seperti HTML, Javascript (JQuery), dan CSS.
• dengan framework Javascript yang khusus untuk membangun aplikasi frontend, seperti VueJS dan ReactJS.

Kehadiran Livewire menambah opsi dalam membangun tampilan antarmuka aplikasi yang dibangun dengan Laravel. Dibuat dengan konsep fullstack faramework, Livewire menyederhanakan proses pembuatan antarmuka menjadi lebih dinamis dan semodular mungkin pada Laravel tanpa banyak bergantung pada penulisan kode program dengan Javascript/JQuery. Logic-logic frontend yang biasanya ditumpuk pada file blade dapat diminimalisir dengan memecahnya menjadi beberapa komponen serta memindahkannya ke kontroler khusus yang meng-extend kelas Component dari Livewire.

Selama sepekan menggunakan Livewire, ada beberapa catatan yang sepertinya perlu saya bagikan agar tidak lupa dikemudian hari, semoga juga bisa membantu pembaca untuk menghindari kesalahan yang sama, ataupun yang saat ini sedang menemukan dan menghadapi problem yang mirip-mirip dengan yag saya alami. Berikut catatannya:

1. Hindari dan lupakan kebiasaan untuk mempassing variable ke view secara langsung. Saya memerlukan waktu cukup lama hanya untuk men-trace error yang diakibatkan kebiasaan saya menggunakan helper view dengan mempassing variable didalamnya: i:e view('post.list', compact('var1', 'var2')). Misalnya

   ...
   // app/Http/Livewire/People/Address.php
   ...
   class Address extends Component
   {
       public $provinces = null;
   
       public function render()
       {
           $provinces = Province::all();
           return view('livewire.people.address', compact('provinces'));
       }
   }

   Potongan kode di atas telah manyalahi konsep dari Livewire itu sendiri, karena setiap public atribut dari komponen dapat di akses dari blade-nya secara default. Data provinces yang dikembalikan pada saat render dipanggil akan ter-override oleh value public atribut $province yang masih null. Jadi yang dikembalikan dari render komponen Livewire cukup view saja, sementara data yang diperlukan diset dengan/pada public variabel.

   ...
   // app/Http/Livewire/People/Address.php
   ... 
   class Address extends Component
   {
       public $provinces = null;
   
       public function render()
       {
           $this->provinces = Province::all();
           return view('livewire.people.address');
       }
   }

2. Ini lebih ke kebiasaan pribadi saya saat membuat view untuk tabel data yang didapatkan melalui resource index, selalui menamainya dengan list, namaResource/list.blade.php. Pada saat saya coba dengan Livewire menggunakan command artisan php artisan make:livewire people.list, yang terjadi adalah error meskipun class componentanya tetap ter-create;

   $ php artisan make:livewire people.list
   Symfony\Component\Debug\Exception\FatalThrowableError  : syntax error, unexpected 'List' (T_LIST), expecting identifier (T_STRING)

   ...
   // app/Http/Livewire/People/List.php
   ...
   class List extends Component
   {
       public function render()
       {
           return view('livewire.people.list');
       }
   }

   Hal ini diakibatkan command tersebut membuat class component List, sementara kata list merupakan satu dari sekian kata yang sudah di booking oleh PHP untuk penamaan salah satu fungsi bawaannya yang jarang bahkan belum pernah saya temukan ada yang mengunakannya di proyek-proyek PHP yang saya kerjakan: list(). Kata-kata yang sudah dibooking ini tidak peduli lower/upper case-nya tidak boleh digunakan lagi baik sebagai konstanta, nama kelas, nama method ataupun fungsi.

   These words have special meaning in PHP. Some of them represent things which look like functions, some look like constants, and so on - but they're not, really: they are language constructs. You cannot use any of the following words as constants, class names, function or method names. Using them as variable names is generally OK, but could lead to confusion. -- PHP reserved Keyword(s)

Demikian dua hal yang menjadi catatan saya selama sepekan terakhir mengoprek Laravel dengan Livewire. Semoga bermanfaat :)