Cómo Desarrollar Aplicaciones Rápido con Rails y HTMX

En el mundo del desarrollo web, la velocidad y la eficiencia son esenciales. Con la combinación de Ruby on Rails y HTMX, puedes crear aplicaciones web interactivas y rápidas sin complicaciones innecesarias. En este artículo, exploraremos cómo estas dos tecnologías pueden trabajar juntas para acelerar tu proceso de desarrollo.

¿Qué es Ruby on Rails?

Ruby on Rails, comúnmente conocido como Rails, es un framework de desarrollo web escrito en Ruby. Se basa en el patrón de diseño MVC (Modelo-Vista-Controlador) y es conocido por su enfoque en la simplicidad y la productividad. Rails permite a los desarrolladores construir aplicaciones web de manera rápida y eficiente gracias a su convención sobre configuración y su amplia gama de bibliotecas y herramientas.

¿Qué es HTMX?

HTMX es una biblioteca de JavaScript que permite a los desarrolladores crear aplicaciones web interactivas utilizando HTML en lugar de JavaScript. Con HTMX, puedes hacer solicitudes HTTP y actualizar partes de tu página web sin necesidad de recargarla completamente. Esto mejora la experiencia del usuario y reduce la carga en el servidor.

Ventajas de Usar Rails y HTMX Juntos

La combinación de Rails y HTMX ofrece varias ventajas:

Desarrollo Rápido: Rails proporciona una estructura sólida y herramientas que aceleran el desarrollo, mientras que HTMX permite interactividad sin complicaciones.
Menos JavaScript: Con HTMX, puedes reducir la cantidad de JavaScript que necesitas escribir, lo que simplifica el mantenimiento del código.
Mejor Experiencia de Usuario: Las actualizaciones parciales de la página mejoran la experiencia del usuario al hacer que las aplicaciones sean más rápidas y receptivas.

Configurando tu Entorno

Para comenzar a desarrollar con Rails y HTMX, primero necesitas configurar tu entorno. Asegúrate de tener Ruby y Rails instalados en tu máquina. Puedes verificar esto ejecutando los siguientes comandos en tu terminal:

ruby -v
rails -v

Si no tienes Rails instalado, puedes hacerlo con el siguiente comando:

gem install rails

Una vez que tengas Rails instalado, crea una nueva aplicación:

rails new mi_aplicacion
cd mi_aplicacion

Integrando HTMX en tu Aplicación Rails

Para integrar HTMX en tu aplicación Rails, primero necesitas agregar la biblioteca HTMX a tu proyecto. Puedes hacerlo añadiendo la siguiente línea a tu archivo Gemfile:

gem 'htmx-rails'

Luego, ejecuta el siguiente comando para instalar la gema:

bundle install

Después de instalar HTMX, necesitas incluirlo en tu aplicación. Abre el archivo app/assets/javascripts/application.js y añade la siguiente línea:

//= require htmx

Creando una Aplicación Simple

Ahora que tienes Rails y HTMX configurados, vamos a crear una aplicación simple. Imaginemos que queremos construir una lista de tareas donde los usuarios pueden agregar y eliminar tareas sin recargar la página.

Generando el Modelo y el Controlador

Primero, generemos un modelo para nuestras tareas:

rails generate model Task title:string
rails db:migrate

A continuación, generemos un controlador para manejar las tareas:

rails generate controller Tasks

Configurando las Rutas

Abre el archivo config/routes.rb y añade las siguientes rutas:

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

Implementando el Controlador

Ahora, vamos a implementar el controlador TasksController. Abre el archivo app/controllers/tasks_controller.rb y añade el siguiente código:

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)
  end
end

Creando las Vistas

Ahora, vamos a crear las vistas. Primero, abre el archivo app/views/tasks/index.html.erb y añade el siguiente código:

Lista de Tareas


  <%= render @tasks %>

Luego, crea un archivo parcial para mostrar cada tarea. Crea un nuevo archivo en app/views/tasks/_task.html.erb y añade el siguiente código:


  <%= task.title %>

Agregando Interactividad con HTMX

Ahora, vamos a hacer que nuestro formulario y el botón de eliminar sean interactivos utilizando HTMX. Modifica el formulario en app/views/tasks/index.html.erb para que se vea así:

Y modifica el botón de eliminar en app/views/tasks/_task.html.erb para que se vea así:

Probando la Aplicación

Ahora que hemos configurado todo, es hora de probar nuestra aplicación. Ejecuta el servidor de Rails con el siguiente comando:

rails server

Abre tu navegador y ve a http://localhost:3000. Deberías ver tu lista de tareas. Puedes agregar nuevas tareas y eliminarlas sin que la página se recargue.

Conclusión

La combinación de Ruby on Rails y HTMX te permite desarrollar aplicaciones web de manera rápida y eficiente. Con Rails, obtienes una estructura sólida y herramientas poderosas, mientras que HTMX te permite agregar interactividad sin complicaciones. Al seguir los pasos descritos en este artículo, puedes comenzar a construir aplicaciones web modernas y receptivas en poco tiempo.

¡Así que no dudes en experimentar y crear tus propias aplicaciones utilizando Rails y HTMX! La comunidad de desarrolladores está siempre dispuesta a ayudar, y hay muchos recursos disponibles para que sigas aprendiendo.