Comment ajouter un stimulus à une application Ruby on Rails

introduction

Si vous travaillez avec un projet Ruby on Rails, vos exigences peuvent inclure une certaine interactivité avec le code HTML généré par votre https://guides.rubyonrails.org/v5.2/action_view_overview.html. [voir les modèles]. Si tel est le cas, vous avez plusieurs choix quant à la manière de mettre en œuvre cette interactivité.

Par exemple, vous pouvez implémenter un framework JavaScript comme React ou https://emberjs.com / [Ember]. Si vos exigences incluent la gestion de l’état côté client ou si vous êtes préoccupé par des problèmes de performances associés aux requêtes fréquentes au serveur, le choix de l’un de ces frameworks peut sembler judicieux. De nombreuses applications à page unique (ASP) adoptent cette approche.

Cependant, vous devez garder à l’esprit plusieurs considérations lors de la mise en œuvre d’une structure qui gère l’état et les mises à jour fréquentes côté client:

  1. Il est possible de définir des exigences de chargement et de conversion, telles que l’analyse de JavaScript et la récupération et la conversion de JSON en HTML, pour limiter les performances.

  2. S’engager dans un framework peut impliquer d’écrire plus de code que ce que votre cas d’utilisation particulier nécessite, en particulier si vous recherchez des améliorations JavaScript à petite échelle.

  3. Les états gérés côté client et côté serveur peuvent entraîner une duplication des efforts et augmenter la surface d’erreurs.

Au lieu de cela, l’équipe de Basecamp (la même équipe qui a écrit Rails) a créé https://stimulusjs.org [Stimulus.js], qu’ils décrivent comme «un cadre JavaScript modeste pour le HTML que vous avez déjà. »Stimulus est conçu pour améliorer une application Rails moderne en utilisant du code HTML généré par le serveur. State réside dans le Document Object Model (DOM), et le cadre offre des moyens standard d’interagir avec des éléments et des événements dans les DOM. Il fonctionne côte à côte avec Turbolinks (inclus par défaut dans Rails 5+) pour améliorer les performances et les temps de chargement avec un code limité et conçu pour un objectif clairement défini.

Dans ce didacticiel, vous allez installer et utiliser Stimulus pour créer une application Rails existante offrant aux lecteurs des informations sur les requins. L’application dispose déjà d’un modèle de traitement des données de requin, mais vous allez ajouter une ressource imbriquée pour les publications sur les requins individuels, ce qui permet aux utilisateurs de créer un ensemble d’idées et d’opinions sur les requins. Cette pièce est à peu près parallèle à Comment créer des ressources imbriquées pour un rubis on Rails Application, sauf que nous utiliserons JavaScript pour manipuler la position et l’apparence des publications sur la page. Nous adopterons également une approche légèrement différente pour construire le modèle de poste lui-même.

Conditions préalables

Pour suivre ce tutoriel, vous aurez besoin de:

  • Une machine locale ou un serveur de développement exécutant Ubuntu 18.04. Votre machine de développement doit avoir un utilisateur non root avec des privilèges d’administration et un pare-feu configuré avec + ufw +. Pour savoir comment configurer cela, consultez notre tutoriel https://www.digitalocean.com/community/tutorials/initial-server-setup-with-ubuntu-18-04 (Configuration initiale du serveur avec Ubuntu 18.04]).

  • https://nodejs.org [Node.js] et npm installés sur votre ordinateur local ou votre serveur de développement. Ce tutoriel utilise la version Node.js et la version npm. Pour savoir comment installer Node.js et npm sur Ubuntu 18.04, suivez les instructions de la section * «Installation à l’aide d’un PPA» * à l’adresse https://www.digitalocean.com/community/tutorials/how-to-install-node-. js-on-ubuntu-18-04 # installation-using-a-ppa [Comment installer Node.js sur Ubuntu 18.04].

  • Ruby, rbenv et Rails installés sur votre ordinateur local ou votre serveur de développement, en suivant les * étapes 1 à 4 * de la page https://www.digitalocean.com/community/tutorials/. comment-installer-ruby-sur-rails-avec-rbenv-sur-ubuntu-18-04 [Comment installer Ruby on Rails avec rbenv sur Ubuntu 18.04]. Ce tutoriel utilise Ruby, Rbenv et Rails.

  • SQLite installé et une application de base d’informations sur les requins créée en suivant les instructions fournies à l’adresse Comment créer un rubis sur l’application Rails.

Étape 1 - Création d’un modèle imbriqué

Notre première étape consistera à créer un + Post + model imbriqué, que nous associerons à notre modèle existant '+ Shark + `. Pour ce faire, nous allons créer un enregistrement actif associations entre nos modèles: les publications appartiendront à des requins particuliers et chaque requin peut avoir plusieurs publications.

Pour commencer, accédez au répertoire + sharkapp + que vous avez créé pour votre projet Rails dans les conditions préalables:

cd sharkapp

Pour créer notre modèle + Post +, nous allons utiliser la commande +rails generate + ` avec le générateur