Todo lo Que Debe Saber Sobre la Canalización de Activos Rails

¿Qué es la canalización de activos?

Si está creando una aplicación Rails, probablemente haya oído hablar de la canalización de activos. La canalización de recursos se puede considerar como las herramientas y mecanismos mediante los cuales se procesan y preparan archivos Javascript, hojas de estilo e imágenes para su uso por el navegador. Estos procesos pueden reducir y comprimir activos, así como activos previos al proceso que están escritos en otros lenguajes como Coffeescript o Sass.

La canalización de activos se creó para resolver una variedad de problemas relacionados con los activos estáticos. Uno de estos problemas es que cada recurso especificado por separado en el marcado HTML debe recuperarse por separado, lo que resulta en un mayor número de solicitudes HTTP y, al final, un mayor tiempo de carga. Los archivos Javascript y CSS sin procesar también pueden desperdiciar mucho ancho de banda con comentarios, espacios en blanco adicionales y nombres de variables largos. Otro problema que surge es el almacenamiento en caché. Por ejemplo, cuando se muestra un archivo Javascript desde el servidor, el navegador almacenará automáticamente ese archivo en caché durante un período de tiempo. Esto mejora el tiempo de carga de la página, pero ¿qué pasa si ese activo cambia en un momento posterior? El navegador no lo sabrá, por lo que continuará utilizando el activo almacenado en caché hasta que expire su vida útil en caché. Finalmente, lenguajes como Coffeescript, Sass, Less y Erb han facilitado la organización y escritura de Javascript y CSS, pero el navegador no puede interpretarlos directamente, por lo que se necesita un preprocesador para convertir esos archivos en sus homólogos apropiados antes de enviarlos al navegador.

La canalización de activos, en su benevolencia, puede resolver todos los problemas anteriores cuando se usa correctamente. Puede compilar múltiples activos en uno, reducir y comprimir activos, proporcionar la digestión de activos para evitar problemas de almacenamiento en caché, y puede preprocesar lenguajes alternativos y convertirlos en Javascript y CSS.

Esta publicación cubre una variedad de temas relacionados con la canalización de activos:

• los conceptos básicos de cómo usar la canalización de activos
• las mejores prácticas para estructurar dónde colocar sus activos
• cómo usar la matriz precompilada para especificar qué archivos son procesados por la canalización de activos
• cómo se pueden aprovechar Sass y Coffeescript
• algunos gotchas

Uso básico

Hay dos formas básicas de utilizar la canalización de activos:

1. Al ejecutar un servidor en modo de desarrollo, preprocesa y prepara automáticamente sus activos sobre la marcha.
2. En el modo de producción, es probable que lo use para preprocesar, versionizar, comprimir y compilar sus activos. Puede hacerlo ejecutando el siguiente comando:

1

bundle exec rake assets:precompile

Esto creará (de forma predeterminada) un directorio assets en su carpeta public/. Luego agregará todos los archivos comprimidos y compilados a ese directorio, en los formatos apropiados y con las nuevas versiones digeridas. A continuación, puede configurar Nginx o Apache para servir esos archivos directamente para que Rails no tenga que entregarlos (y ejecutar el preprocesamiento sobre la marcha, etc.).) en sí.

Recuerde que los valores predeterminados se pueden cambiar, por lo que si las cosas no funcionan como se esperaba, compruebe el archivo de configuración de la aplicación en config/application.rb. En Rails 4, el manejo de activos se configura normalmente en config/initializers/assets.rb.

Estructura de archivos

Es importante organizar sus activos de una manera que sea comprensible para usted y facilite la funcionalidad existente de la canalización de activos. Lo primero que debe saber es que todos sus Javascript personalizados, hojas de estilo e imágenes deben ir al directorio app/assets/. De forma predeterminada, hay una carpeta para javascripts, stylesheets y images. También puede agregar fonts, audios y videos al directorio app/assets/ para esos tipos de activos. Todo el código de terceros que está utilizando (por ejemplo, jQuery, backbone.js, etc.) debe colocarse en el directorio vendor/assets/ :

1234567891011

