Stimulus.js: Et JS-framework-alternativ til Rails-apps

Jeg ved, hvad du tænker ... En anden JavaScript rammer? Der er allerede så mange af dem! Du har ret, men denne fangede min opmærksomhed, da den blev skabt af Basecamp. Du kender sikkert dette firma, de er skaberne af Ruby on Rails. De skabte også Turbolinks, og jeg nævner dette, fordi Stimulus passer smukt sammen med den. Så måske er det værd at prøve Stimulus?

Hvordan fungerer det?

Stimulus fungerer ved at overvåge siden og vente på, at data-controller attributten skal vises. Den data-controller værdi forbinder og afkobler Stimulus-controllere. Præmissen er enkel: Ligesom class er en forbindelse mellem HTML og CSS, data-controller er en bro fra HTML til JavaScript. Stimulus tilføjer også data-handling attributten, som beskriver, hvordan hændelser på siden skal udløse controller-metoderne, og data-mål attribut, som giver dig et håndtag til at finde elementer i controllerens scope.

Nem installation

Hvis din Rails-app bruger en webpacker-perle, kan du installere Stimulus med en enkelt kommando, da webpacker-perlen indeholder en opgave til installation af Stimulus. Bare kør følgende kommando i din Rails-rodmappe:

rails webpacker:install:stimulus
Dette tilføjer stimulus til pakke.json og opretter følgende to filer: app/javascript/controllers/index.js:

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

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

Du kan se, at webpacks require.context-hjælper bliver kaldt. Derefter sendes den resulterende kontekst til Application#load-metoden. Det betyder, at vores applikation leder efter filer med navnet[identifier]_controller.js i app/javascript/controllers/ hvor identifikatoren svarer til controllerens data-controller-identifikator i din HTML. Det er præcis det sted, hvor vi skal placere Stimulus-controllerne.
App'en/javascript/controllers/hello_controller.js bliver også genereret. Dette er blot et eksempel på en controller, som vi kan lege med.

Grundlæggende brug

Ok, så vi har hello_controller.js fil oprettet med følgende Kode:

import { Controller } fra "stimulus"

export default class extends Controller {
statiske mål = ["output"]
connect() {
this.outputTarget.textContent = "Hej, Stimulus!
}
}

Men som du ved, vil vi ikke se nogen effekter, hvis vi ikke laver forbindelsen mellem HTML og JavaScript. Lad os tilføje noget kode til din HTML-visning. Du kan placere den, hvor du vil:

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

Og ved du hvad? Det var det hele! Hvis du genindlæser din side og ser "Hello, Stimulus!" på din side, betyder det, at forbindelsen fungerer korrekt. Enkelt, ikke sandt?
Okay, men det er bare en almindelig tekstvisning. Kan vi få noget action? Ja, det kan vi! Som jeg nævnte før, er der også data-handling attribut. Lad os så ændre vores HTML-visning:

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

Og stimulus-controlleren app/javascript/controllers/hello_controller.js:

import { Controller } fra "stimulus"

export default class extends Controller {
statiske mål = ["output", "days"].
connect() {
this.outputTarget.textContent = "Hvor længe har du været i karantæne?
}
beregn() {
const element = this.daysTarget
const days = element.value
const lockdownDays = 14
let daysLeft = lockdownDays - days

if (daysLeft < 1) {
  alert('Du er fri!')
}
ellers {
  alert(`Mængden af dage, du skal være i karantæne: ${daysLeft}`)
}

}
}

Her har vi en meget enkel app, der beregner, hvor længe vi skal være i karantæne. Det har vi gjort ved at bruge data-action-attributten i HTML.
Du kan se, at vi også har tilføjet "dage" til listen over mål i JavaScript-koden. Når vi gør dette, opretter Stimulus automatisk en this.daysTarget egenskab, som returnerer det første matchende målelement.

Hvad har du ellers brug for at vide?

Tilbagekaldelser

Du har sikkert bemærket, at der er en connect() metode i begge eksempler. Denne er til indbyggede tilbagekald. Du bør kende dem alle og deres livscyklus, så her er de:
initialisere: én gang, når controlleren instantieres første gang,
forbinde: når som helst controlleren er tilsluttet DOM'en,
Afbryd forbindelsen: hver gang controlleren kobles fra DOM'en.

Beskrivelse af handling

Den data-handling værdi klik->hello#beregn kaldes en handlingsdeskriptor. Denne deskriptor siger, at:

• klik er begivenhedens navn,
• Hej er controller-identifikatoren,
• beregn er navnet på metoden.

Målsætninger

Ligesom for handlinger har Stimulus en målbeskrivelse. Den hello.days deskriptor siger det: Hej er controller-identifikatoren,
dage er målets navn.

I det forrige eksempel nævnte jeg, at Stimulus skaber this.daysTarget når der er "days" på listen over mål. Du skal også vide, at der kan oprettes flere egenskaber. I forhold til eksemplet kan du have:

this.daysTarget som evaluerer op til det første mål i controllerens scope. Hvis der ikke er noget mål, markerer egenskaben en fejl,
this.daysTargets evaluerer op til et array af alle kildemål i controllerens scope,
this.hasDaysTarget returnerer true, hvis der er et mål, eller false, hvis der ikke er.

Som du kan se, er Stimulus enkel og kan nemt tilføjes til dit program. Det vinder en vis popularitet i RoR-fællesskabet, og det overrasker mig ikke. Jeg er selv Ruby-udvikler, og jeg nyder virkelig at arbejde med Stimulus. Så hvad med at prøve det?

Læs mere om det:

• Udvikling af webapps: Hvorfor er Ruby on Rails en teknologi, der er værd at vælge?
• Tid til en ny virkelighed. En æra med fjernarbejde er startet for en måned siden
• 5 grunde til, at du kan finde kvalificerede Ruby-udviklere i Polen