StimulusReflex - szybki sposób na tworzenie aplikacji reaktywnych

Jest to nowy sposób tworzenia reaktywnego interfejsu użytkownika w Ruby on Rails.
StimulusReflex rozszerza możliwości Rails i Stimulus poprzez przechwytywanie interakcji użytkownika i przekazywanie ich do Rails przez websockets w czasie rzeczywistym. Strony są szybko renderowane, a wszystkie aktualizacje są wysyłane do klienta za pośrednictwem CableReady.

CableReady pozwala na tworzenie aktualizacji w czasie rzeczywistym poprzez wyzwalanie zmian DOM po stronie klienta, zdarzeń i powiadomień poprzez ActionCable. W przeciwieństwie do Ajax, operacje nie zawsze są inicjowane przez użytkownika innej przeglądarki, na przykład mogą być również inicjowane przez pracowników.

StimulusReflex został pierwotnie zainspirowany LiveView Phoenixa (alternatywa dla SPA). Celem StimulusReflex zawsze było uczynienie budowania nowoczesnych aplikacji z Railsami najbardziej produktywną i przyjemną opcją. I moim zdaniem jest to dokładnie to, co osiągnęli tutaj.

Dlaczego powinniśmy używać StimulusReflex?

To proste, skupić się na rozwijaniu produkt zamiast wprowadzać konsekwentne zmiany w nowoczesnych JavaScript. Również, StimulusReflex aplikacje są proste, zwięzłe i jasne kod i bezproblemową integrację z Ruby on Rails. Pozwala to małym zespołom RoR robić duże rzeczy nawet bez dużej wiedzy na temat React, Vue lub ich nowoczesne rozwiązania JavaScript.

Jak działa StimulusReflex?

Refleks

Refleks to transakcyjna aktualizacja interfejsu użytkownika, która odbywa się za pośrednictwem trwałego otwartego połączenia z serwerem. StimulusReflex mapuje żądania do Refleks klasa. Refleks klasy znajdują się w app/reflexes katalog.

 class PostReflex < ApplicationReflex
 koniec


Jeśli utworzymy klasę Reflex z generatorem, zobaczymy, że nasza klasa zawiera ten komentarz:

# Wszystkie instancje Reflex zawierają CableReady::Broadcaster i udostępniają następujące właściwości:
  #
  # - connection - połączenie ActionCable,
  # - channel - kanał ActionCable,
  # - request - proxy ActionDispatch::Request dla połączenia socket,
  # - session - magazyn ActionDispatch::Session dla bieżącego gościa,
  # - flash - ActionDispatch::Flash::FlashHash dla bieżącego żądania,
  # - url - adres URL strony, która wywołała odruch,
  # - params - parametry z najbliższej formy elementu (jeśli istnieją),
  # - element - obiekt typu Hash reprezentujący element HTML, który wywołał odruch,
  # - signed - używa podpisanego identyfikatora globalnego do mapowania zestawu danych przypisanego do modelu, np. element.signed[:foo],
  # - unsigned - używa niepodpisanego identyfikatora globalnego do mapowania zestawu danych przypisanego do modelu, np. element.unsigned[:foo],
  # - cable_ready - specjalny cable_ready, który może nadawać do bieżącego gościa (bez nawiasów),
  # - reflex_id - UUIDv4, który jednoznacznie identyfikuje każdy Reflex.

Jak widzimy, istnieje kilka właściwości, które można wykorzystać w naszej klasie. Najbardziej interesująca na początku będzie właściwość element która zawiera wszystkie atrybuty elementu DOM kontrolera Stimulus, a także inne właściwości, takie jak tagName, sprawdzony i wartość.

StimulusReflex daje nam również zestaw wywołań zwrotnych, które pozwalają nam kontrolować procesy naszego odruchu:

• before_reflex
• around_reflex
• after_reflex

Jak widać, nazewnictwo jest bardzo podobne do wywołań zwrotnych Active Record.

Deklarowanie Reflex w HTML z atrybutem data

Najszybszym sposobem na włączenie akcji Reflex jest użycie opcji data-reflex atrybut. Składnia jest zgodna z formatem Stimulus: [DOM-event]->[ReflexClass]#[action]

"="">Dokumentacja StimulusReflex. Podziękowania dla wszystkich osób zaangażowanych w rozwój StimulusReflex!

W tym przykładzie data-reflex atrybut wskazywał na PostRefex klasa i przyrost metoda na kliknięcie wydarzenie. Tutaj również przeszliśmy data-post-id które możemy później wykorzystać w klasie Reflex poprzez element.dataset[:post_id].

class PostsReflex < ApplicationReflex
def increment
post = Post.find(element.dataset[:post_id])

post.increment! :likes
end
end

Morfy

Domyślnie, StimulusReflex aktualizuje całą stronę (Page morph). Po ponownym przetworzeniu akcji kontrolera, wyrenderowaniu szablonu widoku i wysłaniu nieprzetworzonego kodu HTML do przeglądarki, StimulusReflex używa funkcji morfdom aby wykonać najmniejszą liczbę modyfikacji DOM niezbędnych do odświeżenia interfejsu użytkownika w ciągu zaledwie kilku milisekund.

StimulusReflex oferuje trzy różne tryby działania:

Page Morph - wykonuje aktualizację całostronicową,
Selektor Morph - zastępuje zawartość elementu,
Nic Morph - wykonuje funkcje, które nie aktualizują strony (na przykład wywołanie pracownika).

Aby zmienić nasze PostReflex#increment możemy po prostu użyć metody morf i wybierz część, którą chcemy zaktualizować.

def increment
post = Post.find(element.dataset[:post_id])
post.increment! :likes

morph "#posts_#{post.id}", render(partial: 'post', locals: { posts: post })
end

Moje przemyślenia

To dość krótkie wprowadzenie wystarczy, aby rozpocząć swoją przygodę z reaktywnymi Railsami. StimulusReflex. Czy to nie wspaniałe móc stworzyć reaktywną aplikację SPA za pomocą zaledwie kilku linii Ruby i bez JavaScript? Dla mnie cały ten pomysł HTML over-the-wire jest ekscytujący i na pewno zagłębię się w ten temat w przyszłości. Na razie gorąco polecam Dokumentacja StimulusReflex. Podziękowania dla wszystkich osób zaangażowanych w rozwój StimulusReflex!

Czytaj więcej:

Dlaczego (prawdopodobnie) powinieneś używać Typescript

Jak nie zabić projektu złymi praktykami kodowania?

Strategie pobierania danych w NextJS