Stimulus.js: Et alternativ til JS-rammeverk for Rails-apper

Jeg vet hva du tenker... En annen JavaScript rammeverk? Det finnes allerede så mange av dem! Du har rett, men denne fanget oppmerksomheten min da den ble laget av Basecamp. Du kjenner sannsynligvis dette selskapet, de er skaperne av Ruby on Rails. De skapte også Turbolinks, og jeg nevner dette fordi Stimulus passer perfekt sammen med den. Så kanskje det er verdt å prøve Stimulus?

Hvordan fungerer det?

Stimulus fungerer ved å overvåke siden og vente på data-kontroller attributtet skal vises. Det data-kontroller verdi kobler sammen og kobler fra Stimulus-kontrollere. Premisset er enkelt: På samme måte som class er en forbindelse mellom HTML og CSS, data-kontroller er en bro fra HTML til JavaScript. Stimulus legger også til data-handling attributtet, som beskriver hvordan hendelser på siden skal utløse kontrollermetodene, og data-mål attributtet, som gir deg et håndtak for å finne elementer i kontrollerens scope.

Enkel installasjon

Hvis Rails-appen din bruker en webpacker-perle, kan du installere Stimulus med en enkel kommando, ettersom webpacker-perlen inneholder en oppgave for å installere Stimulus. Bare kjør følgende kommando i Rails-rotkatalogen:

rails webpacker:install:stimulus
Dette gir stimulans til package.json og oppretter 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-hjelper blir kalt. Deretter sendes den resulterende konteksten til Application#load-metoden. Dette betyr at applikasjonen vår leter etter filer med navnet[identifier]_controller.js i app/javascript/controllers/ katalogen, der identifikatoren tilsvarer kontrollerens data-kontroller-identifikator i HTML-filen. Det er akkurat her vi skal plassere Stimulus-kontrollerne.
Appen/javascript/controllers/hello_controller.js blir også generert. Dette er bare et eksempel på en kontroller som vi kan leke med.

Grunnleggende bruk

Ok, så vi har hello_controller.js fil opprettet med følgende kode:

import { Controller } fra "stimulus"

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

Men som du vet, vil vi ikke se noen effekter hvis vi ikke kobler sammen HTML og JavaScript. La oss legge til litt kode i HTML-visningen. Du kan legge til dette når du vil:

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

Og vet du hva? Det var alt! Hvis du laster inn siden på nytt og ser "Hello, Stimulus!" på siden din, betyr det at tilkoblingen fungerer som den skal. Enkelt, ikke sant?
Ok, men dette er bare en ren tekstvisning. Kan vi få litt action? Ja, det kan vi! Som jeg nevnte tidligere, finnes det også data-handling attributtet. La oss deretter endre HTML-visningen vår:

<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-kontrolløren 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 lenge har du vært i karantene?
}
calculate() {
const element = this.daysTarget
const dager = element.verdi
const lockdownDays = 14
let daysLeft = lockdownDays - days

if (daysLeft < 1) {
  alert('Du er fri!')
}
else {
  alert(`Mengden dager du må være i karantene: ${daysLeft}`)
}

}
}

Her har vi en veldig enkel app som beregner hvor lenge vi må være i karantene. Dette har vi klart å gjøre ved å bruke data-action-attributtet i HTML.
Du kan se at vi også har lagt til "dager" i listen over mål i JavaScript-koden. Når vi gjør dette, oppretter Stimulus automatisk en this.daysTarget egenskap som returnerer det første matchende målelementet.

Hva mer trenger du å vite?

Tilbakekallinger

Du har sikkert lagt merke til at det er en connect() metoden i begge eksemplene. Denne er for innebygde tilbakekallinger. Du bør kjenne til alle disse og deres livssyklus, så her er de:
initialisere: én gang, når kontrolleren instansieres første gang,
koble til: hver gang kontrolleren er koblet til DOM,
koble fra: hver gang kontrolleren kobles fra DOM-enheten.

Beskrivelse av handling

Den data-handling verdi klikk->hello#beregne kalles en handlingsdeskriptor. Denne deskriptoren sier at:

• klikk er navnet på hendelsen,
• hei er kontrolleridentifikatoren,
• beregne er navnet på metoden.

Mål

Akkurat som for handlinger har Stimulus en målbeskrivelse. Den hello.days deskriptoren sier det: hei er kontrolleridentifikatoren,
dager er målets navn.

I det forrige eksempelet nevnte jeg at Stimulus skaper this.daysTarget egenskapen når det er "days" i listen over mål. Du må også vite at det kan opprettes flere egenskaper. I forhold til eksempelet kan du ha:

this.daysTarget som evaluerer opp til det første målet i kontrollerens scope. Hvis det ikke finnes noe mål, flagger egenskapen en feil,
this.daysTargets evaluerer opp til en matrise med alle kildemålene i kontrollerens område,
this.hasDaysTarget returnerer true hvis det finnes et mål, og false hvis det ikke gjør det.

Som du ser, er Stimulus enkelt og kan enkelt legges til i applikasjonen din. Det begynner å bli populært i RoR-miljøet, og det overrasker meg ikke. Som Ruby-utvikler liker jeg veldig godt å jobbe med Stimulus. Så hva med å prøve det?

Les mer om dette:

• Utvikling av webapplikasjoner: Hvorfor er Ruby on Rails en teknologi det er verdt å velge?
• Tid for en ny virkelighet. En æra med fjernarbeid har startet for en måned siden
• 5 grunner til at du vil finne kvalifiserte Ruby-utviklere i Polen