Erweiterung der Interaktivität: Integrationsmöglichkeiten von Stimulus in Ruby on Rails

Entdecken Sie in unserem Tutorial, wie Sie mit Stimulus die Interaktivität Ihrer Ruby on Rails-Anwendung auf einfache Weise verbessern können. Von der Einrichtung bis zur Integration - wir führen Sie Schritt für Schritt durch den Prozess. Nutzen Sie die Leistung von Stimulus, um die Benutzererfahrung zu optimieren und die Ladezeiten zu verkürzen.

In der Entwicklung von Ruby on Rails-Projekten kann es vorkommen, dass Anforderungen nach Interaktivität in den generierten HTML-Dateien auftreten. In solchen Fällen stehen verschiedene Möglichkeiten zur Implementierung dieser Interaktivität zur Verfügung. Eine davon ist die Verwendung eines JavaScript-Frameworks wie React oder Ember. Diese Frameworks eignen sich gut für Single Page Applications (SPAs), insbesondere wenn es um die Verwaltung von Zuständen auf der Clientseite oder um Leistungsprobleme geht, die mit häufigen Anfragen an den Server verbunden sind.

Allerdings gibt es bei der Implementierung eines Frameworks, das Zustände und häufige Updates auf der Clientseite verwaltet, mehrere Überlegungen zu beachten:

1. Die Leistung kann durch Lade- und Konvertierungsanforderungen eingeschränkt werden, z.B. das Parsen von JavaScript und das Abrufen und Konvertieren von JSON in HTML.
2. Die Verpflichtung zu einem Framework kann dazu führen, dass mehr Code geschrieben werden muss, als für den spezifischen Anwendungsfall erforderlich ist, insbesondere wenn nur kleine JavaScript-Verbesserungen benötigt werden.
3. Zustände, die sowohl auf der Client- als auch auf der Serverseite verwaltet werden, können zu einer Duplizierung von Aufgaben führen und die Fehleranfälligkeit erhöhen.

Als Alternative hat das Team bei Basecamp, das auch Rails entwickelt hat, Stimulus.js entwickelt. Stimulus wird als "ein bescheidenes JavaScript-Framework für das HTML, das Sie bereits haben" beschrieben. Es ist darauf ausgelegt, eine moderne Rails-Anwendung zu verbessern, indem es mit serverseitig generiertem HTML arbeitet. Der Zustand wird im Document Object Model (DOM) gespeichert, und das Framework bietet Standardmethoden zur Interaktion mit Elementen und Ereignissen im DOM. Es arbeitet neben Turbolinks (standardmäßig in Rails 5+ enthalten), um die Leistung und Ladezeiten mit Code zu verbessern, der auf einen klar definierten Zweck begrenzt ist.

Schritt-für-Schritt-Anleitung zur Integration von Stimulus

Schritt 1: Erstellung eines verschachtelten Modells

Der erste Schritt besteht darin, ein verschachteltes Post-Modell zu erstellen, das mit unserem vorhandenen Shark-Modell verknüpft ist. Dazu erstellen wir Active Record-Beziehungen zwischen unseren Modellen: Posts gehören zu bestimmten Sharks, und jeder Shark kann mehrere Posts haben.

# app/models/post.rb

class Post < ApplicationRecord

belongs_to :shark

end

# app/models/shark.rb

class Shark < ApplicationRecord

has_many :posts, dependent: :destroy

validates :name, presence: true, uniqueness: true

validates :facts, presence: true

end

Schritt 2: Erstellung eines Controllers für eine verschachtelte Ressource

Die Erstellung eines Posts-Controllers umfasst die Festlegung einer verschachtelten Ressourcenroute in der Haupt-Routendatei der Anwendung und die Erstellung der Controllerdatei selbst, um die Methoden zu spezifizieren, die mit bestimmten Aktionen verbunden sind.

# app/controllers/posts_controller.rb

class PostsController < ApplicationController

before_action :get_shark

def create

@post = @shark.posts.create(post_params)

end

def destroy

@post = @shark.posts.find(params[:id])

@post.destroy

