Améliorez votre application Rails 7 avec l'intégration Stimulus.js et JavaScript

Stimulus.js est un modeste framework JavaScript qui augmente votre code HTML. C'est le compagnon idéal pour les fonctionnalités intégrées de Rails. Dans cet article, nous explorerons comment utiliser Stimulus.js pour la fonctionnalité JavaScript, l'intégrer à d'autres bibliothèques JavaScript et gérer efficacement les dépendances JavaScript à l'aide d'Importmap.

Conditions préalables

Avant de commencer, assurez-vous d'avoir les éléments suivants :

• Configuration de l'application Rails 7
• Connaissance de base de JavaScript et Rails

Configuration de Stimulus.js dans Rails 7

Rails 7 est livré avec la prise en charge par défaut de Stimulus.js. Pour commencer, assurez-vous que Stimulus est inclus dans votre application en exécutant :

rails new my_app
cd my_app

Vous pouvez trouver les contrôleurs Stimulus dans app/javascript/controllers.

Création d'un contrôleur de stimulus

Créons un contrôleur Stimulus pour gérer un simple événement de clic. Exécutez la commande suivante :

rails generate stimulus hello

Cela générera un nouveau contrôleur hello_controller.js dans app/javascript/controllers. Ouvrez le fichier et ajoutez le code suivant :

// app/javascript/controllers/hello_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["output"]

  connect() {
    this.outputTarget.textContent = 'Hello, Stimulus!'
  }

  greet() {
    this.outputTarget.textContent = 'Hello, World!'
  }
}

Dans votre code HTML, utilisez le contrôleur Stimulus :

  

  Greet

Lorsque vous cliquez sur le bouton, le texte devient "Hello, World !".

Intégration avec d'autres bibliothèques JavaScript

Stimulus.js peut fonctionner de manière transparente avec d'autres bibliothèques JavaScript. Par exemple, intégrons jQuery à Stimulus.js.

Tout d'abord, ajoutez jQuery à l'aide d'Importmap :

Ajoutez jQuery à votre config/importmap.rb :

pin "jquery", to: "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"

Ensuite, importez jQuery dans votre contrôleur Stimulus :

// app/javascript/controllers/hello_controller.js
import { Controller } from "@hotwired/stimulus"
import $ from "jquery"

export default class extends Controller {
  static targets = ["output"]

  connect() {
    this.outputTarget.textContent = 'Hello, Stimulus!'
  }

  greet() {
    $(this.outputTarget).fadeOut().fadeIn().text('Hello, jQuery!')
  }
}

Gestion des dépendances JavaScript

La gestion des dépendances JavaScript dans Rails 7 est simple avec Importmap. Voici quelques conseils:

• Ajouter une bibliothèque : Utilisez la broche "library_name" pour : "library_url" dans votre config/importmap.rb pour ajouter une nouvelle bibliothèque.
• Supprimer une bibliothèque : Supprimez la ligne correspondante de config/importmap.rb pour supprimer une bibliothèque existante.
• Mettre à jour les bibliothèques : Mettez à jour les URL dans config/importmap.rb vers les dernières versions.
• Vérifiez les bibliothèques obsolètes : Visitez les URL dans config/importmap.rb pour voir si des versions plus récentes sont disponibles.

Vous pouvez également ajouter des fichiers JavaScript personnalisés à votre projet. Placez-les dans le dossier app/javascript et importez-les si nécessaire.

Conclusion

Stimulus.js fournit un moyen puissant mais simple d'ajouter des fonctionnalités JavaScript à votre application Rails. En l'intégrant à d'autres bibliothèques JavaScript, vous pouvez créer une expérience utilisateur riche et dynamique. La gestion correcte de vos dépendances JavaScript garantit que votre application reste maintenable et à jour.

Bon codage !