Qué es La Canalización de activos

BY admin
|

Objetivos

  1. Comprenda las 4 características principales de la canalización de activos.
  2. Identifique las rutas de acceso de los activos
  3. Conozca cómo los manifiestos de activos proporcionan concatenación de CSS y JS.
  4. Usar lenguajes de preprocesamiento como SASS o CoffeeScript
  5. Definir huellas dactilares de activos

Esquema

Durante mucho tiempo, tratamos JavaScript y CSS como una idea de último momento en el desarrollo de aplicaciones web. Todo nuestro código de activos, como imágenes, hojas de estilo y scripts JAVA, se guardaba en una carpeta masiva llamada public y se servía fuera del contexto de nuestra aplicación Rails. A medida que la web evolucionó, eso ya no tenía sentido.

La canalización de recursos es la respuesta de Rails para administrar hojas de estilo, scripts java e imágenes.

Rutas de activos

Muchos archivos se utilizan para crear aplicaciones web. Los archivos CSS y JavaScript por sí solos pueden ser difíciles de organizar. ¿Qué carpetas creamos? ¿Qué archivos van a dónde? La canalización de activos proporciona una respuesta para este problema. Tenemos que mantener las cosas muy organizadas en nuestra aplicación, pero, al mantener archivos y carpetas separados para cada concepto o unidad de código, tenemos 2 problemas.

  1. ¿Cómo sabe Rails dónde están las cosas? ¿El archivo JS del calendario está en app/assets/javascripts/calendar.js o vendor/javascripts/calendar.js?
  2. No queremos servir cada archivo por separado, ya que esto hará que nuestra página se cargue muy lentamente. Tiene sentido para nosotros mantener pequeños archivos separados para su legibilidad y organización, pero, para el navegador, preferimos romper todos esos pequeños archivos juntos y cargar 1 archivo JS y 1 archivo CSS. Este proceso se denomina concatenación.

Hablemos de nuestro primer problema: ¿cómo sabe Rails dónde buscar? La Canalización de activos tiene un concepto llamado Rutas de activos para manejar esto. Al igual que en BASH, donde tenemos una variable de entorno PATH que es una combinación de rutas de carpetas, la Ruta de activos es una combinación de rutas de carpetas para que Rails busque activos. Echemos un vistazo a un ejemplo de cómo se configura nuestra Ruta de activos.

Rails.application.config.assets.paths =>

Si colocamos un activo en cualquiera de estas carpetas, podemos acceder a ellas a través de la URL ‘/assets’ en nuestra aplicación. Si tiene carpetas adicionales para buscar en Rails, puede agregar las carpetas a la ruta de acceso del recurso. Esto se hace en el archivo config/initializers/assets.rb.

Rails.application.config.assets.paths << "New Path"

Podemos colocar activos en cualquier lugar, configurar nuestra ruta de activos y acceder a ellos a través de una única URL ‘/assets’.

Manifiestos y Concatenación

Ahora que podemos poner archivos en cualquier lugar, ¿cómo conseguimos que se incluyan en nuestras páginas web? La canalización de activos utiliza un archivo de manifiesto para indicar a Rails qué cargar. Este archivo de manifiesto es una ubicación central donde podemos enumerar todos los archivos CSS y JS que nuestra aplicación necesita. Esta no es una característica de JS o CSS, sino más bien la canalización de activos. Aquí hay un ejemplo de cómo se ve nuestro archivo de manifiesto JS:

Archivo: app / assets/javascripts / application.js

//= require jquery//= require calendar

Cuando incluya el archivo de manifiesto en su diseño con javascript_include_tag, la canalización de recursos buscará todos los archivos enumerados en la ruta de acceso de recursos. Observe cómo requerimos calendario. Este archivo vive en app/assets/javascripts/calendar.js, sin embargo, solo especificamos el nombre y no la ruta completa. La canalización de recursos buscará todas las rutas configuradas para un archivo con el nombre que proporcionamos.

Ahora que resolvimos la cuestión de la descubribilidad, hablemos de la concatenación. Como comentamos anteriormente, no queremos cargar nuestros archivos en el navegador uno por uno. Es mejor realizar una descarga que un montón de pequeñas descargas desde nuestro navegador. Los archivos de manifiesto que configuramos en Rails concatenarán automáticamente los archivos listados en ellos en un solo archivo en producción. Esta podría no ser la mejor opción cuando estamos desarrollando nuestra aplicación, ya que puede dificultar la depuración. Sin embargo, Rails servirá cada archivo por separado cuando estemos ejecutando en modo de desarrollo. No hay necesidad de hacer nada.

Finalmente, las directivas de piñón que impulsan nuestros manifiestos de activos se cubrirán en detalle más adelante.

Preprocesamiento

Poder combinar archivos y cargarlos desde un conjunto de ubicaciones predefinidas en nuestra aplicación es un gran beneficio de la Canalización de activos. Eso es sólo el principio. Debido a que estamos cargando activos a través de Rails, podemos preprocesar los archivos utilizando lenguajes populares como SCSS para escribir mejores CSS y Coffeescript para JS más limpios. Si haces un activo llamado theme.css.scss, le está diciendo a la canalización de activos que ejecute el archivo a través del preprocesador SCSS antes de servir el tema.css al navegador. El preprocesador SCSS compila el archivo en CSS. Lo único que teníamos que hacer era proporcionar la extensión de archivo correcta, .scss, al archivo y la canalización de activos sabe ejecutarlo a través del preprocesador SCSS.

