Intégration du Frontend Moderne : Stimulus, Turbo et Action Cable

Introduction : La Révolution Frontend dans le Contexte Rails

Bienvenue à cette leçon sur l'intégration des outils frontend modernes dans un projet Ruby on Rails. Dans notre quête pour maîtriser le développement web rapide et efficace avec Rails, il est essentiel de comprendre comment construire des interfaces utilisateur dynamiques et réactives sans nécessairement adopter la complexité d'une Single Page Application (SPA) monolithique basée sur des frameworks JavaScript lourds comme React ou Angular.

Rails a toujours prôné la simplicité et la convention, et c'est dans cet esprit qu'est né Hotwire (HTML Over The Wire), une suite de bibliothèques qui permet de construire des applications web rapides et interactives en envoyant du HTML sur le réseau, plutôt que du JSON, réduisant ainsi considérablement la quantité de JavaScript nécessaire. Au cœur de cette philosophie, nous trouvons Stimulus, Turbo et Action Cable, trois piliers qui, ensemble, offrent une approche puissante et élégante pour le développement frontend.

Cette leçon explorera chacun de ces outils en détail, expliquera leur rôle et montrera comment ils travaillent en synergie pour créer des expériences utilisateur riches tout en conservant la productivité et la philosophie "Rails way".

Turbo : L'HTML Over The Wire

Turbo est la pierre angulaire de Hotwire. Il se compose de plusieurs modules qui optimisent la navigation et les mises à jour de contenu, en exploitant le rendu HTML côté serveur. L'idée principale est de laisser le serveur faire le travail de rendu de l'HTML et de le livrer au navigateur, qui se contente de l'afficher et de le mettre à jour de manière intelligente.

Turbo Drive

Turbo Drive est le successeur de Turbolinks. Il accélère la navigation entre les pages en interceptant les clics sur les liens et les soumissions de formulaires, puis en effectuant des requêtes AJAX en arrière-plan. Lorsque le serveur répond avec le nouvel HTML, Turbo Drive remplace intelligemment le <body> et fusionne le <head> de la page actuelle avec celui de la page reçue, tout en conservant l'état du JavaScript et le défilement de la page.

Avantages :
- Vitesse perçue : Les transitions sont plus rapides car le navigateur ne reloaded pas entièrement.
- Simplicité : Fonctionne presque automatiquement avec les applications Rails existantes, sans nécessiter de code JavaScript spécifique.
- Persistance : Le JavaScript persistant et les états de défilement sont conservés entre les navigations.

Turbo Frames

Turbo Frames permet de mettre à jour des parties spécifiques de votre page web de manière isolée, sans recharger l'intégralité de la page. Il encapsule des sections de votre HTML dans une balise <turbo-frame>, et lorsqu'un lien ou un formulaire à l'intérieur de ce cadre déclenche une requête, Turbo recherche une réponse qui contient un cadre avec le même id. Si trouvé, il remplace le contenu du cadre existant par le nouveau contenu.

Imaginez un formulaire de modification de profil : au lieu de recharger toute la page après la soumission, seul le formulaire ou la section de détails est mise à jour.

Fonctionnement :
1. Vous définissez un <turbo-frame id="mon_cadre"> dans votre vue.
2. Un lien ou un formulaire dans ce cadre (ou qui cible ce cadre avec data-turbo-frame="mon_cadre") déclenche une requête.
3. Le serveur répond avec une page HTML qui doit contenir un <turbo-frame id="mon_cadre"> (ou toute autre balise encapsulée par le même ID, comme un élément div).
4. Turbo remplace le contenu du cadre existant par le nouveau contenu reçu.

Exemple de Turbo Frame : Édition de Profil

1. Vue affichant le profil et le lien d'édition (app/views/users/show.html.erb) :

<turbo-frame id="user_profile">
  <h1>Profil de <%= @user.name %></h1>
  <p>Email: <%= @user.email %></p>
  <%= link_to "Modifier le profil", edit_user_path(@user) %>
</turbo-frame>

2. Vue du formulaire d'édition (app/views/users/edit.html.erb) :

<turbo-frame id="user_profile">
  <h2>Éditer le profil</h2>
  <%= form_with(model: @user, local: false) do |form| %>
    <div class="field">
      <%= form.label :name %>
      <%= form.text_field :name %>
    </div>
    <div class="field">
      <%= form.label :email %>
      <%= form.text_field :email %>
    </div>
    <div class="actions">
      <%= form.submit "Enregistrer les modifications" %>
    </div>
  <% end %>
  <%= link_to "Annuler", user_path(@user) %>
</turbo-frame>

Explication : Quand l'utilisateur clique sur "Modifier le profil" dans users/show.html.erb, Turbo intercepte le clic. Il voit que le lien se trouve dans un turbo-frame avec l'ID user_profile. Il effectue une requête AJAX vers edit_user_path(@user). Le serveur répond avec le contenu de users/edit.html.erb. Turbo trouve le turbo-frame avec le même ID user_profile dans la réponse et remplace le contenu de l'original turbo-frame par le nouveau formulaire d'édition. Le rechargement complet de la page est évité.

