Vistas en Rails

El controlador es responsable de organizar todo el proceso de manejo de solicitudes en una arquitectura MVC como Ruby on Rails y cuando llega el momento de enviar una respuesta al usuario, el Controlador entrega dicha respuesta a la Vista.

A grandes rasgos, esto implica:

• Decidir qué se debe enviar como respuesta
• Determinar el método apropiado para crear esa respuesta.

Si la respuesta es un documento HTML Rails se encarga incluir todos los assets junto con el layout adecuado.

Ruby on Rails por defecto tiene un layout que enmarca todas las vistas, este se encuentra en aplication.html.erb ubicado en la carpeta views/layouts/

Como se puede observar luego de la extensión .html aparece la extensión .erb, esta extensión hace referencia al formato del template engine que se está usando. Para comprender como funciona esto, debemos explicar algunos conceptos antes.

Web Template System

Es un proceso que se lleva a cabo del lado del servidor, para generar documentos HTML de forma dinámica y masiva. El contenido dinámico del documento HTML puede obtenerse de la base de datos, las especificaciones de la presentación se encuentran en la plantilla (template), el template engine se encarga de interpolar el contenido en la plantilla.

Entre algunos de los template engines que podemos usar en Ruby on Rails podemos encontrar ERB y HAML.

El template engine ERB (Embedded Ruby) te permite mezclar código ruby con código HTML y es el que Ruby on Rails establece por defecto.

Para incrustar código Ruby en el HTML se utilizan los tags:

HAML (HTML abstraction markup language)

Haml es un lenguaje de marcado usado para escribir de forma limpia y sencilla el código HTML de un documento web, se llama abstracto porque evita la escritura explicita de código HTML en el documento. En lugar de abrir y cerrar tags, Haml usa la identación para organizar el código lo que lo hace más limpio, pequeño y organizado, por lo tanto más fácil de visualizar.

La sintaxis básica de Haml es la siguiente:

Rails Layouts

Un layout es básicamente una plantilla que contiene el código HTML que se repetirá en varias vistas, este layout contiene o encapsula la vista que será recibida en un bloque (yield).

Se pueden construir layouts propios y renderizarlos en ocasiones puntuales, o en toda la aplicación.

Para aplicar a todas las vistas un layout con el nombre “custom_layout”, modificamos ApplicationController, de la siguiente forma:

Para aplicarlo en un controlador en especifico debemos declararlo de las siguientes formas:

Asset Pipeline

El assets pipeline de Rails es una herramienta que permite precompilar todos los elementos del CSS y demás recursos en la carpeta assets.

Básicamente si se colocan los recursos como imágenes, fuentes de texto, archivos CSS, en la carpeta correcta de assets, Rails se encargara de servir estos recursos hacia el cliente web.

Pero si te interesa comprender un poco más, te explico algunos términos y de forma coloquial te hare una aproximación a los procesos que realiza.

El Asset pipeline se implementa a través de la gema sprockets

Compilar: acción mediante la cual una serie de instrucciones escritas en un lenguaje de programación son convertidas a lenguaje de máquina de tal forma que puedan ser ejecutadas mediante un programa informático.

Precompilar: compilar partes estables del código fuente de un software para que posteriormente no sean necesario compilarlas junto con el resto del código

Ventajas:

Reduce el tiempo de compilación de la aplicación

Es muy util cuando tienes un gran cuerpo o bloque de código que cambia muy poco o solo en partes.

En este caso multiples vistas pueden tener acceso al mismo bloque de propiedades CSS por lo cual es muy útil tenerlo precompilado.

Rails a parte de precompilar también reduce el tamaño del código, para esto utiliza la gema yui (se encarga del css) y la gema uglifier (se encarga del js)

¿Cómo lo reduce? Básicamente lo que hace es afear (uglifier) el código, es decir elimina los espacios donde no son necesarios, elimina los saltos de línea y reduce el nombre de las variables a combinaciones cortas de letras y números que serian difíciles de entender por un ser humano pero que la maquina maneja sin complicaciones.

Asociación entre vista y controlador

(rendering vs redirect_to)

Por defecto Rails hace el renderizado de las vistas asociadas al nombre de la acción, sin embargo se pueden renderizar vistas con otros nombres, o redireccionar a vistas asociadas a otras acciones.

Diferencias entre render y redirect_to:

render procesa la data generada por la acción en la plantilla que se le indica a continuación, no despacha otra solicitud al controlador.

redirect_to le indica al controlador qué acción debe ejecutar a continuación, no es solamente renderizar una página, es ejecutar una acción, la cual dispara la renderización.

Fuentes

A continuación se describen los pasos a seguir si deseamos colocar fuentes personalizadas en nuestra web.

Lo primero es elegir cual fuente se adapta mejor a lo que quieres mostrar en tu aplicación.

Un buen lugar para descargar fuentes es Google Fonts. Una vez descargada la fuente, la agregamos a assets, en la carpeta fonts, ejemplo:

Y para implementarlo, nos vamos a nuestro archivo css, y aplicamos esta plantilla:

Para usar la fuente Roboto por ejemplo se vería así: