Share
Stimulus ist ein "bescheidenes JavaScript-Framework", das von den Leuten von Basecamp erstellt wurde, die Ihnen Rails gebracht haben.
Es ist in vielerlei Hinsicht das Gegenteil von anderen modernen Frameworks, die heute verfügbar sind. Während Sie einige ähnliche Konzepte und Benennungen sehen, unterscheidet sich Stimulus in grundlegender Weise sehr. Wir werden diese Unterschiede kurz besprechen und dann unsere erste Anwendung mit Stimulus erstellen.
Die Kernkonzepte vieler moderner Frameworks liegen in der Trennung von „Staat“ und „DOM“. Auf diese Weise fungiert das DOM nur als Client für die Daten, die es darstellt.
Stimulus dreht dieses Konzept auf den Kopf und verlässt sich stattdessen darauf, dass der DOM den Status hält.
Dies bedeutet letztendlich, dass Stimulus am besten für Anwendungen geeignet ist, die HTML bereitstellen (und nicht etwa mit einer JSON-API integriert werden)..
Mit Stimulus werden keine HTML-Vorlagen angezeigt. Stattdessen wirst du sehen Daten-* Attribute, die den HTML-Code mit der JavaScript-Anwendung verbinden.
Dies bedeutet auch, dass Sie solche Dinge nicht sehen jeder oder Karte Schleifen, wie Sie sie in Lenker oder Reakt sehen könnten.
Stimulus ist nicht für die Wiedergabe von HTML zuständig, es sei denn, Sie erstellen diese Funktionalität explizit.
Stimulus rendert also keine Vorlagen. Es ist vielmehr dazu gedacht, Aktionen und Ereignisse, die Sie am Front-End einer Anwendung ausführen, mit Controllern im Back-End zu verbinden.
Stimulus verwendet drei Konzepte, um dies zu erreichen: Ziele, Controller, und Aktionen.
Aber bevor wir zu weit reinkommen, lassen Sie uns Stimulus auf Ihrem Computer installieren!
Dieses Setup setzt voraus, dass Sie bereits eine aktuelle Version von NodeJS auf Ihrem Computer installiert haben. Gehen Sie zu nodejs.org, wenn Sie dies noch nicht getan haben.
Wir werden eine grundlegende Statik verwenden index.html Datei, die anfangs so aussieht:
Hinweis: In diesem Tutorial werden wir keine Styling- oder Buildprozesse für CSS abdecken.
Erstellen Sie als Nächstes einen Ordner mit dem Namen src. Innen src, Erstellen Sie einen anderen Ordner namens Steuerungen und eine einzige index.js Datei.
Wir werden Webpack zum Erstellen unserer JavaScript-Anwendung verwenden, da Stimulus einige erweiterte JavaScript-Funktionen verwendet, die in Browsern nicht direkt funktionieren.
Erstellen Sie eine Datei im Stammverzeichnis Ihres Projekts package.json das hat folgenden Inhalt:
"name": "wdstimulus", "version": "1.0.0", "description": "Stimulus Introduction", "scripts": , "author": "Ihr Name", "Lizenz": "ISC "," devDependencies ": " @ babel / core ":" ^ 7.0.0-beta.39 "," @ babel / preset-env ":" ^ 7.0.0-beta.39 "," babel-loader " : "^ 8.0.0-beta.0", "babel-preset-stage-0": "^ 6.24.1", "stimulus": "^ 1.0.0", "webpack": "^ 3.10.0"
HinweisDiese Versionen werden sich in der Zukunft ändern, und wir empfehlen, mit der neuesten Version jedes Tools so aktuell wie möglich zu bleiben.
Sie können diese Datei auch mit generieren npm init und installieren Sie Abhängigkeiten einzeln mit npm install [Paketname].
Diese Datei enthält alles, was wir benötigen, um einen Browser-kompatiblen Build unserer Stimulus-Anwendung zu erstellen. Führen Sie im Stammverzeichnis der Anwendung aus npm installieren. Dadurch werden diese Abhängigkeiten im installiert Knotenmodule Verzeichnis in Ihrer Anwendung.
Als Nächstes erstellen wir eine Konfigurationsdatei, damit Webpack weiß, was mit unseren Dateien beim Speichern geschehen soll. Im selben Stammverzeichnis, in dem das package.json befindet, erstellt eine Datei mit dem Namen webpack.config.js, und füge diese Inhalte hinzu:
module.exports = module: rules: [test: /\.js$/, exclude: / (node_modules) /, verwende: loader: 'babel-loader', Optionen: presets: ["@ babel / env "], plugins: [" transform-class-properties "];
Diese Datei weist Webpack im Wesentlichen an, unser JavaScript mit der Voreinstellung env zu kompilieren. Wir haben das Stage-0-Preset in unseren Knotenmodulen verfügbar und das erforderliche Transform-Class-Properties-Plugin hinzugefügt.
Der letzte Schritt, der für eine Stimulus-Bewerbung bereit ist, ist das Ausfüllen von index.js Datei mit folgendem Inhalt:
Accentsconagua
Application aus "stimulus" importieren definitionsFromContext aus "stimulus / webpack-helpers" importieren const application = Application.start () const context = required.context ("./ controller", true, /\.js$/) application.load (definitionsFromContext (Kontext))Dieser Code stammt direkt aus den Stimulus-Dokumenten. Es wirkt magisch, um bei der Erstellung unseres Anwendungscodes eine herkömmliche Namensstruktur verwenden zu können.
Die Benennung Ihrer Dateien ist für Stimulus von Bedeutung, wenn Sie dies verwenden index.js Code (diese Nuance ist etwas, was Rails-Entwickler vertraut finden werden).
Nun, da wir alles eingerichtet haben, stellen wir sicher, dass unser Webpack-Build funktioniert. Führen Sie im Stammverzeichnis das folgende Kommando aus:
npx webpack src / index.js dist / bundle.js --watch
Das npx Teil dieses Befehls ist eine bequeme Möglichkeit, Binärdateien auszuführen, die sich im Verzeichnis befinden Knotenmodule Verzeichnis. Dieser Befehl überwacht die Änderungen an Ihren JavaScript-Dateien und erstellt Ihre Anwendung neu, wenn Sie diese Änderungen vornehmen.
Solange Sie keine Fehler in Ihrer Konsole sehen, können Sie loslegen!
Wenn Sie mit Rails oder Laravel vertraut sind, ist das Konzept der Controller für Sie möglicherweise leicht zu implementieren.
Stellen Sie sich einen Controller im Fall von Stimulus als eine JavaScript-Klasse vor, die einige Methoden und Daten enthält, die zusammenarbeiten.
Ein Controller könnte in Stimulus so aussehen:
// src / controller / refreshable_controller.js import Controller aus der Exportklasse "stimulus" erweitert Klasse
Zu diesem Controller sind einige wichtige Punkte zu beachten. Erstens ist der Controller sowohl HTML als auch JavaScript. Das Datencontroller Dieses Attribut weist JavaScript an, eine neue Instanz der Klasse zu erstellen.
Ein weiteres interessantes Merkmal ist die Tatsache, dass der Klassenname nirgendwo in der Controller-Klasse selbst zu finden ist. Dies geschieht aufgrund der Leitung application.load (definitionsFromContext (Kontext)) in dem index.js Datei. Diese Zeile lädt den Anwendungscode und verwendet die Dateinamen bis schließen Klassennamen. Das mag zunächst verwirrend sein, aber wenn Sie diese Konvention regelmäßig anwenden, wird sie viel fließender.
Ein Aktion Es klingt so: eine Prozedur, die Sie nach einem bestimmten Ereignis eines Benutzers durchführen möchten. Für unseren Aktualisierungscontroller möchten wir eine Aktualisierung eines bestimmten Inhaltsbereichs durchführen, wenn auf eine Schaltfläche geklickt wird. In diesem Fall könnte unsere Aktion aufgerufen werden Aktualisierung.
// src / controller / refreshable_controller.js import Controller aus der Exportklasse "stimulus" erweitert Controller refresh () console.log ("refresh!")Aber nur diese Aktionsmethode in unserem Controller zur Verfügung zu haben, bringt nichts. Wir müssen es mit unserem HTML-Code verbinden.
Wenn der Benutzer in diesem HTML-Code auf die Schaltfläche klickt, wird die Aktualisierungsaktion im Controller ausgeführt.
Wie können wir nun mit dieser Aktion etwas auf der Seite tun??
Stimulus verwendet auch ein Konzept namens „Targets“, um wichtige Elemente auf der Seite zu verbinden. Wir verwenden dies, um ein Containerelement zu verwalten, das den zu aktualisierenden Inhalt enthält.
// src / controller / refreshable_controller.js import Controller aus der Exportklasse "stimulus" erweitert Controller statische Ziele = ["content"] refresh () this.contentTarget.innerHTML = "Refresh!"
In diesem Beispiel haben wir alle drei Konzepte des Stimulus dargestellt. EIN erfrischbar Controller, a Aktualisierung Aktion und a Inhalt Ziel.
Wenn Sie genau hinschauen, werden Sie in diesem Code etwas finden, das Sie überraschen könnte: direkte Manipulation des DOM. Auf diese Weise unterscheidet sich Stimulus von anderen Frameworks. Direkte Manipulation von DOM-Elementen ist nicht nur möglich, sondern wird empfohlen.
Das bedeutet auch, dass Sie, wenn Sie mit jQuery oder Vanilla JavaScript und Browser-APIs vertraut sind, dieses Wissen nutzen können! Eine jQuery-basierte Version der Aktualisierungsmethode könnte beispielsweise so aussehen:
// src / controller / refreshable_controller.js import Controller aus "stimulus" import $ aus 'jquery'; // erfordert das Hinzufügen von jQuery zu package.json export default class erweitert Controller statische Ziele = ["Inhalt"] refresh () let target = this.contentTarget; $ .get ("/ content", Funktion (content) $ (target) .html (content))Stimulus stört nicht, wenn Sie andere Werkzeuge verwenden möchten, mit denen Sie bereits vertraut sind.
Sie haben jetzt genug Informationen, um mit Stimulus mehr wartungsfähige Anwendungen zu erstellen! Die Entwickler von Stimulus erinnern uns daran, dass Regeln und Trends gebrochen werden können, und manchmal können wir uns von den „Best Practices“ lösen und einfach etwas tun, das für uns funktioniert.
Viel Spaß beim Eintauchen in Stimulus!
Wir haben ein umfassendes Handbuch zusammengestellt, mit dessen Hilfe Sie JavaScript erlernen können, egal ob Sie gerade erst als Web-Entwickler anfangen oder sich mit fortgeschrittenen Themen befassen möchten.
