Web Bileşenleri (Web Components) Nedir?

Web Components nedir?

Web Components, tarayıcıların kendi içinde sunduğu standart özelliklerle yeniden kullanılabilir, kendi kendine yeten özel HTML öğeleri tanımlamayı sağlayan bir teknoloji kümesidir. Bir kez tanımlanan bileşen, sayfada <kullanici-karti> gibi kendi adıyla bir etiket olarak yazılır ve içindeki yapı, stil ve davranışı kendi içinde taşır.

Burada önemli olan, özelliğin bir framework'e değil tarayıcının kendisine ait olmasıdır. Bu yüzden Web Components ile yazılmış bir bileşen, React, Angular, Vue ya da hiç framework kullanmayan bir sayfada aynı şekilde çalışabilir. Farklı teknolojilerle geliştirilmiş ekiplerin ortak bir arayüz kütüphanesini paylaşması gerektiğinde bu özellik belirleyici olur.

Web Components hangi parçalardan oluşur?

Teknoloji, birbirini tamamlayan birkaç standarda dayanır:

• Custom Elements: Kendi HTML etiketinizi tanımlamanızı ve bu etiketin yaşam döngüsünü, yani sayfaya eklendiğinde, kaldırıldığında ya da bir özelliği değiştiğinde ne olacağını belirlemenizi sağlar.
• Shadow DOM: Bileşenin iç yapısını ve stilini sayfanın geri kalanından ayırır. Bileşenin içindeki bir CSS kuralı dışarıyı etkilemez, dışarıdaki kurallar da bileşenin içini istenmeden bozmaz.
• HTML şablonları (template ve slot): Yeniden kullanılabilir iç yapı tanımlar; slot ise bileşenin kullanıldığı yerden içerik alıp belirli noktalara yerleştirmesine imkan verir.

Bu parçalar birlikte çalıştığında bileşen, iç ayrıntılarını gizleyen ve dışarıya yalnızca özellik, olay ve slot gibi tanımlı arayüzler sunan kapalı bir kutu gibi davranır.

Kısa bir örnek: özel bir etiket nasıl çalışır?

Örneğin bir tasarım ekibi, üzerinde başlık, açıklama ve düğme bulunan bir bilgi kartı bileşeni hazırlar. Bileşen bir sınıf olarak yazılır, sayfaya bir etiket adıyla kaydedilir ve kart etiketinin içine yazılan metin slot aracılığıyla ilgili yere yerleşir. Başlık gibi değerler etiketin özellikleri olarak verilir. Kart bir olay yayar, örneğin düğmeye tıklandığında, ve sayfa bu olayı dinleyerek tepki verir.

Kartın stili Shadow DOM içinde tutulduğu için aynı sayfadaki başka bir CSS dosyası kartın görünümünü değiştirmez. Aynı kart bir kurumsal sitede, bir yönetim panelinde ve bir mobil web uygulamasında, kodu çoğaltmadan kullanılabilir. Tasarımda bir değişiklik gerektiğinde tek yerde güncellemek yeterlidir.

Web Components ile React ya da Vue arasındaki ilişki

Bunlar birbirinin rakibi gibi görünse de farklı katmanlardadır. React ve Vue gibi framework'ler uygulamanın tamamını, veri akışı ve yönlendirme dahil, organize eder. Web Components ise yalnızca tek bir arayüz parçasını paketlemenin standart yoludur. İkisi birlikte kullanılabilir: bir React uygulamasının içinde Web Component kullanmak ya da bir Web Component içinde framework çalıştırmak mümkündür.

Web Components'ın kendi başına yazılması, özellikle durum yönetimi ve şablon güncellemesi açısından çoğu zaman fazla tekrarlı kod gerektirir. Bu yüzden Lit gibi küçük kütüphaneler, bileşenleri reaktif biçimde yazmayı kolaylaştırmak için yaygın olarak kullanılır. Bunlar framework değil, standart özelliklerin üzerine eklenen ince yardımcılardır.

Framework tarafında da bileşenlerin Web Components olarak dışa aktarılmasına izin veren araçlar vardır.

Ne zaman tercih edilir, nelere dikkat edilir?

Web Components özellikle şu durumlarda anlamlıdır: farklı framework'leri kullanan birden çok ekip aynı tasarım sistemini paylaşıyorsa, bir bileşen uzun yıllar yaşayacak ve framework değişikliklerinden etkilenmemesi isteniyorsa, ya da dış sitelere gömülecek bir bileşen (örneğin bir yorum ya da ödeme kutusu) sunuluyorsa.

Dikkat edilmesi gereken noktalar da vardır:

• Form katılımı: Bileşenin bir form alanı gibi davranması için ek çaba gerekir; aksi halde form gönderilirken değeri kaybolabilir.
• Erişilebilirlik: Shadow DOM sınırı yardımcı teknolojilerle ilişkiyi karmaşıklaştırabilir; etiket ve rol bilgileri bilinçli kurulmalıdır.
• Sunucu tarafında oluşturma: Sayfanın sunucuda hazır gelmesi gereken senaryolarda ek yöntemler gerekebilir.
• Stil özelleştirme: Dışarıdan hangi görünümün değiştirilebileceği baştan tasarlanmalıdır.

Web Components Mindset programlarında nerede çalışılır?

Web Bileşenleri (Web Components) ile Geliştirme eğitiminde Custom Elements Temelleri, Shadow DOM ve Stil İzolasyonu, Şablonlar, Olaylar ve Veri Akışı, Lit ile Reaktif Bileşen Geliştirme, Form Katılımı ve Erişilebilirlik ile Entegrasyon, Paketleme ve Dağıtım modülleri yer alır.