M

MLOG

Türkçe

Farklı JavaScript çatılarında çalışan, yeniden kullanılabilir arayüz elemanları için tarayıcı tabanlı bir mimari olan Web Components'i keşfedin. Custom Elements, Shadow DOM ve HTML Templates'i öğrenin.

Web Components: Küresel Web Geliştirme için Tarayıcı Tabanlı Bileşen Mimarisi

Sürekli gelişen web geliştirme dünyasında, ölçeklenebilir, sürdürülebilir ve yeniden kullanılabilir arayüz elemanları oluşturmak için bileşen tabanlı mimariler büyük önem kazanmıştır. React, Angular ve Vue.js gibi JavaScript çatıları kendi bileşen modellerini sunarken, Web Components bileşenleştirmeye tarayıcı tabanlı bir yaklaşım getirir. Bu, farklı çatılar arasında ve hatta hiç çatı kullanmadan sorunsuz bir şekilde çalışan yeniden kullanılabilir bileşenler oluşturabileceğiniz anlamına gelir. Bu da Web Components'i, farklı projeler ve ekipler arasında tutarlılık ve sürdürülebilirlik sağlayan, küresel web geliştirme için güçlü bir araç haline getirir.

Web Components Nedir?

Web Components, web sayfalarında ve web uygulamalarında kullanılmak üzere yeniden kullanılabilir, kapsüllenmiş HTML etiketleri oluşturmanıza olanak tanıyan bir dizi web standardıdır. Dört temel spesifikasyon üzerine kuruludur:

Bu teknolojiler birlikte çalışarak, geliştiricilerin çeşitli projelere kolayca paylaşıp entegre edebileceği, gerçekten yeniden kullanılabilir bileşenler oluşturmasını sağlar. Web components için tarayıcı desteği, Chrome, Firefox, Safari ve Edge dahil olmak üzere tüm büyük modern tarayıcıları kapsayacak şekilde mükemmeldir.

Neden Web Components Kullanmalıyız?

Web geliştirme iş akışınızda Web Components'i benimsemek için birçok geçerli neden vardır:

1. Yeniden Kullanılabilirlik

Web Components, yeniden kullanım için tasarlanmıştır. Bir bileşen bir kez tanımlandıktan sonra, tek bir sayfa içinde veya farklı projeler arasında birden çok kez kullanılabilir. Bu, kod verimliliğini artırır ve fazlalığı azaltır. Tokyo, Londra ve New York'ta ofisleri bulunan bir şirketin standartlaştırılmış bir tarih seçici bileşenine ihtiyaç duyduğunu düşünün. Web Components ile tek bir bileşen oluşturup tüm bölgesel web sitelerinde yeniden kullanarak küresel olarak tutarlı bir kullanıcı deneyimi sağlayabilirler.

2. Çatı Bağımsızlığı

Web Components, herhangi bir özel JavaScript çatısına bağlı değildir. React, Angular, Vue.js ile ve hatta sadece HTML ve JavaScript ile kullanılabilirler. Bu çatı bağımsızlığı, onları çeşitli teknoloji yığınlarıyla çalışan ekipler veya gelecekteki çatı değişikliklerine karşı güvence altına alınması gereken projeler için değerli bir varlık haline getirir. Bu durum, kuruluşların temel arayüz bileşenlerini yeniden yazmadan çatılar arasında geçiş yapmasına veya yenilerini benimsemesine olanak tanır.

3. Kapsülleme

Shadow DOM, bir bileşenin iç uygulama ayrıntılarını sayfanın geri kalanından koruyarak güçlü bir kapsülleme sağlar. Bu, stil çakışmalarını önler ve bileşenin çevresindeki ortamdan bağımsız olarak öngörülebilir şekilde davranmasını sağlar. Örneğin, müşteri yorumlarını görüntülemek için kullanılan bir Web Component, ana web sitesinin CSS'inden etkilenmeyecek kendi stiline sahip olabilir ve bunun tersi de geçerlidir.

4. Sürdürülebilirlik

