window.pipedriveLeadboosterConfig = { base : 'leadbooster-chat.pipedrive.com', companyId : 11580370, playbookUuid: '22236db1-6d50-40c4-b48f-8b11262155be', version : 2, } ;(function () { var w = window if (w.LeadBooster) { console.warn('LeadBooster existe déjà') } 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 moyen rapide de créer des applications réactives - The Codest
The Codest
  • A propos de nous
  • Services
    • Développement de logiciels
      • Développement frontal
      • Développement backend
    • Staff Augmentation
      • Développeurs frontaux
      • Développeurs backend
      • Ingénieurs des données
      • Ingénieurs en informatique dématérialisée
      • Ingénieurs AQ
      • Autres
    • Conseil consultatif
      • Audit et conseil
  • Industries
    • Fintech et banque
    • E-commerce
    • Adtech
    • Santé (Healthtech)
    • Fabrication
    • Logistique
    • Automobile
    • IOT
  • Valeur pour
    • CEO
    • CTO
    • Gestionnaire des livraisons
  • Notre équipe
  • Études de cas
  • Savoir comment
    • Blog
    • Rencontres
    • Webinaires
    • Ressources
Carrières Prendre contact
  • A propos de nous
  • Services
    • Développement de logiciels
      • Développement frontal
      • Développement backend
    • Staff Augmentation
      • Développeurs frontaux
      • Développeurs backend
      • Ingénieurs des données
      • Ingénieurs en informatique dématérialisée
      • Ingénieurs AQ
      • Autres
    • Conseil consultatif
      • Audit et conseil
  • Valeur pour
    • CEO
    • CTO
    • Gestionnaire des livraisons
  • Notre équipe
  • Études de cas
  • Savoir comment
    • Blog
    • Rencontres
    • Webinaires
    • Ressources
Carrières Prendre contact
Flèche arrière RETOUR
2021-06-22
Développement de logiciels

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

The Codest

Pawel Muszynski

Software Engineer

Qu'est-ce que StimulusReflex ? L'approche HTML over-the-wire très populaire de nos jours nous a conduit à la création de frameworks et de librairies qui envoient du HTML sur le fil au lieu d'utiliser JSON. StimulusReflex est l'un d'entre eux.

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

Articles connexes

Développement de logiciels

Construire des applications web à l'épreuve du temps : les conseils de l'équipe d'experts de The Codest

Découvrez comment The Codest excelle dans la création d'applications web évolutives et interactives à l'aide de technologies de pointe, offrant une expérience utilisateur transparente sur toutes les plateformes. Découvrez comment notre expertise favorise la transformation numérique et la...

LE CODEST
Développement de logiciels

Les 10 premières entreprises de développement de logiciels basées en Lettonie

Découvrez les principales sociétés de développement de logiciels en Lettonie et leurs solutions innovantes dans notre dernier article. Découvrez comment ces leaders de la technologie peuvent vous aider à développer votre entreprise.

thecodest
Solutions pour les entreprises et les grandes entreprises

L'essentiel du développement de logiciels Java : Un guide pour une externalisation réussie

Explorez ce guide essentiel sur le développement réussi de logiciels Java outsourcing pour améliorer l'efficacité, accéder à l'expertise et assurer la réussite des projets avec The Codest.

thecodest
Développement de logiciels

Le guide ultime de l'externalisation en Pologne

L'essor de outsourcing en Pologne est dû aux progrès économiques, éducatifs et technologiques, qui favorisent la croissance des technologies de l'information et un climat propice aux entreprises.

TheCodest
Solutions pour les entreprises et les grandes entreprises

Le guide complet des outils et techniques d'audit informatique

Les audits informatiques garantissent la sécurité, l'efficacité et la conformité des systèmes. Pour en savoir plus sur leur importance, lisez l'article complet.

The Codest
Jakub Jakubowicz CTO & Co-Fondateur

Abonnez-vous à notre base de connaissances et restez au courant de l'expertise du secteur des technologies de l'information.

    A propos de nous

    The Codest - Entreprise internationale de développement de logiciels avec des centres technologiques en Pologne.

    Royaume-Uni - Siège

    • Bureau 303B, 182-184 High Street North E6 2JA
      Londres, Angleterre

    Pologne - Les pôles technologiques locaux

    • Parc de bureaux Fabryczna, Aleja
      Pokoju 18, 31-564 Kraków
    • Brain Embassy, Konstruktorska
      11, 02-673 Varsovie, Pologne

      The Codest

    • Accueil
    • A propos de nous
    • Services
    • Études de cas
    • Savoir comment
    • Carrières
    • Dictionnaire

      Services

    • Conseil consultatif
    • Développement de logiciels
    • Développement backend
    • Développement frontal
    • Staff Augmentation
    • Développeurs backend
    • Ingénieurs en informatique dématérialisée
    • Ingénieurs des données
    • Autres
    • Ingénieurs AQ

      Ressources

    • Faits et mythes concernant la coopération avec un partenaire externe de développement de logiciels
    • Des États-Unis à l'Europe : Pourquoi les startups américaines décident-elles de se délocaliser en Europe ?
    • Comparaison des pôles de développement Tech Offshore : Tech Offshore Europe (Pologne), ASEAN (Philippines), Eurasie (Turquie)
    • Quels sont les principaux défis des CTO et des DSI ?
    • The Codest
    • The Codest
    • The Codest
    • Privacy policy
    • Conditions d'utilisation du site web

    Copyright © 2025 par The Codest. Tous droits réservés.

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