Was der Browser macht und was der Server macht

Deine Schnittstelle liefert zwölf Bytes JSON. Irgendwo zwischen diesen Bytes und der Person, die das Handy hält, gibt es einen Bildschirm mit Text, Buttons und Farben. Frontend heißt der letzte Abschnitt dieser Reise, und er läuft auf einem Gerät, das dir nicht gehört.

Die beiden Rollen kennst du schon aus den Architektur-Lektionen. Der Server hält die Daten, entscheidet, wer sie lesen darf, und antwortet mit JSON. Der Browser fragt und zeichnet dann. In dieser Lektion geht es um das Wort dann: was im Browser wirklich passiert, nachdem die Antwort angekommen ist, und warum dieser Teil eigene Ideen verdient.

Der Browser hält die Seite als Baum von Elementen, den DOM. Jeder Tag wird ein Knoten, und Verschachtelung wird zu einer Verbindung von Eltern und Kind. Wenn du Bäume aus Logik kennst, ist das dieselbe Idee: eine Wurzel, Zweige und Blätter, die den Text tragen. Wenn du einen Tag schreibst, beschreibst du eine Form dieses Baums.

document
  html
    head
      title
    body
      h1
      ul
        li
        li
        liDie Seite als Baum: eine Wurzel, Zweige und Text an den Blättern.

Der älteste Weg, die Seite zu aktualisieren, ist, selbst durch diesen Baum zu laufen. Finde den Knoten, erzeuge ein neues Element, hänge es ein, setze einen Text. Das funktioniert, und für eine Seite mit einem einzigen interaktiven Detail ist es immer noch die richtige Antwort.

const list = document.querySelector("#cart-items");

const row = document.createElement("li");
row.textContent = "Tea";
list.appendChild(row);

document.querySelector("#total").textContent = "12.90";Von Hand geschriebene Aktualisierungen: Element erzeugen, einhängen, Text setzen, Summe merken.

Ein Framework stellt die Frage anders. Statt Anweisungen für den Browser schreibst du eine Beschreibung davon, wie der Bildschirm für deine Daten aussehen soll. Hier ist derselbe Warenkorb, beschrieben statt befohlen.

const cart = ["Bread", "Tea", "Apples"];

function Cart({ items }) {
  return (
    <ul>
      {items.map((item) => (
        <li>{item}</li>
      ))}
    </ul>
  );
}

const view = <Cart items={cart} />;

Sei ehrlich bei diesem Tausch. Ein Framework bedeutet mehr Code, einen Build-Schritt, noch etwas zum Lernen und echte Kosten bei der Größe dessen, was du aufs Handy schickst. Dafür bekommst du eine Regel, die gilt, wenn die Seite wächst: Der Bildschirm wird aus den Daten beschrieben, einmal, an einer Stelle. Jede Diskussion über Frameworks ist am Ende eine Diskussion darüber, ob sich dieser Tausch für dieses Projekt lohnt.