Quiero hablar de Stimulus.
Stimulus es una pequeña, pero deliciosa biblioteca JavaScript que me encanta.
Y Symfony tiene un soporte de primera clase para ella.
También es muy utilizada por la comunidad de Ruby on Rails.
Así que hay una especie de dos filosofías en el desarrollo web.
La primera es que devuelves el HTML de tu sitio,
como hemos hecho en nuestra página de inicio y de navegación.
Y luego añades el comportamiento de JavaScript a ese HTML.
La segunda filosofía es utilizar un marco de trabajo de JavaScript para
construir todo tu HTML y JavaScript.
Eso es una aplicación de una sola página.
La solución correcta depende de tu aplicación, pero me gusta mucho el primer enfoque.
Y utilizando Stimulus -así como otra herramienta de la que hablaremos en unos minutos, llamada Turbo-
podemos crear aplicaciones altamente interactivas que se ven y se sienten tan responsivas como una aplicación de una sola página.
Tenemos un tutorial completo sobre Stimulus, pero vamos a probarlo.
Ya puedes ver cómo funciona en el ejemplo de su documentación.
Creas una pequeña clase JavaScript llamada controlador...
y luego adjuntas ese controlador a uno o varios elementos de la página.
Y ya está
Stimulus te permite adjuntar escuchas de eventos -como eventos de clic- y tiene otras cosas buenas.
En nuestra aplicación, cuando instalamos Encore, nos dio un directorio controllers/.
Aquí es donde vivirán nuestros controladores Stimulus.
Y en app.js, importamos bootstrap.js.
No es un archivo que necesites mirar mucho, pero es súper útil.
Esto inicia Stimulus -sí, ya está instalado- y registra todo lo que
hay en el directorio controllers/ como un controlador Stimulus.
Esto significa que si quieres crear un nuevo controlador de Stimulus,
¡sólo tienes que añadir un archivo a este directorio controllers/!
Y obtenemos un controlador de Estímulos fuera de la caja llamado hello_controller.js.
Todos los controladores de Estímulos siguen la práctica de nombrar algo
con "guión bajo" controller.js o algo con guión controller.js.
La parte que precede a _controller -por tanto, hello - se convierte en el nombre del controlador.
Adjuntemos esto a un elemento.
Abre templates/vinyl/homepage.html.twig.
Veamos...
en la parte principal de la página, voy a añadir un div...
y luego para adjuntar el controlador a este elemento, añado data-controller="hello".
¡Vamos a probarlo!
Actualiza y...
¡sí! ¡Ha funcionado!
El estímulo vio este elemento, instanció el controlador...
y entonces nuestro código cambió el contenido del elemento.
El elemento al que está unido este controlador está disponible como this.element.
Así que... esto ya es muy bonito...
porque conseguimos trabajar dentro de un bonito objeto JavaScript...
que está vinculado a un elemento concreto.
Pero déjame que te muestre la parte más genial de Stimulus: lo que hace que cambie el juego.
Inspecciona el elemento en las herramientas de tu navegador cerca del elemento.
Voy a modificar el HTML del elemento padre.
Justo encima de éste -aunque no importa dónde-
añade otro elemento con data-controller="hello".
Y... ¡boom!
¡Vemos el mensaje!
Esta es la función asesina de Stimulus:
puedes añadir estos elementos de data-controller en la página cuando quieras.
Por ejemplo, si haces una llamada Ajax...
que añada nuevo HTML a tu página, Stimulus se dará cuenta de ello y ejecutará los controladores
a los que se deba adjuntar el nuevo HTML.
Si alguna vez has tenido problemas al añadir HTML a tu página mediante Ajax...
pero el JavaScript de ese nuevo HTML está roto
porque le faltan algunos escuchadores de eventos, pues bien, Stimulus acaba de resolverlo.
Cuando se utiliza Stimulus dentro de Symfony, se obtienen unas cuantas funciones de ayuda para facilitar la vida.
Así, en lugar de escribir data-controller="hello" a mano,
podemos decir {{ stimulus_controller('hello') }}.
Pero eso es sólo un atajo para renderizar ese atributo exactamente igual que antes.
Bien, ahora que tenemos los fundamentos de Stimulus, usémoslo para hacer algo real,
como hacer una petición Ajax cuando hagamos clic en este icono de reproducción.
Eso es lo siguiente.