Hotwire et Turbo dans Rails : Guide complet

Hotwire (HTML Over The Wire) et Turbo sont des outils modernes qui simplifient la création d'applications web dynamiques, rapides et réactives sans avoir à écrire beaucoup de JavaScript. Dans ce guide, nous verrons comment mettre en œuvre Hotwire et Turbo dans un environnement Application Rails, avec des exemples de codage.

Qu'est-ce que Hotwire et Turbo ?

• Hotwire: Un cadre pour construire des applications web modernes en envoyant du HTML par câble au lieu de JSON. Il comprend Turbo, Stimulus et Strada.
• Turbo: Un élément central de Hotwire qui accélère la navigation dans les pages et les soumissions de formulaires en évitant le rechargement complet de la page.

Mise en place de Hotwire dans Rails

Étape 1 : Ajouter Hotwire à votre application Rails

Ajoutez les gemmes Hotwire à votre Gemfile :

gem 'hotwire-rails' (en anglais)'

Exécutez les commandes suivantes pour installer Hotwire :
installation groupée

rails hotwire:install

Cela installera Turbo et Stimulus dans votre application.

Étape 2 : Activer le Turbo Drive

Turbo Drive est activé par défaut et accélère la navigation sur les pages en interceptant les clics sur les liens et les soumissions de formulaires. Aucune configuration supplémentaire n'est nécessaire.

Turbo Frames : Construire des composants dynamiques

Les Turbo Frames vous permettent de mettre à jour des parties spécifiques d'une page sans recharger la page entière.

Exemple : Mise à jour d'une section de commentaires

• Créer un cadre turbo
  Enveloppez la section des commentaires dans un cadre Turbo :

  <%= turbo_frame_tag "comments" do %>
      <%= render @post.comments %>
  <% fin %>

• Ajouter un formulaire à l'intérieur du cadre
  Inclure un formulaire pour ajouter de nouveaux commentaires :

  <%= turbo_frame_tag "new_comment" do %>
      <%= form_with model: [@post, Comment.new], data: { turbo_frame: "comments" } do |form| %>
          <%= form.text_area :content %>
          <%= form.submit "Post Comment" %>
      <% fin %>
  <% fin %>

• Action du contrôleur
  Dans votre CommentsController, rendez le Turbo Frame après la création d'un commentaire :

  créer par défaut
      @comment = @post.comments.create(comment_params)
      répondre_à faire |format|
          format.turbo_stream
          format.html { redirect_to @post }
      fin
  fin

• Réponse au flux turbo
  Créer un fichier create.turbo_stream.erb pour mettre à jour la section des commentaires :
  

  <%= turbo_stream.append "comments" do %>
      <%= render @comment %>
  <% fin %>
  
  <%= turbo_stream.replace "new_comment" do %>
      <%= render "form", post: @post, comment: Comment.new %>
  <% fin %>

• Turbo Streams : Mises à jour en temps réel
  Les flux Turbo fournissent des mises à jour en temps réel en envoyant des extraits HTML via WebSockets ou HTTP.

Exemple : Diffusion de nouveaux commentaires

• Mise en place d'ActionCable
  Assurez-vous que ActionCable est activé dans votre application Rails.
• Diffusion de nouveaux commentaires
  Dans votre modèle de commentaire, diffusez les nouveaux commentaires après leur création :
  

  Commentaire de classe <ApplicationRecord
      after_create_commit :broadcast_comment
  
      privé
  
      def broadcast_commentaire
          broadcast_append_to "post_#{post_id}_comments", partial : "comments/comment", locals : { comment : self }
      fin
  fin

• S'abonner aux mises à jour
  Selon vous, il faut s'abonner au Turbo Stream :

  <%= turbo_stream_from "post_#{@post.id}_comments" %>

• Stimulus : Ajouter de l'interactivité
  Stimulus est un cadre JavaScript léger permettant d'ajouter un comportement au HTML.

Exemple : Basculer la visibilité

• Créer un contrôleur de stimulus
  Générer un contrôleur de stimulus :

  rails générer un stimulus basculer

• Ajouter la logique du contrôleur
  Dans app/javascript/controllers/toggle_controller.js :

  import { Controller } from "@hotwired/stimulus"
  export default class extends Controller {
      cibles statiques = ["contenu"]
      toggle() {
          this.contentTarget.classList.toggle("hidden")
      }
  }

• Utiliser le contrôleur dans votre vue
  Ajoutez le contrôleur à votre code HTML :

  <div data-controller="toggle">
      toggle#toggle">Toggle Content
      <div data-toggle-target="content" class="hidden">
          Ce contenu est basculé !
      </div>
  </div>

Conclusion

Hotwire et Turbo facilitent la création d'applications Rails modernes et dynamiques avec un minimum de JavaScript. En exploitant Turbo Frames, Turbo Streams et Stimulus, vous pouvez créer des expériences utilisateur rapides, réactives et interactives. Si vous êtes à la recherche de conseils d'experts sur la mise en œuvre de ces technologies, Railscarma offre des services de premier ordre Services de développement de rails pour vous aider à créer des applications évolutives et efficaces. Grâce à l'expertise de Railscarma, vous pouvez faire passer vos projets Rails au niveau supérieur tout en vous concentrant sur la fourniture d'expériences utilisateur exceptionnelles.