StimulusReflex - en hurtig måde at skabe reaktive apps på

Det er en ny måde at skabe en reaktiv brugergrænseflade i Ruby on Rails.
StimulusReflex udvider mulighederne i Rails og Stimulus ved at opfange brugerinteraktioner og sende dem til Rails via websockets i realtid. Siderne gengives hurtigt, og alle opdateringer sendes til klienten via CableReady.

CableReady gør det muligt at skabe opdateringer i realtid ved at udløse DOM-ændringer på klientsiden, begivenheder og meddelelser via ActionCable. I modsætning til Ajax igangsættes operationer ikke altid af brugeren, f.eks. kan de også igangsættes af arbejdere.

StimulusReflex var oprindeligt inspireret af Phoenix' LiveView (et alternativ til SPA). StimulusReflex' mål har altid været at gøre opbygning af moderne apps med Rails til den mest produktive og fornøjelige mulighed, der findes. Og efter min mening er det præcis, hvad de har opnået her.

Hvorfor skal vi bruge StimulusReflex?

Det er enkelt at fokusere på at udvikle en produkt i stedet for at indføre konsekvente ændringer i moderne JavaScript. Det gælder også, StimulusReflex applikationer har enkle, kortfattede og klare Kode og integreres problemfrit med Ruby on Rails. Det gør det muligt for små RoR-hold at gøre store ting, selv uden stor viden om React, Vue eller deres moderne JavaScript-løsninger.

Hvordan virker StimulusReflex?

Refleks

Refleks er en transaktionsbaseret opdatering af brugergrænsefladen, der finder sted via en vedvarende åben forbindelse til serveren. StimulusReflex mapper anmodninger til Refleks klasse. Refleks klasser er i app/reflexer bibliotek.

 class PostReflex < ApplikationsReflex
 slut


Hvis vi opretter Reflex-klassen med en generator, kan vi se, at vores klasse indeholder denne kommentar:

# Alle Reflex-instanser inkluderer CableReady::Broadcaster og udstiller følgende egenskaber:
  #
  # - connection - ActionCable-forbindelsen,
  # - channel - ActionCable-kanalen,
  # - request - en ActionDispatch::Request-proxy for socket-forbindelsen,
  # - session - ActionDispatch::Session-lageret for den aktuelle besøgende,
  # - flash - ActionDispatch::Flash::FlashHash for den aktuelle anmodning,
  # - url - URL'en til den side, der udløste refleksen,
  # - params - parametre fra elementets nærmeste formular (hvis nogen),
  # - element - et Hash-lignende objekt, der repræsenterer det HTML-element, der udløste refleksen,
  # - signed - bruger et signeret globalt ID til at mappe datasæt, der tilskrives en model, f.eks. element.signed[:foo],
  # - unsigned - bruger et unsigned Global ID til at kortlægge datasæt, der tilskrives en model, f.eks. element.unsigned[:foo],
  # - cable_ready - en særlig cable_ready, der kan sende til den aktuelle besøgende (ingen parenteser er nødvendige),
  # - reflex_id - en UUIDv4, der entydigt identificerer hver refleks.

Som vi kan se, er der kun få egenskaber, der kan bruges i vores klasse. Den mest interessante i begyndelsen er element der indeholder alle Stimulus-controllerens DOM-elementattributter samt andre egenskaber, som f.eks. tagnavn, kontrolleret og værdi.

StimulusReflex giver os også et sæt tilbagekaldelser, så vi kan styre vores refleksers processer:

• før_refleks
• omkring_reflex
• efter_refleks

Som du kan se, er navngivningen meget lig Active Record Callbacks.

Deklaration af en refleks i HTML med data-attribut

Den hurtigste måde at aktivere Reflex-handlinger på er ved at bruge data-refleks attribut. Syntaksen følger Stimulus-formatet: [DOM-event]->[ReflexClass]#[action]

"="">StimulusReflex-dokumentation. Shoutout til alle, der har været involveret i udviklingen af StimulusReflex!

I dette eksempel er data-refleks attributten pegede på PostRefex klassen og forøgelse metode på klik begivenhed. Her sendte vi også data-post-id som vi senere kan bruge i Reflex-klassen gennem element.dataset[:post_id].

class PostsReflex < ApplikationsReflex
def forøgelse
post = Post.find(element.dataset[:post_id])

post.increment! :likes
end
end

Morfer

Som standard, StimulusReflex opdaterer hele siden (Page morph). Efter at have genbehandlet controller-handlingen, gengivet visningsskabelonen og sendt den rå HTML til din browser, bruger StimulusReflex Morfdom biblioteket til at foretage det mindste antal DOM-ændringer, der er nødvendige for at opdatere din brugergrænseflade på bare nogle få millisekunder.

StimulusReflex har tre forskellige funktionsmåder:

Page Morph - udfører en opdatering på hele siden,
Selector Morph - erstatter indholdet af et element,
Intet Morph - udfører funktioner, der ikke opdaterer din side (f.eks. at ringe til din medarbejder).

At ændre vores PostReflex#illæg metode, kan vi blot bruge morph og målrette den del, vi vil opdatere.

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

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

Mine tanker

Denne ganske korte introduktion er nok til at starte din rejse med reaktive Rails ved hjælp af StimulusReflex. Er det ikke fantastisk at kunne skabe en reaktiv SPA-app med blot nogle få Ruby-linjer og uden JavaScript? For mig er hele denne HTML-over-the-wire-idé spændende, og jeg vil helt sikkert grave i dette emne i fremtiden. Indtil videre kan jeg varmt anbefale dig StimulusReflex dokumentation. En stor tak til alle, der har været involveret i udviklingen af StimulusReflex!

Læs mere om det:

Hvorfor du (sandsynligvis) bør bruge Typescript

Hvordan dræber man ikke et projekt med dårlig kodningspraksis?

Strategier for at hente data i NextJS