rails-app/ app/ assets/ images/ # Image assets javascripts/ # Custom Javascript/coffeescript stylesheets/ # Custom CSS/Sass ... vendor/ assets/ javascripts/ # Javascript libraries, etc. stylesheets/ # Vendor themes, javascript library themes, etc.

Dado que su servidor web almacenará automáticamente archivos estáticos del directorio public/, ¿por qué no deberían colocarse allí todos los activos de Javascript, imagen y hoja de estilos? Por un lado, nada en la carpeta public se procesará previamente, compilará o comprimirá automáticamente, por lo que al colocar activos allí, está eludiendo completamente la canalización de activos y perdiendo todos sus beneficios. Cuando colocas activos allí, también pierdes la capacidad de referenciarlos fácilmente dentro de tu código Rails. Podría tener una vista, por ejemplo, que tenga el siguiente código:

12345678910

# app/assets/images/logo.png= image_tag('logo')# Outputs something like <img src="/assets/logo-.png" /># public/images/logo.png= image_tag('/images/logo.png')# Outputs something like# <img src="/images/logo.png" />

En el segundo escenario (public/images/logo.png), el sitio solo funcionará si se entrega desde el directorio base. Tampoco puede aprovechar el control de versiones del archivo de la canalización de activos.

Precompilación

Es posible que ahora se pregunte si todo lo que ponga en la carpeta app/assets/javascripts/ se compila automáticamente para su aplicación. Afortunadamente, la canalización de recursos proporciona una forma de especificar qué archivos se compilan y en qué orden. De forma predeterminada, la aplicación.css y aplicación.se incluyen js (o sus equivalentes sass/coffeescript), junto con todos los activos que no sean Javascript ni CSS. Para incluir un archivo CSS o Javascript que no sea una aplicación.css y aplicación.js, tienes que pedirlo de una de dos maneras:

1. Añádalo al array precompilado en config/initializers/assets.rb(Rails 4) o al archivo de configuración de su aplicación (por ejemplo, config/application.rb), o
2. Incluya el archivo en el manifiesto de su activo o en uno de los manifiestos de su subarchivo.

La primera opción se ve así:

12

# In config/initializers/assets.rbRails.application.config.assets.precompile += %w( some-other-file.js even-another.css )

Esta opción es la mejor para archivos que tiene sentido incluir solo en ciertas páginas, y no deben incluirse en otras. Por ejemplo, si tiene una parte de su sitio que se utilizará como un widget incrustado de iframe, es posible que solo desee usar widget.js y widget.css, o algo similar, en esa página. Esos archivos tendrían que ser agregados a la matriz precompilada como se muestra arriba.

La segunda opción es lo que se debe usar la mayor parte del tiempo, y permite que sus archivos Javascript y CSS se compilen en una sola aplicación.js y una aplicación.archivo css. El manifiesto se escribe en la parte superior del activo aplicable.

En coffeescript, se ve así:

12345

# In application.coffee##= require jquery#= require jquery_ujs#= require_tree .

