Cómo agregar JavaScript a su aplicación Rails 6

Como desarrollador junior de Full-Stack, mi enfoque principal era el backend. Quería aprender a programar mi servidor backend para que sirviera a mi aplicación web.

Pero después de aprender los conceptos básicos del backend, aprendí que el frontend era tan importante como el backend. Y una forma de aumentar la vitalidad de su aplicación web es agregando JavaScript.

JavaScript es esencial para agregar interactividad a su aplicación web. Por supuesto, ahora se ha convertido en mucho más que eso. Es un lenguaje de programación que ejecutan los navegadores web. Muchos sitios web que ha visitado utilizan código JavaScript en su interfaz.

Es posible que haya comenzado a usar Ruby on Rails para crear su aplicación web y se haya preguntado cómo agregar JavaScript a su código. En este artículo, le mostraré cómo agregar código JavaScript a su aplicación Rails.

¿Por qué JavaScript?

Puede preguntarse por qué necesita JavaScript en su aplicación web en primer lugar. En resumen, si no incluye ningún JS, la experiencia de usuario de su aplicación web no será buena.

Supongamos que tiene un formulario que un usuario completa y desea realizar la validación del formulario. Si el usuario envía el formulario sin completar los valores adecuados, la página del formulario tiene que volver a cargarse, acceder al servidor y volver a aparecer para el usuario. Eso lleva mucho tiempo y probablemente molestará al usuario.

Por supuesto, a veces puede salirse con la suya con la validación de formularios HTML, pero eso no siempre es posible. Es mucho mejor agregar un script simple que verifique las entradas del usuario y les notifique que deben ingresar la información correcta.

Por supuesto, esto no significa que pueda ignorar la validación del lado del servidor, pero eso es para otro artículo.

Otro caso de uso es cargar archivos de forma asincrónica, lo que puede hacer en JavaScript sin tener que volver a cargar toda la página. Es posible que haya utilizado algunas aplicaciones web que cargan más imágenes y artículos a medida que se desplaza hacia abajo sin tener que actualizar o cambiar la página una y otra vez.

Estos y otros casos de uso son excelentes razones para utilizar JavaScript en su aplicación. De hecho, la demanda de JavaScript ha ido en aumento. Incluso puedes usarlo para escribir tu backend.

Pero nos encanta Rails, así que nos quedaremos con él por un tiempo.

Lo que cubriremos aquí

En el momento de escribir este artículo, la última versión del marco es Rails 6, y ha introducido algunos cambios en la forma en que interactúa con JavaScript.

Antes de Rails 6, teníamos la canalización de activos para administrar archivos CSS y JavaScript. Pero a partir de Rails 6, Webpacker es el compilador predeterminado para JavaScript. CSS aún es administrado por la canalización de activos, pero también puede usar Webpack para compilar CSS.

No encontrará su carpeta JavaScript en el mismo lugar que encontró en Rails 5. La estructura del directorio para JavaScript ha cambiado a la carpeta app / javascript / packs / .

En esa carpeta encontrará el archivo application.js , que es como el archivo application.css . Se importará de forma predeterminada en el archivo application.html.erb cuando cree su nueva aplicación Rails.

El application.html.erb archivo será utilizado por todos los puntos de vista.

Agregar una secuencia de comandos que será utilizada por todas las vistas

Si desea que su JavaScript esté disponible en todas las vistas o páginas, puede ponerlo en el archivo application.js :

require("@rails/ujs").start() require("turbolinks").start() require("@rails/activestorage").start() require("channels") console.log('Hello from application.js')

Las primeras cuatro líneas están ahí de forma predeterminada. He añadido una console.logdeclaración para mostrarle que JavaScript estará disponible en todas partes.

Puede probar esto viendo cualquier página en su aplicación y abriendo la consola de desarrollador.

Pero es posible que no siempre desee que su código JavaScript se cargue en todas las páginas. En su lugar, puede hacer que el script esté disponible solo cuando visite una página específica.

Agregar una secuencia de comandos que será utilizada por un archivo específico

Si desea que su JavaScript esté disponible solo para una vista específica, puede usar javascript_pack_tag para importar ese archivo específico:

I want my JS here only

console.log('Hello from My JS')

Recuerde que debe agregar el archivo en el directorio de paquetes . La etiqueta javascript_pack_tag también debe hacer referencia al nombre del archivo JavaScript que creó.

Ahora, el script solo se ejecutará cuando la vista específica que incluye la etiqueta javascript_pack_tag esté cargada en el navegador.

Terminando

Espero que este artículo ayude a aclarar cualquier confusión que pueda tener al actualizar su aplicación a Rails 6, o si acaba de comenzar con Rails.

Puedes seguirme en Github si quieres aprender más.