window.pipedriveLeadboosterConfig = { base: 'leadbooster-chat.pipedrive.com', companyId: 11580370, playbookUuid: '22236db1-6d50-40c4-b48f-8b11262155be', version: 2, } ;(function () { var w = finestra if (w.LeadBooster) { console.warn('LeadBooster esiste già') } else { w.LeadBooster = { q: [], on: function (n, h) { this.q.push({ t: 'o', n: n, h: h }) }, trigger: function (n) { this.q.push({ t: 't', n: n }) }, } } })() StimulusReflex: un modo rapido per creare applicazioni reattive - The Codest
The Codest
  • Chi siamo
  • Servizi
    • Sviluppo di software
      • Sviluppo Frontend
      • Sviluppo backend
    • Staff Augmentation
      • Sviluppatori Frontend
      • Sviluppatori backend
      • Ingegneri dei dati
      • Ingegneri del cloud
      • Ingegneri QA
      • Altro
    • Consulenza
      • Audit e consulenza
  • Industrie
    • Fintech e banche
    • E-commerce
    • Adtech
    • Tecnologia della salute
    • Produzione
    • Logistica
    • Automotive
    • IOT
  • Valore per
    • CEO
    • CTO
    • Responsabile della consegna
  • Il nostro team
  • Case Studies
  • Sapere come
    • Blog
    • Incontri
    • Webinar
    • Risorse
Carriera Contattate
  • Chi siamo
  • Servizi
    • Sviluppo di software
      • Sviluppo Frontend
      • Sviluppo backend
    • Staff Augmentation
      • Sviluppatori Frontend
      • Sviluppatori backend
      • Ingegneri dei dati
      • Ingegneri del cloud
      • Ingegneri QA
      • Altro
    • Consulenza
      • Audit e consulenza
  • Valore per
    • CEO
    • CTO
    • Responsabile della consegna
  • Il nostro team
  • Case Studies
  • Sapere come
    • Blog
    • Incontri
    • Webinar
    • Risorse
Carriera Contattate
Freccia indietro TORNA INDIETRO
2021-06-22
Sviluppo di software

StimulusReflex: un modo rapido per creare applicazioni reattive

The Codest

Pawel Muszynski

Software Engineer

Che cos'è StimulusReflex? L'approccio HTML over-the-wire, molto popolare al giorno d'oggi, ha portato alla creazione di framework e librerie che inviano l'HTML via cavo invece di utilizzare JSON. StimulusReflex è uno di questi.

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

Articoli correlati

Sviluppo di software

Costruire applicazioni web a prova di futuro: le intuizioni del team di esperti di The Codest

Scoprite come The Codest eccelle nella creazione di applicazioni web scalabili e interattive con tecnologie all'avanguardia, offrendo esperienze utente senza soluzione di continuità su tutte le piattaforme. Scoprite come la nostra esperienza favorisce la trasformazione digitale e il business...

IL CANCRO
Sviluppo di software

Le 10 principali aziende di sviluppo software con sede in Lettonia

Scoprite le migliori aziende di sviluppo software della Lettonia e le loro soluzioni innovative nel nostro ultimo articolo. Scoprite come questi leader tecnologici possono aiutarvi a migliorare la vostra attività.

thecodest
Soluzioni per aziende e scaleup

Essenziali di sviluppo software Java: Guida all'outsourcing di successo

Esplorate questa guida essenziale sullo sviluppo di software Java con successo outsourcing per migliorare l'efficienza, accedere alle competenze e guidare il successo del progetto con The Codest.

thecodest
Sviluppo di software

La guida definitiva all'outsourcing in Polonia

L'aumento di outsourcing in Polonia è guidato dai progressi economici, educativi e tecnologici, che favoriscono la crescita dell'IT e un clima favorevole alle imprese.

IlCodesto
Soluzioni per aziende e scaleup

Guida completa agli strumenti e alle tecniche di audit IT

Gli audit IT garantiscono sistemi sicuri, efficienti e conformi. Per saperne di più sulla loro importanza, leggete l'articolo completo.

The Codest
Jakub Jakubowicz CTO e cofondatore

Iscrivetevi alla nostra knowledge base e rimanete aggiornati sulle competenze del settore IT.

    Chi siamo

    The Codest - Società internazionale di sviluppo software con centri tecnologici in Polonia.

    Regno Unito - Sede centrale

    • Ufficio 303B, 182-184 High Street North E6 2JA
      Londra, Inghilterra

    Polonia - Poli tecnologici locali

    • Parco uffici Fabryczna, Aleja
      Pokoju 18, 31-564 Cracovia
    • Ambasciata del cervello, Konstruktorska
      11, 02-673 Varsavia, Polonia

      The Codest

    • Casa
    • Chi siamo
    • Servizi
    • Case Studies
    • Sapere come
    • Carriera
    • Dizionario

      Servizi

    • Consulenza
    • Sviluppo di software
    • Sviluppo backend
    • Sviluppo Frontend
    • Staff Augmentation
    • Sviluppatori backend
    • Ingegneri del cloud
    • Ingegneri dei dati
    • Altro
    • Ingegneri QA

      Risorse

    • Fatti e miti sulla collaborazione con un partner esterno per lo sviluppo di software
    • Dagli Stati Uniti all'Europa: Perché le startup americane decidono di trasferirsi in Europa
    • Confronto tra gli hub di sviluppo Tech Offshore: Tech Offshore Europa (Polonia), ASEAN (Filippine), Eurasia (Turchia)
    • Quali sono le principali sfide di CTO e CIO?
    • The Codest
    • The Codest
    • The Codest
    • Privacy policy
    • Condizioni di utilizzo del sito web

    Copyright © 2025 di The Codest. Tutti i diritti riservati.

    it_ITItalian
    en_USEnglish de_DEGerman sv_SESwedish da_DKDanish nb_NONorwegian fiFinnish fr_FRFrench pl_PLPolish arArabic jaJapanese ko_KRKorean es_ESSpanish nl_NLDutch etEstonian elGreek it_ITItalian