A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Assets y Layouts

11/36
Recursos

Aportes 13

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

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

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.

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鈥

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 鈽

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!