Bienvenido al último capítulo de nuestro tutorial de introducción a Symfony 6.
Si estás viendo esto, ¡lo estás petando!
Y es hora de celebrarlo instalando un paquete más de Symfony.
Pero antes de hacerlo, como sabes, me gusta confirmar todo primero...
por si el nuevo paquete instala una receta interesante: Bien, vamos a instalar el nuevo paquete:
composer require symfony/ux-turbo ¿Ves ese "ux" en el nombre del paquete?
Symfony UX es un conjunto de bibliotecas que añaden funcionalidad JavaScript a tu aplicación...
a menudo con algo de código PHP para ayudar.
Por ejemplo, hay una biblioteca para renderizar gráficos...
y otra para usar un Recortador de imágenes con el sistema de formularios.
Así que, como puedes ver, esto instaló una receta.
OoOOo. Ejecuta git status para que podamos ver lo que ha hecho.
La mayor parte es normal, como config/bundles.php significa que habilitó el nuevo paquete.
Los dos cambios interesantes son assets/controllers.json y package.json.
Comprobemos primero package.json.
Cuando instalas un paquete UX, lo que suele significar es que te estás integrando
con una biblioteca JavaScript de terceros.
Y así, la receta de ese paquete añade esa biblioteca a tu código.
En este caso, la biblioteca JavaScript con la que nos estamos integrando se llama @hotwired/turbo.
Además, el propio paquete PHP symfony/ux-turbo viene con algo de JavaScript adicional.
Esta línea especial dice: ¡Hey Node!
Quiero incluir un paquete llamado @symfony/ux-turbo...
pero en lugar de descargarlo, puedes encontrar su código
en el directorio vendor/symfony/ux-turbo/Resources/assets.
Puedes buscar literalmente en esa ruta vendor/symfony/ux-turbo/Resources/assets
para encontrar un mini paquete JavaScript.
Ahora, debido a que esto actualizó nuestro archivo package.json, tenemos que volver a instalar nuestras dependencias
para descargar y configurar todo esto.
De hecho, busca tu terminal que está ejecutando yarn watch.
¡Tenemos un error!
Dice que no se puede encontrar el archivo @symfony/ux-turbo/package.json,
intenta ejecutar yarn install --force.
¡Vamos a hacerlo!
Pulsa control+C para detener esto...
y luego ejecuta yarn install --force o npm install --force.
A continuación, reinicia Encore con: yarn watch El otro archivo que la receta modificó
fue assets/controllers.json.
Vamos a echarle un vistazo: assets/controllers.json.
Esta es otra cosa única de Symfony UX.
Normalmente, si queremos añadir un controlador Stimulus,
lo ponemos en el directorio controllers/.
Pero a veces, puede que instalemos un paquete PHP y que queramos
añadir su propio controlador Stimulus en nuestra aplicación.
Esta sintaxis dice básicamente: ¡Hey Stimulus!
Ve a cargar este controlador Stimulus desde ese nuevo paquete @symfony/ux-turbo.
Ahora bien, este controlador Stimulus en particular es un poco raro.
No es uno que vayamos a utilizar directamente dentro
de la función stimulus_controller() Twig.
Es una especie de controlador falso.
¿Qué hace?
Sólo con que se cargue, va a activar la biblioteca Turbo.
Así que sigo hablando de Turbo.
¿Qué es Turbo?
Bueno, al ejecutar ese comando composer require...
y volviendo a instalar Yarn, el JavaScript de Turbo ya está activo y funcionando en nuestro sitio.
¿Qué hace?
Es sencillo: convierte cada clic en un enlace y cada envío de un formulario en una llamada Ajax.
Y eso hace que nuestro sitio sea rápido como un rayo.
Compruébalo.
Haz una última actualización completa.
Y luego observa...
si hago clic en Examinar, ¡no hay actualización completa de la página!
Si hago clic en estos iconos, ¡no hay actualización!
Turbo intercepta esos clics, hace una llamada Ajax a la URL
y luego pone ese HTML en nuestro sitio.
Esto es enorme porque, de forma gratuita, nuestra aplicación se ve y se siente como una aplicación de una sola página...
¡sin que nosotros hagamos nada!
Ahora, otra cosa interesante que notarás es que, aunque las recargas de páginas completas han desaparecido,
estas llamadas Ajax aparecen en la barra de herramientas de depuración web.
Y puedes hacer clic para ir a ver el perfil de esa llamada Ajax muy fácilmente.
Esta parte de la barra de herramientas de depuración web es aún más útil con las llamadas Ajax para una ruta de la API.
Si pulsamos el icono de reproducción...
ese 7 acaba de subir a 8...
¡y aquí está el perfilador de esa petición de la API!
Abriré ese enlace en una nueva ventana.
Esa es una forma súper fácil de llegar al perfilador de cualquier petición Ajax.
Así que Turbo es increíble...
y puede hacer más.
Hay algunas cosas que debes saber sobre él antes de enviarlo
a producción, y si estás interesado, ¡sí!
Tenemos un tutorial completo sobre Turbo.
Quería mencionarlo en este tutorial porque Turbo es más fácil
si lo añades a tu aplicación desde el principio.
Muy bien, ¡felicidades!
¡El primer tutorial de Symfony 6 está en los libros!
Date una palmadita en la espalda...
o mejor, busca a un amigo y choca los cinco.
¡Y sigue adelante! Acompáñanos
en el siguiente tutorial de esta serie, que te hará
pasar de ser un desarrollador de Symfony en ciernes a alguien que realmente entiende lo que está pasando.
Cómo funcionan los servicios, el sentido de todos estos archivos de configuración, los entornos Symfony, las
variables de entorno y mucho más.
Básicamente todo lo que necesitarás para hacer lo que quieras con Symfony.
Y si tienes alguna pregunta o idea, estamos aquí para ti
en la sección de comentarios debajo del vídeo.
Muy bien amigos, ¡hasta la próxima!