Assets y Layouts

Aquí se puede encontrar la información oficial del assetpipeline

https://guides.rubyonrails.org/asset_pipeline.html

en rails 7 no hay o no existe ya webpacker

Hola, soy nuevo por aquí! Quería decir que llevo unos 4 meses aprendiendo Rails por mi cuenta, todo a través de contenido en Inglés, y puedo decir dos cosas:

• Johan Tique es muy bueno explicando
• El contenido de Platzi es de mucha calidad

Por último… He venido para quedarme!
Un saludo a todos

Lo maravilloso de Rails es que aplica muy bien el principio de DRY. Los parciales permiten hacer mas rapido las paginas y no caer en repeticiones. Es muy limpio en ese sentido.

Assets

Son insumos que las respuestas HTML (y otras) necesitan para operar funcional y estéticamente de forma correcta en el cliente. Archivos CSS, JS, imágenes, fuentes, etc.

Cargar estos assets en una aplicación web puede llegar a ser un problema si no se manejan de forma correcta.

Se necesita un sistema de optimización, para que no tarde tanto el cargar los assets, también utilizar sistemas de caching para tener cierta información precargada, otra técnica es la ofuscación, para comprimir y cifrar los assets y por último sistemas de seguridad. Todo esto se puede gestionar desde Rails.

El sistema de assets en Rails se base en el Asset Pipeline

Asset Pipelin

El Asset Pipeline se puede pensar como una banda que va llevando a los assets por ciertas fases para llegar al paquete final que se enviará a la web.

Transformer

En esta etapa se transforman los archivos a los formatos que soporta la web, es decir. Por ejemplo, si se trabaja con SASS estos archivos pasarán por un transformador para convertirlos en CSS. Esto con todos los dialectos o meta lenguajes con los que se este trabajando

Concatenator

Lo que sucede aquí es que, por ejemplo, todos los archivos CSS se unan en un solo archivo y esto permite que solo se haga una petición para enviar todos los estilos de la aplicación.

Compressor

Lo que el compresor es minificar los archivos que obtuvo del Concatenator para que sean lo más ligeros posible.

Fingerprinter

El fingerprinter le da un ID único al paquete para indicarle al sistema de caching las versiones de assets y así sepa cuando es necesario reemplazar la información en caché.

Layouts

Por lo general, las vistas de las aplicaciones web están divididas en secciones, como una barra de navegación, la sección del contenido principal y el footer, esto es un layout.

El Asset Pipeline se enlaza al layout al principio, en algo llamado Sporckets manifest. Aquí se referencia la estructura del Asset Pipeline y se empiezan a agrupar los assets necesarios para esa página en específico.

Si la página se vuelve muy compleja se puede dividir en parciales para que no se tan complicado manejarla.

Con ayuda de el método yield, proporcionado por Rails, se manejará el contenido principal de las plantillas, para que solo este cambie y el resto de la página siga como en la plantilla.

Webpacker

Webpacker, recientemente añadido a Rails, es un componente que utiliza internamente Webpack. Con el propósito de tener un desarrollo de aplicaciones tanto tradicional como moderno.

Así como para gestionar las librerías de Ruby se utiliza el Gemfile, para el JS de la aplicación se utiliza YARN. Con YARN se gestionarán todas las librerías de JavaScript, asumiendo que los archivos JS también se pueden ver como assets.

ASSETS
Insumos para que la página tenga mejor interacción visual. Un asset puede ser reglas de estilo (CSS), Scripts de JS, imágenes, etc.

Requieren:

• Un sistema de optimización para que los assets no tomen tanto tiempo de carga.
• Sistemas de caching para evidenciar patrones de precarga.
• Ofuscación, sistema de seguridad y compresión.
• Un ambiente de seguridad, como fingerprints.

Todo esto viene incluido en el sistema de Rails. Se basa en un componente denomidado Asset Pipeline.

Asset Pipeline
Atraviesa ciertas fases, cada fase es un estado del asset hasta llegar al producto final.

1. El primer estado, transformación. La transformación de estilos o Scripts usando dialectos o metalenguajes. Ejemplo: SASS a CSS.
2. Segundo estado, concatenación.Permite la concatenación de archivos en un solo recurso, lo que permite no tener que pedir muchas veces el mismo recurso.
3. Tercer estado, compresor. Tiene todos los recursos (ya concatenados)
4. Cuarto estado, fingerprinting.Los recursos anteriores se convierten en una versión más pequeña. Se le añaden un ID único. Si el contenido cambia, también lo hará el ID.

LAYOUTS
Layout es el que dice la posición de los elementos del HTML. Antes de comenzar este proceso realiza un otro proceso llamado Sprockets manifest. De esta forma, usando un comando de Rails, podemos referenciar toda la estructura del Asset Pipeline y permite consolidar los assets de esa página específica.

En caso de ser una página muy compleja, es posible utilizar parciales. Los parciales extraen pequeños pedazos de código de la página y se pasan a otro archivo. Refactorizando y simplificando la página.

WEBPACK
Rails permite las arquitecturas basadas en JS. Esto usa Webpacker que utiliza el componente Webpack. Esto permite la opción entre un desarrollo de web moderno o tradicional.
Yarn
Yarn es el gemfile de webpacker. Es el gestor de paquetes para gestionar librerias JS.

Se aceptan correcciones ☹

Optimización: para que los assets no tomen tanto tiempo a la hora de ser cargados en la pagina web.

Caching: Evidenciar patrones de pre carga, donde no vas a tener que pedir siempre la misma información.

Ofuscacion: cargar un sistema en donde sea seguros los assets y se pueda comprimir.

Seguridad: utilizar fingerprints que permite acceder a los assets evitando ambiguedades entre ellos.

excelente

genial que potencien el front embebido…

Los assets de caching para guardar los datos o fuentes que se repiten para la carga mas rapida

waaaao rails+yarn+webpacker

Assets insumos, como css,js,imgy fonts para las vistas de la aplicacion

muy poderoso

Genial!