Dari Kondisional ke Peta Komponen: Cara Lebih Bersih untuk Merender Halaman dengan CMS Tanpa Kepala

Saya baru-baru ini bekerja dengan CMS tanpa kepala untuk klien dan memperhatikan permintaan umum: lebih banyak fleksibilitas saat membuat halaman. Masalahnya? Cara mencapai hasil yang diinginkan sambil merancang solusi yang dapat diskalakan dan dipelihara untuk para insinyur. Pola ini menghilangkan kebutuhan akan pernyataan bersyarat saat merender komponen halaman tingkat atas. Ini sangat berguna dengan CMS tanpa kepala di mana penulis konten membutuhkan fleksibilitas dalam mengatur komponen pada halaman.

Perbandingan pendekatan

Ketika komponen perlu ditempatkan secara dinamis berdasarkan urutannya dalam data, kita perlu merender setiap jenis komponen secara kondisional dan menetapkan komponen rendering yang sesuai.

Meskipun ada beberapa pendekatan untuk ini, pengembang biasanya mengisi komponen mereka dengan beberapa pernyataan bersyarat untuk merender yang benar (Lihat tangkapan layar).

Sementara pendekatan iniTeknisbekerja, bayangkan kompleksitas dengan lusinan komponen tingkat atas—file akan menjadi sulit untuk di-debug dan berisiko untuk dimodifikasi tanpa memperkenalkan regresi.

Jadi apa yang bisa kita lakukan?

Mari kita tingkatkan pendekatan ini dengan membersihkan struktur kode. Alih-alih mengkonsolidasikan semua logika rendering dalam satu file, kita akan memisahkannya sehingga setiap file menangani satu tanggung jawab.

Kita akan membuat objek pemetaan untuk mengatur komponen kita.

Mulailah dengan mendeklarasikan pemetaan komponen Anda. Kunci mewakili pengidentifikasi dari CMS atau sumber data Anda, dan nilainya menentukan komponen mana yang akan dirender.

Dengan peta kita di tempatnya, kita sekarang dapat mengambil komponen yang benar langsung dari objek. Jika tidak ada komponen yang cocok, kita mengembalikan null untuk mencegah rendering.

Pendekatan ini menawarkan solusi yang lebih terukur untuk masalah tersebut. Alih-alih menyimpan semua logika dalam satu file, Anda mempertahankan objek yang memetakan nama komponen ke komponen UI yang sesuai.

Dengan pendekatan ini, komponen akan ditampilkan dalam urutan yang benar berdasarkan sumber data Anda, tanpa mengharuskan pengembang untuk memodifikasi markup atau struktur komponen apa pun.

Ditulis oleh Matt Czencz , Insinyur Senior Full Stack di Studio Clique.