Web Components'in modüler yapısı, bakımlarını kolaylaştırır. Bir bileşenin iç uygulamasındaki değişiklikler, bileşenin genel API'si aynı kaldığı sürece uygulamanın diğer bölümlerini etkilemez. Bu, zaman içinde bileşenlerde hata ayıklamayı, test etmeyi ve güncellemeyi basitleştirir. Karmaşık bir veri görselleştirme Web Component'i düşünün; içindeki grafik kütüphanesine yapılan güncellemeler sayfadaki diğer bileşenleri bozmayacaktır.

5. Web Standartları

Web Components, açık web standartlarına dayanır, bu da uzun vadeli uyumluluk sağlar ve tedarikçiye bağımlılık riskini azaltır. Tarayıcı üreticileri bu standartlara olan desteklerini geliştirmeye devam ettikçe, Web Components daha da güçlü ve çok yönlü hale gelecektir.

6. Performans

Web Components doğrudan tarayıcı tarafından desteklendiği için, genellikle çatıya özgü bileşen uygulamalarına kıyasla daha iyi performans sunabilirler. Tarayıcı, Web Components'in oluşturulmasını ve yaşam döngüsü yönetimini verimli bir şekilde yöneterek JavaScript çatılarıyla ilişkili ek yükü azaltır.

Temel Teknolojilerin Açıklaması

Şimdi Web Components'i oluşturan temel teknolojilerin her birinin ayrıntılarına inelim:

1. Özel Elemanlar (Custom Elements)

Özel Elemanlar, kendi HTML etiketlerinizi tanımlamanıza ve bunları davranışlarını belirleyen JavaScript sınıflarıyla ilişkilendirmenize olanak tanır. <my-element>, <date-picker> veya <product-card> gibi elemanları özel mantık ve oluşturma ile oluşturabilirsiniz. Özel bir eleman tanımlamak için HTMLElement sınıfını genişletir ve customElements.define() metodu ile kaydedersiniz.

Örnek:


class MyElement extends HTMLElement {
  constructor() {
    super();
    this.innerHTML = '<p>Hello from my custom element!</p>';
  }
}

customElements.define('my-element', MyElement);

Bu kod, "Hello from my custom element!" metnini gösteren <my-element> adında özel bir eleman tanımlar. Daha sonra bu elemanı HTML'nizde şu şekilde kullanabilirsiniz:


<my-element></my-element>

2. Gölge DOM (Shadow DOM)

Shadow DOM, bir bileşenin iç yapısı, stilleri ve davranışı için kapsülleme sağlar. Bileşene eklenen ancak ana belgenin DOM'undan izole edilmiş ayrı bir DOM ağacı oluşturur. Bu, Shadow DOM içindeki CSS stillerinin ve JavaScript kodunun sayfanın geri kalanını etkilemesini ve tam tersini önler. Bunu, ana HTML belgenizin içine yerleştirilmiş bir mini belge olarak düşünebilirsiniz.

Örnek:


class MyShadowElement extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    const p = document.createElement('p');
    p.textContent = 'This is inside the shadow DOM!';
    shadow.appendChild(p);
  }
}

customElements.define('my-shadow-element', MyShadowElement);

Bu örnekte, attachShadow({ mode: 'open' }) metodu bir Shadow DOM oluşturur ve bunu özel elemana ekler. Shadow DOM'a eklenen içerik, ana belgeden izole edilmiştir.

3. HTML Şablonları (HTML Templates)

HTML Şablonları, açıkça klonlanıp DOM'a eklenene kadar oluşturulmayan, yeniden kullanılabilir HTML işaretleme parçaları tanımlamanıza olanak tanır. Şablonlar <template> elemanı kullanılarak tanımlanır. Bu, bileşenlerinizin yapısını hemen oluşturmadan tanımlamak için kullanışlıdır. Şablonlar, ayrıştırılan ancak siz açıkça örneklendirene kadar oluşturulmayan etkisiz DOM alt ağaçlarını tanımlamak için bir mekanizma sunar.

Örnek:


<template id="my-template">
  <p>This is from the template!</p>
