Share
Stimulus è un "modesto framework JavaScript", costruito dalla gente di Basecamp che ti ha portato Rails.
È, in molti modi, l'opposto di altri moderni quadri disponibili oggi. Mentre potresti vedere alcuni concetti e nomi simili, Stimulus è molto diverso in alcuni aspetti fondamentali. Discuteremo brevemente queste differenze e quindi costruiremo la nostra prima applicazione con Stimulus.
I concetti chiave di molti quadri moderni stanno nel separare lo "stato" dal "DOM". In questo modo, il DOM funge solo da client per i dati che rappresenta.
Stimulus ribalta questo concetto sulla sua testa e si affida invece al DOM per mantenere lo stato.
Ciò significa in definitiva che Stimulus è più adatto per le applicazioni che offrono HTML (piuttosto che, per esempio, l'integrazione con un'API JSON).
Con Stimulus, non vedrai modelli HTML. Invece, vedrai dati-* attributi che collegano l'HTML all'applicazione JavaScript.
Questo significa anche che non vedrai cose del genere ogni o carta geografica loop come si potrebbe vedere in Manubri o Reagire.
Stimulus non svolge il ruolo di rendering HTML a meno che non si crei esplicitamente tale funzionalità.
Quindi Stimulus non rende i template. Piuttosto è costruito per connettere azioni e eventi che si svolgono sul front-end di un'applicazione ai controller sul back-end.
Stimulus utilizza tre concetti per realizzare questo: obiettivi, controllori, e Azioni.
Ma prima di andare troppo avanti, andiamo avanti e facciamo in modo che Stimulus funzioni sul tuo computer!
Questa configurazione presuppone che tu abbia già installato una versione recente di NodeJS sul tuo computer. Vai su nodejs.org se non lo hai già fatto.
Useremo una statica di base index.html file che inizialmente assomiglierà a questo:
Nota: In questo tutorial non copriremo in alcun modo i processi di styling o di creazione per il CSS.
Quindi, creare una cartella chiamata src. All'interno di src, crea un'altra cartella chiamata controllori e un singolo index.js file.
Utilizzeremo Webpack per creare la nostra applicazione JavaScript, poiché Stimulus utilizza alcune funzionalità avanzate di JavaScript che non funzionano direttamente nei browser.
Crea un file nella radice del tuo progetto chiamato package.json che ha il seguente contenuto:
"name": "wdstimulus", "version": "1.0.0", "description": "Stimulus Introduction", "scripts": , "author": "Your Name", "license": "ISC "," devDependencies ": " @ babel / core ":" ^ 7.0.0-beta.39 "," @ babel / preset-env ":" ^ 7.0.0-beta.39 "," babel-loader " : "^ 8.0.0-beta.0", "babel-preset-stage-0": "^ 6.24.1", "stimulus": "^ 1.0.0", "webpack": "^ 3.10.0"
Nota: queste versioni cambieranno in futuro e ti consigliamo di tenerti aggiornato con l'ultima versione di qualsiasi strumento per quanto possibile.
Puoi anche generare questo file usando npm init e installando le dipendenze una per una usando npm install [nome-pacchetto].
Questo file include tutto ciò di cui abbiamo bisogno per creare una build compatibile con il browser della nostra applicazione Stimulus. Dalla radice dell'applicazione, eseguire installazione di npm. Questo installerà queste dipendenze nel node_modules directory all'interno della tua applicazione.
Successivamente, creeremo un file di configurazione in modo che Webpack sappia cosa vogliamo che faccia con i nostri file quando li salviamo. Nella stessa directory radice in cui il package.json si trova, ha creato un file chiamato webpack.config.js, e aggiungi questi contenuti:
module.exports = module: rules: [test: /\.js$/, exclude: / (node_modules) /, usa: loader: 'babel-loader', opzioni: preimpostazioni: ["@ babel / env "], plugin: [" transform-class-properties "];
Questo file dice essenzialmente a Webpack di compilare il nostro JavaScript usando il preset env. Abbiamo il preset stage-0 disponibile nei nostri moduli di nodo e abbiamo anche aggiunto il plug-in delle proprietà di classe di trasformazione richiesto.
L'ultimo passo per essere pronti per un'applicazione Stimulus è compilare il nostro index.js file con il seguente contenuto:
Accentsconagua
import Application da "stimulus" import definitionsFromContext da "stimulus / webpack-helpers" const application = Application.start () const context = require.context ("./ controller", true, /\.js$/) application.load (definitionsFromContext (contesto))Questo codice proviene direttamente dai documenti di Stimulus. Esegue un po 'di magia per permetterci di utilizzare una struttura di denominazione convenzionale durante la creazione del nostro codice dell'applicazione.
La denominazione dei file in realtà è importante per lo stimolo se si utilizza questo index.js codice (questa sfumatura è qualcosa che gli sviluppatori Rails troveranno familiare).
Ora che siamo tutti pronti, assicuriamoci che la nostra build Webpack funzioni. Dalla directory root, eseguire il seguente comando:
npx webpack src / index.js dist / bundle.js --watch
Il NPX parte di questo comando è un modo conveniente di eseguire i binari che si trovano nel node_modules directory. Questo comando controllerà le modifiche ai file JavaScript e ricostruirà l'applicazione mentre apporti tali modifiche.
Finché non vedi errori nella tua console, sei a posto!
Se hai familiarità con Rails o Laravel, il concetto di controller potrebbe essere facile da adottare per te.
Pensa a un controller nel caso di Stimulus come una classe JavaScript che contiene alcuni metodi e dati che funzionano insieme.
Un controller potrebbe essere simile a questo in Stimulus:
// src / controllers / refreshable_controller.js import Controller da "stimulus" esporta la classe predefinita estende Controller
Ci sono alcuni punti importanti da notare su questo controller. Innanzitutto, il controller è sia HTML che JavaScript. Il dati-controllore l'attributo è ciò che dice al JavaScript di creare una nuova istanza della classe.
Un'altra caratteristica interessante da notare è il fatto che il nome della classe non si trova da nessuna parte nella classe controller stessa. Questo succede a causa della linea application.load (definitionsFromContext (contesto)) nel index.js file. Questa riga carica il codice dell'applicazione e utilizza i nomi dei file dedurre nomi di classe. All'inizio potrebbe essere fonte di confusione, ma una volta che inizi a usare regolarmente questa convenzione, diventa molto più fluido.
Un azione è ciò che sembra: una procedura che si desidera eseguire dopo un particolare evento da un utente. Per il nostro controller di aggiornamento, vogliamo eseguire un aggiornamento di una particolare area di contenuto quando si fa clic su un pulsante. In questo caso, la nostra azione potrebbe essere chiamata ricaricare.
// src / controller / refreshable_controller.js import Controller da "stimulus" esporta la classe predefinita estende Controller refresh () console.log ("aggiorna!")Ma avere questo metodo di azione disponibile nel nostro controller non fa nulla. Dobbiamo collegarlo al nostro HTML.
Quando l'utente fa clic sul pulsante in questo codice HTML, eseguirà l'azione di aggiornamento nel controller.
Ora, come possiamo usare questa azione per fare qualcosa sulla pagina?
Stimulus utilizza anche un concetto chiamato "Obiettivi" per connettersi a elementi importanti nella pagina. Lo useremo per gestire un elemento contenitore che contiene il contenuto che vogliamo aggiornare.
// src / controllers / refreshable_controller.js import Controller da "stimulus" esporta la classe predefinita estende Controller static targets = ["contenuto"] refresh () this.contentTarget.innerHTML = "Aggiorna!"
In questo esempio, abbiamo tutti e tre i concetti di stimolo rappresentati. UN aggiornabile controller, a ricaricare azione e a soddisfare bersaglio.
Se stai osservando da vicino, vedrai qualcosa in questo codice che potrebbe sorprenderti: manipolazione diretta del DOM. Questo è un modo in cui Stimulus è diverso dagli altri framework. La manipolazione diretta degli elementi DOM non è solo possibile, è incoraggiata.
Questo significa anche che se sei esperto in jQuery o vanilla JavaScript e nelle API del browser, puoi sfruttare questa conoscenza! Ad esempio, una versione basata su jQuery del metodo di aggiornamento potrebbe avere il seguente aspetto:
// src / controllers / refreshable_controller.js import Controller da "stimulus" import $ da 'jquery'; // richiede l'aggiunta di jQuery alla classe di esportazione package.json extends Controller static targets = ["content"] refresh () let target = this.contentTarget; $ .get ("/ content", function (content) $ (target) .html (content))Lo stimolo non interferisce se si desidera utilizzare altri strumenti con cui si ha già familiarità.
Ora disponi di informazioni sufficienti per iniziare a creare più applicazioni gestibili con Stimulus! Gli sviluppatori che hanno creato Stimulus ci ricordano che le regole e le tendenze possono essere violate e talvolta possiamo staccare le "migliori pratiche" e fare qualcosa che funziona per noi.
Goditi le immersioni in Stimulus!
Abbiamo creato una guida completa per aiutarti a imparare JavaScript, sia che tu stia appena iniziando come sviluppatore web o che desideri esplorare argomenti più avanzati.
