Photo by Pallavi Arunika on Unsplash

DOM API

Lit Kütüphanesi ile DOM API yönetimi

Web Component’ ları her ne kadar React, Vue, Angular gibi JS Framework lerinden dolayı biraz arkada kalsada Lit benzeri kütüphaneler bu yapıların geliştirilmesini sağlayan kütüphaneler.

React günümüzde geldiği nokta bir Web Uygulaması geliştirebilmek, bir Mobil uygulama geliştirebilmek, bir VR uygulaması geliştirebilmek için MetaFramework dönüşmüş durumda, benzer durumlar Vue vb.. UI kütüphaneleri içinde geçerli.

Bunun yanında Tarayıcı(Browser) yeteneklerinde ve HTML standarlarında bir takım gelişmeler oluyor, bunlardan bir tanesi’de Web Component’ları.

Web Components aslında React, Vue gibi yapılarda UI bileşen olarak kullanabildiğiniz isim verdiğiniz yapıları html içerisinde verebilmenizi sağlayan yapı.

Örneğin React içerisindeki JSX içerisinde <div>, <span> …. gibi HTML elemanları kullanabilirken bir yandan da <Popup/> <User/> vb.. kendi tanımladığınız bileşenleri de kullanabiliyorsunuz

Web Component’ ları da bunun gibi düşünebilirsiniz. Html içerisindeki hazır bir takım etiketler (tagler) gibi örneğin <header>, <footer>, <section> benzeri kendi bileşeninizi oluşturmak istiyorsunuz. <popup> <user> bunun için bir takım HTML standartlarının sağladığı araçları kullanmanız gerekiyor

• Custom Elements: Kendinize ait span, div gibi HTML element oluşturabilme imkanı sunar. <myComponent>
• HTML Templates: <template> ve<slot> elemanları ekrana o anda çizilmeyen template markup oluşturmanızı ve bunları custom elements oluştururken tekrar tekrar kullanabilme imkanı sunar.
• Shadow DOM: DOM elemanlarından içerisinde kapsül halinde gizli bir DOM Tree yapısını Styling ile birlikte enjekte edebilmenizi sağlar. Bu yöntemi yukarıdaki yapılar ile birlikte kullanarak Web Component yapısı oluşturulabilir hale gelir.

Not: Yukarıdaki kavramları ve Web Components konusunu daha detaylı anlamak için daha önceden yazmış olduğum Shadow DOM Nedir? blog yazısını okumanızı öneririm.

Şimdi gelelim

• DOM
• Virtual DOM
• Shadow DOM

gibi kavramlar oluşturduk. Bunların farkını biraz önce bahsettiğim blog yazısında bulabilirsiniz. Burada her bir kütüphanenin veya Framework’ ün bileşenler üzerinde çalışırken uyguladığı method farklı

Tabi en sonunda hepsi DOM üzerinden gösteriliyor ama Virtual DOM ve Shadow DOM yardımcı rollerde rendering sırasında bir çok işlemi sizin için daha performanslı ve basit şekilde yapmanıza olanak sağlıyor.

• DOM : jQuery, Backbone, Ember, Angular, Knockout, Svelte, Solid,
• Virtual DOM : React, Vue
• Shadow DOM: Lit, Stencil

React ve Vue gibi yapılarda Webpack, Rollup ve Vite bundler sonrası bileşenler arka planda <div> üzerinden işletilen yapılara dönüştürülür. Halbuki Shadow DOM içerisinde <popup… > bileşeni native olarak tanımlanır ve tarayıcı dünyasında yaşamaya devam eder. Bu açıdan Web Components lar aslında React,Vue, Angular göre daha Native bir çözümdür.

Ama biz geliştiriciler bize sunulan araçlar sayesinde bu farkı çok fazla anlamadan yapabildiğimiz için ikisi arasındaki fark çok farklı gibi gelmez. Zaten Lit ile yazılmış bir bilenin yapısını inceyecek olursak

import { html, css, LitElement } from 'lit';

class MyComponent extends LitElement {
  static styles = css`
    .highlight {
      background-color: yellow;
    }
  `;

  handleClick() {
    const paragraph = this.shadowRoot.querySelector('p');
    paragraph.classList.toggle('highlight');
  }

  render() {
    return html`
      <p @click="${this.handleClick}">Click me!</p>
    `;
  }
}

Bu yapının aynı React ClassComponent benzer bir yapıda olduğunu görebilirsiniz. Farklar ;

• React → extends React.Component iken burada extends LitElement
• React JSX Elementleri kullanırken burada html template yapısı üzerine DOM elemanları koyulur.
• Shadow DOM üzerindeki Tree üzerinden Query yapabilmeyi sağlayan selectorler bulunur bunun üzerinden uygulamanız geliştirebilirsiniz.
• Component LifeCycle açısından benzerlikler içerir: Lit: connectedCallback, disconnectedCallback, firstUpdated, etc., which are equivalent to React componentDidMount, componentWillUnmount, componentDidUpdate, etc.

Tüm bunları incelediğimizde aslında Web Components React’ın çok benzer bileşen oluşturma özelliklerini taşıdığını ama asıl amacının uygulama bileşenleri değil Web Sayfası bileşenleri oluşturma yapısına odaklandığını görebilirsiniz.

Aşağıda örnek bir Form Submit edilme kodunu incelediğinizde React bileşen yapısına çok benzer özellikler taşıdığını görebilirsiniz.

import { html, css, LitElement } from 'lit';

class MyForm extends LitElement {
  static styles = css`
    form {
      display: flex;
      flex-direction: column;
    }

    input, button {
      margin-bottom: 8px;
    }
  `;

  handleSubmit(event) {
    event.preventDefault();
    const formData = new FormData(event.target);
    const formDataObject = Object.fromEntries(formData.entries());

    // Do something with the form data
    console.log(formDataObject);

    // Clear the form fields
    event.target.reset();
  }

  render() {
    return html`
      <form @submit="${this.handleSubmit}">
        <input type="text" name="name" placeholder="Name" required>
        <input type="email" name="email" placeholder="Email" required>
        <button type="submit">Submit</button>
      </form>
    `;
  }
}

customElements.define('my-form', MyForm);

Aynı şekilde bir Collection listesinin ekrana çizdirilmesi de React’a çok benzer bir yapıdadır.

import { html, css, LitElement } from 'lit';

class MyList extends LitElement {
  static styles = css`
    li {
      margin-bottom: 8px;
    }
  `;

  static properties = {
    items: { type: Array },
  };

  renderListItem(item) {
    return html`<li>${item}</li>`;
  }

  render() {
    return html`
      <ul>
        ${this.items.map((item) => this.renderListItem(item))}
      </ul>
    `;
  }
}

customElements.define('my-list', MyList);

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.