Stimulus.js: Alternatywa frameworka JS dla aplikacji Railsowych

Wiem, co sobie myślisz... Kolejny JavaScript framework? Jest ich już tak wiele! Masz rację, ale ten przykuł moją uwagę, ponieważ został stworzony przez Basecamp. Prawdopodobnie znasz tę firmę, są twórcami Ruby on Rails. Stworzyli również Turbolinks, i wspominam o tym, ponieważ Stimulus pięknie się z nim łączy. Może więc warto wypróbować Stimulus?

Jak to działa?

Stimulus działa poprzez monitorowanie strony, czekając na kontroler danych atrybut do wyświetlenia. Atrybut kontroler danych łączy i rozłącza kontrolery Stimulus. Założenie jest proste: tak jak klasa jest połączeniem między HTML i CSS, kontroler danych jest pomostem z HTML do JavaScript. Stimulus dodaje również data-action atrybut, który opisuje, w jaki sposób zdarzenia na stronie powinny wyzwalać metody kontrolera, oraz data-target który daje uchwyt do wyszukiwania elementów w zakresie kontrolera.

Łatwa instalacja

Jeśli twoja aplikacja Rails korzysta z gemu webpacker, możesz zainstalować Stimulusa za pomocą jednego prostego polecenia, ponieważ gem webpacker zapewnia zadanie instalacji Stimulusa. Wystarczy uruchomić następujące polecenie w katalogu głównym Railsów:

rails webpacker:install:stimulus
To dodaje bodziec do package.json i tworzy następujące dwa pliki: 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))

Widać, że wywoływany jest helper require.context webpacka. Następnie przekazał on wynikowy kontekst do metody Application#load. Oznacza to, że nasza aplikacja szuka plików o nazwie[identyfikator]_controller.js w app/javascript/controllers/ gdzie identyfikator odpowiada identyfikatorowi kontrolera danych w kodzie HTML. Jest to dokładnie to miejsce, w którym powinniśmy umieścić kontrolery Stimulus.
Aplikacja/javascript/controllers/hello_controller.js jest również generowany. To tylko przykładowy kontroler, którym możemy się pobawić.

Użycie podstawowe

Ok, więc mamy hello_controller.js plik utworzony z następującymi elementami kod:

import { Controller } from "stimulus"

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

Ale, jak wiadomo, nie zobaczymy żadnych efektów, jeśli nie nawiążemy połączenia między HTML i JavaScript. Dodajmy trochę kodu do widoku HTML. Można go umieścić w dowolnym miejscu:

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

I wiesz co? To wszystko! Jeśli przeładujesz swoją stronę i zobaczysz na niej "Hello, Stimulus!", oznacza to, że połączenie działa poprawnie. Proste, prawda?
Ok, ale to tylko zwykłe wyświetlanie tekstu. Czy możemy mieć jakąś akcję? Tak, możemy! Jak wspomniałem wcześniej, istnieje również funkcja data-action atrybut. Następnie zmieńmy nasz widok HTML:

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

I kontroler bodźców app/javascript/controllers/hello_controller.js:

import { Controller } from "stimulus"

export default class extends Controller {
static targets = ["output", "days"]
connect() {
this.outputTarget.textContent = "Jak długo jesteś w kwarantannie?
}
calculate() {
const element = this.daysTarget
const days = element.value
const lockdownDays = 14
let daysLeft = lockdownDays - days

if (daysLeft < 1) {
  alert('Jesteś wolny!')
}
else {
  alert(`Ilość dni, które musisz pozostać na kwarantannie: ${daysLeft}`)
}

}
}

Tutaj mamy bardzo prostą aplikację, która oblicza, jak długo musimy pozostać w kwarantannie. Udało nam się to zrobić za pomocą atrybutu data-action w HTML.
Możesz zobaczyć, że dodaliśmy również "dni" do listy celów w kodzie JavaScript. Gdy to zrobimy, Stimulus automatycznie utworzy plik this.daysTarget która zwraca pierwszy pasujący element docelowy.

Co jeszcze musisz wiedzieć?

Wywołania zwrotne

Prawdopodobnie zauważyłeś, że istnieje connect() w obu przykładach. Ta dotyczy wbudowanych wywołań zwrotnych. Powinieneś znać je wszystkie i ich cykl życia, więc oto one:
inicjalizacja: raz, gdy kontroler jest tworzony po raz pierwszy,
połączenie: za każdym razem, gdy kontroler jest podłączony do DOM,
rozłączenie: za każdym razem, gdy kontroler jest odłączony od DOM.

Deskryptor działania

The data-action wartość kliknij->hello#calculate nazywany jest deskryptorem akcji. Deskryptor ten mówi, że:

• kliknięcie jest nazwą zdarzenia,
• cześć to identyfikator kontrolera,
• obliczać jest nazwą metody.

Cele

Podobnie jak w przypadku akcji, Stimulus posiada deskryptor celu. The hello.days deskryptor mówi, że: cześć to identyfikator kontrolera,
dni jest nazwą celu.

W poprzednim przykładzie wspomniałem, że Stimulus tworzy this.daysTarget gdy na liście celów znajduje się "days". Należy również wiedzieć, że można utworzyć więcej właściwości. W odniesieniu do przykładu, można mieć:

this.daysTarget która ocenia do pierwszego celu w zakresie kontrolera. Jeśli nie ma celu, właściwość zgłasza błąd,
this.daysTargets ocenia do tablicy wszystkich celów źródłowych w zakresie kontrolera,
this.hasDaysTarget zwraca wartość true, jeśli istnieje cel lub false, jeśli nie.

Jak widać, Stimulus jest prosty i można go łatwo dodać do aplikacji. Zdobywa popularność w społeczności RoR i nie jestem zaskoczony. Jako programista Ruby naprawdę lubię pracować ze Stimulusem. A może by tak spróbować?

Czytaj więcej:

• Tworzenie aplikacji internetowych: Dlaczego warto wybrać technologię Ruby on Rails?
• Czas na nową rzeczywistość. Miesiąc temu rozpoczęła się era pracy zdalnej
• 5 powodów, dla których w Polsce można znaleźć wykwalifikowanych programistów Ruby