</template>


class MyTemplateElement extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    const template = document.getElementById('my-template');
    const templateContent = template.content.cloneNode(true);
    shadow.appendChild(templateContent);
  }
}

customElements.define('my-template-element', MyTemplateElement);

Bu kod şablonu alır, içeriğini klonlar ve özel elemanın Shadow DOM'una ekler.

4. ES Modülleri (ES Modules)

ES Modülleri, JavaScript kodunu modüler bir şekilde düzenlemenin ve dağıtmanın standart yoludur. Web Components'i içe aktarmak ve dışa aktarmak için ES Modüllerini kullanabilirsiniz, bu da onları farklı projeler arasında yönetmeyi ve yeniden kullanmayı kolaylaştırır. ES Modülleri, kodunuzu ayrı dosyalara bölmenize ve gerektiğinde içe aktarmanıza olanak tanır. Bu, kod organizasyonunu, sürdürülebilirliği ve performansı artırır.

Örnek:

my-component.js adında bir dosya oluşturun:


export class MyComponent extends HTMLElement {
  constructor() {
    super();
    this.innerHTML = '<p>Hello from my component module!</p>';
  }
}

customElements.define('my-component', MyComponent);

Ardından, HTML dosyanızda:


<script type="module" src="my-component.js"></script>
<my-component></my-component>

Bu, MyComponent sınıfını my-component.js dosyasından içe aktarır ve onu özel bir eleman olarak kaydeder.

Basit bir Web Component Oluşturma: Küresel Saat Göstergesi

Farklı zaman dilimlerinde işbirliği yapan ekipler için faydalı olacak, belirli bir saat dilimindeki geçerli saati gösteren basit bir Web Component oluşturalım. Buna <global-time> adını vereceğiz.


