Die Rails Renaissance

Die Leistungsfähigkeit von Rails mit Turbo und Stimulus.

Mit der bevorstehenden Veröffentlichung von Rails 8 und der aufregenden neuen Version der Turbo-Bibliothek von Hotwire hat die Begeisterung für Rails zugenommen. Hotwire, was für “HTML Over The Wire” steht, umfasst die Bibliotheken Turbo, Stimulus und Strada. Rails hat Turbo und Stimulus in das Framework integriert und bietet damit eine Fülle von modernen Hochgeschwindigkeitsfunktionen. Lassen Sie uns erkunden, wie diese neuen Ergänzungen, kombiniert mit einigen klassischen Funktionen, Rails zur perfekten Wahl für Ihr nächstes Projekt machen können, um Zeit zu sparen und Ihre Produktivität zu steigern.

[

Turbo 8

](https://hashrocket.com/blog/posts/the-rails-renaissance#turbo-8)

Turbo gibt es jetzt schon eine Weile, aber mit Turbo 8 war das Laden von responsiven Seiten noch nie so einfach. Ohne JavaScript zu schreiben, können Ihre Ansichten mit minimaler Konfiguration schnell DOM-Inhalte ersetzen.

Mit Turbo 8 und Rails können Sie Ihre Ansichten so einrichten, dass sie sich für Änderungsereignisse anmelden, die von ihren entsprechenden Modellen veröffentlicht werden. Auf diese Weise kann der neue Inhalt schnell und mit präzisen Unterschieden ausgetauscht werden.

Bei älteren Versionen von Turbo war bei der Konfiguration von Schaltflächen, Links oder Frames mehr Spezifität erforderlich, um festzulegen, welche Ansichtselemente aktualisiert werden müssen, wenn sich ihre abhängigen Daten geändert haben. Turbo 8 führt einige Änderungen ein, die dies für Sie erledigen können.

Wenn Sie diese einfache Zeile in Ihr Modell aufnehmen, können die von Turbo konfigurierten Ansichten automatisch über ActionCable-Pubsub-Nachrichten aktualisiert werden.

<span class="c1"># in the model</span>
<span class="k">class</span> <span class="nc">Blog</span> <span class="o">&lt;</span> <span class="no">ApplicationRecord</span>
    <span class="n">broadcasts_refreshes</span>
<span class="k">end</span>

# in der view
<span class="cp">&lt;%=</span> <span class="n">turbo_stream_from</span> <span class="vi">@blog</span> <span class="cp">%&gt;</span>

Wenn nun ein Blogeintrag erstellt, aktualisiert oder gelöscht wird, wird die Ansicht entsprechend aktualisiert und der erforderliche Inhalt automatisch neu geladen, ohne dass der Benutzer den Inhalt aktualisieren muss 🤯. Turbo “diffundiert” den Inhalt geschickt und tauscht nur den Zustand aus, der sich geändert hat.

Um die Reaktionsfähigkeit dieser Aktualisierungen zu verbessern, haben wir auch die Möglichkeit, die Bildlaufposition des Benutzers auf der Seite beizubehalten, ohne Javascript zu schreiben.

<span class="nt">&lt;head&gt;</span>
<span class="cp">&lt;%=</span> <span class="n">turbo_refreshes_with</span> <span class="ss">method: :morph</span><span class="p">,</span> <span class="ss">scroll: :preserve</span>  <span class="cp">%&gt;</span>
<span class="nt">&lt;/head&gt;</span>

Außerdem macht es Turbo einfach, Elemente mit data-turbo-permanent zu kennzeichnen, wenn Sie möchten, dass das Element vom Morph “diffing” ignoriert wird.

[

Streams

](https://hashrocket.com/blog/posts/the-rails-renaissance#streams)

Turbo Streams gibt es schon seit einiger Zeit. Sie bieten eine vorzeigbare Lösung für die Erstellung von unendlichen Scrolls, dynamischen Seiten und Live-Websocket-Verbindungen in Ihrer App. Mit nur ein paar Einstellungen in Ihrem Controller, Model und Views können Sie einen reaktionsfähigen Live-Chatroom in Rails erstellen, ohne JavaScript schreiben zu müssen.

Um diese Funktionen zu demonstrieren, habe ich eine einfache Rails-Chatroom-App erstellt, mit der sich mehrere Clients mit demselben Chatroom verbinden und Nachrichten in Echtzeit senden und empfangen können. Sehen Sie sich das rails live chat repo an und testen Sie es selbst. Sie werden sehen, wie einfach es ist, den Ball mit reaktionsfähigen Funktionen durch Turbo Streams ins Rollen zu bringen.

Wenn Sie sich den Code ansehen, werden Sie feststellen, dass die Arbeit mit Turbo Streams und WebSockets einige interessante Probleme mit sich bringen kann, über die man in Rails normalerweise nicht nachdenken muss. Nehmen wir zum Beispiel das Teilformular für die Nachrichtenübermittlung:

<span class="cp">&lt;%=</span> <span class="n">form_with</span><span class="p">(</span><span class="ss">model: </span><span class="p">[</span><span class="vi">@room</span><span class="p">,</span> <span class="vi">@message</span><span class="p">],</span> <span class="ss">data: </span><span class="p">{</span> <span class="ss">turbo_stream: </span><span class="kp">true</span> <span class="p">})</span> <span class="k">do</span> <span class="o">|</span><span class="n">form</span><span class="o">|</span> <span class="cp">%&gt;</span>
  <span class="cp">&lt;%=</span> <span class="n">render</span> <span class="s2">"messages/textarea"</span> <span class="cp">%&gt;</span>
  <span class="cp">&lt;%=</span> <span class="n">form</span><span class="p">.</span><span class="nf">submit</span> <span class="s2">"Send"</span><span class="p">,</span> <span class="ss">class: </span><span class="s2">"w-full rounded-lg bg-slate-500 text-white"</span><span class="cp">%&gt;</span>
<span class="cp">&lt;%</span> <span class="k">end</span> <span class="cp">%&gt;</span>

Beachten Sie in Zeile 2, dass ich einen weiteren Teilbereich innerhalb des Formulars speziell für den Inhalt Textbereich gerendert. Hier ist, was in diesem “textarea” teilweise ist:

<span class="nt">&lt;textarea</span> <span class="na">name=</span><span class="s">"message[content]"</span> <span class="na">id=</span><span class="s">"message_content"</span> <span class="na">class=</span><span class="s">"mb-2"</span> <span class="na">placeholder=</span><span class="s">"your message..."</span><span class="nt">&gt;&lt;/textarea&gt;</span>

Warum sollte ich das tun? Nun, der Grund ist, dass, wenn wir ein Formular mit einer Turbo Stream-Antwort abschicken, die Textarea-Eingabe nicht gelöscht wird, weil wir nicht mehr in unserem Controller umleiten und das DOM neu laden, wie Sie es normalerweise mit Rails tun würden. Um dieses Problem zu umgehen, wird in der Turbo-Stream-Antwort, die vom messages_controller bei der Übermittlung des Formulars gesendet wird, speziell die Textarea-Eingabe ersetzt und zurückgesetzt.

# This is the view for views/messages/create.turbo_stream.erb
<span class="cp">&lt;%=</span> <span class="n">turbo_stream</span><span class="p">.</span><span class="nf">replace</span> <span class="s2">"message_content"</span> <span class="k">do</span> <span class="cp">%&gt;</span>
  <span class="cp">&lt;%=</span> <span class="n">render</span> <span class="s2">"messages/textarea"</span> <span class="cp">%&gt;</span>
<span class="cp">&lt;%</span> <span class="k">end</span> <span class="cp">%&gt;</span>

Wenn dieses Formular mehr Felder hätte, könnten Sie es natürlich auch einfach anvisieren und auf dieselbe Weise austauschen. Dies ist nur ein Beispiel für einige der Dinge, die bei der Verwendung von Turbo Streams berücksichtigt werden müssen. [

Stimulus

](https://hashrocket.com/blog/posts/the-rails-renaissance#stimulus)

Für die zusätzlichen Feinheiten Ihres Front-End-Verhaltens, die Turbo nicht behandelt, enthält Rails jetzt die Stimulus JS-Bibliothek, mit der Sie kleine Funktionalitäten in Ihre Ansichten einstreuen können; dieses Design ermutigt dazu, kompartimentiertes JS zu schreiben, um zu verhindern, dass Ihr Code von Rails weg läuft.

Die Verwendung von Stimulus ist so einfach wie das Erstellen eines Controllers und das Einbinden Ihrer Ansicht in diesen. Hier ist ein solides Beispiel von der [Stimulus-Website] (https://stimulus.hotwired.dev/)

Zunächst etwas HTML:

<span class="nt">&lt;div</span> <span class="na">data-controller=</span><span class="s">"hello"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;input</span> <span class="na">data-hello-target=</span><span class="s">"name"</span> <span class="na">type=</span><span class="s">"text"</span><span class="nt">&gt;</span>

  <span class="nt">&lt;button</span> <span class="na">data-action=</span><span class="s">"click-&gt;hello#greet"</span><span class="nt">&gt;</span>
    Greet
  <span class="nt">&lt;/button&gt;</span>

  <span class="nt">&lt;span</span> <span class="na">data-hello-target=</span><span class="s">"output"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/div&gt;</span>

Und dann ein einfacher Controller:

<span class="c1">// hello_controller.js</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">Controller</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">stimulus</span><span class="dl">"</span>

<span class="k">export</span> <span class="k">default</span> <span class="kd">class</span> <span class="nc">extends</span> <span class="nx">Controller</span> <span class="p">{</span>
  <span class="kd">static</span> <span class="nx">targets</span> <span class="o">=</span> <span class="p">[</span> <span class="dl">"</span><span class="s2">name</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">output</span><span class="dl">"</span> <span class="p">]</span>

  <span class="nf">greet</span><span class="p">()</span> <span class="p">{</span>
    <span class="k">this</span><span class="p">.</span><span class="nx">outputTarget</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span>
      <span class="s2">`Hello, </span><span class="p">${</span><span class="k">this</span><span class="p">.</span><span class="nx">nameTarget</span><span class="p">.</span><span class="nx">value</span><span class="p">}</span><span class="s2">!`</span>
  <span class="p">}</span>
<span class="p">}</span>

Der Controller liest die Zielwerte aus dem HTML aus. Beachten Sie, wie die Schaltfläche dem Controller mitteilt, welches DOM-Ereignis die Begrüßungsfunktion des Controllers auslösen soll. Im Attribut “data-action” ist click das DOM-Ereignis, hello ist der Name des Controllers, mit dem eine Verbindung hergestellt werden soll, und greet ist die Funktion, die am Controller aufgerufen werden soll.

Mit dieser einfachen Einrichtung gibt es eine Menge praktischer Anwendungsfälle, darunter:

• Benutzerdefiniertes Eingabeverhalten (Scrollen, Klicks, Tastaturereignisse)
• Formularübermittlung und Validierungsverhalten
• Dynamisches Such-Feedback
• Verwaltung von DOM-Element-Zuständen

Stimulus soll all diese Funktionen bieten, ohne Ihr gesamtes Frontend zu beherrschen. Stattdessen können Sie diese kleinen Controller implementieren, um bei Bedarf ein wenig Interaktivität hinzuzufügen.

[

Konvention + Responsivnes

](https://hashrocket.com/blog/posts/the-rails-renaissance#convention-responsiveness)

Während einige Entwickler im Laufe der Jahre von der Verwendung von Rails-Frontends zugunsten anderer Frameworks wie Vue.js oder React abgewichen sind, ist Rails immer noch der König, wenn es darum geht, Konventionen gegenüber der Konfiguration zu priorisieren. Ruby on Rails spart mit seinen standardisierten Entwurfsmustern wertvolle Entwicklungszeit. Jetzt, mit Turbo 8, können viele der Reaktionsfähigkeitsfunktionen, nach denen Entwickler anderswo gesucht haben, schnell und einfach in Rails gefunden und implementiert werden.

Es ist auch relativ einfach, bestehende Rails-Anwendungen, die Turbo nicht verwenden, zu überarbeiten und mit Turbo zu modernisieren.

Warum Rails?

• Konventionell priorisiertes Design
• Wartbare Architektur
• Responsive Front-End-Funktionen
• Elegante Ruby-Syntax

[

Hier & Jetzt

](https://hashrocket.com/blog/posts/the-rails-renaissance#here-amp-now)

Rails fühlt sich so modern an wie eh und je. Ich ermutige jeden, ein einfaches Rails-Projekt aufzusetzen und einige dieser Dinge auszuprobieren.