StimulusReflex: un modo rapido per creare applicazioni reattive

Si tratta di un nuovo modo di creare un'interfaccia utente reattiva in Ruby on Rails.
StimulusReflex estende le capacità di Rails e Stimulus catturando le interazioni degli utenti e passandole a Rails tramite websocket in tempo reale. Le pagine vengono rapidamente ri-renderizzate e tutti gli aggiornamenti vengono inviati al client tramite CableReady.

CableReady permette di creare aggiornamenti in tempo reale attivando modifiche al DOM lato client, eventi e notifiche tramite AzioneCabile. A differenza di Ajax, le operazioni non sono sempre avviate dall'utente dell'altro browser, ad esempio possono essere avviate anche dai lavoratori.

StimoloRiflesso è stato originariamente ispirato da LiveView di Phoenix (un'alternativa alla SPA). L'obiettivo di StimulusReflex è sempre stato quello di rendere la costruzione di applicazioni moderne con Rails l'opzione più produttiva e piacevole disponibile. E, a mio parere, questo è esattamente ciò che hanno raggiunto.

Perché utilizzare StimulusReflex?

È semplice, concentrarsi sullo sviluppo di una prodotto invece di introdurre cambiamenti coerenti nella moderna JavaScript. Inoltre, StimoloRiflesso Le applicazioni sono semplici, concise e chiare codice e si integrano perfettamente con Ruby on Rails. Ciò consente ai piccoli team RoR di fare grandi cose anche senza una grande conoscenza dell'React, Vue o le loro moderne soluzioni JavaScript.

Come funziona StimulusReflex?

Riflesso

Riflesso è un aggiornamento transazionale dell'interfaccia utente che avviene tramite una connessione aperta e persistente al server. StimulusReflex mappa le richieste a Riflesso classe. Riflesso Le classi sono nella cartella app/riflessi directory.

 classe PostReflex < ApplicationReflex
 fine


Se creiamo la classe Reflex con un generatore, possiamo vedere che la nostra classe contiene questo commento:

# Tutte le istanze di Reflex includono CableReady::Broadcaster ed espongono le seguenti proprietà:
  #
  # - connessione - la connessione ActionCable,
  # - canale - il canale ActionCable,
  # - request - un proxy ActionDispatch::Request per la connessione socket,
  # - session - l'archivio ActionDispatch::Session per il visitatore corrente,
  # - flash - l'ActionDispatch::Flash::FlashHash per la richiesta corrente,
  # - url - l'URL della pagina che ha attivato il riflesso,
  # - params - i parametri del modulo più vicino all'elemento (se presente),
  # - element - un oggetto di tipo Hash che rappresenta l'elemento HTML che ha attivato il riflesso,
  # - signed - utilizza un ID globale firmato per mappare i set di dati attribuiti a un modello, ad esempio element.signed[:foo],
  # - unsigned - utilizza un ID globale senza segno per mappare i set di dati attribuiti a un modello, ad esempio element.unsigned[:foo],
  # - cable_ready - un cable_ready speciale che può essere trasmesso al visitatore corrente (non sono necessarie parentesi),
  # - reflex_id - un UUIDv4 che identifica in modo univoco ogni reflex.

Come possiamo vedere, ci sono poche proprietà che possono essere utilizzate nella nostra classe. La più interessante all'inizio sarà la proprietà elemento che contiene tutti gli attributi dell'elemento DOM del controllore Stimulus e altre proprietà, come ad esempio nome del tag, controllato e valore.

StimoloRiflesso ci fornisce anche una serie di callback che ci permettono di controllare i processi del nostro riflesso:

• prima_riflesso
• intorno_al_riflesso
• dopo_riflesso

Come si può notare, la denominazione è molto simile a quella dei callback dei record attivi.

Dichiarazione di un riflesso in HTML con l'attributo data

Il modo più veloce per abilitare le azioni riflesse è quello di utilizzare il metodo dati-riflesso attributo. La sintassi segue il formato dello stimolo: [DOM-event]->[ReflexClass]#[action]

"="">Documentazione di StimulusReflex. Un saluto a tutte le persone coinvolte nello sviluppo di StimulusReflex!

In questo esempio, il dati-riflesso L'attributo ha evidenziato il Post-Refex e la classe incremento sul metodo clicca evento. Qui abbiamo anche passato dati-post-id che possiamo utilizzare in seguito nella classe Reflex attraverso element.dataset[:post_id].

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

post.increment! :likes
fine
fine

Morfismi

Per impostazione predefinita, StimoloRiflesso aggiorna l'intera pagina (Page morph). Dopo aver rielaborato l'azione del controllore, reso il modello di vista e inviato l'HTML grezzo al browser, StimulusReflex utilizza l'opzione morphdom per eseguire il minor numero di modifiche al DOM necessarie per aggiornare l'interfaccia utente in pochi millisecondi.

StimoloRiflesso presenta tre distinte modalità di funzionamento:

Morfologia della pagina - esegue un aggiornamento a pagina intera,
Selettore Morph - sostituisce il contenuto di un elemento,
Niente Morph - esegue funzioni che non aggiornano la pagina (ad esempio, chiama il dipendente).

Per cambiare il nostro PostReflex#increment possiamo semplicemente utilizzare il metodo morfologia e puntare al partial che si vuole aggiornare.

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

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

I miei pensieri

Questa breve introduzione è sufficiente per iniziare il vostro viaggio con Rails reattivo utilizzando StimoloRiflesso. Non è fantastico poter creare un'applicazione SPA reattiva con poche righe di Ruby e senza JavaScript? Per me, l'idea dell'HTML over-the-wire è entusiasmante e sicuramente approfondirò l'argomento in futuro. Per ora, vi consiglio vivamente Documentazione di StimulusReflex. Un saluto a tutte le persone coinvolte nello sviluppo di StimulusReflex!

Per saperne di più:

Perché si dovrebbe (probabilmente) usare Typescript

Come non uccidere un progetto con cattive pratiche di codifica?

Strategie di recupero dei dati in NextJS