Bileşen Çıkarma ve Parçalı Şablonlar

Bir HTML kod tabanı büyüdükçe aynı işaretleme parçaları birçok sayfada görünür: site üst bilgisi, alt bilgisi, gezinme, ürün kartı, form alanı. Bunları kopyalayıp yapıştırmak bakım kâbusu oluşturur; alt bilgiyi değiştirmek her sayfayı düzenlemek anlamına gelir.

Çoğu sunucu taraflı şablonlama dili (Jinja, Liquid, ERB, EJS, Handlebars, Twig) ekleme yönergelerini destekler: {% include "header.html" %} veya <%- include("header") %>. Derleme işlemi veya sunucu, parçayı onu içeren her sayfaya satır içi olarak ekler.

JSX/TSX (React), Vue SFC'leri, Svelte bileşenleri ve Astro bileşenleri aynı fikri daha güçlü bir anlamlandırmayla ifade eder: bileşen yapıyı, stilleri ve davranışı kapsüller. Bunlar derleme zamanında (SSG) veya çalışma zamanında (SSR/CSR) HTML'ye derlenir.

Parçaları/bileşenleri amaçlarına göre gruplayın: partials/layout/ üst bilgi/alt bilgi/gezinme için, partials/blocks/ tanıtım/özellik/eylem çağrısı blokları için, partials/forms/ alan/düğme/seçim için. Tutarlı düzenleme, parça kitaplığı büyüdükçe içinde gezinmeyi kolaylaştırır.

Parçalar parametrelerle daha güçlü hâle gelir: {% include "button.html" with label="Save", variant="primary" %}. Parçanın içinde parametrelere adlarıyla başvurun. Aynı şablon site genelinde farklı düğmeler oluşturur.

Keyfî içeriği saran parçalar (kartlar, iletişim kutuları) için yuva modellerini kullanın: Jinja'nın {% block content %}{% endblock %}, Twig'in {% block %} ve JSX'in {children} özelliği. Saran parça iskeleti sağlar; kullanan taraf içeriği sağlar.

Statik site oluşturucuları (11ty, Astro, Hugo, Jekyll) eklemeleri derleme zamanında çözümler; dağıtılan HTML'de şablon söz dizimi bulunmaz. Dinamik şablonlama (PHP, Rails, Express+EJS) istek zamanında çözümlenir; esnektir ancak daha yavaştır. İçeriğin her istekte dinamik olması gerekip gerekmediğine göre seçim yapın.

Parçalar kendi CSS'lerini taşımalıdır. Alt bilgi parçası footer.css dosyasına, düğme parçası button.css dosyasına sahip olmalıdır. Bunu yalnızca bir sayfada gerçekten kullanılan parçaların CSS'lerini birleştiren bir derleme adımıyla birlikte kullanmak, her bileşenin CSS'sini her yerde yüklemekten kaçınmanızı sağlar.

Her parça tek başına sınanabilmelidir: çeşitli verilerle oluşturun ve çıktıyı doğrulayın. Cypress bileşen sınaması veya Jest anlık görüntü sınaması gibi araçlar HTML parçalarına da uygulanabilir. Sınanmış parçalar, onları kullanan her sayfayı elle doğrulamadan güvenle değiştirilebilir.

Parçalar bir uygulama programlama arayüzüdür. Parametre adlarını, yuva kurallarını veya gerekli özellikleri değiştirmek, parçayı kullanan herkes için kırıcı bir değişikliktir. Parçanın arayüzünü belgeleyin, kullanımdan kaldırmayı kademeli olarak yapın ve yeniden düzenlemeden önce her kullanımı bulmak için bir arama aracı kullanın.

Sayfaları parçaları birleştirerek oluşturun: üst bilgi + kenar çubuğu + içerik + alt bilgi + analiz parçaları. Her parça küçük ve odaklıdır; sayfanın kendisi bunları birbirine bağlayan yalın bir birleştirme betiğine dönüşür. Bu, 800 satırlık tek dosyalı HTML'yi anlamaya çalışmaktan çok daha kolaydır.

Bir parça çıkarmak için sayfalar arasında yinelenen işaretlemeyi belirleyin, bunu partials/X.html dosyasına kopyalayın, her oluşumun yerine dahil etme yönergesini koyun ve çağıranlar arasında farklılık gösteren değerleri parametrelere dönüştürün. Her seferinde bir parça yapın; kod tabanı kademeli olarak iyileşir.

Tekrarlanan bir HTML parçasını (site alt bilgisi gibi) bir parçaya çıkarmanın temel yararı nedir?

Tekrarlanan HTML'yi sunucu taraflı eklemeler (Jinja, Twig, EJS) veya çerçeve bileşenleri (React, Vue, Svelte, Astro) aracılığıyla parçalara/bileşenlere çıkarın. Verileri parametrelerle aktarın, yuvalar aracılığıyla birleştirin. Amaca göre gruplayın, tek başına sınayın ve parça imzasını bir arayüz olarak ele alın. Kademeli olarak geçiş yapın; her çıkarma işlemi tekrarı azaltır ve bakımı kolaylaştırır.