Mejore su aplicación Rails 7 con Stimulus.js e integración de JavaScript

Stimulus.js es un modesto marco de JavaScript que aumenta su HTML. Es el compañero perfecto para la funcionalidad integrada de Rails. En esta publicación, exploraremos cómo usar Stimulus.js para la funcionalidad de JavaScript, integrarlo con otras bibliotecas de JavaScript y administrar las dependencias de JavaScript de manera efectiva usando Importmap.

Requisitos previos

Antes de comenzar, asegúrese de tener lo siguiente:

• Configuración de la aplicación Rails 7
• Conocimientos básicos de JavaScript y Rails

Configurar Stimulus.js en Rails 7

Rails 7 viene con soporte predeterminado para Stimulus.js. Para comenzar, asegúrese de que Stimulus esté incluido en su aplicación ejecutando:

rails new my_app
cd my_app

Puedes encontrar los controladores de estímulo en app/javascript/controllers.

Crear un controlador de estímulo

Creemos un controlador de estímulo para manejar un evento de clic simple. Ejecute el siguiente comando:

rails generate stimulus hello

Esto generará un nuevo controlador hello_controller.js en app/javascript/controllers. Abra el archivo y agregue el siguiente código:

// 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!'
  }
}

En tu HTML, usa el controlador Stimulus:

  

  Greet

Cuando se hace clic en el botón, el texto cambiará a "¡Hola mundo!".

Integración con otras bibliotecas de JavaScript

Stimulus.js puede funcionar perfectamente con otras bibliotecas de JavaScript. Por ejemplo, integremos jQuery con Stimulus.js.

Primero, agregue jQuery usando Importmap:

Agrega jQuery a tu config/importmap.rb:

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

Luego, importa jQuery en tu controlador 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!')
  }
}

Administrar dependencias de JavaScript

Administrar dependencias de JavaScript en Rails 7 es sencillo con Importmap. A continuación se ofrecen algunos consejos:

• Agregar una biblioteca: Utilice pin "library_name", para: "library_url" en su config/importmap.rb para agregar una nueva biblioteca.
• Eliminar una biblioteca: Elimina la línea correspondiente de config/importmap.rb para eliminar una biblioteca existente.
• Actualizar bibliotecas: Actualice las URL en config/importmap.rb a las últimas versiones.
• Comprueba las bibliotecas obsoletas: Visita las URL en config/importmap.rb para ver si hay versiones más nuevas disponibles.

También puedes agregar archivos JavaScript personalizados a tu proyecto. Colóquelos en la carpeta app/javascript e impórtelos donde sea necesario.

Conclusión

Stimulus.js proporciona una forma potente pero sencilla de agregar funcionalidad JavaScript a su aplicación Rails. Al integrarlo con otras bibliotecas de JavaScript, puede crear una experiencia de usuario rica y dinámica. La gestión adecuada de sus dependencias de JavaScript garantiza que su aplicación se mantenga mantenible y actualizada.

¡Feliz codificación!