Uso de CoffeeScript con Rails y Webpacker: Integración y Ejemplos

Contenido del curso

Introducción

Pruebas

Interacción dinámica

Notificaciones

Ciclos de vida

Cierre

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:009:53

Uso de CoffeeScript con Rails y Webpacker: Integración y Ejemplos

Curso Intermedio de Ruby on Rails

Clase 18 de 34

Clase 18 / 34

Recursos

¿Qué es CoffeeScript y por qué es relevante?

CoffeeScript es un lenguaje que actúa como un metalenguaje o dialecto de JavaScript, introducido en momentos en que JavaScript no estaba tan maduro. Este lenguaje facilitó la codificación de JavaScript, incorporando ciertos elementos del paradigma orientado a objetos. Aunque hoy está en debate, es relevante ya que muchos proyectos de Rails siguen usándolo. Además, explorar metalenguajes como CoffeeScript puede optimizar tu proceso de codificación.

¿Cómo asociar CoffeeScript con Rails usando Webpacker?

Para integrar CoffeeScript en un proyecto de Rails, utilizamos el comando:

rails webpacker:install:coffee

Esto genera archivos y estructuras de directorios, asociando esta tecnología con el proyecto sin mayores modificaciones. Además, este generador crea un ejemplo llamado Hello Coffee que se puede eliminar por no ser útil, usando rm seguido del directorio del archivo. Una vez hecho esto, se debe editar el archivo application.js, ubicado en la carpeta app/javascript/packs, para definir la importación y consolidación de librerías JavaScript. Aquí se puede extender este archivo utilizando un sistema de consolidación, nombrado main.coffee.

¿Cómo estructurar scripts organizadamente con CoffeeScript?

La clave para organizar scripts de manera efectiva es usar namespaces. Primero, crea un archivo de consolidación, por ejemplo, main.coffee. Dentro de este, utiliza window para prefijar una variable global, como platzi, y dentro de este objeto, define un método init para inicializar elementos JavaScript:

window.platzi =
  init: ->
    console.log 'Mudrid.log by Platzi'

El uso de TurboLink Load es recomendable para ejecutar lógica después de que una página complete su carga:

document.addEventListener 'turbolinks:load', ->
  platzi.init()

Esto asegura que init se llame cada vez que el documento se cargue.

¿Cómo declaramos funciones específicas para cada vista?

Para crear funciones específicas por página, extiende el objeto global, detallando caminos específicos para vistas, así:

window.platzi =
  tasks:
    index:
      setup: ->
        console.log 'Index page'

Entonces, en la página vista de tasks, utiliza un filtro de Hamill para invocar la función:

:javascript
  platzi.tasks.index.setup()

Al navegar a la página index de tareas, verás el mensaje en la consola solo en esa vista, mostrando la modularización según la vista. Esta estrategia mantiene el código ordenado y enfocado, mejorando la mantenibilidad del proyecto.

Explorar más allá es clave: entender cómo CoffeeScript puede integrarse o cómo migrar tu código si eliges otra solución también es parte del aprendizaje en esta dinámica área del desarrollo.

Resumen

¿Qué es CoffeeScript y por qué es relevante?

¿Cómo asociar CoffeeScript con Rails usando Webpacker?

Para integrar CoffeeScript en un proyecto de Rails, utilizamos el comando:

rails webpacker:install:coffee

¿Cómo estructurar scripts organizadamente con CoffeeScript?

window.platzi =
  init: ->
    console.log 'Mudrid.log by Platzi'

El uso de TurboLink Load es recomendable para ejecutar lógica después de que una página complete su carga:

document.addEventListener 'turbolinks:load', ->
  platzi.init()

Esto asegura que init se llame cada vez que el documento se cargue.

¿Cómo declaramos funciones específicas para cada vista?

Para crear funciones específicas por página, extiende el objeto global, detallando caminos específicos para vistas, así:

window.platzi =
  tasks:
    index:
      setup: ->
        console.log 'Index page'

Entonces, en la página vista de tasks, utiliza un filtro de Hamill para invocar la función:

:javascript
  platzi.tasks.index.setup()

Explorar más allá es clave: entender cómo CoffeeScript puede integrarse o cómo migrar tu código si eliges otra solución también es parte del aprendizaje en esta dinámica área del desarrollo.

Introducción

Curso Intermedio de Ruby on Rails: Migración y Optimización Avanzada

Migración de Rails a MongoDB con Mongoid y Pruebas Automatizadas

Gestión de Múltiples Versiones de MongoDB en Linux

Migración de Rails a MongoDB con Mongoid: Configuración Inicial

Migración de Modelos de Active Record a Mongoid

Migración completa de aplicaciones con MongoDB y Rails

Pruebas

Pruebas Automatizadas: Introducción a TDD y BDD en Desarrollo de Software

Creación de Fábricas Automatizadas con FactoryBot y Faker en Rails

Integración de Librerías para Pruebas Automatizadas en Rails

Pruebas de Modelos en Rails con Mongoid y RSpec

Pruebas de Validación y Guardado en Modelos Rails

Validación y Pruebas de Modelos en Ruby on Rails

Pruebas de Integración en Rails: Configuración y Ejecución Básica

Creación y prueba de tareas con métodos POST en Rails

Automatización de Pruebas con Headless Browser y Capybara en Rails

Pruebas de Sistema con KPIBara y WebDriver en Rails

Automatización de Pruebas de Sistema con Selenium y JavaScript

Interacción dinámica

Uso de CoffeeScript con Rails y Webpacker: Integración y Ejemplos

Integración de Selectize con RAILs y Webpacker

Formularios Anidados en Rails: Uso de Simple Form y Cocoon

Implementación Selectize en Formularios Dinámicos con Kokoon y CafeScript

Notificaciones

Envío de Emails Automático al Crear Tareas

Introducción a Service Objects en Ruby on Rails

Pruebas de TDD para Service Object de Notificaciones por Correo

Creación de Service Objects para Envío de Correos en Ruby on Rails

Procesos en Background con Sucker Punch en Rails

Pruebas con Doubles en Rails usando Sucker Punch

Ciclos de vida

Máquinas de Estado Finito: Conceptos y Aplicaciones Prácticas

Creación de Máquinas de Estados con AASM en Ruby on Rails

Creación de Service Object para Gestión de Estados de Tareas en Rails

Acciones de Controlador y Pruebas en Ruby on Rails

Integración de AJAX en Gestión de Estados de Tareas en Ruby on Rails

Cierre

Optimización de rendimiento en aplicaciones web con Ruby on Rails

Migración y Pruebas Automatizadas en Ruby on Rails

Uso de CoffeeScript con Rails y Webpacker: Integración y Ejemplos