El manifiesto anterior incluirá jQuery, el adaptador de scripting discreto Rails jQuery (jquery_ujs) y todos los archivos del árbol actual (es decir, app/assets/javascript/*). Tenga en cuenta que require_tree no compila activos recursivamente a través de directorios. Si tiene una carpeta de archivos que desea incluir, también tendrá que agregarla al manifiesto:

1

#= require_tree ./components

Una directiva de manifiesto más es require_self, que se utiliza para incluir el Javascript del archivo actual en ese punto de la cadena. Lo anterior, con un require_self se puede escribir en un archivo .js de la siguiente manera:

1234567

// In application.js////= require jquery//= require jquery_ujs//= require_tree .//= require_tree ./components//= require_self

Los manifiestos Sass / CSS usan el mismo formato básico, pero con el estilo de comentario apropiado:

123456

/** In application.css * *= require reset *= require global *= require layout */

Tenga en cuenta que al usar Sass, necesitará usar su regla @import para aprovechar las variables y mixins, ya que cada archivo compilado por el manifiesto tiene su propio ámbito.

Tenga cuidado con el uso de la directiva require_tree. Los activos en el árbol se incluirán en orden alfabético, lo que significa que si un archivo que comienza con «a» depende de un archivo que comienza con «z», podría encontrarse con problemas en los que las piezas necesarias no estén disponibles cuando el navegador evalúe el Javascript. Este problema se puede evitar utilizando los protectores jQuery(document).ready() o window.onload adecuados, especificando un orden manualmente, o prefijando los archivos con números como 01_, 02_:

12345

# application.js# Note that the `.js` isn't needed at the end of the filename.##= require subfolder/library#= require subfolder/depends-on-library

Recuerde que cualquier archivo Javascript o CSS precompilado puede contener un manifiesto en la parte superior, por lo que puede usar archivos de subcarpetas para simplificar su manifiesto de nivel superior.

Sass y Coffescript, y Ayudantes de activos de Rails

He mencionado Sass y Coffeescript un poco en las secciones anteriores, pero aún no he entrado en lo que son. Si ya está familiarizado con ellos, no dude en saltar a la sección «Ayudantes de recursos de Rails».

Sass y Coffeescript

Sass y Coffeescript son lenguajes que utilizan preprocesadores para transformar su sintaxis en CSS y Javascript, respectivamente. Hay varios otros lenguajes preprocesados como Typescript y Less, pero Sass y Coffeescript se incluyen por defecto con Rails, y son probablemente los más populares. No entraré en detalles extensos aquí sobre estos idiomas, así que consulte los enlaces de arriba para obtener más información.

Por mi experiencia, mientras que Sass y Coffeescript proporcionan una gran cantidad de azúcar sintáctica (características de código bonito), el hecho de que se produzcan excepciones para código no válido en la etapa de preprocesamiento es suficiente para justificar su uso. Coffeescript envuelve automáticamente su código por archivo y agrega la palabra clave var a sus variables locales, evitando así muchos dolores de cabeza de alcance que pueden ocurrir más fácilmente en Javascript vainilla.

Por ejemplo, el siguiente código Coffeescript:

12345

$ -> $('#element').on 'click', -> state = 'clicked' window.state = 'clicked' console.log 'element clicked'

se convierte al siguiente Javascript:

1234567891011

(function() { $(function() { return $('#element').on('click', function() { var state; state = 'clicked'; window.state = 'clicked'; return console.log('element clicked'); }); });}).call(this);

Cuando el preprocesador procesa el archivo, envuelve automáticamente el código en una función anónima ((function() {}).call(this)) y agrega la palabra clave var al primer uso de state. Tenga en cuenta que si desea utilizar el ámbito global, debe especificarlo con el prefijo window..

Hay mucho más en Coffeescript, pero el alcance automático ha sido extremadamente útil para mí personalmente en la prevención de errores difíciles de encontrar.

Ayudantes de activos Rails

Otra gran característica que solo puede obtener utilizando Sass en su proyecto Rails son los ayudantes de ruta de activos. Al hacer referencia a otros activos en su Sass, puede usar la siguiente sintaxis para obtener las rutas adecuadas:

123

.logo { background-image: image-url("logo.png");}

También se pueden usar los ayudantes image-path, asset-url y asset-path. Los ayudantes -url envuelven la ruta con url().

Erb en Activos

La canalización de activos le permite evaluar el código erb en sus activos CSS y Javascript mediante el sufijo del nombre de archivo con .erb (por ejemplo, application.js.erb o application.scss.erb). Si bien esto puede ser útil para agregar rutas de activos a su Javascript, en general, no recomiendo usar esta función. Agrega otro paso de preprocesamiento al archivo, lo que aumenta el tiempo que tarda en precompilarse. También puede generar malos hábitos. Es posible que se sienta tentado a agregar código que no tiene sentido en tiempo de compilación, como traducir cadenas. Esas cadenas solo se traducirían en tiempo de compilación, negando así todo el propósito de traducirlas. La única razón para usar Erb en un archivo Javascript debe ser usar el ayudante asset_path como se explica en la guía.

Gotchas de canalización de activos

Las siguientes son algunas gotchas y curiosidades que pueden ser útiles para desarrollar los activos de su aplicación Rails.

• ¿Cómo agrego datos globales para que los use mi Javascript?
  • La gema gon se puede usar para insertar datos de alcance global en la página para que su Javascript los consuma. Esto es ideal para cosas como proporcionar el ID del usuario actual o la configuración del sitio.
• ¿Dónde debo aumentar la matriz precompilada?
  • En Rails 4, debe aumentar el array en config/initializers/assets.rb, y en Rails 3, debe hacerlo en config/application.rb. Uso de activos.rb o solicitud.rb establece la matriz precompilada para todos los entornos, de modo que si agrega un entorno (quizás staging), no necesitará aumentar la matriz precompilada específicamente para ese nuevo entorno.activos
    • .po: Rails.application.config.assets.precompile += %w( widget.css widget.js )
    • solicitud.po: config.assets.precompile += %w( widget.js widget.css )
• ¿Cuándo debo precompilar los activos por separado aumentando la matriz de precompilación?
  • Esto se debe hacer raramente. La mayoría de las veces, la única razón por la que querría hacer esto es si el activo se incluye solo en una página especial donde no desea el resto de los activos, como un widget incrustado en iframe. Utilice su aplicación.js y aplicación.manifiestos css para extraer tus activos.
• ¿Debo permitir que Rails sirva archivos estáticos?
  • Sí. Esto sigue las pautas de la aplicación de Doce Factores y evita errores si olvidó incluir un archivo en la matriz precompiladora o si olvidó precompilarlo.
  • Establezca config.serve_static_assets = true en Rails 3 y config.serve_static_files = true en Rails 4.
• ¿Cómo puedo asegurarme de que mi Javascript/CSS está bien escrito?
  • Escribir Javascript y CSS de alta calidad (o Coffeescript y Sass) puede llevar mucho tiempo y experiencia, pero una cosa que me ha ayudado mucho es usar un linter). Algunos IDE, como Sublime Text, tienen complementos que integran linters. Yo personalmente uso el paquete SublimeLinter. Si vas a escribir Javascript y CSS antiguos, definitivamente deberías usar un linter.
