Apr 26, 2021
DOM API USAGE SERIES
Shadow DOM Nedir?
Önce DOM’u duyduk sonra Virtual DOM’u, Peki Shadow DOM Nedir ? Neyi Sağlar ?
DOM ve Shadow DOM, W3C ‘nin internet ve web için koymuş olduğu standartlardandır.
Virtual DOM ise React ,Vue gibi UI Kütüphanelerinin tarayıcıya DOM API üzerinden erişimi azaltacak, geliştiricinin kodun hangi kısımlarında değişiklik olduğu ile ilgilenmeden kod yazmasını sağlayacak altyapıyı hazırlar.
Bunu da Virtual DOM ile gerçek DOM arasındaki farklılıklara göre optimize güncellemeyi otomatik yapmayı sağlayan farklı nodeları bulmasını sağlayan Diffing Algoritiması sayesinde gerçekleştirir. Virtual DOM , gerçek DOM bellekteki bir kopyası olarak düşünebilirsiniz. (Virtual DOM nasıl çalıştığı konusunda React ile DOM Kullanımı yazımı okuyabilirsiniz.)
DOM denilen (Document Object Model), HTML yapısını oluşturan elemanların ağaç yapısında tarayıcı tarafında tutulmasıdır. Zaten biz Frontend Geliştiricilerinin en çok üzerinde uğraştığı konularda bu DOM API üzerinden JS ile güncellemeler yaparak Web uygulamaları geliştirmektir. Bu konuda daha detaylı bilgi için (Modern Frontend Framework, DOM kullanım Yöntemleri yazımı okuyabilirsiniz.)
DOM ve Shadow DOM’un W3C ‘nin koyduğu standartlar olduğunu söylemiştik.
- W3C (World Wide Web Consortium) yani Web’in her türlü cihaz ve ortamda çalışabilmesini sağlamak için Standartları belirleyen konsorsiyum.
- DOM : W3C DOM 4.1 Standardı
- Shadow DOM Standardı
Shadow DOM
Shadow DOM anlamak için önce Web Components kavramını biraz anlamak gerekiyor. Son dönemde Frontend Sektörüne hakim olan View kütüphaneleri (React, Vue, Svelte, Angular) ve ekosistemleri. En çok üzerinde durdukları konu ise Bileşen Yapısı (Component) yapısıdır. Bu bileşen yapısında söz sahibi olan, en güçlü bileşen yapısına sahip olan sektörede hakim olacaktır. Tüm bunlar Enterprise Web Uygulamaları geliştirmek için tekrar kullanabilirlik, sağlayacak güçlü bileşenleri geliştirme altyapısı kurma çabasıdır. Bildiğiniz gibi günümüzde en küçüğünden en büyüğüne Web Uygulamaları Bileşen Odaklı UI(Kullanıcı Arayüzü) Geliştirme yöntemleri ile geliştirilmekte.
Tüm bu kütüphanelerin yaklaşımları ve ekosistem hakimiyetlerine karşın Javascript, WebAPI native bir takım özellikler çıkararak bu yapıların belli gruplar içerisinde tekel olmasını engelleyerek genele yayılmasını sağlar.
Örneğin Asenkron işlemler için Async kütüphanesi yerine Promise ve Async/Await, Generator yapısının EcmaScript içerisine tanımlanması
Sunucu ile iletişimde Request, Axios vb.. kütüphaneler yerine Fetch API’nin gelmesi.
Bileşen yapısının tanımlanmasında JSX, CSS in JS kütüphaneler yerine yerine Template Literals yapılar
html`<p>Hello, ${this.name}!</p>`
css`p { color: blue }`;React gibi dillerde bileşenlerin diğer bileşenleri tuttuğu yapıları oluşturabilecek React.Component veya bir fonksiyonun JSX dönmesi ile ReactDOM (Virtual DOM) üzerinden kurguladığı bileşen yapısını
- 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.
Aşağıdaki Örnek MDN sitesinden alınmıştır.
Shadow DOM için MDN <popup-info …. ile yapılan bir bileşenini oluşturmamız gerekiyor. Bunun için bir kaç Shadow DOM fonksiyonundan bahsetmek lazım.
Öncelikle ShadowHost dediğimiz Node attachShadow yaparak ShadowRoot elemanlarını oluşturuyoruz.
let shadow = elementRef.attachShadow({mode: 'open'});
let shadow = elementRef.attachShadow({mode: 'closed'});open ile Shadow Host üzerinden oluşturulan Shadow Root daha sonrasında let myShadowDom = myCustomElem.shadowRoot; ile erişebilirsiniz.
Daha sonra bunu Custom Element olarak tanımlamamız gerekiyor.
HTML içerisinde popup-info bileşeni kullanalım.
Bileşeni ekranda görüntülediğinizde Popup bileşenin düzgün bir şekilde çalıştığını görebilirsiniz.
Daha sonra bu elemanın içeriğine baktığımda shadow-root (open) kısmını görebilirsiniz. Bunu detayı görebilmek için Show User Agent Shadow DOM şeçeneğini “Settings” sayfasından aktif hale getirin.
Not: Yukarıda her ne kadar Web Uygulaması geliştirme aşamasında bileşen yapısının çok çok önemli olduğunu söylesemde, tek başına bu yapı yeterli olmamaktadır. Yani React ile kıyaslarsam
- Ekosistemin büyüklüğü ve yan kütüphanelerin gelişmiş olması (React Router, Redux, Middleware vb…)
- React’ın sadece ClientSide rendering değil hem Server Side, hem Client Side hemde Hybrid yapıları destekler altyapısı ve bunun üzerine inşaa edilmiş Next benzeri hazır Framework’lerin olması
- React’ın Cross Platform yapılar için Renderer sağlaması React-Native ve Electron vb…
- Bileşen yapılarında Virtual DOM üzerinden Diffing Algoritmasının geliştiricileri iyi bir soyutlama sağlayarak olaylara bileşen bakışı açısı ile bakabilme imkanı sunması ve ekranın stabil güncellenmesini otomatik olarak gerçekleştirmesi.
Bu arada bu yazı tamda Lit 2.0 kütüphanesinin çıkısı zamanında çıktı 😃 Google bu konuda daha önceden LitElement , lit-html, Polymer ve WebComponent bileşen kütüphane çalışmaları olmuştu. Bakalım Lit2.0 ile ekosistemde bekledikleri ilgiliyi yakalayabilecekler mi ?
Referanslar
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.
