WEBVTT

00:00:01.186 --> 00:00:05.446 align:middle
Bienvenido al último capítulo de nuestro
tutorial de introducción a Symfony 6.

00:00:06.026 --> 00:00:08.326 align:middle
Si estás viendo esto, ¡lo estás petando!

00:00:08.326 --> 00:00:12.686 align:middle
Y es hora de celebrarlo instalando
un paquete más de Symfony.

00:00:13.106 --> 00:00:18.076 align:middle
Pero antes de hacerlo, como sabes,
me gusta confirmar todo primero...

00:00:18.366 --> 00:00:25.076 align:middle
por si el nuevo paquete instala una receta
interesante: Bien, vamos a instalar el nuevo paquete:

00:00:25.626 --> 00:00:33.216 align:middle
composer require symfony/ux-turbo ¿Ves
ese "ux" en el nombre del paquete?

00:00:33.716 --> 00:00:39.056 align:middle
Symfony UX es un conjunto de bibliotecas que
añaden funcionalidad JavaScript a tu aplicación...

00:00:39.656 --> 00:00:41.816 align:middle
a menudo con algo de código PHP para ayudar.

00:00:42.576 --> 00:00:45.816 align:middle
Por ejemplo, hay una biblioteca
para renderizar gráficos...

00:00:45.936 --> 00:00:49.806 align:middle
y otra para usar un Recortador de
imágenes con el sistema de formularios.

00:00:50.526 --> 00:00:53.836 align:middle
Así que, como puedes ver,
esto instaló una receta.

00:00:54.246 --> 00:00:58.486 align:middle
OoOOo. Ejecuta git status para
que podamos ver lo que ha hecho.

00:00:59.236 --> 00:01:05.096 align:middle
La mayor parte es normal, como config/bundles.php
significa que habilitó el nuevo paquete.

00:01:05.746 --> 00:01:11.716 align:middle
Los dos cambios interesantes son
assets/controllers.json y package.json.

00:01:12.936 --> 00:01:15.056 align:middle
Comprobemos primero package.json.

00:01:16.156 --> 00:01:21.346 align:middle
Cuando instalas un paquete UX, lo que suele
significar es que te estás integrando

00:01:21.346 --> 00:01:23.866 align:middle
con una biblioteca JavaScript de terceros.

00:01:24.156 --> 00:01:28.796 align:middle
Y así, la receta de ese paquete
añade esa biblioteca a tu código.

00:01:28.796 --> 00:01:35.516 align:middle
En este caso, la biblioteca JavaScript con la que
nos estamos integrando se llama @hotwired/turbo.

00:01:36.366 --> 00:01:43.796 align:middle
Además, el propio paquete PHP symfony/ux-turbo
viene con algo de JavaScript adicional.

00:01:44.576 --> 00:01:46.876 align:middle
Esta línea especial dice: ¡Hey Node!

00:01:47.076 --> 00:01:51.626 align:middle
Quiero incluir un paquete
llamado @symfony/ux-turbo...

00:01:51.826 --> 00:01:56.416 align:middle
pero en lugar de descargarlo,
puedes encontrar su código

00:01:56.416 --> 00:02:00.276 align:middle
en el directorio
vendor/symfony/ux-turbo/Resources/assets.

00:02:01.056 --> 00:02:06.166 align:middle
Puedes buscar literalmente en esa ruta
vendor/symfony/ux-turbo/Resources/assets

00:02:06.576 --> 00:02:08.886 align:middle
para encontrar un mini paquete JavaScript.

00:02:10.016 --> 00:02:16.346 align:middle
Ahora, debido a que esto actualizó nuestro archivo
package.json, tenemos que volver a instalar nuestras dependencias

00:02:16.546 --> 00:02:18.376 align:middle
para descargar y configurar todo esto.

00:02:19.406 --> 00:02:22.716 align:middle
De hecho, busca tu terminal que
está ejecutando yarn watch.

