Stimulus: Ein neues JavaScript-Framework für bestehendes HTML

HTML strahlen lassen: Stimulus.js erweitert bestehendes HTML
Keine Kommentare

Stimulus ist ein neues JavaScript-Framework vom Team von Basecamp, das verspricht, deutlich weniger komplex zu sein als die meisten anderen Frontend-Lösungen. Dieses Ziel erreicht Stimulus, indem es keinen eigenen HTML-Code rendert, sondern bestehendes HTML um JavaScript-Funktionen erweitert.

David Heinemeier Hansson, Gründer und CTO von Basecamp, betont in seiner Vorstellung von Stimulus vor allem zwei Aspekte: Das Framework erzeuge lesbaren Code und beruhe auf einem grundlegend anderen Paradigma als die meisten JavaScript-Frameworks. Dadurch verringere sich die Komplexität deutlich im Vergleich zu anderen Frontend-Lösungen.

Stimulus: bestehenden HTML-Code manipulieren

Der zentrale Unterschied liegt dabei vor allem im Umgang mit HTML-Code. Stimulus arbeitet mit bestehendem HTML-Code, der regulär serverseitig gerendert, aber durch das JavaScript-Framework manipuliert wird. Stimulus wandelt JSON-Files nicht in DOM-Elemente um und erzeugt somit grundsätzlich kein eigenes DOM. Stattdessen geht es darum, dem vorhandenen HTML moderne Interaktionsarten per JavaScript hinzuzufügen. Dabei sind verschiedene Ansätze möglich: CSS-Klassen können hinzugefügt werden, Elemente gruppiert oder ihr Inhalt im HTML bearbeitet werden. Die drei Grundkonzepte, mit denen Stimulus arbeitet, sind Controllers, Actions und Targets.

Diese Grundkonzepte werden in das bestehende HTML „eingestreut“, so drückt es die Website zum Tool aus. Stimulus soll dabei helfen, HTML-Code mit interaktiven Funktionen zu versehen, ohne dabei die Lesbarkeit negativ zu beeinflussen. David Heinemeier Hansson gibt folgendes Beispiel für mit Stimulus erweiterten HTML-Code:

<div data-controller="clipboard">
  PIN: <input data-target="clipboard.source" type="text" value="1234" readonly>
  <button data-action="clipboard#copy">Copy to Clipboard</button>
</div>

Ein weiterer Unterschied liegt darin, wie States gemanagt werden. Während die meisten Frameworks States innerhalb von JavaScript-Objekten vorhalten, aus denen dann das HTML erzeugt wird, wird der State durch Stimulus im HTML verwaltet, wie David Heinemeier Hansson erklärt:

State is stored in the HTML, so that controllers can be discarded between page changes, but still reinitialize as they were when the cached HTML appears again.

Stimulus kann gemeinsam mit anderen Frameworks verwendet werden und sei vor allem auf einfache Anwendungsteile mit wenig Komplexität ausgelegt. Die kürzlich erschienene Version 1.0 des JavaScript-Frameworks steht unter MIT-Lizenz auf GitHub zum Download bereit. Auf der Website des Projekts können ein Handbuch und ein Setup-Guide für das Framework gefunden werden.

Unsere Redaktion empfiehlt:

Relevante Beiträge

X
- Gib Deinen Standort ein -
- or -