Kokia yra virtualaus DOM vaidmuo šiuolaikinėse…

Virtualus DOM (VDOM) yra programavimo koncepcija, kurioje virtualus vartotojo sąsajos vaizdas saugomas atmintyje ir sinchronizuojamas su "tikru" DOM naudojant bibliotekas, tokias kaip React, Vue ar Preact.

Pagrindinės VDOM funkcijos:

Optimizuoti atnaujinimus. Vietoj tiesioginio tikro DOM keitimo kiekvieną kartą, kai keičiasi būsenos, VDOM sukuria jo lengvą kopiją atmintyje. Kai būsenos keičiasi, jis palygina naują būseną su ankstesne, apskaičiuoja minimalų pakeitimų rinkinį, reikalingą tikram DOM atnaujinimui (vadinamą "diffing"), ir taiko šiuos pakeitimus paketais (vadinamą "patching"). Tai žymiai greičiau nei manipuliuoti tikru DOM, nes operacijos su juo yra brangesnės.
Krosplatformiškumas. VDOM abstrakčiai apibrėžia renderinimo logiką nuo konkrečios DOM įgyvendinimo. Tai leidžia naudoti tas pačias komponentes ir logiką skirtingose platformose, tokiose kaip internetas (naudojant naršyklės DOM), mobiliosios programėlės (naudojant nativias UI komponentes, pavyzdžiui, React Native) arba serveris (serverio renderavimui).
Supaprastinti kūrimą. Dirbant su VDOM, kūrėjui nereikia tiesiogiai rūpintis sudėtingomis ir galbūt lėtomis DOM operacijomis. Jis aprašo pageidaujamą UI būseną naudodamas deklaratyvią sintaksę (pavyzdžiui, JSX), o VDOM biblioteka rūpinasi efektyviu tikro DOM atnaujinimu.

Atnaujinimo procesas naudojant VDOM dažniausiai atrodo taip:

Programos būsenos keičiasi.
Sukuriamas naujas VDOM objektas, atitinkantis naują UI būseną.
Esamas VDOM objektas (atstovaujantis dabartinę UI būseną) palyginamas su nauju VDOM objektu (diffing).
Apskaičiuojamas pakeitimų sąrašas (patch objektas), reikalingas seną VDOM paversti nauju.
Šie pakeitimai taikomi tikram DOM (patching).

Pavyzdys (konceptualus pseudokodas):

// VDOM medžio pavyzdys
const oldVDOM = {
  type: 'div',
  props: {},
  children: [
    { type: 'p', props: {}, children: ['Labas'] }
  ]
};

// Nauja būseną
const newVDOM = {
  type: 'div',
  props: {},
  children: [
    { type: 'p', props: {}, children: ['Labas, pasauli!'] }
  ]
};

// Diffing (sulyginimas seno ir naujo VDOM, ieškant pakeitimų)
const changes = diff(oldVDOM, newVDOM);
// changes gali atrodyti kaip instrukcijų sąrašas:
// [{ type: 'TEXT_UPDATE', target: 'p', value: 'Labas, pasauli!' }]

// Patching (pakeitimų taikymas tikram DOM)
patch(realDOMElement, changes);

Nepaisant pranašumų, VDOM ne visada yra panacėja ir gali turėti nedidelį pertekliaus kiekį labai paprastoms programėlėms. Tačiau daugumai šiuolaikinių interaktyvių front-end programėlių jis suteikia reikšmingą našumą ir patogumą kūrėjams.

Kokia yra virtualaus DOM vaidmuo šiuolaikinėse frontend programose?