Müasir ön uç tətbiqlərdə virtual DOM-un rolu nədir?

Virtual DOM (VDOM) — istifadəçi interfeysinin virtual təqdimatının yaddaşda saxlandığı və React, Vue və ya Preact kimi kitabxanalar vasitəsilə "həqiqi" DOM ilə sinxronlaşdırıldığı proqramlaşdırma konseptidir.

VDOM-un əsas rolları:

1. Yeniləmələrin optimallaşdırılması. Hər vəziyyət dəyişiklikdə, həqiqi DOM-u birbaşa dəyişdirmək əvəzinə, VDOM yaddaşda yüngül nüsxə yaradır. Vəziyyət dəyişəndə, o, yeni vəziyyəti əvvəlki ilə müqayisə edir, həqiqi DOM-u yeniləmək üçün ən minimal dəyişikliklər toplusunu hesablayır ("diffing" prosesi) və bu dəyişiklikləri partiyalaşdırır ("patching" prosesi). Bu, onunla birbaşa DOM manipulyasiyasından çox daha sürətlidir, çünki onunla əməliyyatlar daha çox xərclidir.
2. Platformalararası uyğunluq. VDOM, render logikasını DOM-un konkret tətbiqindən soyutlayır. Bu, eyni komponentləri və logikanı müxtəlif platformalarda, məsələn, veb (brauzer DOM-u istifadə etməklə), mobil tətbiqlərdə (məsələn, React Native-də yerli UI komponentləri ilə) və ya serverdə (server tərəfli render üçün) istifadə etməyə imkan verir.
3. İnkişafın sadələşdirilməsi. VDOM ilə işləyərkən, inkişafçı DOM ilə bağlı mürəkkəb və potensial yavaş əməliyyatlarla birbaşa məşğul olmadan, UI-nin istənilən vəziyyətini deklarativ sintaksis (məsələn, JSX) ilə təsvir edir və VDOM kitabxanası, həqiqi DOM-un səmərəli yenilənməsini təmin edir.

VDOM istifadə edilən yeniləmə prosesi adətən belə olur:

1. Tətbiq vəziyyəti dəyişir.
2. UI-nin yeni vəziyyətini təmsil edən yeni VDOM obyekti yaradılır.
3. Mövcud VDOM obyekti (UI-nin hazırkı vəziyyətini təmsil edir) yeni VDOM ilə müqayisə edilir (diffing).
4. Köhnə VDOM-ni yeni vəziyyətə çevirmək üçün lazım olan dəyişikliklərin siyahısı (patch obyekti) hesablanır.
5. Bu dəyişikliklər həqiqi DOM-a tətbiq edilir (patching).

Nümunə (konseptual pseudo-kod):

// VDOM ağacının nümunəsi
const oldVDOM = {
  type: 'div',
  props: {},
  children: [
    { type: 'p', props: {}, children: ['Salam'] }
  ]
};

// Yeni vəziyyət
const newVDOM = {
  type: 'div',
  props: {},
  children: [
    { type: 'p', props: {}, children: ['Salam, dünya!'] }
  ]
};

// Diffing (köhnə və yeni VDOM-un müqayisəsi və dəyişikliklərin tapılması)
const changes = diff(oldVDOM, newVDOM);
// changes, aşağıdakı kimi görünə bilər:
// [{ type: 'TEXT_UPDATE', target: 'p', value: 'Salam, dünya!' }]

// Patching (dəyişikliklərin həqiqi DOM-a tətbiqi)
patch(realDOMElement, changes);

Üstünlüklərinə baxmayaraq, VDOM hər zaman panacea deyil və çox sadə tətbiqlər üçün kiçik əlavə yük ola bilər. Ancaq, müasir və interaktiv ön yüz tətbiqlərinin əksəriyyəti üçün, o, əhəmiyyətli performans artımı və inkişafçı üçün rahatlıq təmin edir.