Reader TTS

DOM API USAGE SERIES Ö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 * Shadow DOM * Using Custom Element * Web Component OKUMAYA DEVAM ET 😃 Bu yazının devamı veya yazı grubundaki diğer

yazılara erişmek için BU LINKE tıklayabilirsiniz.