Stimulus.js: JS Framework alternatiiv Rails rakenduste jaoks: JS Framework Alternative for Rails Apps

Ma tean, mida te mõtlete... Teine JavaScript raamistik? Neid on juba nii palju! Teil on õigus, kuid see siin äratas mu tähelepanu, sest selle on loonud Basecamp. Ilmselt teate seda ettevõtet, nad on loojad Ruby on Rails. Nad lõid ka Turbolinke, ja ma mainin seda, sest Stimulus sobib sellega suurepäraselt kokku. Nii et võib-olla tasub Stimulust proovida?

Kuidas see toimib?

Stimulus töötab, jälgides lehte, oodates, et andmekontrolleri atribuut ilmuma. Veebileht andmekontrolleri väärtus ühendab ja katkestab Stimuluse kontrollerid. Eeldus on lihtne: nagu klass on ühendus HTML-i ja CSS-i vahel, andmekontrolleri on sild HTML-ist JavaScript-le. Stimulus lisab ka data-action atribuut, mis kirjeldab, kuidas lehel toimuvad sündmused peaksid käivitama kontrolleri meetodeid ja data-target atribuuti, mis annab teile käepideme elementide leidmiseks kontrolleri ulatusest.

Lihtne paigaldus

Kui teie Rails-rakendus kasutab veebipaketi pärlit, saate Stimuluse installida ühe lihtsa käsuga, kuna veebipaketi pärl pakub ülesannet Stimuluse installimiseks. Lihtsalt käivitage järgmine käsk oma Railsi juurkataloogis:

rails webpacker:install:stimulaator
See lisab stiimulit package.json ja loob järgmised kaks faili: 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äete, et veebipaketi require.context abimees on välja kutsutud. Seejärel edastatakse saadud kontekst meetodile Application#load. See tähendab, et meie rakendus otsib faile nimega[identifier]_controller.js aastal app/javascript/controllers/ kataloogi, kus identifikaator vastab kontrolleri andmete-kontrolleri identifikaatorile teie HTML-is. See on täpselt see koht, kuhu me peaksime Stimuluse kontrollerid panema.
Rakendus/javascript/controllers/hello_controller.js genereeritakse ka. See on vaid näide kontrollerist, millega me saame mängida.

Põhiline kasutamine

Okei, meil on siis hello_controller.js faili, mis on loodud järgmiselt kood:

import { Controller } from "stimulus"

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

Aga nagu te teate, ei näe me mingit mõju, kui me ei tee seost HTMLi ja JavaScript vahel. Lisame oma HTML-vaatesse koodi. Võite seda panna, millal iganes soovite:

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

Ja teate mis? See on kõik! Kui laadite oma lehe uuesti ja näete oma lehel "Tere, Stimulus!", tähendab see, et ühendus töötab korralikult. Lihtne, eks?
Ok, aga see on lihtsalt tavaline tekstinäit. Kas me saaksime natuke tegevust? Jah, saame! Nagu ma juba mainisin, on olemas ka data-action atribuut. Muudame siis meie HTML-vaadet:

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

Ja stiimulite kontroller app/javascript/controllers/hello_controller.js:

import { Controller } from "stimulus"

export default class extends Controller {
static targets = ["output", "days"]
connect() {
this.outputTarget.textContent = "Kui kaua olete olnud karantiinis?
}
calculate() {
const element = this.daysTarget
const days = element.value
const lockdownDays = 14
let daysLeft = lockdownDays - days

if (daysLeft < 1) {
  alert('Sa oled vaba!')
}
else {
  alert(`Päevade arv, mis teil on vaja karantiinis olla: ${daysLeft}`)
}

}
}

Siin on meil väga lihtne rakendus, mis arvutab, kui kaua me peame karantiinis olema. Me suutsime seda teha, kasutades HTML-is data-action atribuuti.
Näete, et me lisasime JavaScript koodis eesmärkide loetellu ka "päeva". Kui me seda teeme, loob Stimulus automaatselt this.daysTarget omadus, mis tagastab esimese sobiva sihtelemendi.

Mida on veel vaja teada?

Tagasikutsumine

Ilmselt olete märganud, et seal on connect() meetodit mõlemas näites. See on sisseehitatud tagasikutsumise jaoks. Sa peaksid teadma kõiki neid ja nende elutsüklit, nii et siin on nad:
initsialiseerida: üks kord, kui kontroller esimest korda instantseeritakse,
ühenda: alati, kui kontroller on ühendatud DOMiga,
katkestada: alati, kui kontroller on DOMist lahti ühendatud.

Tegevuse kirjeldus

The data-action väärtus click->hello#calculate nimetatakse tegevuse kirjeldajaks. See kirjeldus ütleb, et:

• kliki on sündmuse nimi,
• Tere on kontrolleri identifikaator,
• arvutada on meetodi nimi.

Eesmärgid

Nagu tegevuste puhul, on ka Stimulusel sihtmärgi kirjeldaja. . hello.days kirjeldus ütleb, et: Tere on kontrolleri identifikaator,
päevad on sihtmärgi nimi.

Eelmises näites mainisin, et Stimulus loob this.daysTarget omadus, kui sihtmärkide loetelus on "days". Samuti tuleb teada, et saab luua rohkem omadusi. Seoses näitega võib teil olla:

this.daysTarget mis hindab kuni esimese sihtmärgini kontrolleri mõjualas. Kui sihtmärki ei ole, annab omadus veamärguande,
this.daysTargets hindab kuni kõigi kontrolleri mõjualas olevate lähtekohustuste massiivi,
this.hasDaysTarget tagastab true, kui sihtmärk on olemas, või false, kui seda ei ole.

Nagu näete, on Stimulus lihtne ja seda saab hõlpsasti oma rakendusse lisada. See kogub RoRi kogukonnas populaarsust ja ma ei ole üllatunud. Ruby arendajana mulle endale meeldib väga töötada Stimulusega. Nii et kuidas oleks, kui võtaksite selle proovile?

Loe edasi:

• Veebirakenduse arendamine: Miks on Ruby on Rails tehnoloogia, mida tasub valida?
• Aeg on uue reaalsuse jaoks. Kaugtöö ajastu algas kuu aega tagasi
• 5 põhjust, miks leiad kvalifitseeritud Ruby arendajad Poolas