Huella dactilar

El último beneficio del que hablaremos es la huella dactilar, pero primero hablemos del problema que nos ayuda a resolver. Cuando servimos archivos al navegador, es probable que se almacenen en caché para evitar descargarlos de nuevo en el futuro. ¿Qué es el almacenamiento en caché que podrías preguntar?

Almacenar algo en caché significa mantener una copia de una operación que consume mucho tiempo localmente para que no tenga que volver a hacer la costosa operación si las entradas y salidas van a ser exactamente las mismas. Los cachés suelen ser almacenes de valor clave, donde el valor es la respuesta a la costosa operación y la clave es algo que es exclusivo de ese elemento. Si solicita una página del servidor y luego solicita la misma página del servidor de nuevo, la forma más rápida de completar esa solicitud es conservar una copia de lo que obtuvo la última vez localmente. Los navegadores almacenan en caché muchas de las respuestas que obtienen a las solicitudes que han realizado utilizando los encabezados que se envían con la respuesta. Los encabezados le dicen al navegador cuánto tiempo la página permanece «fresca» antes de que «caduque».’Una vez que la página ha caducado, el navegador realizará una nueva solicitud para que la página actualice su caché. Decimos que la solicitud más rápida es la solicitud que no se hace. También se dice a menudo que la invalidación de caché es uno de los dos problemas difíciles en ciencias de la computación, ¡así que piense cuidadosamente cuando comience a almacenar cosas en caché! El almacenamiento en caché nos ahorra ancho de banda y proporciona un aumento de velocidad para el usuario. Esto es genial hasta que cambie el archivo y desee que todos sus usuarios obtengan el nuevo en lugar de la versión anterior que han almacenado en la caché de su navegador. Pero, ¿cómo hacemos saber al navegador que hemos modificado el archivo? Si la nueva versión tiene el mismo nombre que la versión anterior, el navegador continuará usando el archivo antiguo de su caché. Necesitamos una forma de cambiar el nombre del archivo cuando cambie el contenido para que los navegadores no sigan sirviendo el archivo antiguo.

De la Cartilla de Guías Rails

» La toma de huellas dactilares es una técnica que hace que el nombre de un nombre de archivo dependa del contenido del archivo. Cuando el contenido del archivo cambia, el nombre del archivo también cambia. Para el contenido estático o que se cambia con poca frecuencia, esto proporciona una manera fácil de saber si dos versiones de un archivo son idénticas, incluso en diferentes servidores o fechas de implementación.

Cuando un nombre de archivo es único y se basa en su contenido, los encabezados HTTP se pueden configurar para alentar a las cachés en todas partes (ya sea en CDN, en ISP, en equipos de red o en navegadores web) a mantener su propia copia del contenido. Cuando se actualice el contenido, la huella digital cambiará. Esto hará que los clientes remotos soliciten una nueva copia del contenido. Esto se conoce como cache busting.

La técnica que usa sprockets para la toma de huellas dactilares es agregar un hash del contenido al final del nombre del archivo. Por ejemplo, tome un archivo CSS llamado global.css. Los piñones agregarán el hash 908e25f4bf641868d8683022a5b62f54 al final del nombre del archivo de la siguiente manera:

global-908e25f4bf641868d8683022a5b62f54.css

Si está utilizando una versión anterior de Rails (Rails 2.x), la estrategia solía ser agregar una cadena de consulta basada en fechas a cada recurso vinculado con un ayudante incorporado. Esto se veía así.:

global.css?1309495796

La estrategia de cadena de consulta tiene varias desventajas:

  • No todas las cachés almacenarán contenido en caché de manera confiable donde el nombre del archivo solo difiere según los parámetros de consulta.
    • Steve Souders recomienda » evitar una cadena de consultas para los recursos cacheables.»El 5-20% de sus solicitudes no será almacenada. En particular, las cadenas de consulta no funcionan en absoluto con algunas CDN para invalidar la caché.
  • El nombre del archivo puede cambiar entre nodos en entornos de varios servidores.
    • La cadena de consulta predeterminada en Rails 2.x se basa en el tiempo de modificación de los archivos. Cuando los activos se implementan en un clúster, no hay garantía de que las marcas de tiempo sean las mismas, lo que da lugar a que se utilicen valores diferentes en función del servidor que gestione la solicitud.
  • Demasiada invalidación de caché.
    • Cuando se despliegan activos estáticos con cada nueva versión de código, el mtime (hora de la última modificación) de todos estos archivos cambia, obligando a todos los clientes remotos a recuperarlos de nuevo, incluso si el contenido de esos activos no ha cambiado.

Las huellas dactilares solucionan todos estos problemas al garantizar que los nombres de archivo sean coherentes en función de su contenido.

La toma de huellas dactilares está habilitada de forma predeterminada para producción y deshabilitada para todos los demás entornos. Puede activarlo o desactivarlo en su configuración a través de la opción config.assets.digest.»

Conclusión

La canalización de activos es definitivamente más compleja que solo servir activos desde una carpeta pública y puede ser difícil de depurar. Aprender a usarlo dará sus frutos a largo plazo, ahorrándonos tiempo y dolores de cabeza. Piensa en todos los problemas que nos resuelve.

  1. Rutas de activos
  2. Manifiestos y Concatenación
  3. Preprocesamiento
  4. Toma de huellas dactilares

Finalmente, eche un vistazo a keynote donde DHH presenta la canalización de activos.