Stimulus.js: Un'alternativa al framework JS per le applicazioni Rails

So cosa state pensando... un altro JavaScript struttura? Ce ne sono già così tanti! Avete ragione, ma questo ha attirato la mia attenzione perché è stato creato da Basecamp. Probabilmente conoscete questa azienda, sono i creatori di Ruby on Rails. Hanno anche creato Turbolink, e ne parlo perché Stimulus si abbina magnificamente a questo prodotto. Quindi, forse vale la pena di provare Stimulus?

Come funziona?

Lo stimolo funziona monitorando la pagina, in attesa che la controllore di dati per apparire. Il controllore di dati collega e scollega i controllori di Stimulus. La premessa è semplice: proprio come la classe è un collegamento tra HTML e CSS, controllore di dati è un ponte da HTML a JavaScript. Stimulus aggiunge anche la funzione dati-azione che descrive come gli eventi della pagina debbano attivare i metodi del controllore, e l'attributo dati-target che fornisce una gestione per trovare gli elementi nell'ambito del controllore.

Installazione semplice

Se la vostra applicazione Rails utilizza una gemma webpacker, potete installare Stimulus con un semplice comando, poiché la gemma webpacker fornisce un task per l'installazione di Stimulus. Basta eseguire il seguente comando nella directory principale di Rails:

rails webpacker:install:stimulus
Questo aggiunge stimolo a pacchetto.json e crea i due file seguenti: app/javascript/controllers/index.js:

importare { Application } da "stimulus"
importare { definitionsFromContext } da "stimulus/webpack-helpers"

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

Si può notare che viene richiamato l'helper require.context di webpack. Viene quindi passato il contesto risultante al metodo Application#load. Ciò significa che la nostra applicazione sta cercando i file denominati[identificatore]_controller.js nel app/javascript/controllori/ dove l'identificatore corrisponde all'identificatore del controllore nell'HTML. Questo è esattamente il posto in cui dovremmo mettere i controllori di Stimulus.
L'applicazione/javascript/controllori/hello_controller.js viene anch'esso generato. Questo è solo un esempio di controllore con cui possiamo giocare.

Utilizzo di base

Ok, abbiamo il hello_controller.js creato con il seguente file codice:

importare { Controllore } da "stimulus"

esporta la classe predefinita estende il controllore {
static targets = ["output"]
connect() {
this.outputTarget.textContent = 'Ciao, Stimulus!'
}
}

Ma, come sapete, non vedremo alcun effetto se non facciamo il collegamento tra HTML e JavaScript. Aggiungiamo del codice alla vista HTML. Potete inserirlo quando volete:

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

E sapete cosa? È tutto! Se ricaricate la pagina e vedete "Hello, Stimulus!" sulla vostra pagina, significa che la connessione funziona correttamente. Semplice, no?
Ok, ma questa è solo una semplice visualizzazione di testo. Possiamo avere un po' di azione? Sì, è possibile! Come ho già detto, c'è anche la funzione dati-azione attributo. Cambiamo quindi la nostra vista HTML:

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

E il controllore dello stimolo app/javascript/controllori/hello_controller.js:

importare { Controllore } da "stimulus"

esporta la classe predefinita estende il controllore {
target statici = ["output", "days"].
connect() {
this.outputTarget.textContent = "Da quanto tempo sei in quarantena?".
}
calculate() {
const element = this.daysTarget
const giorni = element.value
const lockdownDays = 14
let daysLeft = lockdownDays - days

se (daysLeft < 1) {
  alert("Sei libero!")
}
altrimenti {
  alert(`Quantità di giorni di quarantena: ${giorniLimiti}`)
}

}
}

Qui abbiamo un'applicazione molto semplice che calcola quanto tempo dobbiamo rimanere in quarantena. Siamo riusciti a farlo utilizzando l'attributo data-action nell'HTML.
Si può notare che abbiamo aggiunto anche "giorni" all'elenco degli obiettivi nel codice JavaScript. Quando si esegue questa operazione, Stimulus crea automaticamente un oggetto this.daysTarget che restituisce il primo elemento di destinazione corrispondente.

Cos'altro c'è da sapere?

Richiami

Probabilmente avrete notato che c'è un connettersi() in entrambi gli esempi. Questo è per i callback incorporati. Dovreste conoscerli tutti e il loro ciclo di vita, quindi eccoli qui:
inizializzare: una volta, quando il controllore viene istanziato per la prima volta,
collegare: ogni volta che il controllore è collegato al DOM,
disconnessione: ogni volta che il controllore è scollegato dal DOM.

Descrittore dell'azione

Il dati-azione valore click->hello#calcolo è chiamato descrittore di azione. Questo descrittore dice che:

• clicca è il nome dell'evento,
• ciao è l'identificativo del controllore,
• calcolare è il nome del metodo.

Obiettivi

Come per le azioni, anche lo Stimolo ha un descrittore di destinazione. Il ciao.giorni Il descrittore dice che: ciao è l'identificativo del controllore,
giorni è il nome della destinazione.

Nell'esempio precedente, ho menzionato che Stimulus crea il this.daysTarget quando c'è "giorni" nell'elenco degli obiettivi. È inoltre necessario sapere che è possibile creare più proprietà. In relazione all'esempio, si possono avere:

this.daysTarget che valuta fino al primo obiettivo nell'ambito del controllore. Se non c'è alcun target, la proprietà segnala un errore,
this.daysTargets valuta fino a un array di tutti i target di origine nell'ambito del controllore,
this.hasDaysTarget restituisce true se esiste un obiettivo o false in caso contrario.

Come potete vedere, Stimulus è semplice e può essere facilmente aggiunto alle vostre applicazioni. Sta guadagnando popolarità nella comunità di RoR e non mi sorprende. Essendo io stesso uno sviluppatore Ruby, mi piace molto lavorare con Stimulus. Che ne dite di farci un giro?

Per saperne di più:

• Sviluppo di applicazioni web: Perché vale la pena scegliere la tecnologia Ruby on Rails?
• È tempo di una nuova realtà. L'era del lavoro a distanza è iniziata un mese fa
• 5 motivi per cui troverete sviluppatori Ruby qualificati in Polonia