Turbo Streams

Turbo Streams permettent de diffuser des modifications HTML directement depuis le serveur vers le client via WebSockets (souvent avec Action Cable) ou des réponses HTTP. C'est idéal pour des mises à jour en temps réel : ajouter un élément à une liste, supprimer un message, mettre à jour un compteur, etc.

Actions prédéfinies : append, prepend, replace, update, remove, before, after.
Fonctionnement :
1. Le serveur envoie des "instructions" de mise à jour au client sous forme de balises <turbo-stream>.
2. Le client (le navigateur) reçoit ces instructions et les exécute sur le DOM.

Les Turbo Streams sont généralement générés par le contrôleur Rails à l'aide de helpers dédiés (ex: turbo_stream.append, turbo_stream.remove).

Stimulus : Le JavaScript Minimaliste

Stimulus est un framework JavaScript léger conçu pour ajouter de l'interactivité aux pages HTML existantes sans réécrire l'interface utilisateur. Il adhère à la philosophie de "l'amélioration progressive" et fonctionne en augmentant votre HTML plutôt qu'en le remplaçant par une interface basée sur JavaScript. C'est le complément parfait à Turbo.

Concepts Clés de Stimulus

Contrôleurs (controllers) : Des classes JavaScript qui se connectent à des éléments HTML spécifiques. Ils encapsulent la logique interactive. Un contrôleur est déclaré sur un élément HTML via l'attribut data-controller="nom-du-controleur".
Actions (actions) : Des méthodes JavaScript qui sont déclenchées par des événements du DOM (clic, soumission, etc.). Elles sont définies avec l'attribut data-action="evenement->controleur#methode".
Cibles (targets) : Des éléments HTML au sein d'un contrôleur que vous souhaitez manipuler via JavaScript. Ils sont définis avec data-nom-du-controleur-target="nomDeLaCible".
Valeurs (values) : Des données persistantes associées à un contrôleur, définies directement dans l'HTML via data-nom-du-controleur-nom-de-la-valeur-value="valeur". Stimulus gère automatiquement la synchronisation et la conversion de type.
Classes (classes) : Permettent de basculer des classes CSS dynamiquement sur les éléments ciblés. Définies avec data-nom-du-controleur-nom-de-la-classe-class="nom-de-la-classe-css".

L'élégance de Stimulus réside dans sa manière de "relier" le JavaScript au HTML de manière déclarative, gardant votre code JS propre et vos vues HTML riches en sémantique.

Exemple de Contrôleur Stimulus : Un Compteur Simple

1. Le Fichier JavaScript du contrôleur (app/javascript/controllers/counter_controller.js) :

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  // Déclare une cible appelée "count"
  static targets = ["count"]

  // Déclare une valeur numérique "currentCount" avec une valeur par défaut de 0
  static values = { currentCount: { type: Number, default: 0 } }

  // Cette méthode est appelée lorsque le contrôleur est connecté au DOM
  connect() {
    console.log("Le contrôleur de compteur est connecté !");
    // Initialise le texte de la cible avec la valeur actuelle
    this.countTarget.textContent = this.currentCountValue;
  }

  // Cette méthode sera appelée par une action
  increment() {
    this.currentCountValue++; // Incrémente la valeur
    this.countTarget.textContent = this.currentCountValue; // Met à jour le texte de la cible
  }
}

2. Le HTML qui utilise le contrôleur (app/views/some_page/index.html.erb) :

<div data-controller="counter">
  <button data-action="click->counter#increment">
    Clics : <span data-counter-target="count"></span>
  </button>
</div>

Explication : Le div est le scope du contrôleur counter. Le button a une action click->counter#increment, ce qui signifie que lorsque le bouton est cliqué, la méthode increment du contrôleur counter sera exécutée. Le span est la cible count, et c'est là que le contrôleur mettra à jour le nombre de clics. La valeur currentCountValue est automatiquement gérée par Stimulus et peut être utilisée pour stocker l'état.

Action Cable : Le Temps Réel avec Rails

Action Cable est le framework de WebSockets intégré à Rails. Il permet de créer des fonctionnalités en temps réel, telles que des chats, des notifications en direct ou des mises à jour de flux de données, en offrant une intégration transparente entre le backend Rails (via des canaux) et le frontend JavaScript (via des consumers).

Canaux (channels) : Côté serveur, les canaux sont l'unité d'organisation logique pour la communication en temps réel. Un canal peut être abonné par plusieurs clients. C'est là que vous définissez la logique de ce qui se passe lorsqu'un client s'abonne, se désabonne ou envoie un message.
Consumers (consumers) : Côté client, le consumer est l'interface JavaScript qui se connecte au serveur Action Cable et gère les abonnements aux canaux.
Abonnements (subscriptions) : Un client s'abonne à un ou plusieurs canaux. Une fois abonné, il peut envoyer des messages au canal et recevoir des diffusions du canal.

Quand utiliser Action Cable ?

Action Cable est idéal pour toute fonctionnalité qui nécessite une communication bidirectionnelle persistante et en temps réel entre le serveur et le client :