class GlobalTime extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });
    this.timezone = this.getAttribute('timezone') || 'UTC';
    this.format = this.getAttribute('format') || 'HH:mm:ss';
    this.updateTime();
    setInterval(() => this.updateTime(), 1000);
  }

  static get observedAttributes() { return ['timezone', 'format']; }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'timezone' || name === 'format') {
      this.updateTime();
    }
  }

  updateTime() {
    try {
    const now = new Date();
    const formatter = new Intl.DateTimeFormat('en-US', { timeZone: this.timezone, hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' });
    const formattedTime = formatter.format(now);
    this.shadow.innerHTML = `<span>${formattedTime} (${this.timezone})</span>`;
    } catch (e) {
        this.shadow.innerHTML = `<span style="color: red;">Geçersiz Saat Dilimi: ${this.timezone}</span>`;
    }
  }
}

customElements.define('global-time', GlobalTime);

Açıklama:

Kullanım:


<global-time timezone="America/New_York"></global-time>
<global-time timezone="Europe/London"></global-time>
<global-time timezone="Asia/Tokyo"></global-time>
<global-time timezone="Invalid/Timezone"></global-time> <!-- Geçersiz saat dilimi yönetim örneği -->

Bu, New York, Londra ve Tokyo'daki geçerli saati gösterecektir. "Invalid/Timezone" örneği, hata yönetimini göstermektedir.

Web Component Geliştirme için En İyi Uygulamalar

Web Components'inizin iyi tasarlandığından, sürdürülebilir ve yeniden kullanılabilir olduğundan emin olmak için bu en iyi uygulamaları izleyin:

1. Açık bir Genel API Tanımlayın

Bileşeninizin genel API'sini, tüketicilerin onunla etkileşim kurmak için kullanabileceği öznitelikler, özellikler ve olaylar dahil olmak üzere açıkça tanımlayın. Bu, başkalarının bileşeninizi kullanmasını kolaylaştırır ve iç uygulamasını güncellediğinizde yıkıcı değişiklik riskini azaltır. Bu API'yi kapsamlı bir şekilde belgeleyin.

2. Kapsülleme için Shadow DOM Kullanın

Bileşeninizin iç yapısını, stillerini ve davranışını kapsüllemek için her zaman Shadow DOM kullanın. Bu, sayfanın geri kalanıyla çakışmaları önler ve bileşenin öngörülebilir şekilde davranmasını sağlar. Hata ayıklamayı ve test etmeyi zorlaştırdığı için kesinlikle gerekli olmadıkça "kapalı" (closed) modunu kullanmaktan kaçının.

3. Öznitelikleri ve Özellikleri Dikkatli Yönetin

Bileşenin başlangıç durumunu yapılandırmak için öznitelikleri ve çalışma zamanı durumunu yönetmek için özellikleri kullanın. Bileşeni senkronize tutmak için uygun yerlerde öznitelik değişikliklerini özelliklere ve tam tersini yansıtın. Öznitelik değişikliklerine tepki vermek için observedAttributes ve attributeChangedCallback kullanın.

4. İletişim için Olayları (Events) Kullanın

Bileşenden dış dünyaya değişiklikleri veya eylemleri iletmek için özel olaylar kullanın. Bu, bileşenin uygulamanın diğer bölümleriyle etkileşime girmesi için temiz ve gevşek bağlı bir yol sağlar. dispatchEvent(new CustomEvent('my-event', { detail: data })) kullanarak özel olayları tetikleyin.

5. Birim Testleri Yazın

Bileşeninizin beklendiği gibi davrandığından emin olmak ve gerilemeleri önlemek için birim testleri yazın. Testlerinizi yazmak için Jest veya Mocha gibi bir test çatısı kullanın. Web Components'i test etmek, doğru şekilde oluşturulduklarını, kullanıcı etkileşimlerine yanıt verdiklerini ve olayları beklendiği gibi tetiklediklerini doğrulamayı içerir.

6. Bileşenlerinizi Belgeleyin

Bileşenlerinizi amaçları, API'leri ve kullanım örnekleri dahil olmak üzere kapsamlı bir şekilde belgeleyin. Etkileşimli belgeler oluşturmak için JSDoc veya Storybook gibi bir dokümantasyon oluşturucu kullanın. İyi dokümantasyon, bileşenlerinizi yeniden kullanılabilir ve sürdürülebilir hale getirmek için çok önemlidir.

7. Erişilebilirliği (A11y) Göz Önünde Bulundurun

Web Components'inizin engelli kullanıcılar için erişilebilir olduğundan emin olun. Anlamsal bilgi sağlamak için ARIA özniteliklerini kullanın ve erişilebilirlik en iyi uygulamalarını izleyin. Bileşenlerinizi ekran okuyucular gibi yardımcı teknolojilerle test edin. Küresel erişilebilirlik hususları hayati önem taşır; bileşeninizin farklı dilleri ve giriş yöntemlerini desteklediğinden emin olun.

8. Bir Adlandırma Kuralı Seçin

Bileşenleriniz ve öznitelikleri için tutarlı bir adlandırma kuralı benimseyin. Mevcut HTML elemanlarıyla ad çakışmalarını önlemek için bir önek kullanın (ör. my- veya app-). Eleman adları için kebap-case kullanın (ör. my-date-picker).

9. Mevcut Kütüphanelerden Yararlanın

LitElement veya Stencil gibi Web Components oluşturmak için faydalı araçlar sağlayan mevcut kütüphaneleri kullanmayı düşünün. Bu kütüphaneler geliştirme sürecini basitleştirebilir ve performans optimizasyonları sağlayabilir. Bunlar, standart kod miktarını azaltabilir ve geliştirici deneyimini iyileştirebilir.

Web Components ve Küresel Geliştirme: Uluslararasılaştırma ve Yerelleştirme

Küresel bir kitle için Web Components geliştirirken, uluslararasılaştırmayı (i18n) ve yerelleştirmeyi (l10n) dikkate almak önemlidir. i18n, mühendislik değişikliği gerektirmeden farklı dillere ve bölgelere uyarlanabilen uygulamaları tasarlama ve geliştirme sürecidir. l10n, bir uygulamanın belirli bir dile ve bölgeye uyarlanması sürecidir. Web Components, i18n'e hazır uygulamalar oluşturmada önemli bir rol oynayabilir.

1. Dil Desteği

Tarihleri, sayıları ve para birimlerini kullanıcının yerel ayarlarına göre biçimlendirmek için Intl API'sini kullanın. Dile özgü kaynakları (ör. çeviriler) kullanıcının dil tercihlerine göre dinamik olarak yükleyin. Örneğin, global-time bileşeni, tarih ve saati kullanıcının tercih ettiği biçimde görüntülemek için geliştirilebilir.

2. Metin Yönü

Hem soldan sağa (LTR) hem de sağdan sola (RTL) metin yönlerini destekleyin. Bileşenlerinizin farklı metin yönlerine doğru şekilde uyum sağlaması için CSS mantıksal özelliklerini (ör. margin-left yerine margin-inline-start) kullanın. Bileşenlerinizi Arapça ve İbranice gibi RTL dilleriyle test edin.

3. Tarih ve Sayı Biçimlendirme

Tarihleri ve sayıları kullanıcının yerel ayarlarına göre biçimlendirmek için Intl.DateTimeFormat ve Intl.NumberFormat API'lerini kullanın. Bu, tarihlerin ve sayıların kullanıcının bölgesi için doğru formatta görüntülenmesini sağlar. Örneğin, "1 Ocak 2024" tarihi ABD'de (01/01/2024) ve Avrupa'da (01.01.2024) farklı şekilde biçimlendirilir.

4. Para Birimi Biçimlendirme

Para birimlerini kullanıcının yerel ayarlarına göre biçimlendirmek için Intl.NumberFormat API'sini kullanın. Bu, para birimi sembollerinin ve ondalık ayırıcıların kullanıcının bölgesi için doğru şekilde görüntülenmesini sağlar. Örneğin, "$1,234.56" para birimi tutarı ABD'de ($1,234.56) ve Almanya'da (1.234,56 €) farklı şekilde biçimlendirilir.

5. Çeviri Yönetimi

Çevirilerinizi yönetmek için bir çeviri yönetim sistemi kullanın. Bu, çevirilerinizi zaman içinde güncellemeyi ve bakımını yapmayı kolaylaştırır. i18next ve Lokalise gibi araçlar, çevirileri yönetmeye ve bunları dinamik olarak yüklemeye yardımcı olabilir. Çevrilmiş metnin görüntülenmesini yönetmek için bir Web Component kullanmayı düşünün.

6. Kültürel Hususlar

Bileşenlerinizi tasarlarken kültürel farklılıkların farkında olun. Örneğin, renkler ve resimler farklı kültürlerde farklı anlamlara gelebilir. Bazı kullanıcılar için rahatsız edici olabilecek kültürel olarak hassas içerik kullanmaktan kaçının. Basit bir örnek: bazı kültürlerde kırmızı renk iyi şansı simgelerken, diğerlerinde tehlikeyi temsil eder.

Web Component Kütüphaneleri ve Çatılarına Örnekler

Birçok kütüphane ve çatı, Web Components'i daha verimli bir şekilde oluşturmanıza yardımcı olabilir:

Sonuç

Web Components, web için yeniden kullanılabilir arayüz elemanları oluşturmanın güçlü ve esnek bir yolunu sunar. Tarayıcı tabanlı olmaları, çatı bağımsızlıkları ve kapsülleme yetenekleri, onları modern web geliştirme için değerli bir varlık haline getirir. Temel teknolojileri anlayarak ve en iyi uygulamaları izleyerek, bakımı, yeniden kullanımı ve çeşitli projelere entegrasyonu kolay Web Components oluşturabilirsiniz. Web standartları gelişmeye devam ettikçe, Web Components'in web geliştirmenin geleceğinde giderek daha önemli bir rol oynaması beklenmektedir. Küresel bir kitleye hitap eden sağlam, ölçeklenebilir ve geleceğe dönük web uygulamaları oluşturmak için Web Components'i benimseyin.

Web Components: Küresel Web Geliştirme için Tarayıcı Tabanlı Bileşen Mimarisi | MLOG