M

MLOG

Türkçe

Çeşitli web uygulamalarında yeniden kullanılabilir ve kapsüllenmiş UI bileşenleri oluşturmak için Özel Elemanlara odaklanarak Web Bileşenlerinin gücünü keşfedin.

Web Bileşenleri: Özel Elemanlara Derinlemesine Bir Bakış

Web Bileşenleri, yeniden kullanılabilir ve kapsüllenmiş UI bileşenleri oluşturmak için standartlaştırılmış bir yol sunarak web geliştirmede önemli bir ilerlemeyi temsil eder. Web Bileşenlerini oluşturan temel teknolojiler arasında, Özel Elemanlar (Custom Elements), özel davranış ve görünüme sahip yeni HTML etiketleri tanımlamanın temel taşı olarak öne çıkar. Bu kapsamlı rehber, modern web uygulamaları oluşturmak için Özel Elemanların inceliklerini, faydalarını, uygulanmasını ve en iyi uygulamalarını derinlemesine ele almaktadır.

Web Bileşenleri Nedir?

Web Bileşenleri, geliştiricilerin yeniden kullanılabilir, kapsüllenmiş ve birlikte çalışabilir HTML elemanları oluşturmasına olanak tanıyan bir dizi web standardıdır. Web geliştirmeye modüler bir yaklaşım sunarak, farklı projeler ve framework'ler arasında kolayca paylaşılabilecek ve yeniden kullanılabilecek özel UI bileşenlerinin oluşturulmasını sağlarlar. Web Bileşenlerinin arkasındaki temel teknolojiler şunları içerir:

Özel Elemanları Anlamak

Özel Elemanlar, Web Bileşenlerinin kalbinde yer alır ve geliştiricilerin HTML sözlüğünü kendi elemanlarıyla genişletmelerine olanak tanır. Bu özel elemanlar standart HTML elemanları gibi davranır, ancak belirli uygulama ihtiyaçlarına göre uyarlanabilirler, bu da daha fazla esneklik ve kod organizasyonu sağlar.

Özel Elemanları Tanımlama

Bir özel eleman tanımlamak için customElements.define() yöntemini kullanmanız gerekir. Bu yöntem iki argüman alır:

  1. Eleman adı: Özel elemanın adını temsil eden bir dize. Ad, standart HTML elemanlarıyla çakışmaları önlemek için bir tire (-) içermelidir. Örneğin, my-element geçerli bir addır, ancak myelement değildir.
  2. Eleman sınıfı: HTMLElement'ı genişleten ve özel elemanın davranışını tanımlayan bir JavaScript sınıfı.

İşte temel bir örnek:

class MyElement extends HTMLElement {
  constructor() {
    super();
    this.innerHTML = 'Merhaba, Dünya!';
  }
}

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

Bu örnekte, my-element adında bir özel eleman tanımlıyoruz. MyElement sınıfı, HTMLElement'ı genişletir ve yapıcısında (constructor) elemanın innerHTML'ini "Merhaba, Dünya!" olarak ayarlar.

Özel Eleman Yaşam Döngüsü Geri Çağrıları (Lifecycle Callbacks)

Özel elemanların, elemanın yaşam döngüsünün farklı aşamalarında kod yürütmenize olanak tanıyan birkaç yaşam döngüsü geri çağrısı vardır. Bu geri çağrılar, elemanı başlatma, nitelik değişikliklerine yanıt verme ve eleman DOM'dan kaldırıldığında kaynakları temizleme fırsatları sunar.

İşte yaşam döngüsü geri çağrılarının kullanımını gösteren bir örnek:

class MyElement extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({mode: 'open'});
  }

  connectedCallback() {
    this.shadow.innerHTML = `
DOM'a bağlandı!
`;
    console.log('Eleman bağlandı');
  }

  disconnectedCallback() {
    console.log('Elemanın bağlantısı kesildi');
  }

  static get observedAttributes() { return ['data-message']; }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'data-message') {
      this.shadow.innerHTML = `
${newValue}
`;
    }
  }
}

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

Bu örnekte, connectedCallback() konsola bir mesaj yazar ve eleman DOM'a bağlandığında elemanın innerHTML'ini ayarlar. disconnectedCallback(), elemanın bağlantısı kesildiğinde bir mesaj yazar. attributeChangedCallback(), data-message niteliği değiştiğinde çağrılır ve elemanın içeriğini buna göre günceller. observedAttributes alıcısı, data-message niteliğindeki değişiklikleri gözlemlemek istediğimizi belirtir.

Kapsülleme için Gölge DOM (Shadow DOM) Kullanımı

