Stimulus.js: JS Framework vaihtoehto Rails-sovelluksille

Tiedän, mitä ajattelet... Toinen. JavaScript puitteet? Niitä on jo niin paljon! Olet oikeassa, mutta tämä kiinnitti huomioni, koska sen on luonut Basecamp. Tunnet luultavasti tämän yrityksen, he ovat luojia Ruby on Rails. He loivat myös Turbolinks, Mainitsen tämän, koska Stimulus sopii sen kanssa erinomaisesti yhteen. Ehkä kannattaa siis kokeilla Stimulusta?

Miten se toimii?

Stimulus toimii tarkkailemalla sivua, odottamalla, että data-controller attribuutti näkyy. Osoite data-controller arvo yhdistää ja katkaisee Stimulus-säätimet. Lähtökohta on yksinkertainen: aivan kuten luokka on yhteys HTML:n ja CSS:n välillä, data-controller on silta HTML:stä JavaScript:hen. Stimulus lisää myös data-action attribuutti, joka kuvaa, miten sivun tapahtumien tulisi käynnistää ohjaimen metodit, ja attribuutti data-target attribuutti, jonka avulla voit etsiä elementtejä ohjaimen alueelta.

Helppo asennus

Jos Rails-sovelluksesi käyttää webpacker-helmeä, voit asentaa Stimuluksen yhdellä yksinkertaisella komennolla, sillä webpacker-helmi tarjoaa tehtävän Stimuluksen asentamista varten. Suorita vain seuraava komento Railsin juurihakemistossa:

rails webpacker:install:stimulus
Tämä lisää Stimulusta package.json ja luo seuraavat kaksi tiedostoa: app/javascript/controllers/index.js:

import { Application } from "stimulus"
import { definitionsFromContext } from "stimulus/webpack-helpers"

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

Näet, että webpackin require.context-apuohjelmaa kutsutaan. Sen jälkeen se välittää tuloksena saadun kontekstin Application#load-metodille. Tämä tarkoittaa, että sovelluksemme etsii tiedostoja nimeltä[identifier]_controller.js vuonna app/javascript/controllers/ hakemistoon, jossa tunniste vastaa ohjaimen data-controller-tunnistetta HTML-kielessäsi. Tämä on juuri se paikka, johon meidän pitäisi sijoittaa Stimulus-säätimet.
Sovellus/javascript/controllers/hello_controller.js syntyy myös. Tämä on vain esimerkkiohjain, jolla voimme leikkiä.

Peruskäyttö

Okei, meillä on siis hello_controller.js tiedosto, joka on luotu seuraavalla tavalla koodi:

import { Controller } from "stimulus"

export default class extends Controller {
static targets = ["output"]
connect() {
this.outputTarget.textContent = 'Hello, Stimulus!'
}
}

Mutta kuten tiedätte, emme näe mitään vaikutuksia, jos emme tee yhteyttä HTML:n ja JavaScript:n välillä. Lisätään koodia HTML-näkymään. Voit laittaa tämän milloin tahansa:

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

Ja tiedättekö mitä? Siinä kaikki! Jos lataat sivusi uudelleen ja näet sivulla "Hei, Stimulus!", se tarkoittaa, että yhteys toimii oikein. Eikö olekin yksinkertaista?
Okei, mutta tämä on vain pelkkä tekstinäyttö. Voimmeko saada jotain toimintaa? Kyllä, voimme! Kuten aiemmin mainitsin, on myös data-action ominaisuus. Muutetaan sitten HTML-näkymää:

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

Ja Stimulus-ohjain app/javascript/controllers/hello_controller.js:

import { Controller } from "stimulus"

export default class extends Controller {
static targets = ["output", "days"]
connect() {
this.outputTarget.textContent = "Kuinka kauan olet ollut karanteenissa?
}
calculate() {
const element = this.daysTarget
const days = element.value
const lockdownDays = 14
let daysLeft = lockdownDays - days

if (daysLeft < 1) {
  alert('Olet vapaa!')
}
else {
  alert(`Määrä päiviä, jotka sinun on oltava karanteenissa: ${daysLeft}`)
}

}
}

Tässä meillä on hyvin yksinkertainen sovellus, joka laskee, kuinka kauan meidän on oltava karanteenissa. Onnistuimme tekemään tämän käyttämällä HTML:n data-action-attribuuttia.
Voit nähdä, että lisäsimme myös "päivät" JavaScript-koodin kohdeluetteloon. Kun teemme näin, Stimulus luo automaattisesti tiedoston this.daysTarget ominaisuus, joka palauttaa ensimmäisen vastaavan kohde-elementin.

Mitä muuta sinun tarvitsee tietää?

Takaisinkutsut

Olet varmaan huomannut, että on olemassa connect() menetelmä molemmissa esimerkeissä. Tämä on tarkoitettu sisäänrakennettuja takaisinkutsuja varten. Sinun pitäisi tuntea ne kaikki ja niiden elinkaari, joten tässä ne ovat:
alustaa: kerran, kun ohjain otetaan käyttöön ensimmäistä kertaa,
Yhdistä: aina kun ohjain on liitetty DOM:iin,
katkaise yhteys: aina kun ohjain irrotetaan DOM:sta.

Toiminnan kuvaaja

The data-action arvo click->hello#calculate kutsutaan toimintakuvaajaksi. Tämä kuvaus kertoo, että:

• klikkaa on tapahtuman nimi,
• Hei on ohjaimen tunniste,
• laske on menetelmän nimi.

Kohteet

Aivan kuten toiminnoilla, myös Stimuluksella on kohdekuvaaja. . hello.days kuvaaja sanoo, että: Hei on ohjaimen tunniste,
päivät on kohteen nimi.

Edellisessä esimerkissä mainitsin, että Stimulus luo this.daysTarget ominaisuus, kun kohdeluettelossa on "days". Sinun on myös tiedettävä, että ominaisuuksia voidaan luoda lisää. Esimerkkiin liittyen sinulla voi olla:

this.daysTarget joka evaluoi ohjaimen vaikutusalueen ensimmäiseen kohteeseen asti. Jos kohdetta ei ole, ominaisuus ilmoittaa virheestä,
this.daysTargets arvioi kaikkien ohjaimen vaikutusalueella olevien lähdekohteiden joukon,
this.hasDaysTarget palauttaa true, jos kohde on olemassa, tai false, jos ei ole.

Kuten näet, Stimulus on yksinkertainen ja se voidaan helposti lisätä sovellukseesi. Se on saamassa suosiota RoR-yhteisössä, enkä ole yllättynyt. Itse Ruby-kehittäjänä nautin todella paljon Stimuluksen kanssa työskentelystä. Mitäpä jos kokeilisit sitä?

Lue lisää:

• Web-sovellusten kehittäminen: Miksi Ruby on Rails on valitsemisen arvoinen teknologia?
• On uuden todellisuuden aika. Etätyön aikakausi on alkanut kuukausi sitten
• 5 syytä, miksi löydät päteviä Ruby-kehittäjiä Puolasta