Applications de chat
Notifications en temps réel
Tableaux de bord d'administration avec mises à jour en direct
Jeux multijoueurs simples
Co-édition de documents

Exemple de Client Action Cable (côté JavaScript)

1. Création d'un canal (exemple app/channels/chat_channel.rb) :

# app/channels/chat_channel.rb
class ChatChannel < ApplicationCable::Channel
  def subscribed
    stream_from "chat_room" # Les clients s'abonnent au stream "chat_room"
  end

  def receive(data)
    # Gérer les messages reçus du client
    ActionCable.server.broadcast "chat_room", message: data["message"], sender: connection.current_user.name
  end
end

2. Le Consumer JavaScript pour s'abonner au canal (app/javascript/channels/chat_channel.js) :

import consumer from "channels/consumer"

consumer.subscriptions.create("ChatChannel", {
  connected() {
    // Appelé lorsque l'abonnement est établi avec succès
    console.log("Connecté au canal de chat !");
  },

  disconnected() {
    // Appelé lorsque l'abonnement est déconnecté (e.g., connexion perdue)
    console.log("Déconnecté du canal de chat.");
  },

  received(data) {
    // Appelé lorsque de nouvelles données sont reçues du canal
    console.log("Nouveau message reçu :", data.message);
    // Ici, vous pourriez insérer le message dans le DOM, par exemple.
    const messagesContainer = document.getElementById('messages');
    if (messagesContainer) {
      const newMessage = document.createElement('div');
      newMessage.textContent = `${data.sender}: ${data.message}`;
      messagesContainer.appendChild(newMessage);
    }
  }
});

Explication : Le code JavaScript crée un abonnement au ChatChannel. Lorsque le serveur diffuse un message au chat_room (par exemple, après qu'un autre utilisateur a envoyé un message), la méthode received(data) du client est appelée, et le message peut être affiché dynamiquement sur la page.

La Synergie : Construire des Expériences Riches avec Hotwire

La véritable puissance de Stimulus, Turbo et Action Cable réside dans leur capacité à travailler en parfaite harmonie, formant l'écosystème Hotwire.

Turbo gère la navigation et les mises à jour de contenu à l'échelle de la page (Drive) et de sections (Frames, Streams), le tout en HTML. Il minimise le besoin de rechargement complet de la page et de manipulation du DOM complexe en JavaScript.
Stimulus intervient pour "sprinkling" des interactions JavaScript sur l'HTML que Turbo gère. Il fournit la couche d'interactivité locale : un bouton de bascule, un champ de recherche avec autocomplétion, un compteur, une validation côté client, etc. Il travaille avec l'HTML existant plutôt que de le répliquer ou le remplacer.
Action Cable fournit l'infrastructure pour le temps réel. Il peut diffuser des Turbo Streams directement aux clients, permettant au serveur d'envoyer des instructions de mise à jour du DOM en réponse à des événements en temps réel (un nouveau message dans un chat, une notification, une mise à jour d'une commande).

Ce trio permet de construire des applications :

Rapides et Fluides : Moins de JavaScript côté client à télécharger et à exécuter, rendant les applications plus légères et plus rapides.
Performantes : Le rendu se fait côté serveur, tirant parti de la puissance du backend.
Productives : Les développeurs restent majoritairement dans l'écosystème Ruby et HTML/ERB, réduisant le "contexte-switching" entre différentes piles technologiques.
Maintenables : Le code est plus facile à comprendre et à maintenir, car l'interactivité est directement liée au HTML qu'elle modifie.
SEO-Friendly : Le contenu est rendu côté serveur et est accessible aux moteurs de recherche dès le premier chargement.

En adoptant Hotwire, vous pouvez souvent obtenir une expérience utilisateur très proche de celle d'une SPA, mais avec la simplicité de développement et la productivité du "monolithe" Rails.

Conclusion

L'intégration du frontend moderne avec Stimulus, Turbo et Action Cable représente une approche robuste et élégante pour le développement web dans le contexte de Ruby on Rails. Plutôt que de s'engager dans la complexité des frameworks JavaScript frontend traditionnels, ces outils vous permettent de construire des interfaces utilisateur hautement interactives et réactives en exploitant la puissance du HTML rendu côté serveur et en ajoutant du JavaScript de manière chirurgicale.

Vous avez appris comment :

Turbo accélère la navigation et permet des mises à jour partielles ou en temps réel du DOM en envoyant de l'HTML "over the wire".
Stimulus ajoute de l'interactivité ciblée à votre HTML avec un minimum de JavaScript, en s'intégrant directement à la structure de votre document.
Action Cable ouvre la voie aux fonctionnalités en temps réel grâce aux WebSockets, permettant une communication bidirectionnelle fluide entre le serveur et le client.

Ensemble, ces technologies forment la suite Hotwire, un paradigme puissant qui permet aux développeurs Rails de rester dans leur zone de confort tout en construisant des applications web performantes, maintenables et agréables à utiliser. Maîtriser ces outils est un atout majeur pour tout développeur souhaitant exceller dans le développement web rapide et efficace avec Ruby on Rails.