Stimulus.js: Eine JS-Framework-Alternative für Rails-Apps

Ich weiß, was Sie denken... Ein anderer JavaScript Rahmen? Es gibt doch schon so viele davon! Du hast recht, aber dieses hier hat meine Aufmerksamkeit erregt, da es von Basecamp. Sie kennen diese Firma wahrscheinlich, sie sind die Schöpfer von Ruby on Rails. Sie schufen auch Turbolinks, und ich erwähne dies, weil Stimulus sich hervorragend mit ihm kombinieren lässt. Vielleicht lohnt es sich also, Stimulus einmal auszuprobieren?

Wie funktioniert das?

Stimulus überwacht die Seite und wartet auf die Daten-Controller Attribut erscheinen. Die Website Daten-Controller Wert verbindet und trennt die Stimulus-Steuergeräte. Die Prämisse ist einfach: So wie Klasse eine Verbindung zwischen HTML und CSS ist, Daten-Controller ist eine Brücke von HTML zu JavaScript. Stimulus fügt auch die Daten-Aktion Attribut, das beschreibt, wie Ereignisse auf der Seite die Controller-Methoden auslösen sollen, und das Daten-Ziel Attribut, das Ihnen eine Handhabe zum Auffinden von Elementen im Geltungsbereich des Controllers bietet.

Einfache Installation

Wenn Ihre Rails-Anwendung ein Webpacker-Gem verwendet, können Sie Stimulus mit einem einfachen Befehl installieren, da das Webpacker-Gem eine Aufgabe für die Installation von Stimulus bereitstellt. Führen Sie einfach den folgenden Befehl in Ihrem Rails-Stammverzeichnis aus:

Schienen webpacker:install:stimulus
Dies fügt Stimulus zu paket.json und erstellt die beiden folgenden Dateien: app/javascript/controllers/index.js:

import { Anwendung } from "stimulus"
importiere { definitionsFromContext } von "stimulus/webpack-helpers"

const Anwendung = Anwendung.start()
const context = require.context("controllers", true, /_controller.js$/)
application.load(definitionsFromContext(context))

Sie können sehen, dass die require.context-Hilfe von Webpack aufgerufen wird. Anschließend wird der resultierende Kontext an die Methode Application#load übergeben. Das bedeutet, dass unsere Anwendung nach Dateien mit dem Namen[Bezeichner]_controller.js im app/javascript/controllers/ Verzeichnis, wobei der Bezeichner mit dem Data-Controller-Bezeichner des Controllers in Ihrem HTML übereinstimmt. Dies ist genau der Ort, an dem wir die Stimulus-Controller ablegen sollten.
Die App/javascript/controllers/hello_controller.js wird ebenfalls erzeugt. Dies ist nur ein Beispiel für einen Controller, mit dem wir spielen können.

Grundlegende Verwendung

Ok, wir haben also die hello_controller.js Datei mit folgendem Inhalt erstellt Code:

importieren { Controller } von "stimulus"

export default class extends Controller {
static targets = ["output"]
connect() {
this.outputTarget.textContent = 'Hallo, Stimulus!'
}
}

Aber, wie Sie wissen, werden wir keine Effekte sehen, wenn wir die Verbindung zwischen HTML und JavaScript nicht herstellen. Fügen wir etwas Code in Ihre HTML-Ansicht ein. Sie können diesen einfügen, wann immer Sie wollen:

<div data-controller="hello">
<p data-target="hello.output">&nbsp;</p>
</div>

Und wissen Sie was? Das war's schon! Wenn Sie Ihre Seite neu laden und "Hallo, Stimulus!" auf Ihrer Seite sehen, bedeutet das, dass die Verbindung richtig funktioniert. Ganz einfach, oder?
Ok, aber das ist nur eine einfache Textanzeige. Können wir etwas Action haben? Ja, das können wir! Wie ich bereits erwähnt habe, gibt es auch die Daten-Aktion Attribut. Ändern wir nun unsere HTML-Ansicht:

