Direkt durch Bauen lernen, wie moderne JavaScript-Frameworks funktionieren

Verstehen, wie moderne JavaScript-Frameworks funktionieren

• Das Erstellen eines eigenen JavaScript-Frameworks hilft beim Lernen.
• Mit „modernen JavaScript-Frameworks“ sind Frameworks nach React gemeint.
• Diese Frameworks wurden von React inspiriert, haben sich aber in eine ähnliche Richtung weiterentwickelt.

Merkmale moderner Frameworks

• Einsatz von Reaktivität für DOM-Updates.
• Einsatz von Template-Klonen (cloning templates) für das DOM-Rendering.
• Verwendung moderner Web-APIs wie <template> und Proxy.

Reaktivität

• Es wird oft erwähnt, dass React nicht reaktiv ist.
• Moderne Frameworks priorisieren Leistung mit einem Push-basierten Reaktivitätsmodell.
• Mit Proxy wird sichergestellt, dass das DOM bei jeder Zustandsänderung aktualisiert wird.

DOM-Baum-Klonen

• Die Technik, HTML mit dem <template>-Tag einmal zu parsen und anschließend den gesamten Inhalt schnell zu klonen, ist effizient.
• Diese Methode wird in verschiedenen JavaScript-Frameworks eingesetzt.

Moderne JavaScript-APIs

• <template> und Proxy sind APIs, die beim Aufbau eines Reaktivitätssystems helfen.
• Mit Tagged Template Literals wird eine einfache HTML-Template-API erstellt.

Schritte zum Aufbau von Reaktivität

• Reaktivität, die Zustandsverwaltung und DOM-Updates bei Zustandsänderungen definiert, bildet die Grundlage des Frameworks.
• Mit Proxy werden Zustandsänderungen erkannt, und mit queueMicrotask werden Updates effizient verwaltet.

DOM-Rendering-Schritte

• Mit der html-Funktion wird ein DOM-Baum aufgebaut und effizient aktualisiert.
• HTML-Templates werden mit Tagged Template Literals geschrieben, und mit WeakMap wird das HTML-Parsen optimiert.

Kombination von Reaktivität und DOM-Rendering

• Mit createEffect wird das DOM abhängig vom Zustand aktualisiert.
• Es wird so implementiert, dass Text bei Zustandsänderungen automatisch aktualisiert wird.

Nächste Schritte

• Es gibt verschiedene Möglichkeiten, das DOM-Rendering-System zu verbessern.
• Ziel ist es, Templates nur einmal zu parsen, Bindings nur einmal einzurichten und Updates zu minimieren.

Meinung von GN⁺

Das Wichtigste an diesem Artikel ist, die Kernkonzepte moderner JavaScript-Frameworks und ihre Implementierung zu verstehen und durch die praktische Erfahrung, ein eigenes Framework zu bauen, zu lernen. Dieser Ansatz kann vor allem für Softwareingenieure am Anfang ihrer Laufbahn eine interessante und nützliche Lernerfahrung sein, weil er Einblicke in die interne Funktionsweise von Frameworks bietet und die Möglichkeit gibt, das Gelernte praktisch anzuwenden.

[GN⁺]

Hacker-News-Kommentare

• Für ein grundlegendes Verständnis dieses interessanten Themas werden folgende Materialien empfohlen:

  • Incremental Computing: Wikipedia-Link
  • Self-Adjusting Computation: Paper von Umut A. Acar
  • Einführung in Incremental Computing bei JaneStreet: Blog-Link
  • Web und Incremental Computing: Blog-Link
  • Self-Adjusting DOM: Blog-Link
  • Self-Adjusting DOM und diffbare Daten: Blog-Link
  • Entwurf zu Incremental Computing von Rado Kirov: Teil 1, Teil 2, Teil 3
  • Auf dem Weg zu einer einheitlichen Theorie reaktiver UI: Beitrag von Raph Levien

• Erläuterungen zu Missverständnissen über React und zur tatsächlichen Funktionsweise:

  • Bei einem State-Update rekonstruiert React nicht den gesamten Virtual-DOM-Baum, sondern nur die betreffende Komponente und ihre Kinder.
  • useMemo verhindert kein Re-Rendering; diese Rolle übernimmt React.memo.
  • React ist nicht "push-only", weil Updates gepuffert werden.
  • Ein Vorteil von Signals ist, dass das Framework weiß, welche Eigenschaften des DOM neu gerendert werden müssen, aber das bedeutet nicht automatisch Reaktivität.

• Positive Einschätzung zu Svelte und Anwendungsbeispiele:

  • Der Svelte-Compiler ist sehr erweiterbar und kann Svelte-Templates auf besondere Weise verarbeiten.
  • Geteilte Erfahrung beim Bau von Svekyll, einem Klon des statischen Blog-Tools Jekyll, mit Svelte.

• Verschiedene Perspektiven auf reaktive Frameworks:

  • Einführungsmaterial zu reaktiven Frameworks wie Solid.
  • Geteilte Erfahrung, einen Web-Renderer bzw. ein Framework geschrieben zu haben, um die Reaktivität von solid-js zu verstehen.
  • Empfehlung von Lernmaterial, um React selbst zu implementieren.

• Fragen und Diskussionen zur Reaktivität von React:

  • Frage, wie sich React "reaktiv" machen lässt.
  • Meinung, dass man die Entwicklung weiterer JS-Frameworks lieber zurückfahren sollte.

• Frage an Personen mit viel Erfahrung mit Frontend-Frameworks:

  • Frage nach Frameworks/Bibliotheken, die ein Effect-System für Rendering-Arbeiten unterstützen.