Share
Stimulus är ett "blygsamt JavaScript-ramverk", byggt av folk på Basecamp som tog dig med Rails.
Det är på många sätt motsatsen till andra moderna ramar som finns tillgängliga idag. Medan du kanske ser några liknande begrepp och namngivning, är Stimulus väldigt annorlunda på några grundläggande sätt. Vi diskuterar dessa skillnader kort och bygger sedan vår första applikation med Stimulus.
Kärnbegreppen i många moderna ramar ligger i att skilja "tillstånd" från "DOM". På så sätt fungerar DOM endast som en klient för de uppgifter som den representerar.
Stimulus vänder detta koncept på huvudet och förlitar sig istället på DOM för att hålla tillståndet.
Vad detta i sista hand betyder är att Stimulus passar bäst för applikationer som tjänar HTML (istället för att integrera med ett JSON API).
Med Stimulus ser du inte HTML-mallar. Istället kommer du att se data-* attribut som ansluter HTML till JavaScript-programmet.
Detta betyder också att du inte kommer att se saker som varje eller Karta slingor som du kan se i Handlebars eller React.
Stimulus håller inte jobbet för att göra HTML om du inte uttryckligen skapar den funktionen.
Så Stimulus gör inte mallar. Snarere är det byggt för att koppla till handlingar och händelser som du tar på den främre änden av en applikation till styrenheter på baksidan.
Stimulus använder tre begrepp för att uppnå detta: mål, kontrollerare, och åtgärder.
Men innan vi går för långt in, låt oss gå och få Stimulus igång på din dator!
Den här inställningen förutsätter att du redan har installerat en ny version av NodeJS på din dator. Gå vidare till nodejs.org om du inte redan har gjort det här.
Vi använder en grundläggande statisk index.html fil som först kommer att se ut så här:
Notera: Vi kommer inte att täcka några styling eller byggprocesser för CSS i denna handledning.
Skapa sedan en mapp som heter src. Insidan av src, skapa en annan mapp som heter controllers och en singel index.js fil.
Vi använder Webpack för att skapa vår JavaScript-applikation, eftersom Stimulus använder vissa avancerade funktioner i JavaScript som inte fungerar direkt i webbläsare.
Skapa en fil i roten till ditt projekt som heter package.json som har följande innehåll:
"namn": "wdstimulus", "version": "1.0.0", "beskrivning": "Stimulus Introduktion", "Skript": , "Författare": "Ditt Namn", "Licens": "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"
Notera: Dessa versioner kommer att förändras i framtiden, och vi rekommenderar att du håller dig uppdaterad med den senaste versionen av något verktyg så mycket som är praktiskt.
Du kan även generera den här filen med npm init och installera beroenden en efter en med npm installera [paketnamn].
Den här filen innehåller allt vi behöver för att skapa en webbläsarkompatibel byggnad av vår Stimulus-applikation. Rulla från applikationsroten npm installera. Detta installerar dessa beroenden i node_modules katalog i din ansökan.
Därefter skapar vi en konfigurationsfil så Webpack vet vad vi vill att det ska göra med våra filer när vi sparar dem. I samma rotkatalog där package.json ligger, skapade en fil som heter webpack.config.js, och lägg till följande innehåll:
module.exports = modul: rules: [test: /\.js$/, exkludera: / (node_modules) /, använd: loader: 'babel-loader', alternativ: presets: ["@ babel / env "], plugins: [" transform-class-properties "]];
Den här filen berättar väsentligen Webpack för att kompilera vår JavaScript med env-förinställningen. Vi har 0-förinställningen tillgänglig i våra nodmoduler, och vi har också lagt till det nödvändiga plugin-modulen för omvandlingsklassegenskaper.
Det sista steget att vara redo för en Stimulus-ansökan är att fylla i vår index.js fil med följande innehåll:
Accentsconagua
importera Application från "stimulus" import definitionsFromContext från "stimulus / webpack-helpers" const application = Application.start () const context = require.context ("./ controllers", true, /\.js$/) application.load (definitionsFromContext (kontext))Denna kod kommer direkt från Stimulus-dokumenten. Det utför lite magi för att tillåta oss att använda en konventionell namngivningsstruktur när vi skapar vår applikationskod.
Namnet på dina filer är faktiskt viktigt för Stimulus om du använder det här index.js kod (denna nyans är något Rails utvecklare kommer att hitta bekanta).
Nu när vi är redo, låt oss se till att vår Webpack-byggnad fungerar. Kör följande kommando i rotkatalogen:
npx webpack src / index.js dist / bundle.js - watch
De NPX En del av det här kommandot är ett bekvämt sätt att köra binärer som finns i node_modules katalogen. Detta kommando kommer att se ändringarna i dina JavaScript-filer och bygga om din ansökan när du gör de här ändringarna.
Så länge du inte ser fel i konsolen är du bra att gå!
Om du är bekant med Rails eller Laravel, kan konceptet kontroller vara enkelt att anta för dig.
Tänk på en kontroller när det gäller Stimulus som en JavaScript-klass som innehåller några metoder och data som fungerar tillsammans.
En kontroller kan se ut så här i Stimulus:
// src / controllers / refreshable_controller.js import Controller från "stimulus" export standardklass förlänger Controller
Det finns några viktiga punkter att notera om denna kontroller. Först är styrenheten både HTML och JavaScript. De datastyrenhet attributet är det som säger att JavaScript ska skapa en ny instans av klassen.
En annan intressant egenskap att märka är att klassnamnet inte finns någonstans i kontrollerklassen själv. Detta händer på grund av linjen application.load (definitionsFromContext (kontext)) i index.js fil. Denna rad laddar programkoden och använder filnamnen till antyda klassnamn. Det kan vara förvirrande först, men när du börjar använda konventionen regelbundet blir den mycket mer flytande.
En verkan är vad det låter som: ett förfarande som du vill göra efter en viss händelse från en användare. För vår uppdateringsregulator vill vi utföra en uppdatering av ett visst innehållsområde när en knapp klickas. I det här fallet kan vår åtgärd kallas refresh.
// src / controllers / refreshable_controller.js import Controller från "stimulus" export standardklass förlänger Controller refresh () console.log ("refresh!")Men bara med denna åtgärdsmetod som finns tillgänglig i vår kontroller gör ingenting. Vi måste ansluta den till vår HTML.
När användaren klickar på knappen i den här HTML-filen körs uppdateringsåtgärden i kontrollenheten.
Nu, hur kan vi använda den här åtgärden för att göra något på sidan?
Stimulus använder också ett koncept som heter "Mål" för att ansluta till viktiga delar på sidan. Vi använder det här för att hantera ett behållarelement som innehåller innehållet vi vill uppdatera.
// src / controllers / refreshable_controller.js import Controller från "stimulus" export standard klass förlänger Controller static targets = ["content"] refresh () this.contentTarget.innerHTML = "Uppdatera!"
I det här exemplet har vi alla tre begreppen Stimulus representerade. en uppdateringsbar controller, a refresh åtgärd och a innehåll mål.
Om du tittar noga ser du något i den här koden som kan få dig att vakna: direkt manipulation av DOM. Detta är ett sätt att Stimulus skiljer sig från andra ramar. Direkt manipulation av DOM-element är inte bara möjligt, det uppmuntras.
Detta innebär också att om du är välkänd i jQuery eller Vanilla JavaScript och API-läsare, kan du dra nytta av den kunskapen! En jQuery-driven version av uppdateringsmetoden kan till exempel se ut så här:
// src / controllers / refreshable_controller.js import Controller från "stimulus" import $ från "jquery"; // kräver att du lägger till jQuery till package.json export standardklass utökar Controller static targets = ["content"] refresh () let target = this.contentTarget; $ .get ("/ content", funktion (innehåll) $ (mål) .html (innehåll))Stimulus kommer inte i vägen om du vill använda andra verktyg du redan är bekant med.
Du har nu tillräckligt med information för att komma igång med att bygga mer underhållbara applikationer med Stimulus! Utvecklarna som skapade Stimulus påminner oss om att regler och trender kan brytas och ibland kan vi bryta sig bort från "bästa metoderna" och bara göra något som fungerar för oss.
Njut av att dyka i Stimulus!
Vi har byggt en komplett guide för att hjälpa dig att lära dig JavaScript, oavsett om du precis börjat som webbutvecklare eller vill utforska mer avancerade ämnen.
