Stimulus.js: Ett alternativ till JS-ramverk för Rails-appar

Jag vet vad du tänker... En till JavaScript ramverk? Det finns redan så många av dem! Du har rätt, men den här fångade min uppmärksamhet eftersom den skapades av Basecamp. Du känner förmodligen till det här företaget, de är skaparna av Ruby on Rails. De skapade också Turbolänkar, och jag nämner detta eftersom Stimulus passar utmärkt ihop med den. Så det kanske är värt att ge Stimulus ett försök?

Hur fungerar det?

Stimulus fungerar genom att övervaka sidan och vänta på att data-controller attribut ska visas. Det data-controller värde kopplar samman och kopplar bort Stimulus-kontroller. Utgångspunkten är enkel: precis som klass är en koppling mellan HTML och CSS, data-controller är en brygga från HTML till JavaScript. Stimulus lägger också till data-handling attributet, som beskriver hur händelser på sidan ska trigga kontrollenhetens metoder, och data-mål attributet, som ger dig ett handtag för att hitta element i kontrollerns scope.

Enkel installation

Om din Rails-app använder en webpacker gem kan du installera Stimulus med ett enkelt kommando eftersom webpacker gem tillhandahåller en uppgift för att installera Stimulus. Kör bara följande kommando i din Rails-rotkatalog:

rails webpacker:install:stimulus
Detta lägger till Stimulus till paket.json och skapar följande två filer: app/javascript/controllers/index.js:

import { Application } från "stimulus"
import { definitionsFromContext } från "stimulus/webpack-hjälpmedel"

const applikation = Applikation.start()
const context = require.context("controllers", true, /_controller.js$/)
application.load(definitionerFrånContext(context))

Du kan se att webpacks require.context-hjälpare anropas. Den skickade sedan det resulterande sammanhanget till Application#load-metoden. Detta innebär att vår applikation letar efter filer med namnet[identifierare]_controller.js i app/javascript/controllers/ där identifieraren motsvarar kontrollerns data-kontroller-identifierare i din HTML. Detta är exakt den plats där vi ska placera Stimulus-kontrollerna.
Appen/javascript/controllers/hello_controller.js genereras också. Detta är bara ett exempel på en controller som vi kan leka med.

Grundläggande användning

Ok, så vi har hello_controller.js fil som skapats med följande kod:

importera { Controller } från "stimulus"

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

Men som du vet kommer vi inte att se några effekter om vi inte gör kopplingen mellan HTML och JavaScript. Låt oss lägga till lite kod i din HTML-vy. Du kan lägga till den här när du vill:

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

Och vet du vad? Det är allt! Om du laddar om din sida och ser "Hello, Stimulus!" på din sida betyder det att anslutningen fungerar som den ska. Enkelt, eller hur?
Okej, men det här är bara en vanlig textvisning. Kan vi få lite action? Ja, det kan vi! Som jag nämnde tidigare finns det också data-handling attribut. Låt oss sedan ändra vår HTML-vy:

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

Och Stimulus-styrenheten app/javascript/controllers/hello_controller.js:

importera { Controller } från "stimulus"

export default class extends Controller {
statiska mål = ["output", "days"]
connect() {
this.outputTarget.textContent = "Hur länge har du varit i karantän?
}
beräkna() {
const element = this.daysTarget
const dagar = element.värde
const lockdownDays = 14
låt daysLeft = lockdownDays - days

if (daysLeft < 1) {
  alert("Du är fri!")
}
annars {
  alert(`Antal dagar du behöver vara i karantän: ${daysLeft}`)
}

}
}

Här har vi en mycket enkel app som beräknar hur länge vi måste stanna i karantän. Vi lyckades göra detta genom att använda data-action-attributet i HTML.
Du kan se att vi också har lagt till "dagar" i listan över mål i JavaScript-koden. När vi gör detta skapar Stimulus automatiskt en detta.daysTarget egenskap som returnerar det första matchande målelementet.

Vad mer behöver du veta?

Återkallelser

Du har säkert märkt att det finns en ansluta() metoden i båda exemplen. Den här är för inbyggda callbacks. Du bör känna till dem alla och deras livscykel, så här är de:
initiera: en gång, när styrenheten instansieras första gången,
ansluta: närhelst styrenheten är ansluten till DOM,
koppla bort: närhelst styrenheten kopplas bort från DOM.

Beskrivning av åtgärden

Den data-handling värde klick->hello#beräkna kallas en åtgärdsbeskrivning. Denna deskriptor säger att:

• Klicka är händelsens namn,
• hej är identifieraren för styrenheten,
• beräkna är namnet på metoden.

Mål

Precis som för åtgärder har Stimulus en måldeskriptor. Den hallå.dagar deskriptorn säger det: hej är identifieraren för styrenheten,
dagar är målets namn.

I det föregående exemplet nämnde jag att Stimulus skapar detta.daysTarget när det finns "dagar" i listan över mål. Du behöver också veta att fler egenskaper kan skapas. I relation till exemplet kan du ha:

detta.daysTarget som utvärderas upp till det första målet i styrenhetens scope. Om det inte finns något mål flaggar egenskapen ett fel,
detta.dagarMål utvärderar upp till en array av alla källmål i styrenhetens scope,
this.hasDaysTarget returnerar true om det finns ett mål eller false om det inte finns något.

Som du kan se är Stimulus enkelt och kan enkelt läggas till i din applikation. Det vinner viss popularitet i RoR-communityn och jag är inte förvånad. Som Ruby-utvecklare själv tycker jag verkligen om att arbeta med Stimulus. Så vad sägs om att ta det för en snurr?

Läs mer om detta:

• Utveckling av webbapplikationer: Varför är Ruby on Rails en teknik som är värd att välja?
• Dags för en ny verklighet. En era av distansarbete har börjat för en månad sedan
• 5 skäl till varför du hittar kvalificerade Ruby-utvecklare i Polen