Gölge DOM, web bileşenleri için kapsülleme sağlar ve bir bileşen için sayfanın geri kalanından izole edilmiş ayrı bir DOM ağacı oluşturmanıza olanak tanır. Bu, Gölge DOM içinde tanımlanan stillerin ve betiklerin sayfanın geri kalanını etkilemeyeceği ve tam tersinin de geçerli olduğu anlamına gelir. Bu kapsülleme, çakışmaları önlemeye yardımcı olur ve bileşenlerinizin öngörülebilir şekilde davranmasını sağlar.

Gölge DOM'u kullanmak için eleman üzerinde attachShadow() yöntemini çağırabilirsiniz. Bu yöntem, Gölge DOM'un modunu belirten bir seçenek nesnesi alır. mode, 'open' veya 'closed' olabilir. Mod 'open' ise, Gölge DOM'a JavaScript'ten elemanın shadowRoot özelliği kullanılarak erişilebilir. Mod 'closed' ise, Gölge DOM'a JavaScript'ten erişilemez.

İşte Gölge DOM kullanımını gösteren bir örnek:

class MyElement extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });
    this.shadow.innerHTML = `
      
      
Burası Gölge DOM'un içinde.

    `;
  }
}

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

Bu örnekte, elemana mode: 'open' ile bir Gölge DOM ekliyoruz. Daha sonra Gölge DOM'un innerHTML'ini, paragrafların rengini maviye ayarlayan bir stil ve biraz metin içeren bir paragraf elemanı içerecek şekilde ayarlıyoruz. Gölge DOM içinde tanımlanan stil yalnızca Gölge DOM içindeki elemanlara uygulanacak ve Gölge DOM dışındaki paragrafları etkilemeyecektir.

Özel Eleman Kullanmanın Faydaları

Özel Elemanlar web geliştirme için çeşitli faydalar sunar:

Özel Elemanların Pratik Örnekleri

Yaygın UI bileşenlerini oluşturmak için Özel Elemanların nasıl kullanılabileceğine dair bazı pratik örnekleri inceleyelim.

Basit Bir Sayaç Bileşeni

Bu örnek, Özel Elemanlar kullanarak basit bir sayaç bileşeninin nasıl oluşturulacağını gösterir.

class Counter extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });
    this._count = 0;
    this.render();
  }

  connectedCallback() {
    this.shadow.querySelector('.increment').addEventListener('click', () => {
      this.increment();
    });
    this.shadow.querySelector('.decrement').addEventListener('click', () => {
      this.decrement();
    });
  }

  increment() {
    this._count++;
    this.render();
  }

  decrement() {
    this._count--;
    this.render();
  }

  render() {
    this.shadow.innerHTML = `
      
      

        
        ${this._count}
        
      

    `;
  }
}

customElements.define('my-counter', Counter);

Bu kod, HTMLElement'ı genişleten bir Counter sınıfı tanımlar. Yapıcı, bileşeni başlatır, bir Gölge DOM ekler ve başlangıç sayımını 0 olarak ayarlar. connectedCallback() yöntemi, artırma ve azaltma düğmelerine olay dinleyicileri ekler. increment() ve decrement() yöntemleri sayımı günceller ve bileşenin görünümünü güncellemek için render() yöntemini çağırır. render() yöntemi, Gölge DOM'un innerHTML'ini sayaç ekranını ve düğmeleri içerecek şekilde ayarlar.

Bir Resim Karuseli Bileşeni

Bu örnek, Özel Elemanlar kullanarak bir resim karuseli bileşeninin nasıl oluşturulacağını gösterir. Kısalık olması açısından, resim kaynakları yer tutucudur ve bir API'den, CMS'den veya yerel depolamadan dinamik olarak yüklenebilir. Stil de en aza indirilmiştir.

class ImageCarousel extends HTMLElement {
 constructor() {
  super();
  this.shadow = this.attachShadow({ mode: 'open' });
  this._images = [
  'https://via.placeholder.com/350x150',
  'https://via.placeholder.com/350x150/0077bb',
  'https://via.placeholder.com/350x150/00bb77',
  ];
  this._currentIndex = 0;
  this.render();
 }

 connectedCallback() {
  this.shadow.querySelector('.prev').addEventListener('click', () => {
  this.prevImage();
  });
  this.shadow.querySelector('.next').addEventListener('click', () => {
  this.nextImage();
  });
 }

 nextImage() {
  this._currentIndex = (this._currentIndex + 1) % this._images.length;
  this.render();
 }

 prevImage() {
  this._currentIndex = (this._currentIndex - 1 + this._images.length) % this._images.length;
  this.render();
 }

 render() {
  this.shadow.innerHTML = `
  
  

  Karusel Resmi
  

  
  
  

  

  `;
 }
}

