Virtual DOM to bardzo popularne rozwiązanie znane z Reacta. Co to dokładnie jest? W jaki sposób działa w Reactcie? O tym opowie Kamil w swoim kolejnym wpisie traktującym o Web Components.
Po co nam Virtual DOM?
W ciągu ostatnich lat obszar stosowania JavaScriptu na stronach internetowych rósł – od używania go do podstawowych operacji jak np. proste przełączanie widoczności elementów aż po tworzenie całej zawartości strony w JS. Nowoczesne aplikacje napisane np. w Reactcie posiadają już całość kodu HTML zdefiniowanego przy użyciu JS-a. A dokładnie JSX, który następnie jest renderowany na stronie w postaci HTML.
Nawiązując do wcześniejszych wpisów, w których opowiadałem o Web Components, ważne jest zwrócenie uwagi na to, że jeśli w naszej aplikacji zachodzą zmiany, to musimy wprowadzić je również w drzewie DOM naszej strony. Jest to dość czasochłonne, ponieważ przeglądarka musi od nowa przeliczyć i przerysować elementy. Oczywiście, w prostej aplikacji nie zauważymy problemu, natomiast im więcej elementów na stronie mamy, tym problem staje się bardziej widoczny.
Rozwiązaniem jest Virtual DOM, które nie jest konkretną technologią ani biblioteką. Jest konceptem opisującym w jaki sposób możemy zoptymalizować działanie naszej strony.
Kiedy słyszysz o Virtual DOM, jednym z Twoich pierwszych skojarzeń jest pewnie React.js, który faktycznie bardzo upowszechnił ten termin, tworząc jego własną implementację. To pozwoliło na bardzo szybkie działanie aplikacji stworzonych właśnie z użyciem Reacta.
Zasada działania na przykładzie React
Sam pomysł działania tego mechanizmu jest bardzo prosty. Cała reprezentacja naszego drzewa DOM posiada własną kopię w obiekcie JavaScript. W momencie kiedy w naszej aplikacji zachodzą zmiany, np. wywołane przy pomocy funkcji setState, React aktualizuje Virtual DOM zapisane w obiekcie JS.
Operacje wykonywane na obiekcie JS są bardzo szybkie i jest to miejsce, w którym zyskujemy sporo na wydajności.
A jak to działa? Po wykonaniu wszystkich aktualizacji, React porównuje stare drzewo Virtual DOM z nowym, wydzielając różnicę pomiędzy nimi. Następnie silnik Reacta na podstawie tych różnic, szuka najbardziej optymalnej drogi do aktualizacji prawdziwego drzewa DOM w przeglądarce. Dzięki temu zamiast kilku odwołań i zmian do prawdziwego drzewa, mamy tylko jedno.
Warto zauważyć, że drzewo DOM przeglądarki jak i Virtual DOM są reprezentowane przez drzewo. To pozwala zastosować algorytmy operacji na drzewach, pozwalających na optymalizację procesów wyszukiwania i modyfikacji.
Gdzie jeszcze używamy Virtual DOM?
Virtual DOM jest używany także w Vue.js, a na pewno przykładów frameworków JavaScriptowych korzystających z tego rozwiązania znalazłoby się więcej. Zaletą Virtual DOM jest to, że możemy użyć go w prostej aplikacji stworzonej przy pomocy czystego JS. Możemy pokusić się o samodzielną implementację tego konceptu lub znaleźć gotowe rozwiązanie.
Przy pomocy omówionej wyżej techniki możemy zoptymalizować wprowadzanie zmian w HTML-u. Mimo, że sami raczej nie będziemy musieli przejmować się implementacją Virtual DOM, a po prostu skorzystamy np. z Reacta, warto wiedzieć jak to działa pod maską.
