StimulusReflex - ett snabbt sätt att skapa reaktiva appar

Det är ett nytt sätt att skapa reaktiva användargränssnitt i Ruby on Rails.
StimulusReflex utökar funktionerna i Rails och Stimulus genom att fånga upp användarinteraktioner och skicka dem till Rails via websockets i realtid. Sidorna renderas snabbt och alla uppdateringar skickas till klienten via CableReady.

CableReady gör det möjligt att skapa uppdateringar i realtid genom att utlösa DOM-ändringar, händelser och meddelanden på klientsidan via Handlingsbara. Till skillnad från Ajax initieras operationer inte alltid av användaren, till exempel en annan webbläsare, utan de kan också initieras av arbetare.

StimulusReflex var ursprungligen inspirerad av Phoenix LiveView (ett alternativ till SPA). StimulusReflex mål har alltid varit att göra byggandet av moderna appar med Rails till det mest produktiva och roliga alternativet som finns. Och enligt min mening är det exakt vad de uppnådde här.

Varför ska vi använda StimulusReflex?

Det är enkelt, att fokusera på att utveckla en Produkt istället för att införa konsekventa förändringar i moderna JavaScript. Också, StimulusReflex applikationerna är enkla, koncisa och tydliga kod och integreras sömlöst med Ruby on Rails. Detta gör att små RoR-team kan göra stora saker även utan stor kunskap om React, Vue eller deras moderna JavaScript-lösningar.

Hur fungerar StimulusReflex?

Reflex

Reflex är en transaktionell UI-uppdatering som sker via en ihållande öppen anslutning till servern. StimulusReflex mappar förfrågningar till Reflex klass. Reflex klasserna finns i app/reflexer katalog.

 klass PostReflex < ApplikationsReflex
 slut


Om vi skapar Reflex-klassen med en generator, kan vi se att vår klass innehåller denna kommentar:

# Alla Reflex-instanser inkluderar CableReady::Broadcaster och exponerar följande egenskaper:
  #
  # - anslutning - ActionCable-anslutningen,
  # - channel - ActionCable-kanalen,
  # - request - en ActionDispatch::Request-proxy för socketanslutningen,
  # - session - ActionDispatch::Session-lagret för den aktuella besökaren,
  # - flash - ActionDispatch::Flash::FlashHash för den aktuella begäran,
  # - url - URL:en för den sida som utlöste reflexen,
  # - params - parametrar från elementets närmaste formulär (om sådana finns),
  # - element - ett Hash-liknande objekt som representerar det HTML-element som utlöste reflexen,
  # - signed - använder ett signerat globalt ID för att mappa dataset som tillskrivs en modell, t.ex. element.signed[:foo],
  # - unsigned - använder ett osignerat globalt ID för att mappa dataset som tillskrivs en modell, t.ex. element.unsigned[:foo],
  # - cable_ready - en speciell cable_ready som kan sända till den aktuella besökaren (inga parenteser behövs),
  # - reflex_id - en UUIDv4 som unikt identifierar varje reflex.

Som vi kan se finns det några få egenskaper som kan användas i vår klass. Den mest intressanta i början kommer att vara element egenskap som innehåller alla Stimulus-kontrollantens DOM-elementattribut samt andra egenskaper, t.ex. taggNamn, kontrollerad och värde.

StimulusReflex ger oss också en uppsättning callbacks som gör att vi kan styra våra reflexprocesser:

• före_reflex
• runt_reflex
• efter_reflex

Som du kan se är namngivningen mycket lik Active Record Callbacks.

Deklarera en reflex i HTML med data-attribut

Det snabbaste sättet att aktivera reflexåtgärder är genom att använda data-reflex attribut. Syntaxen följer Stimulus-format: [DOM-händelse]->[ReflexClass]#[åtgärd]

"="">StimulusReflex dokumentation. Ett stort tack till alla som har deltagit i utvecklingen av StimulusReflex!

I detta exempel är data-reflex attribut pekade ut den PostRefex klassen och ökning metod på Klicka evenemang. Här passerade vi också data-post-id som vi senare kan använda i Reflex-klassen genom element.dataset[:post_id].

klass PostsReflex < ApplikationsReflex
def inkrementering
post = Post.find(element.dataset[:post_id])

post.inkrement! :gillar
slut
slut

Morphs

Som standard, StimulusReflex uppdaterar hela sidan (Page morph). Efter att ha bearbetat kontrolleråtgärden, rendering av visningsmallen och skickat den råa HTML till din webbläsare använder StimulusReflex Morfdom biblioteket för att göra det minsta antalet DOM-modifieringar som krävs för att uppdatera ditt användargränssnitt på bara några millisekunder.

StimulusReflex har tre olika driftlägen:

Page Morph - utför en helsidesuppdatering,
Selector Morph - ersätter innehållet i ett element,
Ingenting Morph - utför funktioner som inte uppdaterar din sida (t.ex. att ringa din medarbetare).

För att ändra våra PostReflex#illägg kan vi helt enkelt använda metoden morph sökord och rikta in dig på den del som vi vill uppdatera.

def inkrement
post = Post.find(element.dataset[:post_id])
post.inkrement! :gillar

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

Mina tankar

Denna ganska korta introduktion räcker för att börja din resa med reaktiva Rails med hjälp av StimulusReflex. Är det inte fantastiskt att kunna skapa en reaktiv SPA-app med bara några Ruby-rader och ingen JavaScript? För mig är hela denna HTML over-the-wire-idé spännande, och jag kommer definitivt att gräva i detta ämne i framtiden. För nu rekommenderar jag starkt till dig StimulusReflex dokumentation. En stor eloge till alla som har varit inblandade i utvecklingen av StimulusReflex!

Läs mer om detta:

Varför du (förmodligen) bör använda Typescript

Hur undviker man att döda ett projekt med dåliga kodningsrutiner?

Strategier för datahämtning i NextJS