¿Qué es Turbo Streams?
Turbo Streams es una herramienta que nos permite simplificar la creación de aplicaciones web interactivas en Symfony. Esta herramienta forma parte del framework Turbo. Podremos enviar actualizaciones en tiempo real al navegador del usuario sin la necesidad de recargar la página, consiguiendo así el facilitar la implementación de carácterísticas como notificaciones, cambios en la interfaz, etc. Utilizando WebSockets y HTML, permite que los cambios se reflejen instantáneamente en la interfaz, mejorando la experiencia del usuario y logrando que las aplicaciones sean más atractivas.
¿Cómo implementamos Turbo Streams?
Para comenzar, necesitamos saber que disponemos de ocho acciones para manipular el DOM:
- append: Agrega el contenido al final del elemento objetivo.
- prepend: Inserta el contenido al principio del elemento.
- replace: Sustituye el contrenido del elemento objetivo con el nuevo contenido.
- update: Actualiza el contenido del elemento objetivo sin eliminarlo.
- remove: Elimina el elemento objetivo del DOM.
- before: Inserta contenido antes del elemento objetivo.
- after: Inserta contenido después del elemento objetivo.
- refresh: Actualiza el contenido del elemento objetivo.
Ahora, pongamos de ejemplo la siguiente aplicación:
<div id="messages">
<!-- Los mensajes se mostrarán aquí -->
</div>
<form id="new_message" action="{{ path('message_create') }}" method="POST">
<input type="text" name="message[content]" placeholder="Escribe un mensaje..." required>
<button type="submit">Enviar</button>
</form>Tenemos una aplicación de mensajería y necesitamos que cuando se envíe un mensaje, este se agregue en su respectivo contenedor.
Por lo que en nuestro controlador debemos manejar la creación de este nuevo mensaje y devolver una respuesta Turbo Stream.
// src/Controller/MessageController.php
#[Route(path: '/messages', name: 'message_create')]
public function create(Request $request, EntityManagerInterface $entityManager): Response
{
$message = new Message();
$message->setContent($request->request->get('message')['content']);
$entityManager->persist($message);
$entityManager->flush();
// Render Turbo Stream response
return $this->render('message/create_stream.html.twig', [
'message' => $message,
]);
}Ahora necesitamos la plantilla Twig que utilizaremos para enviar el nuevo mensaje.
{# templates/message/create_stream.html.twig #}
<turbo-stream action="append" target="messages">
<template>
<div id="message_{{ message.id }}">
{{ message.content }}
</div>
</template>
</turbo-stream>Con esto logramos, usando la acción append, que la aplicación inserte el nuevo mensaje que hemos creado dentro del contenedor de los mensajes.
Conclusión
Gracias a Turbo Streams, podemos crear aplicaciones totalmente reactivas en Symfony de manera rápida y eficaz, al permitir la actualización dinámica de contenido en tiempo real y con esto logrando una mejor experiencia para el usuario.
