Stimulus.js: data controller applicati a JavaScript

Nella sua presentazione ufficiale Stimulus.js viene descritto come un framework JavaScript con "ambizioni modeste". Con questa definizione non se ne vuole sminuire l'utilità ma sottolineare le caratteristiche principali. La prima attiene alle sue dimensioni, un package da appena 30KB. La seconda il suo peculiare funzionamento che lo distingue da diverse soluzioni dello stesso tipo. In pratica, rispetto a queste ultime, esso offre funzionalità più limitate ma anche un minor livello di complessità. Insomma, non è esattamente simile a React.

Come funziona Stimulus.js

Stimulus.js non si occupa di alcun aspetto che riguarda la generazione del codice HTML, permette però di elaborarlo successivamente alla fase di rendering. Ciò può essere fatto sia a carico di pagine statiche che di contenuti restituiti da applicazioni lato server. Per connettere gli oggetti JavaScript, o controller, agli elementi di una pagina sono sufficienti delle semplici annotazioni.

Il framework sfrutta questa impostazione per monitorare le pagine aspettando la comparsa dell'attributo data-controller. Di ciascun attributo viene letto il valore in modo da individuare il controller di classe corrispondente. Viene così prodotta una nuova istanza della classe e avviene la connessione tra un oggetto e l'elemento da associare ad esso.

Esattamente come l'attributo class permette di collegare HTML e CSS, data-controller funge da ponte tra HTML e JavaScript.

Azioni, target e valori

I controller non sono gli unici costrutti alla base del funzionamento di Stimulus.js. Troviamo infatti anche le azioni, i target e i valori.

Le prime permettono di connettere i metodi dei controller agli eventi DOM tramite gli attributi data-action. I secondi permettono di localizzare gli elementi, mentre i valori leggono, scrivono e osservano gli attributi legati agli elementi dei controller.

Il framework sfrutta gli attributi permettendo di separare i contenuti dai comportamenti di un'applicazione. Proprio come CSS viene utilizzato di separare contenuto e presentazione. I controller diventano così riutilizzabili e presentano sempre dimensioni limitate che consentono di gestirli facilmente nei propri progetti.