00:02:23.386 --> 00:02:24.896 align:middle
¡Tenemos un error!

00:02:25.546 --> 00:02:30.786 align:middle
Dice que no se puede encontrar el
archivo @symfony/ux-turbo/package.json,

00:02:31.276 --> 00:02:34.386 align:middle
intenta ejecutar yarn install --force.

00:02:35.226 --> 00:02:35.856 align:middle
¡Vamos a hacerlo!

00:02:36.536 --> 00:02:38.386 align:middle
Pulsa control+C para detener esto...

00:02:39.056 --> 00:02:44.086 align:middle
y luego ejecuta yarn install
--force o npm install --force.

00:02:45.876 --> 00:02:52.546 align:middle
A continuación, reinicia Encore con: yarn
watch El otro archivo que la receta modificó

00:02:52.546 --> 00:02:55.126 align:middle
fue assets/controllers.json.

00:02:55.916 --> 00:02:59.726 align:middle
Vamos a echarle un vistazo:
assets/controllers.json.

00:03:00.586 --> 00:03:04.076 align:middle
Esta es otra cosa única de Symfony UX.

00:03:04.836 --> 00:03:07.796 align:middle
Normalmente, si queremos
añadir un controlador Stimulus,

00:03:08.046 --> 00:03:10.286 align:middle
lo ponemos en el directorio controllers/.

00:03:10.936 --> 00:03:16.946 align:middle
Pero a veces, puede que instalemos
un paquete PHP y que queramos

00:03:16.946 --> 00:03:20.586 align:middle
añadir su propio controlador
Stimulus en nuestra aplicación.

00:03:21.516 --> 00:03:24.616 align:middle
Esta sintaxis dice
básicamente: ¡Hey Stimulus!

00:03:24.836 --> 00:03:30.956 align:middle
Ve a cargar este controlador Stimulus
desde ese nuevo paquete @symfony/ux-turbo.

00:03:31.726 --> 00:03:35.816 align:middle
Ahora bien, este controlador Stimulus
en particular es un poco raro.

00:03:36.506 --> 00:03:39.536 align:middle
No es uno que vayamos a
utilizar directamente dentro

00:03:39.536 --> 00:03:42.716 align:middle
de la función stimulus_controller() Twig.

00:03:43.446 --> 00:03:45.846 align:middle
Es una especie de controlador falso.

00:03:46.646 --> 00:03:47.656 align:middle
¿Qué hace?

00:03:48.306 --> 00:03:53.156 align:middle
Sólo con que se cargue, va a
activar la biblioteca Turbo.

00:03:53.996 --> 00:03:55.906 align:middle
Así que sigo hablando de Turbo.

00:03:56.216 --> 00:03:57.926 align:middle
¿Qué es Turbo?

00:03:58.496 --> 00:04:01.016 align:middle
Bueno, al ejecutar ese
comando composer require...

00:04:01.256 --> 00:04:07.516 align:middle
y volviendo a instalar Yarn, el JavaScript de Turbo
ya está activo y funcionando en nuestro sitio.

00:04:08.356 --> 00:04:09.746 align:middle
¿Qué hace?

00:04:10.306 --> 00:04:17.776 align:middle
Es sencillo: convierte cada clic en un enlace y
cada envío de un formulario en una llamada Ajax.

00:04:18.486 --> 00:04:21.466 align:middle
Y eso hace que nuestro sitio
sea rápido como un rayo.

00:04:22.176 --> 00:04:22.686 align:middle
Compruébalo.

00:04:23.196 --> 00:04:25.226 align:middle
Haz una última actualización completa.

00:04:26.086 --> 00:04:27.106 align:middle
Y luego observa...

00:04:27.806 --> 00:04:32.026 align:middle
si hago clic en Examinar, ¡no hay
actualización completa de la página!

00:04:32.886 --> 00:04:35.686 align:middle
Si hago clic en estos iconos,
¡no hay actualización!