• ¿Cómo cambio el directorio donde se colocan mis activos precompilados?
  • Puede cambiar la configuración config.asset.prefix a otro directorio, como /static.
  • Cambie el prefijo de activo en development.rb si desea realizar un seguimiento de los activos precompilados en git para su uso en producción.
  • Cambie el prefijo de activo globalmente si desea utilizar el espacio de nombres de ruta /assets para sus controllers.
• ¿Cómo sirvo activos estáticos con Nginx?
  • La directiva básica nginx debería tener este aspecto (consulte la sección Activos Precompilados de la guía Rails para obtener más información):

1234567

location ~ ^/assets/ { expires 1y; add_header Cache-Control public; add_header ETag ""; break;}

• Lo que es manifiesto.yml o manifiesto-.json?
  • El manifiesto.yml (Rails 3) o manifiesto-.los archivos json (Rails 4) se crean automáticamente cuando precompila sus activos con rake assets:precompile. Contienen información sobre los archivos que utilizará tu app.
• ¿Qué tipos de archivos NO deben incluirse en la canalización de activos?
  • Por lo general, querrá conservar archivos grandes (videos, grandes cantidades de descargas de PDF, etc.).) en un repositorio independiente o en un administrador de archivos en la nube, como AWS S3. A continuación, se puede hacer referencia a los archivos desde tu aplicación, pero no tienes que atascar tu repositorio git.
• ¿Cómo puedo hacer que mis activos de Rails 3 se compilicen más rápido?
  • Utilice la gema turbo-sprockets-rails3.
• ¿Puedo usar una CDN (red de entrega de contenido) para mis activos?
  • ¡Sí! El resumen, o huella digital, con el sufijo de cada activo hace que funcionen muy bien con CDN. Configure su CDN para que sirva activos desde su aplicación Rails y, a continuación, establezca la configuración config.action_controller.asset_host en el dominio adecuado para su CDN (por ejemplo, config.action_controller.asset_host = 'mycdn.fictional-cdn.com'). Recomiendo usar variables de entorno para establecer esto: config.action_controller.asset_host = ENV.

Envolverlo

El uso correcto de la canalización de activos puede mejorar la calidad general de su aplicación en términos de rendimiento, resiliencia y limpieza del código. Al utilizar las funciones de la canalización de activos, puede superar automáticamente algunos de los problemas más importantes relacionados con la codificación y la entrega de activos estáticos.