Levelbrook Consulting · Rails & Hotwire

Hotwire, interaktiv erklärt

Drei kleine, laufende Beispiele für die Bausteine, mit denen man in Rails 8 reaktive Oberflächen baut — ganz ohne SPA-Framework: Turbo Drive, Turbo Frames und Turbo Streams. Kein Build-Tool, kein React. Nur HTML, das sich klug aktualisiert.

gebaut von Patrick Donahue · demo.levelbrook.com · github.com/tachyurgy

01Turbo Frame — partielles Nachladen

Ein Klick tauscht nur den Inhalt eines Frames aus — der Rest der Seite bleibt unberührt. Genau so lädt Rails ein Teil-Template per turbo_frame_tag nach.

/projekte/42
↳ nur der Frame unten wird ersetzt
Noch nichts geladen. Klick eine Schaltfläche.
<!-- nur dieser Ausschnitt wird ersetzt -->
<turbo-frame id="frame1">
  <a href="/projekte/42/details">Details laden</a>
</turbo-frame>

02Turbo Stream — gezielte DOM-Operationen

Der Server schickt kleine Stream-Anweisungen: append, prepend, remove. So wächst eine Liste live — über Action Cable sogar in allen offenen Browsern gleichzeitig.

turbo-stream action="append"
<turbo-stream action="append" target="list2">
  <template><div class="item">… neuer Eintrag …</div></template>
</turbo-stream>

03Stimulus — ein bisschen Verhalten

Für das, was rein im Browser passiert, reicht ein winziger Stimulus-Controller — deklarativ über data-action verdrahtet, kein selbstgebautes Event-Chaos.

data-controller="counter"
0
Klicks
export default class extends Controller {
  static targets = ["count"]
  bump(e) { this.countTarget.textContent = ++this.n }
}