[axaha]

Dlaczego Virtual DOM jest lepszym rozwiązaniem niż bezpośrednia manipulacja DOM'em? Czy ktoś może mi podać przykład gdzie VDOM jest bardziej wydajnościowy od normalnie napisanego np. jQuery?

#javascript #react #jquery #programowanie

[brakloginuf]

normalnie napisanego np. jQuery?

@axaha: nie no, nie, po co Ci to jquery jak dzis prawie wszystko co ta biblioteka oferuje masz w implementacji es

[axaha]

@brakloginuf: Nie o to pytałem, nie używam tej biblioteki nawet. Podałem bo jQuery wykonuje manipulacje bezpośrednio na DOM'ie, gdy np. React tworzy własne drzewo VDOM.

[RARvolt]

@axaha: ponieważ podczas manipulacji VDOM przeglądarka nie renderuje każdej zmiany.
Modyfikacja 1k elementów w VDOM będzie szybsza niż w DOM, ponieważ przeglądarka renderuje jedną zmianę a nie 1k. (jeżeli dobrze rozumiem jak to działa)

[brakloginuf]

Dlaczego Virtual DOM jest lepszym rozwiązaniem niż bezpośrednia manipulacja DOM'em?

@axaha: bo pozwala na szybsza manipulacje bez wplywu na widok, do czasu az potrzeba

[axaha]

Modyfikacja 1k elementów w VDOM będzie szybsza niż w DOM, ponieważ przeglądarka renderuje jedną zmianę a nie 1k. (jeżeli dobrze rozumiem jak to działa)

@RARvolt: To jest dobry przykład, dzięki. A czym mogłby być np. jakiś niepotrzebny/zbędny render, który by się dział podczas takiej manipulacji w zwykłym DOM'ie?

[danek_szy]

@axaha: Przede wszystkim VDOM oferuje deklaratywność (chcę by było tak, ogarnij faktycznie konieczne zmiany)... Wydajność jest tutaj niejako "efektem ubocznym", bo po prostu w praktyce ciężko pisać aplikacje które wydajnie zmienią tylko to co rzeczywiście trzeba zmienić.
Pomyśl o liście użytkowników (tabela) i o zmianie pojedynczego pola w długiej liście (wspomniane 1k elementów).
Da się imperatywnie (js/jquery) zmienić tylko jeden element, ale w rzeczywistości programista pewnie napisze kod

[mirasKo-Kalwario]

@axaha: zmiana elementu w DOM wykonuje rerender wszystkich jego dzieci, na przykład dodanie klasy do div'a renderuje wszystko co w nim jest od nowa, używając virtual dom po pierwsze masz sprawdzenie czy coś się zmieniło przez twoją zmiane przez to nie robisz zbędnych przerysowań strony. Dodatkowo w virtual dom masz atrybut key który pozwala nie renderować wszystkiego jeśli key się nie zmienił.

tak jak @danek_szy albo @RARvolt piszą

[danek_szy]

@mirasKo-Kalwario: Koncepcyjnie, na wysokim poziomie to co napisałeś w 1. akapicie się zgadza, ale chciałbym rozjaśnić...
Render przeglądarki (rysowanie) to co innego niż render VDOM, np. Reacta (aplikowanie zmian z V do DOM).

Dodatkowo w virtual dom masz atrybut key który pozwala nie renderować wszystkiego jeśli key się nie zmienił.

Tu już mylisz koncepty key i memoizacji. ;) Key służy do unikalnego zidentyfikowania powtarzających się elementów (np. wiersza w tabeli, elementu listy etc.), a nie ich "zapamiętywania".
Key mówi, że wiersz 1. to Grzegorz Brzęczyszczykiewicz, a wiersz

[mirasKo-Kalwario]

@danek_szy: dokladnie to napisałem, key służy do identyfikacji komponentu tak żeby nie rerenderować go jeśli nie był dotykany

[LaylaTichy]

@axaha: https://svelte.dev/blog/virtual-dom-is-pure-overhead

[t.....k]

@danek_szy nie no, deklaratywność oferuje biblioteka (patrz np. Svelte gdzie nie ma vdom, albo React gdzie jest) vdom to jedynie struktura danych i już na niej można wykonywać zarówno imperatywne jak i deklaratywne operacje, nie ma to związku z renderem bo jest to kwestią implementacyjną: np można zrobić tak aby render vdom działał #!$%@? przez zastosowanie templatkowania albo niemal tak dobrze jak natywny przez np robienie go w wasm i poprawne

[danek_szy]

@tlaziuk: Tak i nie. VDOM oferuje deklaratywność z której korzysta np. taki React. Nie oznacza to, że nie da się osiągnąć deklaratywności w inny sposób.

można zrobić tak aby render vdom działał #!$%@? przez zastosowanie templatkowania

Wszystko można, tylko po co? VDOM powstał właśnie po to, żeby templatkowania nie używać. ( ͡° ͜ʖ ͡°)

[axaha]

@tlaziuk: @danek_szy: a czy mówiąc o deklaratywności nie chodzi wam o JSX?

[danek_szy]

@axaha: Dla uproszczenia - tak. Oczywiście React bez JSX (czyli same wywołania funkcji React.createElement etc.) też jest deklaratywny.

Ściągawka w skrócie:
Deklaratywnie - z góry określone co, nie wchodzące w szczegóły procedury wykonania (np. React - wyrenderuj mi ten widok, sam zdecyduj co jest do zrobienia)
Imperatywnie - jak - czyli określona procedura krok po kroku (np. js/jquery - znajdź ten node, zmień jego klasę na active, zmień

[t.....k]

@axaha @danek_szy

jeszcze łopatologiczniej:

deklaratywnie: zrób mi

[danek_szy]

deklaratywnie: zrób mi kanapkę

Chcę kanapkę z pomidorem. ( ͡° ͜ʖ ͡°)

deklaratywnych kroków

@tlaziuk: Sęk w tym, że nie deklarujesz kroków.
Lepszy

[orkin2913]

@axaha: bez VDOMa również jesteś w stanie osiągnąć oczekiwany rezultat, prawdopodobnie nawet z jeszcze większą wydajnością, bo odchodzi Ci mnóstwo warstw abstrakcji. Jednak przewagą VDOMa nad podejściem natywnym jest to, że masz już gotowe narzędzie, które pozwala Ci skupić się na efekcie końcowym a nie nad tym „jak to dobrze rozegrać”. Po prostu czasami nie ma sensu wymyślać koła na nowo

[t.....k]

Nie.

@danek_szy jak najbardziej tak, po prostu redukujemy abstrakcję, myślenia, gdyby nie hamować powstałych konstruktów skończylibyśmy na przesuwaniu bitów albo jeszcze niżej ( ͡° ͜ʖ ͡°)