Stimulus.js: Alternativa JS frameworku pro Rails aplikace

Vím, co si myslíte... Další JavaScript rámec? Už jich je tolik! Máte pravdu, ale tento mě zaujal, protože ho vytvořil Basecamp. Tuto společnost pravděpodobně znáte, jsou to tvůrci. Ruby na adrese Rails. Vytvořili také Turbolinky, a zmiňuji to proto, že Stimulus se s ním skvěle doplňuje. Takže možná stojí za to Stimulus vyzkoušet?

Jak to funguje?

Stimulus funguje tak, že sleduje stránku, čeká na data-controller se zobrazí atribut. Adresa data-controller hodnota připojuje a odpojuje řídicí jednotky Stimulus. Předpoklad je jednoduchý: stejně jako je třída spojením mezi HTML a CSS, data-controller je mostem z HTML do JavaScript. Stimulus také přidává data-action atribut, který popisuje, jak mají události na stránce spouštět metody kontroléru, a atribut data-target atribut, který vám poskytne rukojeť pro vyhledávání prvků v oboru kontroléru.

Snadná instalace

Pokud vaše aplikace Rails používá gem webpacker, můžete Stimulus nainstalovat jedním jednoduchým příkazem, protože gem webpacker poskytuje úlohu pro instalaci Stimulu. Stačí spustit následující příkaz v kořenovém adresáři Rails:

rails webpacker:install:stimulus
To přidává stimul k package.json a vytvoří následující dva soubory: app/javascript/controllers/index.js:

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

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

Vidíte, že je zavolán pomocný soubor require.context balíku Webpack. Výsledný kontext pak předal metodě Application#load. To znamená, že naše aplikace hledá soubory s názvem[identifier]_controller.js v app/javascript/controllers/ adresář, kde identifikátor odpovídá identifikátoru datového kontroléru ve vašem HTML. Přesně na toto místo bychom měli umístit řadiče Stimulus.
Aplikace/javascript/controllers/hello_controller.js je také generován. Toto je pouze příklad ovladače, se kterým si můžeme hrát.

Základní použití

Dobře, takže máme hello_controller.js soubor vytvořený pomocí následujícího kód:

import { Controller } z "stimulus"

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

Ale jak víte, pokud si HTML a JavaScript nespojíme, neuvidíme žádné účinky. Přidejme do zobrazení HTML nějaký kód. Ten můžete umístit, kdykoli budete chtít:

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

A víte co? To je všechno! Pokud stránku znovu načtete a na stránce se zobrazí nápis "Hello, Stimulus!", znamená to, že připojení funguje správně. Jednoduché, že?
Dobře, ale jedná se pouze o prosté zobrazení textu. Mohli bychom mít nějakou akci? Ano, můžeme! Jak jsem se již zmínil, existuje také data-action přívlastek. Změníme tedy naše zobrazení HTML:

<div data-controller="hello">
<p><input type="number" data-target="hello.days"><br><button data-action="click->hello#calculate">Výpočet</button></p>
</div>

A regulátor stimulačních opatření app/javascript/controllers/hello_controller.js:

import { Controller } z "stimulus"

export default class extends Controller {
static targets = ["output", "days"]
connect() {
this.outputTarget.textContent = 'Jak dlouho jste v karanténě?'
}
calculate() {
const element = this.daysTarget
const days = element.value
const lockdownDays = 14
let daysLeft = lockdownDays - days

if (daysLeft < 1) {
  alert('Jste volní!')
}
else {
  alert(`Počet dní, které musíte strávit v karanténě: ${daysLeft}`)
}

}
}

Zde máme velmi jednoduchou aplikaci, která vypočítá, jak dlouho musíme zůstat v karanténě. To se nám podařilo pomocí atributu data-action v HTML.
V kódu JavaScript můžete vidět, že jsme do seznamu cílů přidali také "dny". Když to uděláme, Stimulus automaticky vytvoří položku this.daysTarget vlastnost, která vrací první odpovídající cílový prvek.

Co ještě potřebujete vědět?

Zpětná volání

Pravděpodobně jste si všimli, že connect() v obou příkladech. Tato metoda je určena pro vestavěné zpětné volání. Měli byste je všechny znát a znát jejich životní cyklus, takže je zde najdete:
inicializovat: jednou, při první instanci kontroléru,
připojit: kdykoli je ovladač připojen k DOM,
odpojení: kdykoli je ovladač odpojen od DOM.

Deskriptor akce

Na stránkách data-action hodnota click->hello#calculate se nazývá deskriptor akce. Tento deskriptor říká, že:

• klikněte na je název události,
• Dobrý den, je identifikátor řadiče,
• vypočítat je název metody.

Cíle

Stejně jako u akcí má Stimulus deskriptor cíle. Na adrese . hello.days deskriptor říká, že: Dobrý den, je identifikátor řadiče,
dny je název cíle.

V předchozím příkladu jsem uvedl, že Stimulus vytváří. this.daysTarget vlastnost, když je v seznamu cílů položka "days". Musíte také vědět, že lze vytvořit více vlastností. V souvislosti s příkladem můžete mít:

this.daysTarget který vyhodnotí až první cíl v oboru kontroléru. Pokud žádný cíl neexistuje, vlastnost označí chybu,
this.daysTargets vyhodnotí až pole všech zdrojových cílů v oboru kontroléru,
this.hasDaysTarget vrací true, pokud existuje cíl, nebo false, pokud neexistuje.

Jak vidíte, Stimulus je jednoduchý a lze jej snadno přidat do aplikace. Získává si určitou popularitu v oblasti RoR komunita a já se tomu nedivím. Jako vývojář Ruby si práci se Stimulusem opravdu užívám. Tak co si ho vyzkoušet?

Přečtěte si více:

• Vývoj webových aplikací: Proč se vyplatí zvolit technologii Ruby on Rails?
• Je čas na novou realitu. Před měsícem začala éra práce na dálku
• 5 důvodů, proč najdete kvalifikované vývojáře Ruby v Polsku