StimulusReflex - ein schneller Weg zur Erstellung reaktiver Anwendungen

Es ist ein neuer Weg, eine reaktive Benutzeroberfläche in Ruby on Rails.
StimulusReflex erweitert die Möglichkeiten von Rails und Stimulus, indem es Benutzerinteraktionen erfasst und diese über Echtzeit-Websockets an Rails weiterleitet. Seiten werden schnell neu gerendert und alle Aktualisierungen werden über CableReady an den Client gesendet.

CableReady ermöglicht die Erstellung von Echtzeit-Updates durch Auslösen von clientseitigen DOM-Änderungen, Ereignissen und Benachrichtigungen über ActionCable. Im Gegensatz zu Ajax werden Operationen nicht immer vom Benutzer oder vom Browser initiiert, sondern können beispielsweise auch von Workern initiiert werden.

StimulusReflex wurde ursprünglich von LiveView von Phoenix inspiriert (eine Alternative zu SPA). Das Ziel von StimulusReflex war es immer, die Entwicklung moderner Anwendungen mit Rails zur produktivsten und angenehmsten Option zu machen. Und meiner Meinung nach ist ihnen genau das hier gelungen.

Warum sollten wir StimulusReflex verwenden?

Es ist einfach, sich auf die Entwicklung einer Produkt anstatt konsequente Änderungen an modernen JavaScript. Auch, StimulusReflex Anwendungen sind einfach, prägnant und klar Code und nahtlos integrieren mit Ruby on Rails. This allows small RoR teams to do big things even without great knowledge of React, Vue or their modern JavaScript solutions.

Wie funktioniert StimulusReflex?

Reflex

Reflex ist eine transaktionale Aktualisierung der Benutzeroberfläche, die über eine dauerhaft offene Verbindung zum Server erfolgt. StimulusReflex ordnet Anfragen zu Reflex Klasse. Reflex Klassen sind in der app/reflexe Verzeichnis.

 Klasse PostReflex < AnwendungsReflex
 end


Wenn wir die Klasse Reflex mit einem Generator erstellen, können wir sehen, dass unsere Klasse diesen Kommentar enthält:

# Alle Reflex-Instanzen enthalten CableReady::Broadcaster und weisen die folgenden Eigenschaften auf:
  #
  # - connection - die ActionCable-Verbindung,
  # - Kanal - der ActionCable-Kanal,
  # - request - ein ActionDispatch::Request-Proxy für die Socket-Verbindung,
  # - session - der ActionDispatch::Session Speicher für den aktuellen Besucher,
  # - flash - der ActionDispatch::Flash::FlashHash für die aktuelle Anfrage,
  # - url - die URL der Seite, die den Reflex ausgelöst hat,
  # - params - Parameter aus dem nächstgelegenen Formular des Elements (falls vorhanden),
  # - element - ein Hash-ähnliches Objekt, das das HTML-Element darstellt, das den Reflex ausgelöst hat,
  # - signed - verwendet eine vorzeichenbehaftete globale ID, um einem Modell zugeordnete Datensätze zuzuordnen, z. B. element.signed[:foo],
  # - unsigned - verwendet eine unsignierte Global ID, um einen einem Modell zugeordneten Datensatz abzubilden, z. B. element.unsigned[:foo],
  # - cable_ready - ein spezielles cable_ready, das an den aktuellen Besucher übertragen werden kann (keine Klammern erforderlich),
  # - reflex_id - eine UUIDv4, die jeden Reflex eindeutig identifiziert.

Wie wir sehen können, gibt es nur wenige Eigenschaften, die in unserer Klasse verwendet werden können. Die interessanteste wird zu Beginn die Eigenschaft Element Eigenschaft, die alle DOM-Element-Attribute des Stimulus-Controllers sowie weitere Eigenschaften enthält, wie tagName, geprüft und Wert.

StimulusReflex gibt uns auch eine Reihe von Rückrufen, mit denen wir die Prozesse unserer Reflexe steuern können:

• vor_reflex
• um_reflex
• nach_reflex

Wie Sie sehen können, ist die Benennung sehr ähnlich zu Active Record Callbacks.

Deklaration eines Reflexes in HTML mit data-Attribut

Der schnellste Weg, Reflexaktionen zu aktivieren, ist die Verwendung der Daten-Reflexion Attribut. Die Syntax entspricht dem Stimulus-Format: [DOM-Ereignis]->[ReflexClass]#[Aktion]

"="">StimulusReflex-Dokumentation. Ein großes Lob an alle, die an der Entwicklung von StimulusReflex beteiligt sind!

In diesem Beispiel ist die Daten-Reflexion Attribut wies auf die PostRefex Klasse und die Inkrement Methode auf der anklicken. Veranstaltung. Hier haben wir auch data-post-id die wir später in der Klasse Reflex durch element.dataset[:post_id].

class PostsReflex < AnwendungsReflex
def increment
post = Post.find(element.dataset[:post_id])

post.increment! :likes
end
end

Morphs

Standardmäßig, StimulusReflex aktualisiert die gesamte Seite (Page morph). Nach der erneuten Verarbeitung der Controller-Aktion, dem Rendern des View-Templates und dem Senden des Roh-HTML an Ihren Browser verwendet StimulusReflex die morphdom Bibliothek, um die kleinste Anzahl von DOM-Änderungen durchzuführen, die notwendig sind, um Ihre Benutzeroberfläche in nur wenigen Millisekunden zu aktualisieren.

StimulusReflex verfügt über drei verschiedene Betriebsmodi:

Seite Morph - führt eine ganzseitige Aktualisierung durch,
Selektor Morph - ersetzt den Inhalt eines Elements,
Nichts Morph - führt Funktionen aus, die Ihre Seite nicht aktualisieren (z. B. das Aufrufen Ihres Mitarbeiters).

Um unsere PostReflex#increment Methode, können wir einfach die morph und zielen auf den Teilbereich, den wir aktualisieren wollen.

def increment
post = Post.find(element.dataset[:post_id])
post.increment! :likes

morph "#posts_#{post.id}", render(partial: 'post', locals: { posts: post })
end

Meine Gedanken

Diese recht kurze Einführung reicht aus, um Ihre Reise mit reaktiven Rails zu beginnen. StimulusReflex. Ist es nicht großartig, eine reaktive SPA-Anwendung mit nur ein paar Ruby-Zeilen und ohne JavaScript erstellen zu können? Für mich ist diese ganze HTML-over-the-wire-Idee aufregend, und ich werde mich in Zukunft auf jeden Fall mit diesem Thema beschäftigen. Für den Moment empfehle ich Ihnen dringend StimulusReflex Dokumentation. Ein großes Lob an alle, die an der Entwicklung von StimulusReflex beteiligt sind!

Lesen Sie mehr:

Warum Sie (wahrscheinlich) Typescript verwenden sollten

Wie kann man ein Projekt nicht durch schlechte Programmierpraktiken zerstören?

Strategien zum Abrufen von Daten in NextJS