Las vistas con ERB son plantillas que mezclan HTML con código Ruby para mostrar información dinámica a tus usuarios.
¿Sabías que el 80% del trabajo visible de una app web vive en las vistas? El modelo guarda los datos. El controlador los procesa. Pero la vista es lo que tus usuarios realmente ven y usan todos los días.
Qué es ERB y por qué Rails lo usa
ERB significa Embedded Ruby. Es un sistema de plantillas que te permite escribir código Ruby dentro de un archivo HTML normal.
Piénsalo así: tienes una página HTML estática, como una hoja de papel en blanco. Con ERB, puedes "rellenar" partes de esa hoja con datos reales que vienen de tu base de datos.
Rails usa ERB por defecto. Los archivos tienen extensión .html.erb y viven dentro de la carpeta app/views.
Las dos etiquetas que necesitas saber
ERB tiene dos etiquetas principales. Solo dos. Apréndelas bien y podrás construir casi cualquier vista.
Etiqueta de ejecución: <% código Ruby %> — ejecuta código Ruby pero no muestra nada en pantalla. La usas para lógica, ciclos y condicionales.
Etiqueta de salida: <%= código Ruby %> — ejecuta código Ruby Y muestra el resultado en pantalla. La usas para imprimir valores.
Fíjate en la diferencia: una tiene = y la otra no. Ese signo de igual es la clave.
<% # Esto no muestra nada %>
<%= "Hola desde Ruby" %>
La segunda línea imprimiría en pantalla: Hola desde Ruby.
Historia de Sofía: su primera vista dinámica
Sofía trabaja en una startup de logística en Monterrey. Su equipo construye una app interna para rastrear envíos de paquetes.
Su jefe le pidió crear una página que mostrara el listado de todos los pedidos activos. Sofía ya tenía el modelo Pedido y el controlador listo. Solo le faltaba la vista.
Abrió el archivo app/views/pedidos/index.html.erb y escribió esto:
<h1>Pedidos activos</h1>
<table>
<thead>
<tr>
<th>Número</th>
<th>Cliente</th>
<th>Total</th>
<th>Estado</th>
</tr>
</thead>
<tbody>
<% @pedidos.each do |pedido| %>
<tr>
<td><%= pedido.numero %></td>
<td><%= pedido.cliente %></td>
<td><%= number_to_currency(pedido.total, unit: "$", separator: ".", delimiter: ",") %></td>
<td><%= pedido.estado %></td>
</tr>
<% end %>
</tbody>
</table>
¿Notas cómo el ciclo each usa <% sin igual? Eso es porque el ciclo es lógica, no texto visible. Pero pedido.cliente usa <%= %> porque sí quiere mostrarlo.
Su jefe quedó impresionado. La tabla mostraba los 47 pedidos del día automáticamente. Ninguno escrito a mano.
Variables de instancia: el puente entre controlador y vista
En Rails, el controlador pasa datos a la vista usando variables de instancia. Esas son las que empiezan con @.
Si en tu controlador escribes @pedidos = Pedido.all, entonces en tu vista puedes usar @pedidos libremente.
Esto es el "puente" entre el controlador y la vista. Sin ese @, la vista no sabe de dónde sacar los datos.
Aquí un ejemplo completo del controlador:
# app/controllers/pedidos_controller.rb
def index
@pedidos = Pedido.where(estado: "activo")
end
Y en la vista, @pedidos ya está disponible. Así de simple.
Historia de Carlos: mostrar un solo registro
Carlos desarrolla una tienda en línea para una distribuidora de productos Bimbo en CDMX. Necesita una página de detalle para cada producto.
Su controlador tiene esto:
def show
@producto = Producto.find(params[:id])
end
Y su vista app/views/productos/show.html.erb quedó así:
<h1><%= @producto.nombre %></h1>
<p>Precio: <%= number_to_currency(@producto.precio, unit: "$", separator: ".", delimiter: ",") %></p>
<p>Categoría: <%= @producto.categoria %></p>
<p>Descripción: <%= @producto.descripcion %></p>
<% if @producto.disponible? %>
<p>✅ En stock</p>
<% else %>
<p>❌ Agotado</p>
<% end %>
¿Ves el condicional if? Usa <% %> sin igual porque es lógica. Solo el contenido dentro imprime texto.
Carlos pudo mostrar el precio con formato correcto y una etiqueta de disponibilidad. Todo dinámico, todo automático.
El layout: la envoltura de todas tus vistas
Rails tiene un archivo especial llamado layout. Vive en app/views/layouts/application.html.erb.
Este archivo contiene el HTML base: el <head>, los estilos, el menú de navegación. Todas tus vistas se insertan automáticamente dentro de él.
La clave está en esta línea dentro del layout:
<%= yield %>
Esa línea es donde Rails inserta el contenido de cada vista. Tú no tienes que repetir el <html> ni el <body> en cada archivo. El layout lo hace por ti.
Es como el marco de una ventana: siempre es el mismo. Pero lo que ves a través de ella cambia según la vista.
Parciales: reutiliza código sin repetirte
Una de las herramientas más útiles de ERB son los parciales. Son fragmentos de vista que puedes reutilizar en varias páginas.
Su nombre siempre empieza con guion bajo: _tarjeta_producto.html.erb.
Para usarlos, llamas a render:
<%= render "tarjeta_producto", producto: @producto %>
Imagina que Liverpool tiene una app interna para su catálogo. Muestran tarjetas de producto en la página de inicio, en resultados de búsqueda y en favoritos. Con un parcial, escriben el HTML de la tarjeta una sola vez y lo reutilizan en los tres lugares.
Si necesitan cambiar algo, lo cambian en un solo archivo. Eso es código limpio y eficiente.
Errores comunes al usar ERB
Todo mundo comete estos errores al principio. No te preocupes si te pasa. Lo importante es reconocerlos rápido.
Error 1: Olvidar cerrar las etiquetas
Si abres <% if ... %> y no cierras con <% end %>, Rails te lanzará un error. Cada bloque Ruby necesita su end.
Error 2: Usar <%= %> en lógica
Si escribes <%= @pedidos.each do |p| %> en lugar de <% @pedidos.each do |p| %>, Rails intentará imprimir el objeto del ciclo en pantalla. Verás texto extraño como #<Enumerator:...>. Usa <%= %> solo cuando quieras mostrar un valor.
Error 3: Olvidar el @ en la variable
Si en tu controlador defines @productos y en tu vista escribes productos sin el @, Rails te dirá que esa variable no existe. El @ es obligatorio para que el puente funcione.
Error 4: XSS y el escape automático
Rails escapa el HTML automáticamente cuando usas <%= %>. Eso es buena noticia: protege tu app de ataques. Si necesitas insertar HTML real y confías en los datos, usa raw() o html_safe. Pero hazlo solo cuando estés completamente seguro de que los datos son seguros.
Helpers de vista que te ahorran tiempo
Rails incluye métodos llamados helpers que simplifican tareas comunes en las vistas. Ya viste number_to_currency. Hay varios más:
link_to "Ver detalle", producto_path(@producto)— genera un enlace HTML.image_tag "logo.png"— inserta una imagen correctamente.time_ago_in_words(@pedido.created_at)— muestra algo como "hace 3 horas".truncate(@producto.descripcion, length: 100)— recorta texto largo.
Usar helpers hace tu código más limpio. Y si Rails ya resolvió algo por ti, no tienes que reinventar la rueda.
Lo que aprendiste hoy
Construir vistas en Rails es mezclar HTML con Ruby de forma ordenada. Tienes dos etiquetas, un layout compartido, parciales reutilizables y helpers útiles. Con eso, puedes crear páginas profesionales que muestren datos reales a tus usuarios.
La práctica hace al maestro. Abre tu proyecto, crea una vista nueva y empieza a iterar.