customElements.define('image-carousel', ImageCarousel);

Bu kod, HTMLElement'ı genişleten bir ImageCarousel sınıfı tanımlar. Yapıcı, bileşeni başlatır, bir Gölge DOM ekler ve başlangıç resim dizisini ve mevcut indeksi ayarlar. connectedCallback() yöntemi, önceki ve sonraki düğmelerine olay dinleyicileri ekler. nextImage() ve prevImage() yöntemleri mevcut indeksi günceller ve bileşenin görünümünü güncellemek için render() yöntemini çağırır. render() yöntemi, Gölge DOM'un innerHTML'ini mevcut resmi ve düğmeleri içerecek şekilde ayarlar.

Özel Elemanlarla Çalışmak için En İyi Uygulamalar

Özel Elemanlarla çalışırken izlenmesi gereken bazı en iyi uygulamalar şunlardır:

Özel Elemanlar ve Framework'ler

Özel Elemanlar, diğer web teknolojileri ve framework'lerle birlikte çalışabilir olacak şekilde tasarlanmıştır. React, Angular ve Vue.js gibi popüler framework'lerle birlikte kullanılabilirler.

React'te Özel Eleman Kullanımı

React'te Özel Elemanları kullanmak için, onları diğer herhangi bir HTML elemanı gibi render edebilirsiniz. Ancak, altta yatan DOM elemanına erişmek ve onunla doğrudan etkileşim kurmak için bir ref kullanmanız gerekebilir.

import React, { useRef, useEffect } from 'react';

function MyComponent() {
  const myElementRef = useRef(null);

  useEffect(() => {
    if (myElementRef.current) {
      // Özel elemanın API'sine erişim
      myElementRef.current.addEventListener('custom-event', (event) => {
        console.log('Özel olay alındı:', event.detail);
      });
    }
  }, []);

  return ;
}

export default MyComponent;

Bu örnekte, my-element özel elemanına erişmek ve ona bir olay dinleyicisi eklemek için bir ref kullanıyoruz. Bu, özel eleman tarafından gönderilen özel olayları dinlememize ve buna göre yanıt vermemize olanak tanır.

Angular'da Özel Eleman Kullanımı

Angular'da Özel Elemanları kullanmak için, Angular'ı özel elemanı tanıyacak şekilde yapılandırmanız gerekir. Bu, modülün yapılandırmasındaki schemas dizisine özel elemanı ekleyerek yapılabilir.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

Özel eleman kaydedildikten sonra, onu Angular şablonlarınızda diğer herhangi bir HTML elemanı gibi kullanabilirsiniz.

Vue.js'de Özel Eleman Kullanımı

Vue.js de Özel Elemanları yerel olarak destekler. Onları şablonlarınızda herhangi bir özel yapılandırma olmadan doğrudan kullanabilirsiniz.

Vue, özel elemanı otomatik olarak tanıyacak ve doğru şekilde render edecektir.

Erişilebilirlik Hususları

Özel Elemanlar oluştururken, bileşenlerinizin engelli kişiler de dahil olmak üzere herkes tarafından kullanılabilir olmasını sağlamak için erişilebilirliği göz önünde bulundurmak çok önemlidir. İşte bazı önemli erişilebilirlik hususları:

Uluslararasılaştırma ve Yerelleştirme

Küresel bir kitle için Özel Elemanlar geliştirirken, uluslararasılaştırma (i18n) ve yerelleştirmeyi (l10n) dikkate almak önemlidir. İşte bazı önemli hususlar:

Sonuç

Özel Elemanlar, yeniden kullanılabilir ve kapsüllenmiş UI bileşenleri oluşturmak için güçlü bir araçtır. Yeniden kullanılabilirlik, kapsülleme, birlikte çalışabilirlik, sürdürülebilirlik ve performans dahil olmak üzere web geliştirme için çeşitli avantajlar sunarlar. Bu kılavuzda belirtilen en iyi uygulamaları izleyerek, sağlam, sürdürülebilir ve küresel bir kitle tarafından erişilebilir modern web uygulamaları oluşturmak için Özel Elemanlardan yararlanabilirsiniz. Web standartları gelişmeye devam ettikçe, Özel Elemanlar da dahil olmak üzere Web Bileşenleri, modüler ve ölçeklenebilir web uygulamaları oluşturmak için giderek daha önemli hale gelecektir.

Web'in geleceğini, her seferinde bir bileşenle inşa etmek için Özel Elemanların gücünü benimseyin. Bileşenlerinizin herkes tarafından, her yerde kullanılabilir olmasını sağlamak için erişilebilirlik, uluslararasılaştırma ve yerelleştirmeyi dikkate almayı unutmayın.