Ekstraksi Komponen dan Partial

Saat basis kode HTML berkembang, potongan HTML yang sama muncul di banyak halaman — tajuk situs, kaki situs, navigasi, kartu produk, dan bidang formulir. Menyalin-tempelnya menciptakan mimpi buruk pemeliharaan; mengubah kaki situs berarti mengedit setiap halaman.

Sebagian besar bahasa templating sisi server (Jinja, Liquid, ERB, EJS, Handlebars, Twig) mendukung direktif penyertaan: {% include "header.html" %} atau <%- include("header") %>. Proses build atau server menyisipkan bagian parsial ke setiap halaman yang menyertakannya.

JSX/TSX (React), SFC Vue, komponen Svelte, dan komponen Astro menyatakan gagasan yang sama dengan semantik yang lebih kuat: komponen membungkus struktur, gaya, dan perilaku. Semua itu dikompilasi menjadi HTML saat pembangunan (SSG) atau saat berjalan (SSR/CSR).

Kelompokkan partial/komponen berdasarkan tujuan: partials/layout/ untuk tajuk/kaki/navigasi, partials/blocks/ untuk blok hero/fitur/cta, dan partials/forms/ untuk bidang/tombol/pilihan. Pengaturan yang konsisten membuat pustaka partial mudah dijelajahi saat terus berkembang.

Partial menjadi lebih bermanfaat dengan parameter: {% include "button.html" with label="Save", variant="primary" %}. Di dalam partial, rujuk parameter berdasarkan namanya. Templat yang sama dapat merender tombol berbeda di seluruh situs.

Untuk partial yang membungkus konten sembarang (kartu, dialog), gunakan pola slot: {% block content %}{% endblock %} milik Jinja, {% block %} milik Twig, dan prop {children} milik JSX. Partial pembungkus menyediakan kerangkanya; pemakai menyediakan bagian dalamnya.

Pembangkit situs statis (11ty, Astro, Hugo, Jekyll) menyelesaikan penyertaan saat pembangunan — HTML yang diterapkan tidak memiliki sintaks templat. Templating dinamis (PHP, Rails, Express+EJS) menyelesaikannya saat permintaan — fleksibel tetapi lebih lambat. Pilih berdasarkan apakah konten perlu bersifat dinamis untuk setiap permintaan.

Partial sebaiknya membawa CSS-nya sendiri. Partial kaki memiliki footer.css; partial tombol memiliki button.css. Jika digabungkan dengan langkah build yang hanya menggabungkan CSS untuk partial yang benar-benar digunakan di halaman, pendekatan ini mencegah CSS setiap komponen dimuat di semua tempat.

Setiap partial sebaiknya dapat diuji secara terpisah: render dengan berbagai data, lalu pastikan keluarannya. Alat seperti pengujian komponen Cypress atau pengujian snapshot Jest juga dapat diterapkan pada partial HTML. Partial yang telah diuji aman untuk diubah tanpa harus memverifikasi setiap halaman pemakai secara manual.

Partial adalah API. Mengubah nama parameter, aturan slot, atau prop yang wajib digunakan merupakan perubahan yang merusak bagi setiap pemakai. Dokumentasikan antarmuka partial, hentikan penggunaannya secara bertahap, dan gunakan alat pencarian untuk menemukan setiap penggunaan sebelum melakukan refaktor.

Bangun halaman dengan menyusun partial: partial tajuk + bilah sisi + konten + kaki + analitik. Setiap partial berukuran kecil dan berfokus; halaman itu sendiri menjadi skrip perakitan tipis yang menghubungkan semuanya. Ini jauh lebih mudah dipahami daripada HTML satu berkas sepanjang 800 baris.

Untuk mengekstrak partial: kenali markup yang diduplikasi di berbagai halaman, salin ke partials/X.html, ganti setiap kemunculannya dengan direktif penyertaan, lalu jadikan nilai yang berbeda antar-pemanggil sebagai parameter. Kerjakan satu partial setiap kali; basis kode akan membaik secara bertahap.

Apa manfaat utama mengekstrak potongan HTML berulang (seperti kaki situs) menjadi partial?

Ekstrak HTML berulang menjadi partial/komponen melalui penyertaan sisi server (Jinja, Twig, EJS) atau komponen kerangka kerja (React, Vue, Svelte, Astro). Teruskan data melalui parameter dan susun melalui slot. Kelompokkan berdasarkan tujuan, uji secara terpisah, dan perlakukan tanda tangan partial sebagai API. Lakukan migrasi secara bertahap — setiap ekstraksi mengurangi duplikasi dan meningkatkan kemudahan pemeliharaan.