Comment Développer des Applications Rapidement avec Rails et HTMX

Dans le monde du développement web, la rapidité et l'efficacité sont des atouts majeurs. Ruby on Rails, souvent abrégé en Rails, est un framework populaire qui facilite le développement d'applications web. D'autre part, HTMX est une bibliothèque JavaScript qui permet d'améliorer l'interactivité des applications sans avoir à écrire beaucoup de code JavaScript. Dans cet article, nous allons explorer comment combiner Rails et HTMX pour développer des applications rapidement et efficacement.

Qu'est-ce que Ruby on Rails ?

Ruby on Rails est un framework de développement web écrit en Ruby. Il suit le principe de "Convention over Configuration", ce qui signifie qu'il prend des décisions par défaut pour vous, vous permettant de vous concentrer sur la logique métier plutôt que sur la configuration. Rails est également connu pour sa structure MVC (Modèle-Vue-Contrôleur), qui aide à organiser le code de manière claire et maintenable.

Qu'est-ce que HTMX ?

HTMX est une bibliothèque JavaScript légère qui permet d'ajouter des fonctionnalités AJAX à vos applications web sans avoir à écrire beaucoup de code JavaScript. Avec HTMX, vous pouvez charger des fragments HTML, gérer des événements et interagir avec des API de manière simple et intuitive. Cela permet de créer des interfaces utilisateur dynamiques tout en gardant le code propre et facile à maintenir.

Pourquoi utiliser Rails avec HTMX ?

Combiner Rails et HTMX offre plusieurs avantages :

Développement rapide : Rails permet de créer des applications rapidement grâce à ses générateurs de code et à sa structure MVC. HTMX, quant à lui, facilite l'ajout d'interactivité sans alourdir le code.
Moins de JavaScript : Avec HTMX, vous pouvez éviter d'écrire beaucoup de JavaScript, ce qui réduit la complexité de votre code et le temps de développement.
Expérience utilisateur améliorée : HTMX permet de charger des contenus dynamiques sans recharger la page, offrant ainsi une expérience utilisateur fluide.

Installation de Rails et HTMX

Pour commencer, vous devez avoir Ruby et Rails installés sur votre machine. Vous pouvez vérifier cela en exécutant les commandes suivantes :

ruby -v
rails -v

Si vous n'avez pas Rails installé, vous pouvez l'installer avec la commande suivante :

gem install rails

Une fois Rails installé, vous pouvez créer une nouvelle application :

rails new mon_application
cd mon_application

Ensuite, pour ajouter HTMX à votre projet, vous pouvez l'installer via npm ou en ajoutant directement le script dans votre fichier layout. Voici comment faire avec npm :

npm install htmx.org

Ou, si vous préférez l'ajouter directement, modifiez votre fichier app/views/layouts/application.html.erb pour inclure HTMX :


  Mon Application
  <%= csrf_meta_tags %>
  <%= csp_meta_tag %>
  <%= stylesheet_link_tag 'application', media: 'all' %>
  <%= javascript_pack_tag 'application' %>

Création d'une Application Simple avec Rails et HTMX

Pour illustrer comment utiliser Rails et HTMX ensemble, créons une application simple de gestion de tâches. Cette application permettra aux utilisateurs d'ajouter et de supprimer des tâches sans recharger la page.

Étape 1 : Générer le Modèle et le Contrôleur

Tout d'abord, générons un modèle pour nos tâches :

rails generate model Task title:string completed:boolean
rails db:migrate

Ensuite, générons un contrôleur pour gérer les tâches :

rails generate controller Tasks

Étape 2 : Configurer les Routes

Ouvrez le fichier config/routes.rb et ajoutez les routes pour les tâches :

Rails.application.routes.draw do
  resources :tasks, only: [:index, :create, :destroy]
  root "tasks#index"
end

Étape 3 : Implémenter le Contrôleur

Dans le fichier app/controllers/tasks_controller.rb, ajoutez les actions pour afficher, créer et supprimer des tâches :

class TasksController < ApplicationController
  def index
    @tasks = Task.all
  end

  def create
    @task = Task.new(task_params)
    if @task.save
      render partial: "task", locals: { task: @task }
    else
      render json: { error: @task.errors.full_messages }, status: :unprocessable_entity
    end
  end

  def destroy
    @task = Task.find(params[:id])
    @task.destroy
    head :no_content
  end

  private

  def task_params
    params.require(:task).permit(:title, :completed)
  end
end

Étape 4 : Créer les Vues

Dans le fichier app/views/tasks/index.html.erb, ajoutez le code suivant pour afficher la liste des tâches et un formulaire pour en ajouter de nouvelles :

Liste des Tâches


  <%= render @tasks %>


Ajouter une Tâche
<%= form_with(model: Task.new, local: false) do |form| %>
  <%= form.text_field :title, placeholder: "Titre de la tâche" %>
  <%= form.submit "Ajouter" %>
<% end %>

Ensuite, créez un fichier partiel pour afficher une tâche dans app/views/tasks/_task.html.erb :


  <%= task.title %>
  <%= button_to "Supprimer", task_path(task), method: :delete, remote: true, class: "btn btn-danger" %>

Étape 5 : Ajouter l'Interactivité avec HTMX

Pour rendre le formulaire d'ajout de tâche interactif, nous allons utiliser HTMX. Modifiez le formulaire dans app/views/tasks/index.html.erb pour inclure les attributs HTMX :

<%= form_with(model: Task.new, local: false, html: { "hx-post" => tasks_path, "hx-target" => "#task-list", "hx-swap" => "beforeend" }) do |form| %>
  <%= form.text_field :title, placeholder: "Titre de la tâche" %>
  <%= form.submit "Ajouter" %>
<% end %>

Pour gérer la suppression des tâches, nous allons également ajouter un attribut HTMX au bouton de suppression dans le fichier partiel app/views/tasks/_task.html.erb :

<%= button_to "Supprimer", task_path(task), method: :delete, remote: true, class: "btn btn-danger", "hx-target" => "#task_<%= task.id %>", "hx-swap" => "outerHTML" %>

Conclusion

En combinant Ruby on Rails et HTMX, vous pouvez développer des applications web rapidement tout en offrant une expérience utilisateur fluide et interactive. Rails vous permet de structurer votre application de manière efficace, tandis qu'HTMX simplifie l'ajout d'interactivité sans nécessiter une grande quantité de code JavaScript. Que vous soyez un développeur débutant ou expérimenté, cette combinaison peut vous aider à créer des applications performantes et agréables à utiliser.

Alors, qu'attendez-vous ? Lancez-vous dans le développement d'applications avec Rails et HTMX et découvrez à quel point il est facile de créer des expériences web dynamiques !