Share
Stimulus er et "beskjedent JavaScript-rammeverk", bygget av folkene på Basecamp som brakte deg Rails.
Det er på mange måter motsatt av andre moderne rammer som er tilgjengelige i dag. Mens du kanskje ser noen lignende begreper og navngivning, er Stimulus svært forskjellig på noen grunnleggende måter. Vi diskuterer disse forskjellene kort, og deretter bygger vår første applikasjon med Stimulus.
Kjernebegrepene i mange moderne rammer ligger i å skille "tilstand" fra "DOM". På denne måten fungerer DOM kun som klient til dataene den representerer.
Stimulus flipper dette konseptet på hodet, og i stedet stoler på DOM for å holde tilstanden.
Hva dette i siste instans betyr er at Stimulus passer best til programmer som tjener HTML (i stedet for, for eksempel, integrering med en JSON API).
Med Stimulus ser du ikke HTML-maler. I stedet vil du se data-* attributter som kobler HTML til JavaScript-applikasjonen.
Dette betyr også at du ikke vil se ting som Hver eller kart sløyfer som du kanskje ser i håndtak eller React.
Stimulus holder ikke jobben med å gjengi HTML med mindre du eksplisitt lager den funksjonaliteten.
Så Stimulus gir ikke maler. Snarere er det bygget for å koble til handlinger og hendelser du tar på forsiden av et program til kontroller på baksiden.
Stimulus bruker tre konsepter for å oppnå dette: mål, kontroller, og handlinger.
Men før vi kommer for langt inn, la oss gå videre og få Stimulus opp og kjører på datamaskinen din!
Dette oppsettet forutsetter at du allerede har installert en nylig versjon av NodeJS på datamaskinen. Gå over til nodejs.org hvis du ikke allerede har gjort dette.
Vi bruker en grunnleggende statisk index.html fil som først vil se slik ut:
Merk: Vi vil egentlig ikke dekke noen styling eller bygge prosesser for CSS i denne opplæringen.
Deretter oppretter du en mappe som heter src. Inni src, opprett en annen mappe som heter kontrollere og en singel index.js fil.
Vi bruker Webpack til å bygge vårt JavaScript-program, siden Stimulus bruker noen avanserte funksjoner i JavaScript som ikke fungerer direkte i nettlesere.
Opprett en fil i roten til prosjektet ditt package.json som har følgende innhold:
"navn": "wdstimulus", "versjon": "1.0.0", "beskrivelse": "Stimulus Introduksjon", "Skript": , "Forfatter": "Ditt Navn", "Lisens": "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-forhåndsinnstilt stadium-0": "^ 6.24.1", "stimulus": "^ 1.0.0", "webpack": "^ 3.10.0"
Merk: Disse versjonene vil endres i fremtiden, og vi anbefaler å holde deg oppdatert med den nyeste versjonen av verktøyet så mye som praktisk.
Du kan også generere denne filen ved hjelp av npm init og installere avhengighet en etter en ved hjelp av npm installere [pakke-navn].
Denne filen inneholder alt vi trenger for å lage en nettleser-kompatibel versjon av vår Stimulus-applikasjon. Kjør fra roten av programmet npm installasjon. Dette vil installere disse avhengighetene i node_modules katalog i søknaden din.
Deretter skal vi opprette en konfigurasjonsfil, slik at Webpack vet hva vi vil at det skal gjøre med våre filer når vi lagrer dem. I samme rotkatalog hvor package.json er plassert, opprettet en fil som heter webpack.config.js, og legg til dette innholdet:
module.exports = modul: rules: [test: /\.js$/, ekskluder: / (node_modules) /, bruk: loader: 'babel-loader', alternativer: presets: ["@ babel / env "], plugins: [" transform-class-properties "]];
Denne filen forteller i hovedsak Webpack å kompilere JavaScript ved å bruke env-forhåndsinnstillingen. Vi har forhåndsinnstilt scene 0 tilgjengelig i våre nodemoduler, og vi har også lagt til det nødvendige plugin-modulet for transform-klasseegenskaper.
Det siste skrittet for å være klar for en Stimulus-søknad er å fylle ut vår index.js fil med følgende innhold:
Accentsconagua
importere Application fra "stimulus" import definitionsFromContext fra "stimulus / webpack-helpers" const application = Application.start () const context = require.context ("./ controllers", true, /\.js$/) application.load (definitionsFromContext (konteksten))Denne koden kommer direkte fra Stimulus-dokumentene. Det utfører noe magi som gjør at vi kan bruke en konvensjonell navngivningsstruktur når du oppretter vår programkode.
Navngivningen av filene dine er faktisk viktig for Stimulus hvis du bruker dette index.js kode (denne nyansen er noe Rails utviklere vil finne kjent).
Nå som vi er satt opp, la oss sørge for at vår Webpack-bygge fungerer. Kjør følgende kommando fra rotkatalogen:
npx webpack src / index.js dist / bundle.js - watch
De NPX En del av denne kommandoen er en praktisk måte å kjøre binærfiler på node_modules katalogen. Denne kommandoen vil se endringer i JavaScript-filene dine og gjenoppbygge søknaden din når du gjør disse endringene.
Så lenge du ikke ser feil i konsollen, er du god til å gå!
Hvis du er kjent med Rails eller Laravel, kan konseptet kontroller være enkelt å adoptere for deg.
Tenk på en kontroller i tilfelle Stimulus som en JavaScript-klasse som inneholder noen metoder og data som fungerer sammen.
En kontroller kan se slik ut i Stimulus:
// src / controllers / refreshable_controller.js import Controller fra "stimulus" eksport standard klasse utvider Controller
Det er noen viktige punkter å merke seg om denne kontrolleren. For det første er kontrolleren både HTML og JavaScript. De data-kontrolleren Attributt er det som forteller JavaScript for å opprette en ny forekomst av klassen.
En annen interessant egenskap å merke seg er at klassenavnet ikke finnes overalt i kontrollerklassen selv. Dette skjer på grunn av linjen application.load (definitionsFromContext (konteksten)) i index.js fil. Denne linjen laster programkoden og bruker filnavnene til antyde klassenavn. Dette kan være forvirrende først, men når du begynner å bruke denne konvensjonen regelmessig, blir den mye mer flytende.
en handling er det det høres ut som: en prosedyre du vil finne sted etter en bestemt hendelse fra en bruker. For vår oppdateringsregulator ønsker vi å utføre en oppdatering av et bestemt innholdsområde når en knapp klikkes. I dette tilfellet kan vår handling bli kalt forfriske.
// src / controllers / refreshable_controller.js import Controller fra "stimulus" eksport standard klasse utvider Controller refresh () console.log ("refresh!")Men bare å ha denne handlingsmetoden tilgjengelig i vår kontroller gjør ikke noe. Vi må koble den til vår HTML.
Når brukeren klikker på knappen i denne HTML-en, vil den kjøre oppdateringshandlingen i kontrolleren.
Nå, hvordan kan vi bruke denne handlingen for å gjøre noe på siden?
Stimulus bruker også et konsept kalt "Mål" for å koble til viktige elementer på siden. Vi bruker dette til å administrere et beholderelement som inneholder innholdet vi vil oppdatere.
// Controller / Import / Controller
I dette eksemplet har vi alle tre konseptene Stimulus representert. EN lese kontrolleren, a forfriske handling og a innhold mål.
Hvis du ser nøye ut, ser du noe i denne koden som kan ta deg av vakt: direkte manipulering av DOM. Dette er en måte at Stimulus er forskjellig fra andre rammer. Direkte manipulering av DOM-elementer er ikke bare mulig, det oppfordres.
Dette betyr også at hvis du er kjent med jQuery eller vanilla JavaScript og nettleser-APIer, kan du dra nytte av den kunnskapen! For eksempel kan en jQuery-drevet versjon av oppdateringsmetoden se slik ut:
// src / controllers / refreshable_controller.js import Controller fra "stimulus" import $ fra 'jquery'; // krever at du legger til jQuery til package.json eksport standard klasse utvider Controller static targets = ["content"] refresh () let target = this.contentTarget; $ .get ("/ innhold", funksjon (innhold) $ (mål). html (innhold))Stimulus blir ikke i veien hvis du vil bruke andre verktøy du allerede er kjent med.
Du har nå nok info til å komme i gang med å bygge mer vedlikeholdbare applikasjoner med Stimulus! Utviklerne som skapte Stimulus, minner oss om at regler og trender kan brytes, og noen ganger kan vi bryte vekk fra "beste praksis" og bare gjøre noe som fungerer for oss.
Nyt dykking i Stimulus!
Vi har bygget en komplett guide for å hjelpe deg med å lære JavaScript, enten du er bare i gang som webutvikler eller du vil utforske mer avanserte emner.
