StimulusReflex - un moyen rapide de créer des applications réactives

Il s'agit d'une nouvelle façon de créer une interface utilisateur réactive en Ruby on Rails.
StimulusReflex étend les capacités de Rails et de Stimulus en capturant les interactions des utilisateurs et en les transmettant à Rails via des websockets en temps réel. Les pages sont rapidement re-rendues et toutes les mises à jour sont envoyées au client via CableReady.

CableReady permet de créer des mises à jour en temps réel en déclenchant des modifications du DOM côté client, des événements et des notifications par l'intermédiaire de ActionCable. Contrairement à Ajax, les opérations ne sont pas toujours initiées par l'utilisateur ou le navigateur, par exemple, elles peuvent également être initiées par des travailleurs.

StimulusRéflexe a été inspiré à l'origine par le LiveView de Phoenix (une alternative au SPA). L'objectif de StimulusReflex a toujours été de faire de la création d'applications modernes avec Rails l'option la plus productive et la plus agréable qui soit. Et à mon avis, c'est exactement ce qu'ils ont réalisé ici.

Pourquoi utiliser StimulusReflex ?

C'est simple, il s'agit de se concentrer sur l'élaboration d'une produit au lieu d'introduire des changements cohérents dans les JavaScript. En outre, StimulusRéflexe les applications sont simples, concises et claires code et s'intègrent parfaitement à Ruby on Rails. Cela permet à de petites équipes de RdR de faire de grandes choses, même sans avoir de grandes connaissances en React, Vue ou leurs solutions modernes JavaScript.

Comment fonctionne StimulusReflex ?

Réflexe

Réflexe est une mise à jour transactionnelle de l'interface utilisateur qui s'effectue par le biais d'une connexion ouverte permanente avec le serveur. StimulusReflex fait correspondre les requêtes à l'élément Réflexe classe. Réflexe se trouvent dans le app/reflexes répertoire.

 classe PostReflex < ApplicationReflex
 fin


Si nous créons la classe Reflex avec un générateur, nous pouvons voir que notre classe contient ce commentaire :

# Toutes les instances Reflex comprennent CableReady::Broadcaster et exposent les propriétés suivantes :
  #
  # - connection - la connexion ActionCable,
  # - channel - le canal ActionCable,
  # - request - un proxy ActionDispatch::Request pour la connexion socket,
  # - session - le magasin ActionDispatch::Session pour le visiteur actuel,
  # - flash - l'ActionDispatch::Flash::FlashHash pour la requête en cours,
  # - url - l'URL de la page qui a déclenché le réflexe,
  # - params - les paramètres du formulaire le plus proche de l'élément (le cas échéant),
  # - element - un objet de type Hash qui représente l'élément HTML qui a déclenché le réflexe,
  # - signed - utilise un identifiant global signé pour mapper l'ensemble de données attribué à un modèle, par exemple, element.signed[:foo],
  # - unsigned - utilise un identifiant global non signé pour mapper l'ensemble des données attribuées à un modèle, par exemple, element.unsigned[:foo],
  # - cable_ready - un cable_ready spécial qui peut être diffusé au visiteur actuel (pas de parenthèses nécessaires),
  # - reflex_id - un UUIDv4 qui identifie de manière unique chaque Reflex.

Comme nous pouvons le voir, il y a quelques propriétés qui peuvent être utilisées dans notre classe. La plus intéressante au début sera la propriété élément qui contient tous les attributs des éléments du DOM du contrôleur Stimulus ainsi que d'autres propriétés, telles que nom de l'étiquette, vérifié et valeur.

StimulusRéflexe nous offre également un ensemble de rappels qui nous permettent de contrôler les processus de nos réflexes :

• avant_reflex
• autour_du_reflet
• après_réflexe

Comme vous pouvez le constater, l'appellation est très similaire à celle des Active Record Callbacks.

Déclarer un Reflex en HTML avec l'attribut data

Le moyen le plus rapide d'activer les actions Reflex est d'utiliser la fonction données-réflexes attribut. La syntaxe suit le format Stimulus : [DOM-event]->[ReflexClass]#[action]

"="">Documentation de StimulusReflex. Un grand merci à toutes les personnes impliquées dans le développement de StimulusReflex !

Dans cet exemple, le données-réflexes a indiqué l'attribut PostRefex et la classe incrément sur la méthode cliquer événement. Ici, nous avons également passé data-post-id que nous pourrons utiliser plus tard dans la classe Reflex par le biais de element.dataset[:post_id].

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

post.increment ! :likes
end
fin

Morphes

Par défaut, StimulusRéflexe met à jour la page entière (Page morph). Après avoir retraité l'action du contrôleur, rendu le modèle de vue et envoyé le code HTML brut à votre navigateur, StimulusReflex utilise la fonction morphologie pour effectuer le plus petit nombre de modifications du DOM nécessaires pour rafraîchir votre interface utilisateur en quelques millisecondes.

StimulusRéflexe comporte trois modes de fonctionnement distincts :

Page Morph - effectue une mise à jour pleine page,
Sélecteur Morph - remplace le contenu d'un élément,
Rien Morph - exécute des fonctions qui ne mettent pas à jour votre page (par exemple, appeler votre employé).

Pour modifier notre PostReflex#incrément nous pouvons simplement utiliser la méthode morphologie et de cibler la partie que nous voulons mettre à jour.

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

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

Mes réflexions

Cette courte introduction est suffisante pour vous permettre de commencer votre voyage avec Rails réactif en utilisant StimulusRéflexe. N'est-ce pas génial de pouvoir créer une application SPA réactive avec seulement quelques lignes Ruby et pas de JavaScript ? Pour moi, toute cette idée de HTML sur le fil est excitante, et je vais certainement creuser ce sujet à l'avenir. Pour l'instant, je vous recommande vivement Documentation StimulusReflex. Un grand merci à toutes les personnes impliquées dans le développement de StimulusReflex !

En savoir plus :

Pourquoi vous devriez (probablement) utiliser Typescript

Comment ne pas tuer un projet avec de mauvaises pratiques de codage ?

Stratégies de récupération des données dans NextJS