end

private

def get_shark

@shark = Shark.find(params[:shark_id])

end

def post_params

params.require(:post).permit(:body, :shark_id)

end

end

Schritt 3: Neuorganisation der Ansichten mit Partials

In diesem Schritt werden die Ansichten und Partials kartiert, die als Ausgangspunkt für die Arbeit mit Stimulus dienen werden.

<%= render 'sharks/posts' %>

<%= render 'sharks/all' %>

Schritt 4: Installation von Stimulus

Die erste Aufgabe bei der Verwendung von Stimulus besteht darin, unsere Anwendung zu installieren und zu konfigurieren, damit sie damit funktioniert. Dies umfasst die Sicherstellung, dass wir die richtigen Abhängigkeiten haben, einschließlich des Yarn-Paketmanagers und Webpacker, dem Gem, das es uns ermöglicht, mit dem JavaScript-Vorprozessor und -Bundler webpack zu arbeiten. Mit diesen Abhängigkeiten können wir Stimulus installieren und JavaScript verwenden, um Ereignisse und Elemente im DOM zu manipulieren.

# Installation von Yarn

sudo apt update

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add –

echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list

sudo apt update

sudo apt install yarn

# Installation von webpacker und Stimulus

nano Gemfile # füge 'webpacker', '~> 4.x' zu den Abhängigkeiten hinzu

bundle install

bundle exec rails webpacker:install

bundle exec rails webpacker:install:stimulus

Teil 5: Kernkonzepte von Stimulus

Bevor wir in die Verwendung von Stimulus in Rails-Partials eintauchen, ist es wichtig, die Kernkonzepte von Stimulus zu verstehen:

• Controller: JavaScript-Klassen, die in JavaScript-Modulen definiert sind und über die auf bestimmte HTML-Elemente und die Stimulus-Anwendungsinstanz zugegriffen werden kann.
• Targets: Erlauben es, bestimmte HTML-Elemente zu referenzieren und sind mit bestimmten Controllern verbunden.
• Actions: Steuern, wie DOM-Ereignisse von Controllern behandelt werden, und sind ebenfalls mit bestimmten Controllern verbunden. Sie schaffen eine Verbindung zwischen dem HTML-Element, das mit dem Controller verbunden ist, den Methoden, die im Controller definiert sind, und einem DOM-Ereignislistener.

Teil 6: Verwendung von Stimulus in Rails Partials

In unseren Rails-Partials verwenden wir Stimulus, um die Benutzererfahrung zu verbessern und die Interaktion mit bestimmten HTML-Elementen zu steuern. Ein Beispiel hierfür ist das Hinzufügen eines neuen Posts zu einer Seite, ohne die Seite neu laden zu müssen.

Um dies zu erreichen, folgen wir einem einfachen Prozess:

1. 1. 1. Zuerst erstellen wir das Partials-File mit dem gewünschten HTML-Code und integrieren die notwendigen Stimulus-Controller, -Aktionen und -Ziele.
      2. Dann definieren wir den entsprechenden Stimulus-Controller mit den gewünschten Methoden.
      3. Schließlich testen wir die Funktionalität, um sicherzustellen, dass alles wie erwartet funktioniert.

Abschluss und Ausblick

In diesem Beitrag haben wir einen Einblick in die Verwendung von Stimulus in Rails Partials erhalten und gesehen, wie wir damit die Benutzererfahrung verbessern können. Stimulus bietet eine leichte Alternative zu umfangreicheren JavaScript-Frameworks und eignet sich besonders gut für Projekte, die keine komplexe Client-seitige Zustandsverwaltung erfordern.

Für zukünftige Entwicklungen und Experimente mit Stimulus stehen zahlreiche Möglichkeiten offen. Wir hoffen, dass dieser Beitrag als nützliche Einführung in die Verwendung von Stimulus in Rails-Anwendungen dient und Sie dazu ermutigt, weiter damit zu experimentieren und Ihre eigenen Projekte zu erstellen. Erweiterung der Interaktivität: Integrationsmöglichkeiten von Stimulus in Ruby on Rails