00:04:36.346 --> 00:04:40.766 align:middle
Turbo intercepta esos clics,
hace una llamada Ajax a la URL

00:04:41.006 --> 00:04:43.916 align:middle
y luego pone ese HTML en nuestro sitio.

00:04:44.846 --> 00:04:52.676 align:middle
Esto es enorme porque, de forma gratuita, nuestra aplicación
se ve y se siente como una aplicación de una sola página...

00:04:52.916 --> 00:04:54.766 align:middle
¡sin que nosotros hagamos nada!

00:04:55.566 --> 00:05:00.316 align:middle
Ahora, otra cosa interesante que notarás es que, aunque
las recargas de páginas completas han desaparecido,

00:05:00.816 --> 00:05:04.796 align:middle
estas llamadas Ajax aparecen en la barra
de herramientas de depuración web.

00:05:05.366 --> 00:05:09.906 align:middle
Y puedes hacer clic para ir a ver el
perfil de esa llamada Ajax muy fácilmente.

00:05:10.976 --> 00:05:18.166 align:middle
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.

00:05:19.106 --> 00:05:20.856 align:middle
Si pulsamos el icono de reproducción...

00:05:21.416 --> 00:05:23.316 align:middle
ese 7 acaba de subir a 8...

00:05:23.986 --> 00:05:27.476 align:middle
¡y aquí está el perfilador
de esa petición de la API!

00:05:28.206 --> 00:05:30.106 align:middle
Abriré ese enlace en una nueva ventana.

00:05:31.166 --> 00:05:35.856 align:middle
Esa es una forma súper fácil de llegar
al perfilador de cualquier petición Ajax.

00:05:36.756 --> 00:05:38.796 align:middle
Así que Turbo es increíble...

00:05:39.176 --> 00:05:40.936 align:middle
y puede hacer más.

00:05:41.646 --> 00:05:44.636 align:middle
Hay algunas cosas que debes
saber sobre él antes de enviarlo

00:05:44.636 --> 00:05:47.866 align:middle
a producción, y si estás interesado, ¡sí!

00:05:48.196 --> 00:05:50.586 align:middle
Tenemos un tutorial completo sobre Turbo.

00:05:51.206 --> 00:05:55.426 align:middle
Quería mencionarlo en este
tutorial porque Turbo es más fácil

00:05:55.596 --> 00:05:57.726 align:middle
si lo añades a tu aplicación
desde el principio.

00:05:58.576 --> 00:06:00.726 align:middle
Muy bien, ¡felicidades!

00:06:00.936 --> 00:06:04.476 align:middle
¡El primer tutorial de
Symfony 6 está en los libros!

00:06:04.846 --> 00:06:06.046 align:middle
Date una palmadita en la espalda...

00:06:06.506 --> 00:06:10.076 align:middle
o mejor, busca a un amigo y choca los cinco.

00:06:10.906 --> 00:06:12.326 align:middle
¡Y sigue adelante! Acompáñanos

00:06:12.986 --> 00:06:16.326 align:middle
en el siguiente tutorial
de esta serie, que te hará

00:06:16.326 --> 00:06:21.446 align:middle
pasar de ser un desarrollador de Symfony en ciernes a
alguien que realmente entiende lo que está pasando.

00:06:22.176 --> 00:06:27.546 align:middle
Cómo funcionan los servicios, el sentido de todos estos
archivos de configuración, los entornos Symfony, las

00:06:27.696 --> 00:06:30.326 align:middle
variables de entorno y mucho más.

00:06:30.876 --> 00:06:34.986 align:middle
Básicamente todo lo que necesitarás
para hacer lo que quieras con Symfony.

00:06:35.526 --> 00:06:38.876 align:middle
Y si tienes alguna pregunta
o idea, estamos aquí para ti

00:06:38.876 --> 00:06:41.296 align:middle
en la sección de comentarios
debajo del vídeo.

00:06:42.416 --> 00:06:44.126 align:middle
Muy bien amigos, ¡hasta la próxima!