Stimulus.js: Een JS-frameworkalternatief voor Rails-apps

Ik weet wat je denkt... Een andere JavaScript kader? Er zijn er al zoveel! Je hebt gelijk, maar deze trok mijn aandacht omdat hij is gemaakt door Basecamp. Je kent dit bedrijf waarschijnlijk wel, het zijn de makers van Ruby on Rails. Ze creëerden ook Turbolinks, en ik noem dit omdat Stimulus er prachtig mee combineert. Dus misschien is het de moeite waard om Stimulus eens te proberen?

Hoe werkt het?

Stimulus werkt door de pagina te monitoren en te wachten op de datacontroller attribuut te verschijnen. De datacontroller waarde verbindt en ontkoppelt Stimulus controllers. Het uitgangspunt is eenvoudig: net zoals klasse een verbinding is tussen HTML en CSS, datacontroller is een brug van HTML naar JavaScript. Stimulus voegt ook de gegevens-actie attribuut, dat beschrijft hoe gebeurtenissen op de pagina de controller-methodes moeten triggeren, en de gegevens-doel attribuut, dat je een handvat geeft om elementen te vinden in het bereik van de controller.

Eenvoudige installatie

Als uw Rails app een webpacker gem gebruikt, kunt u Stimulus installeren met een eenvoudig commando aangezien de webpacker gem een taak voorziet om Stimulus te installeren. Voer gewoon het volgende commando uit in je Rails root directory:

rails webpacker:install:stimulus
Dit voegt stimulans toe aan pakket.json en maakt de volgende twee bestanden: app/javascript/controllers/index.js:

import { Application } from "stimulus"
import { definitionsFromContext } from "stimulus/webpack-helpers"

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

U kunt zien dat de helper require.context van webpack wordt aangeroepen. Vervolgens wordt de resulterende context doorgegeven aan de methode Application#load. Dit betekent dat onze toepassing op zoek is naar bestanden met de naam[identifier]_controller.js in de app/javascript/controllers/ directory, waar de identifier overeenkomt met de data-controller identifier van de controller in uw HTML. Dit is precies de plek waar we de Stimulus-controllers moeten plaatsen.
De app/javascript/controllers/hello_controller.js wordt ook gegenereerd. Dit is slechts een voorbeeldcontroller waarmee we kunnen spelen.

Basisgebruik

Ok, dus we hebben de hallo_controller.js bestand gemaakt met het volgende code:

importeer { Controller } van "stimulus".

export default class extends Controller {
statische doelen = ["uitvoer"]
connect() {
this.outputTarget.textContent = 'Hallo, Stimulus!
}
}

Maar, zoals je weet, zullen we geen effecten zien als we geen verbinding maken tussen HTML en JavaScript. Laten we wat code toevoegen aan je HTML-weergave. Je kunt dit plaatsen wanneer je maar wilt:

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

En weet je wat? Dat is alles! Als je je pagina opnieuw laadt en "Hallo, Stimulus!" op je pagina ziet, betekent dit dat de verbinding goed werkt. Simpel, toch?
Oké, maar dit is gewoon een tekstweergave. Kunnen we wat actie krijgen? Ja, dat kan! Zoals ik al eerder zei, is er ook de gegevens-actie attribuut. Laten we dan onze HTML-weergave wijzigen:

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

En de stimuleringsregelaar app/javascript/controllers/hello_controller.js:

importeer { Controller } van "stimulus".

export default class extends Controller {
statische doelen = ["uitvoer", "dagen"]
connect() {
this.outputTarget.textContent = 'Hoe lang ben je al in quarantaine?
}
bereken() {
const element = this.daysTarget
const dagen = element.waarde
const lockdownDagen = 14
laat daysLeft = lockdownDays - days

Als (daysLeft < 1) {
  alert('Je bent vrij!')
}
anders {
  alert(`Hoeveel dagen moet je in quarantaine blijven: ${daysLeft}`)
}

}
}

Hier hebben we een heel eenvoudige app die berekent hoe lang we in quarantaine moeten blijven. We hebben dit voor elkaar gekregen door het data-action attribuut in HTML te gebruiken.
U kunt zien dat we ook "dagen" hebben toegevoegd aan de lijst met doelen in de JavaScript code. Wanneer we dit doen, maakt Stimulus automatisch een dit.dagendoel eigenschap die het eerste overeenkomende doelelement retourneert.

Wat moet je nog meer weten?

Terugbellen

Je hebt waarschijnlijk gemerkt dat er een verbinden() methode in beide voorbeelden. Deze is voor ingebouwde callbacks. Je moet ze allemaal kennen en hun levenscyclus, dus hier zijn ze:
initialiseren: eenmalig, wanneer de controller voor het eerst wordt geïnstantieerd,
aansluiten: wanneer de controller is aangesloten op de DOM,
ontkoppelen: wanneer de controller wordt losgekoppeld van de DOM.

Actiebeschrijving

De gegevens-actie waarde klik->hello#berekenen wordt een actiedescriptor genoemd. Deze descriptor zegt dat:

• klik op is de naam van de gebeurtenis,
• hallo is de identificatie van de controller,
• berekenen is de naam van de methode.

Doelen

Net als bij acties heeft Stimulus een doelomschrijving. De hallo.dagen descriptor zegt dat: hallo is de identificatie van de controller,
dagen is de doelnaam.

In het vorige voorbeeld heb ik gezegd dat Stimulus de dit.dagendoel eigenschap als er "days" in de lijst met doelen staat. Je moet ook weten dat je meer eigenschappen kunt maken. Met betrekking tot het voorbeeld kun je hebben:

dit.dagendoel die evalueert tot het eerste doel in het bereik van de controller. Als er geen doel is, markeert de eigenschap een fout,
this.daysTargets evalueert tot een array van alle brontargets in het bereik van de controller,
this.hasDaysTarget retourneert true als er een doel is of false als dat niet het geval is.

Zoals je kunt zien, is Stimulus eenvoudig en kan het gemakkelijk worden toegevoegd aan je applicatie. Het wint aan populariteit in de RoR gemeenschap en dat verbaast me niet. Als Ruby ontwikkelaar werk ik graag met Stimulus. Dus wat dacht je ervan om het eens uit te proberen?

Lees meer:

• Web App Ontwikkeling: Waarom is Ruby on Rails een technologie die de moeite waard is om te kiezen?
• Tijd voor een nieuwe realiteit. Een tijdperk van werken op afstand is een maand geleden begonnen
• 5 redenen waarom u gekwalificeerde Ruby ontwikkelaars in Polen zult vinden