Weaving the Web

Schwerpunkt im Medieninformatik Master

SolidJS Einführung

Bearbeiten
Coach
Marcel Grund
Termin
Dienstag, 14. Juli 2026, 13:00 Uhr
Dauer
~120 Minuten
Raum
3.215

Workshop-Beschreibung: Einstieg in SolidJS – Moderne Frontend-Entwicklung ohne Virtual DOM

In diesem Workshop lernen die Teilnehmenden die Grundlagen von SolidJS kennen und entwickeln Schritt für Schritt eine Demo eines interaktiven Fußball-LiveTicker. Dabei werden die zentralen Konzepte des Frameworks praxisnah vermittelt und direkt anhand eines kleinen Projekts umgesetzt.

Neben dem Aufbau eigener Komponenten stehen insbesondere das reaktive Programmiermodell von SolidJS sowie dessen Unterschiede zu React im Mittelpunkt. Dabei wird erläutert, dass SolidJS auf Fine-Grained Reactivity setzt und dadurch ohne Virtual DOM auskommt. Anhand von Live-Demonstrationen und Vergleichen mit React wird nachvollziehbar, wie SolidJS Änderungen gezielt im DOM aktualisiert und welche Auswirkungen dieser Ansatz auf Performance, Lesbarkeit und die Entwicklererfahrung haben kann.

Zielsetzung und Inhalte

  • Einführung in SolidJS: Grundlagen des Frameworks, seine Architektur sowie zentrale Konzepte.
  • Vergleich mit anderen Webframeworks: Einordnung von SolidJS im Vergleich zu React sowie ausgewählten weiteren Frontend-Frameworks.
  • Komponenten: Erstellung eigener Komponenten, Arbeiten mit Props sowie Verwaltung von Zuständen.
  • Fine-Grained Reactivity: Verständnis des Reaktivitätsmodells von SolidJS sowie der Unterschiede zwischen createSignal und Reacts useState.
  • Abgeleitete Werte: Berechnung reaktiver Zustände mit createMemo und deren Einsatz in Komponenten.
  • Kontrollstrukturen & Rendering: Dynamisches Rendern von Listen mit <For>, bedingtes Rendering mit <Show> sowie Einblicke in Solids optimiertes Rendering ohne Virtual DOM.
  • Asynchrone Daten: Laden von Daten mit createResource.

Zielgruppe

Dieser Workshop richtet sich an Frontend-Entwicklerinnen und Frontend-Entwickler, die SolidJS kennenlernen oder ihre Kenntnisse im Bereich moderner, performanter UI-Frameworks erweitern möchten. Der Schwerpunkt liegt darauf, das Reaktivitätsmodell von SolidJS zu verstehen und den Unterschied zu React anhand eines praxisnahen Projekts nachzuvollziehen.

Vorkenntnisse

  • Grundlegende Kenntnisse in HTML, CSS und JavaScript
  • Erste Erfahrungen mit TypeScript sind von Vorteil
  • Grundverständnis von React ist hilfreich, aber keine Voraussetzung

Technische Voraussetzungen

Um einen reibungslosen Einstieg in die praktischen Übungen zu gewährleisten, sollten folgende Komponenten im Vorfeld installiert bzw. vorbereitet werden:

  • Node.js
  • NPM (wird mit Node.js ausgeliefert)
  • IDE (z. B. Visual Studio Code)

Material & Dokumentation

Während des Workshops wird ein Repository mit Aufgaben, Code-Snippets und der Auflösung der einzelnen Etappen bereitgestellt.