StimulusReflex - rychlý způsob vytváření reaktivních aplikací

Jedná se o nový způsob vytváření reaktivního uživatelského rozhraní v oblasti Ruby na adrese Rails.
StimulusReflex rozšiřuje možnosti systémů Rails a Stimulus tím, že zachycuje interakce uživatelů a předává je systému Rails prostřednictvím webových soketů v reálném čase. Stránky jsou rychle překreslovány a všechny aktualizace jsou odesílány klientovi prostřednictvím CableReady.

CableReady umožňuje vytvářet aktualizace v reálném čase spouštěním změn DOM na straně klienta, událostí a oznámení prostřednictvím ActionCable. Na rozdíl od Ajaxu nejsou operace vždy iniciovány uživatelem jiného prohlížeče, mohou být iniciovány například i pracovníky.

StimulusReflex byl původně inspirován systémem LiveView společnosti Phoenix (alternativa k systému SPA). Cílem StimulusReflex vždy bylo, aby vytváření moderních aplikací pomocí Rails bylo co nejproduktivnější a nejpříjemnější. A přesně toho zde podle mého názoru dosáhli.

Proč bychom měli používat StimulusReflex?

Je to jednoduché, soustředit se na rozvoj produkt namísto zavádění důsledných změn v moderních JavaScript. Také, StimulusReflex aplikace mají jednoduché, stručné a jasné kód a bezproblémovou integraci s Ruby on Rails. To umožňuje malým RoR týmy dokázat velké věci i bez velkých znalostí o React, Vue nebo jejich moderní řešení JavaScript.

Jak StimulusReflex funguje?

Reflex

Reflex je transakční aktualizace uživatelského rozhraní, která probíhá přes trvale otevřené připojení k serveru. StimulusReflex mapuje požadavky na Reflex třída. Reflex třídy jsou v aplikace/reflexe adresář.

 třída PostReflex < ApplicationReflex
 end


Pokud vytvoříme třídu Reflex s generátorem, uvidíme, že naše třída obsahuje tento komentář:

# Všechny instance Reflex obsahují CableReady::Broadcaster a vystavují následující vlastnosti:
  #
  # - connection - připojení ActionCable,
  # - kanál - kanál ActionCable,
  # - request - proxy server ActionDispatch::Request pro připojení k soketu,
  # - session - úložiště ActionDispatch::Session pro aktuálního návštěvníka,
  # - flash - ActionDispatch::Flash::FlashHash pro aktuální požadavek,
  # - url - URL stránky, která vyvolala reflexi,
  # - params - parametry z nejbližšího formuláře prvku (pokud existují),
  # - element - objekt typu Hash, který představuje prvek HTML, který vyvolal reflexi,
  # - signed - používá podepsané globální ID k mapování datové sady přiřazené modelu, např. element.signed[:foo],
  # - unsigned - používá unsigned Global ID k mapování datové sady přiřazené modelu, např. element.unsigned[:foo],
  # - cable_ready - speciální cable_ready, který může vysílat aktuálnímu návštěvníkovi (není třeba závorek),
  # - reflex_id - UUIDv4, které jednoznačně identifikuje každý Reflex.

Jak vidíme, v naší třídě lze použít jen několik vlastností. Nejzajímavější na začátku bude prvek která obsahuje všechny atributy prvků DOM řadiče Stimulus a další vlastnosti, jako např. tagName, zkontrolováno a hodnota.

StimulusReflex také poskytuje nás soubor zpětných volání, který nám umožňuje řídit procesy reflexu:

• before_reflex
• around_reflex
• after_reflex

Jak vidíte, pojmenování je velmi podobné zpětným voláním aktivního záznamu.

Deklarace příznaku Reflex v jazyce HTML pomocí atributu data

Nejrychlejší způsob, jak povolit akce Reflex, je použít příkaz data-reflex přívlastek. Syntaxe se řídí formátem Stimulus: [DOM-event]->[ReflexClass]#[action]

"="">Dokumentace k nástroji StimulusReflex. Všem lidem, kteří se podíleli na vývoji StimulusReflex, patří dík!

V tomto příkladu je data-reflex atribut poukázal na PostRefex a třída přírůstek metoda na klikněte na událost. Zde jsme také předali data-post-id které můžeme později použít ve třídě Reflex prostřednictvím element.dataset[:post_id].

třída PostsReflex < ApplicationReflex
def increment
post = Post.find(element.dataset[:post_id])

post.increment! :likes
end
end

Morfy

Ve výchozím nastavení, StimulusReflex aktualizuje celou stránku (Stránka morf). Po opětovném zpracování akce kontroléru, vykreslení šablony zobrazení a odeslání surového HTML do prohlížeče použije StimulusReflex funkci morphdom knihovnu, která provede co nejmenší počet úprav DOM potřebných k obnovení uživatelského rozhraní během několika milisekund.

StimulusReflex má tři různé režimy provozu:

Stránka Morph - provede celostránkovou aktualizaci,
Selektor Morph - nahradí obsah prvku,
Nic Morph - provádí funkce, které neaktualizují stránku (například volání zaměstnance).

Změnit naše PostReflex#increment můžeme jednoduše použít metodu morph a zaměřte se na dílčí část, kterou chceme aktualizovat.

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

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

Moje myšlenky

Tento poměrně krátký úvod stačí k tomu, abyste mohli začít svou cestu s reaktivními systémy Rails pomocí StimulusReflex. Není skvělé mít možnost vytvořit reaktivní SPA aplikaci jen s několika řádky Ruby a bez JavaScript? Pro mě je celá tato myšlenka HTML over-the-wire vzrušující a určitě se v budoucnu budu tímto tématem zabývat. Prozatím vám vřele doporučuji Dokumentace StimulusReflex. Všem lidem, kteří se podíleli na vývoji StimulusReflex, patří dík!

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

Proč byste (pravděpodobně) měli používat Typescript

Jak nezničit projekt špatnými kódovacími postupy?

Strategie načítání dat v NextJS