Turbo

``

Conceptos Clave

  • Turbo es un framework que permite mejorar la navegación en aplicaciones web sin recargar la página completa.
  • Funciona interceptando enlaces y formularios para cargar solo las partes necesarias.
  • Compatible con HTML estándar, no requiere frameworks JavaScript complejos.
  • Facilita la creación de SPA (Single Page Applications) ligeras y rápidas.
  • Basado en Drive, Frames y Streams para optimizar el rendimiento.
  • Soporta eventos personalizados y extensiones para funcionalidades avanzadas.

Componentes Principales

  • Drive
    • Controla la navegación de la página.
    • Intercepta clics en enlaces y envíos de formularios.
    • Mantiene el historial de navegación sin recargar la página.
  • Frames
    • Permiten actualizar secciones específicas del DOM.
    • Soportan la renderización parcial del HTML.
    • Mejoran el rendimiento al evitar recargar toda la página.
  • Streams
    • Facilitan la actualización en tiempo real de contenido.
    • Permiten inyectar HTML directamente en partes específicas de la página.
    • Se integran con websockets para eventos dinámicos.

Eventos y Extensiones

  • Turbo emite eventos en diferentes etapas del ciclo de vida de la navegación:
    • turbo:before-visit
    • turbo:visit
    • turbo:before-cache
    • turbo:load
    • turbo:frame-load
  • Se pueden agregar listeners personalizados para:
    • Animaciones de transición.
    • Registro de analíticas.
    • Validaciones previas a la navegación.
  • Extensiones permiten:
    • Integración con frameworks JS.
    • Control avanzado de formularios y estados.
    • Funcionalidades de streaming de contenido dinámico.

Uso Básico

HTML Estructura con Frames

<body>
	<turbo-frame id="main">
		<!-- Contenido dinámico -->
	</turbo-frame>

	<nav>
		<a href="/pagina1">Página 1</a>
		<a href="/pagina2">Página 2</a>
	</nav>
</body>

`

Interceptar Formulario

<form action="/submit" method="post" data-turbo="true">
	<input type="text" name="nombre">
	<button type="submit">Enviar</button>
</form>

Escucha de Eventos Turbo

document.addEventListener("turbo:load", () => {
	console.log("Contenido cargado con Turbo");
});

document.addEventListener("turbo:frame-load", (event) => {
	console.log("Frame cargado:", event.target.id);
});

Buenas Prácticas

  • Mantener HTML semántico y limpio.
  • Evitar sobrecargar frames anidados.
  • Usar eventos para manejar interacciones dinámicas.
  • Integrar Streams solo cuando se requiera contenido en tiempo real.
  • Aprovechar la combinación de Drive + Frames para SPA ligeras sin frameworks.

Recursos

Turbo Avanzado

Integración con Frameworks

  • Turbo puede coexistir con frameworks como Rails, React, Vue o Svelte:
    • Se puede usar Turbo para navegación y actualizaciones parciales, mientras el framework maneja componentes complejos.
    • Ejemplo en Rails + React:
      • Rails sirve páginas con turbo-frame.
      • React se monta solo dentro de un frame específico.
    • En Vue o Svelte, los componentes pueden montar contenido dinámico dentro de frames sin interferir con Turbo.

Optimización y Rendimiento

  • Prefetching: Turbo puede precargar páginas vinculadas antes de la navegación:

html <link rel="turbo-prefetch" href="/pagina1">

  • Cache control:
    • Se puede deshabilitar cache para frames específicos usando data-turbo-cache="false".
    • Evitar recargar recursos pesados si ya están en memoria.
  • Minimizar re-render:
    • Actualizar solo frames necesarios.
    • Evitar frames anidados innecesarios que aumentan el DOM.

Streaming Avanzado

  • Uso de turbo-stream para actualizaciones en tiempo real:
    • Insertar, reemplazar, eliminar contenido dinámicamente.
    • Integración con websockets o ActionCable:

html <turbo-stream action="replace" target="mensaje_123"> <template> <div>Nuevo contenido</div> </template> </turbo-stream>

  • Diferencia con actualización normal de frame:
    • Streams permiten múltiples targets en la misma respuesta.
    • Frames solo permiten reemplazar contenido dentro de un frame específico.

Transiciones y Animaciones

  • Integrar animaciones al cargar contenido con Turbo:
    • Eventos útiles:
      • turbo:before-visit → preparar transición saliente.
      • turbo:frame-load → animación entrada de contenido.

javascript document.addEventListener("turbo:frame-load", (event) => { event.target.classList.add("fade-in"); });

  • Usar CSS con clases dinámicas para efectos suaves.

Formularios Complejos

  • Validaciones dinámicas:
    • Turbo permite mostrar errores sin recargar.
    • Ejemplo:

html <form action="/registro" method="post" data-turbo="true"> <input name="email" required> <div class="error" data-turbo-target="errors"></div> </form>

  • Manejo de respuestas JSON o HTML según necesidad.
  • Integración con streams para mostrar mensajes de éxito o error en tiempo real.

SEO y Accesibilidad

  • SEO en SPA con Turbo:
    • Mantener títulos y meta tags actualizados usando <turbo-frame> y eventos turbo:load.
    • Prefetch y caching ayudan a mejorar la experiencia y el rendimiento percibido.
  • Accesibilidad:
    • Asegurar que lectores de pantalla detecten cambios de contenido.
    • Usar role="region" y aria-live="polite" en frames dinámicos:

html <turbo-frame id="notificaciones" role="region" aria-live="polite"></turbo-frame>

Recursos Avanzados