StimulusReflex - en rask måte å lage reaktive apper på

Det er en ny måte å skape et reaktivt brukergrensesnitt i Ruby on Rails.
StimulusReflex utvider funksjonene til Rails og Stimulus ved å fange opp brukerinteraksjoner og sende dem til Rails via websockets i sanntid. Sidene blir raskt gjengitt på nytt, og alle oppdateringer sendes til klienten via CableReady.

CableReady gjør det mulig å lage sanntidsoppdateringer ved å utløse DOM-endringer på klientsiden, hendelser og varsler via ActionCable. I motsetning til Ajax initieres ikke operasjoner alltid av brukeren selv, de kan for eksempel også initieres av arbeidere.

StimulusReflex ble opprinnelig inspirert av Phoenixs LiveView (et alternativ til SPA). StimulusReflex' mål har alltid vært å gjøre det å bygge moderne apper med Rails til det mest produktive og morsomme alternativet som er tilgjengelig. Og etter min mening er det akkurat det de har oppnådd her.

Hvorfor bør vi bruke StimulusReflex?

Det er enkelt å fokusere på å utvikle en produkt i stedet for å innføre konsekvente endringer i moderne JavaScript. Også, StimulusReflex applikasjoner har enkle, konsise og tydelige kode og integreres sømløst med Ruby on Rails. Dette gjør det mulig for små RoR-team å gjøre store ting selv uten stor kunnskap om React, Vue eller deres moderne JavaScript-løsninger.

Hvordan fungerer StimulusReflex?

Refleks

Refleks er en transaksjonell UI-oppdatering som skjer via en vedvarende åpen tilkobling til serveren. StimulusReflex tilordner forespørsler til Refleks klasse. Refleks klassene er i app/reflexer katalog.

 class PostReflex < ApplicationReflex
 end


Hvis vi oppretter Reflex-klassen med en generator, kan vi se at klassen vår inneholder denne kommentaren:

# Alle Reflex-instanser inkluderer CableReady::Broadcaster og eksponerer følgende egenskaper:
  #
  # - connection - ActionCable-tilkoblingen,
  # - channel - ActionCable-kanalen,
  # - request - en ActionDispatch::Request-proxy for socket-tilkoblingen,
  # - session - ActionDispatch::Session-lageret for den gjeldende besøkende,
  # - flash - ActionDispatch::Flash::FlashHash for den gjeldende forespørselen,
  # - url - URL-adressen til siden som utløste refleksen,
  # - params - parametere fra elementets nærmeste skjema (hvis noen),
  # - element - et Hash-lignende objekt som representerer HTML-elementet som utløste refleksen,
  # - signed - bruker en signert global ID for å tilordne datasett som tilskrives en modell, f.eks. element.signed[:foo],
  # - unsigned - bruker en usignert global ID for å tilordne datasett til en modell, f.eks. element.unsigned[:foo],
  # - cable_ready - en spesiell cable_ready som kan kringkaste til den gjeldende besøkende (ingen parenteser er nødvendig),
  # - reflex_id - en UUIDv4 som identifiserer hver refleks på en unik måte.

Som vi kan se, er det noen få egenskaper som kan brukes i klassen vår. Den mest interessante i begynnelsen vil være element egenskap som inneholder alle DOM-elementattributtene til Stimulus-kontrolleren, samt andre egenskaper, som tagName, kontrollert og verdi.

StimulusReflex gir oss også et sett med tilbakeringinger som gjør at vi kan kontrollere refleksens prosesser:

• før_refleks
• rundt_reflex
• etter_refleks

Som du ser, er navngivningen svært lik Active Record Callbacks.

Deklarere en refleks i HTML med data-attributt

Den raskeste måten å aktivere Reflex-handlinger på er ved å bruke data-refleks attributtet. Syntaksen følger Stimulus-formatet: [DOM-hendelse]->[ReflexClass]#[handling]

"="">StimulusReflex-dokumentasjon. En stor takk til alle som har vært involvert i utviklingen av StimulusReflex!

I dette eksempelet er data-refleks attributtet pekte ut PostRefex klassen og økning metoden på klikk begivenhet. Her passerte vi også data-post-id som vi senere kan bruke i Reflex-klassen gjennom element.dataset[:post_id].

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

post.increment! :likes
end
end

Morphs

Som standard, StimulusReflex oppdaterer hele siden (Page morph). Etter å ha behandlet kontrollerhandlingen på nytt, gjengitt visningsmalen og sendt den rå HTML-koden til nettleseren, bruker StimulusReflex morfdom biblioteket for å gjøre det minste antallet DOM-modifikasjoner som er nødvendig for å oppdatere brukergrensesnittet på bare noen få millisekunder.

StimulusReflex har tre forskjellige driftsmodi:

Page Morph - utfører en helsides oppdatering,
Selector Morph - erstatter innholdet i et element,
Ingenting Morph - utfører funksjoner som ikke oppdaterer siden din (for eksempel å ringe medarbeideren din).

For å endre vår PostReflex#increment metoden, kan vi ganske enkelt bruke morph nøkkelordet og målrette den delen vi ønsker å oppdatere.

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

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

Mine tanker

Denne ganske korte introduksjonen er nok til å starte din reise med reaktive Rails ved hjelp av StimulusReflex. Er det ikke flott å kunne lage en reaktiv SPA-app med bare noen få Ruby-linjer og uten JavaScript? For meg er hele denne HTML over-the-wire-ideen spennende, og jeg kommer definitivt til å fordype meg i dette emnet i fremtiden. For nå anbefaler jeg deg på det sterkeste StimulusReflex-dokumentasjon. En stor takk til alle som har vært involvert i utviklingen av StimulusReflex!

Les mer om dette:

Derfor bør du (sannsynligvis) bruke Typescript

Hvordan unngår man å drepe et prosjekt med dårlig kodingspraksis?

Strategier for datahenting i NextJS