livewire best practices
2.1.1
Repositori ini adalah daftar rekomendasi umum tentang cara menggunakan kerangka Laravel Livewire untuk memenuhi kekhawatiran perusahaan mengenai keamanan, kinerja, dan pemeliharaan komponen Livewire.
Nama saya Michael Rubél dan saya mulai menggunakan kerangka Livewire pada tahun 2019 ketika masih baru dan hampir tidak stabil. Dulu, saya terkesan dengan betapa cepatnya UI dinamis dapat dikirimkan bahkan tanpa menggunakan JavaScript. Namun seperti solusi perangkat lunak lainnya, solusi ini mempunyai kekurangan, dan saya harus mengatasinya. Tujuan utama dari repositori ini adalah untuk mengumpulkan pengalaman paling penting yang perlu Anda pertimbangkan saat bekerja dengan Livewire.
Mari kita mulai...
Livewire membutuhkan elemen root (div) di setiap komponen. Anda harus selalu menulis kode di dalam <div>Your Code Here</div> . Menghilangkan struktur ini akan menyebabkan banyak masalah dalam memperbarui komponen.
Contoh
Don't pass large objects to Livewire components!Hindari meneruskan objek ke properti publik komponen jika memungkinkan. Gunakan tipe primitif: string, integer, array, dll. Itu karena Livewire membuat serialisasi/deserialisasi payload komponen Anda dengan setiap permintaan ke server untuk berbagi status antara frontend & backend. Jika Anda perlu mengerjakan objek, Anda bisa membuatnya di dalam metode atau properti terhitung, lalu mengembalikan hasil pemrosesan.
Apa yang dianggap sebagai benda besar?
Catatan: jika Anda menggunakan komponen satu halaman penuh, disarankan untuk mengambil objek dalam komponen satu halaman penuh itu sendiri, lalu meneruskannya ke bawah ke objek yang disarangkan sebagai tipe primitif.
Jika Anda memiliki komponen Livewire (0) yang menyertakan komponen Livewire lain (1), maka Anda tidak boleh menyarangkannya lebih dalam (2+). Terlalu banyak penumpukan dapat membuat pusing saat menangani masalah perbedaan DOM.
Selain itu, pilihlah penggunaan komponen Blade saat Anda menggunakan komponen bersarang, komponen tersebut akan dapat berkomunikasi dengan komponen Livewire induknya tetapi tidak akan dikenakan overhead yang ditambahkan oleh Livewire.
Contoh
Livewire v3 memperkenalkan lapisan abstraksi baru yang disebut Form Objects . Selalu gunakan mereka karena itu membuat komponen Anda lebih mudah dirawat dalam jangka panjang.
dokumen
Hindari situasi yang dapat menyebabkan penyampaian data sensitif ke komponen Livewire, karena data tersebut dapat diakses dengan mudah dari sisi klien secara default. Anda dapat menyembunyikan properti dari frontend menggunakan atribut #[Locked] mulai dari Livewire versi 3.
Daripada terus-menerus melakukan polling pada halaman untuk menyegarkan data, Anda dapat menggunakan event listening untuk melakukan pembaruan komponen hanya setelah tugas tertentu dimulai dari komponen lain.
Contoh
Anda dapat menggunakan properti komputasi untuk menghindari kueri database yang tidak diperlukan. Properti yang dihitung disimpan dalam cache dalam siklus hidup komponen dan tidak dijalankan beberapa kali di kelas komponen atau tampilan blade. Mulai dari Livewire v3, hasil properti yang dihitung juga dapat di-cache di cache tingkat aplikasi umum (misalnya Redis), lihat.
Contoh
Berikan hanya ID atau UUID ke metode mount , lalu petakan atribut model ke properti komponen. Ingat: jangan tetapkan model secara keseluruhan, tapi atributnya saja. Untuk menghindari pemetaan atribut model secara manual, Anda dapat menggunakan metode fill .
Contoh
Hindari menggunakan kawat live : pengubah model. Hal ini secara signifikan mengurangi permintaan yang tidak perlu ke server. Di Livewire versi 3, semua model ditangguhkan secara default (lama: defer modifier), dan itu bagus.
Contoh
Livewire memiliki perintah Artisan bawaan untuk membuat, memindahkan, mengganti nama komponen, dll. Misalnya, daripada mengganti nama file secara manual, yang mungkin rawan kesalahan, Anda dapat menggunakan perintah berikut:
php artisan livewire:move Old/Path/To/Component New/Path/To/Component Anda dapat menggunakan status pemuatan untuk menjadikan UX lebih baik. Ini akan menunjukkan kepada pengguna bahwa ada sesuatu yang terjadi di latar belakang jika proses Anda berjalan lebih lama dari yang diharapkan. Untuk menghindari kedipan, Anda dapat menggunakan pengubah delay .
Contoh
Daripada memblokir perenderan halaman hingga data Anda siap, Anda dapat membuat placeholder menggunakan teknik pemuatan lambat untuk membuat UI Anda lebih responsif.
Contoh
Sinkronkan data Anda dengan backend menggunakan direktif $wire.entangle. Dengan cara ini model akan diperbarui secara instan di frontend, dan data akan tetap ada di sisi server setelah permintaan jaringan mencapai server. Ini secara dramatis meningkatkan pengalaman pengguna pada perangkat yang lambat. Pendekatan ini disebut "Respon Optimis" atau "UI Optimis" di komunitas frontend lainnya.
Contoh
Livewire tidak mendukung Permintaan Formulir secara internal, namun alih-alih melakukan hardcoding pada array aturan validasi dalam komponen, Anda bisa mendapatkannya langsung dari Permintaan Formulir. Dengan cara ini Anda dapat menggunakan kembali aturan validasi yang sama di lapisan aplikasi yang berbeda, misalnya di titik akhir API.
Contoh
Bahkan tes sederhana pun bisa sangat membantu ketika Anda mengubah sesuatu di komponen. Livewire memiliki API pengujian yang sederhana namun kuat.
Apakah Anda bekerja dengan Livewire setiap hari?
Sarankan praktik terbaik Anda jika Anda tidak melihatnya di daftar.
Jika Anda tidak yakin apakah ini praktik yang baik, Anda dapat memulai diskusi.
