JS - VDOM vol. 1 - CODELINE

Piszemy dalej skrypty, które później połączymy we własną bibliotekę React. VDOM, czyli wirtualny DOM, który może być renderowany. Piszemy pierwsze prototypy naszych funkcji.

Wyrenderujmy sobie coś z obiektu JS:

function createFromVDOM_v1(vDom){


    let element = document.createElement(vDom["type"]);

    element.textContent = vDom?.["textContent"] || "";


    for(const [key, value] of Object.entries(vDom)){

        if(key === "type" || key === "textContent")
            continue;

        element.setAttribute(key, value);
    }

    return element;

}

let vDom1 = {
    type: "li",
    textContent: "JavaScript",
    class: "text-primary d-flex"
}

console.log(createFromVDOM_v1(vDom1));
//<li class="text-primary d-flex">

Jeżeli dokładnie przerobiliśmy poprzednie lekcje to ten kod nie ma dla nas tajemnic. Ok, teraz potrzebujemy obsługi tworzenia textNodes:

function createFromVDOM_v2(vDom){

    if(vDom["type"] === "text"){

        let text = vDom?.["textContent"] || "";
        let textNode = document.createTextNode(text);
        return textNode;
    }

    let element = document.createElement(vDom["type"]);

    element.textContent = vDom?.["textContent"] || "";


    for(const [key, value] of Object.entries(vDom)){

        if(key === "type" || key === "textContent")
            continue;

        element.setAttribute(key, value);
    }

    return element;

}

let vDom2 = {
    type: "text",
    textContent: "JavaScript"
}
console.log(createFromVDOM_v2(vDom2));
//#text "JavaScript"

Na razie zrobiliśmy bardzo proste renderowanie pojedynczych elementów z VDOM, czyli naszych obiektów, które mają reprezentować realne elementy DOM.

Co jeszcze potrzebujemy? Pomyślmy:

tworzenie wirtualnego drzewa DOM (vDOM zagnieżdżony i wytwarzany, dzisiaj tylko z VDOMu wytwarzaliśmy DOM, jego element w zasadzie)
mounting elementów utworzonych z VDOM do drzewa DOM
diffing, czyli rozeznanie się czy dwa obiekty vDOM się czymś różnią i jeżeli tak update odpowiadającego im elementu DOM

To z grubsza tyle, jeżeli chodzi o pierwsze kroki, jakie będziemy musieli podjąć, aby własnego Reacta napisać.

A piszemy go po to, aby go zrozumieć i w efekcie końcowym umieć go używać. To jedyna słuszna kolejność nauki czegokolwiek porządnie. Ja też 30 minut temu nie wiedziałem czym jest diffing, wiedziałem tylko jak zrobić counter i bloki WordPress w React.

Jakkolwiek boleśnie i brutalnie by to nie brzmiało, to jest jedyny sposób nauczyć się coś porządnie. Wszystko inne jest albo nauką pod deadline, z punktualnością kosztem zrozumienia, albo lenistwem i niedbalstwem, dla którego nie ma wytłumaczenia. Nie w czasach sztucznej inteligencji.

I ogólnie to tylko taka moja dygresja, ale podejście na sprawy programowania mam jak następuje:

Nie chcesz być programistą? A spróbowałeś pisać hello worldy w Pythonie? Zobacz jakie to proste!
Chcesz być programistą-hobbystą? Okej, zero presji (a może w końcu cię przekonam, że to twoja pasja i życie, he he he…)
Chcesz być programistą i mieć życie prywatne, nie wiedzieć jak działa twój kod albo framework, którego używasz? Nie tędy droga, kolego…

JS – VDOM vol. 1