<div data-controller="hello">
<p><input type="number" data-target="hello.days"><br><button data-action="click->hello#calculate">Berechnen Sie</button></p>
</div>

Und der Stimulus-Controller app/javascript/controllers/hello_controller.js:

importieren { Controller } von "stimulus"

export default class extends Controller {
static targets = ["output", "days"]
connect() {
this.outputTarget.textContent = 'Wie lange sind Sie schon in Quarantäne?
}
calculate() {
const element = this.daysTarget
const days = element.value
const lockdownDays = 14
let daysLeft = lockdownDays - days

if (daysLeft < 1) {
  alert('Du bist frei!')
}
else {
  alert(`Anzahl der Tage, die Sie in Quarantäne bleiben müssen: ${daysLeft}`)
}

}
}

Hier haben wir eine sehr einfache Anwendung, die berechnet, wie lange wir in Quarantäne bleiben müssen. Wir haben dies mit Hilfe des Attributs data-action in HTML erreicht.
Wie Sie sehen, haben wir auch "Tage" zur Liste der Ziele im JavaScript-Code hinzugefügt. Wenn wir dies tun, erstellt Stimulus automatisch eine this.daysTarget Eigenschaft, die das erste übereinstimmende Zielelement zurückgibt.

Was müssen Sie noch wissen?

Rückrufe

Sie haben wahrscheinlich bemerkt, dass es eine connect() Methode in beiden Beispielen. Diese Methode ist für integrierte Rückrufe. Sie sollten sie alle und ihren Lebenszyklus kennen, also hier sind sie:
initialisieren: einmal, wenn der Controller zum ersten Mal instanziiert wird,
verbinden: immer, wenn das Steuergerät mit dem DOM verbunden ist,
Trennen Sie die Verbindung: immer dann, wenn das Steuergerät vom DOM getrennt wird.

Aktion Deskriptor

Die Daten-Aktion Wert Klick->Helo#Berechnen wird als Aktionsdeskriptor bezeichnet. Dieser Deskriptor besagt, dass:

• anklicken. ist der Name des Ereignisses,
• hallo ist die Kennung des Controllers,
• berechnen ist der Name der Methode.

Ziele

Genau wie bei den Aktionen gibt es auch bei Stimulus einen Zieldeskriptor. Die hallo.tage Deskriptor sagt das: hallo ist die Kennung des Controllers,
Tage ist der Name des Ziels.

Im vorherigen Beispiel habe ich erwähnt, dass Stimulus die this.daysTarget Eigenschaft, wenn in der Liste der Ziele "Tage" steht. Sie müssen auch wissen, dass weitere Eigenschaften erstellt werden können. In Bezug auf das Beispiel, können Sie haben:

this.daysTarget die bis zum ersten Ziel im Geltungsbereich des Controllers ausgewertet wird. Wenn es kein Ziel gibt, meldet die Eigenschaft einen Fehler,
this.daysTargets wertet bis zu einem Array aller Quell-Ziele im Geltungsbereich des Controllers aus,
this.hasDaysTarget gibt true zurück, wenn es ein Ziel gibt, oder false, wenn nicht.

Wie Sie sehen können, ist Stimulus einfach und kann leicht zu Ihrer Anwendung hinzugefügt werden. Es gewinnt in der RoR-Gemeinschaft an Popularität und das überrascht mich nicht. Ich bin selbst Ruby-Entwickler und arbeite sehr gerne mit Stimulus. Wie wäre es also, wenn Sie es einmal ausprobieren würden?

Lesen Sie mehr:

• Web-App-Entwicklung: Warum ist Ruby on Rails eine Technologie, für die es sich lohnt?
• Zeit für eine neue Realität. Eine Ära der Fernarbeit hat vor einem Monat begonnen
• 5 Gründe, warum Sie qualifizierte Ruby-Entwickler in Polen finden werden