¿Qué tal? Bienvenido, bienvenida, espero que estés muy bien.
Hoy toca curso desde cero de HTMLX, no HTML, no, HTMLX.
¿Cómo que X? ¿Qué es esto de X? Bueno, HTMLX.
Hay gente que dice que no está de acuerdo y tal, la evolución de HTML,
así es como lo entiende el propio creador de esta biblioteca.
Nosotros hoy lo vamos a ver, lo vamos a escudriñar, vamos a hacer un montón de ejemplos, ¿vale?
Y es esto lo que vamos a aprender hoy. HTMLX. Spoiler, ¿por qué HTMLX?
Fijaos que el año pasado, en 2023, HTMLX finalizó en la segunda posición de la JavaScript Ryzen Stars
dentro de la categoría de frameworks de Frontend, solo por detrás de React.
Lo digo porque la gente igual se cree, ah, no sé qué, no sé cuánto.
Solo por detrás y muy cerca de React, por delante de Svelte, por delante de Vue,
por delante de Angular, por delante de todos, excepto de React.
O sea, ojo, cuidado, que hay mucho jiji, jaja, pero que estamos aquí ante una pedazo de biblioteca
que está moviendo mucho hype. Así os lo dejo, ¿eh? Así os lo dejo.
Lo digo porque hay mucha gente que, ah, no sé qué, no sé cuánto.
Yo le veo cositas, hoy os lo comentaré, hoy lo vamos a ver, hoy lo vamos a ver.
Es algo que no es que ha salido hoy, es que ya lleva mucho tiempo HTMLX,
pero es verdad que el año pasado empezó a ganar cierta tracción y relevancia.
Y hoy vamos a ver qué es lo que lo hace interesante, ¿vale?
Pero bueno, antes comentamos un poquito a ver cómo estáis y qué os contáis.
Es que React va con reactores, es difícil superarlo.
Bueno, React, hay que tener en cuenta que React el año pasado no sacó ninguna versión nueva.
No se actualiza con una nueva versión desde el 29 de marzo del 2022.
O sea, hace como casi dos años que no saca una mayor, una versión importante, React, ¿eh?
Espectacular, o sea, increíble.
Aún así, fijaos cómo está la cosa.
Cómo está la cosa.
Hoy se te ve muy bien, Midu.
Vaya, muchas gracias, muchas gracias, te lo agradezco, te lo agradezco.
Bueno, hoy vamos a aprender HTMLX.
Os digo una cosa, yo, puede ser que no os guste, puede ser que os encante.
Yo creo que HTMLX es algo que no hay términos medios, o lo odias o lo amas.
Pero una cosa sí que te prometo y te juro que vas a ver, y es que te va a volar la cabeza.
Porque es algo totalmente diferente a cualquier cosa a la que estés acostumbrado.
A lo que estés pensando, a lo que tú esperes, no te lo esperas.
O sea, no sabes lo que te va a venir.
Y te digo otra, y esto es para darte todo el hype.
Cuando terminemos el curso de hoy, vas a querer utilizarlo, probarlo.
Porque lo que vamos a hacer con HTMLX y Astro es espectacular.
Ahí lo dejo, ¿eh? Ahí lo dejo.
Vamos a terminar el curso que se te van a caer las bolas al suelo.
Solo te digo eso.
Y cuando veas cuántas líneas de código hemos hecho, vas a decir, no me lo puedo creer.
Esto es trampa.
Esto es algo, no tiene sentido.
Te va a explotar la cabeza.
Y estas cosas las vas a ver aquí.
¿Cómo? Lo vas a ver.
Lo vas a ver, ¿eh?
Lo vas a ver, lo vais a ver.
Es que os va a explotar la cabeza.
No me quiero adentrar mucho antes de nada.
¿Qué es HTMLX?
La pregunta del millón.
¿Qué es HTMLX?
Es una biblioteca, pero no es una biblioteca normal y corriente.
Es, podríamos decir, una biblioteca web moderna que lo que hace es agregar interactividad y dinamismo a las páginas web utilizando HTML.
¿Y qué es lo que le da a HTML, HTMLX?
Le da acceso a hacer peticiones AJAX, o sea, peticiones a APIs, transiciones CSS, web sockets, server-side-send events.
Tener, pues, un montón de cositas que tendríamos que utilizar JavaScript para crearlas.
Poder gestionar formularios, infinity scroll, mostrar un loading mientras se está haciendo una petición, hacer un swap de contenido.
O sea, mostrar un contenido y cambiarlo por otro.
Bueno, un montón de cosas, ¿no?
¿Y cuál es la idea que tenemos detrás?
Paginación también, efectivamente.
Entonces, ¿cuál es la idea que hay detrás?
Hay gente que estará de acuerdo o no con esto, pero la idea es hacer evolucionar o crear una evolución de HTML.
No es una especificación, no es algo oficial del mundo de la programación web, pero justo lo dicen aquí, ¿eh?
High power tools for HTML.
Y entonces aquí viene la motivación, ¿no?
No debería que el anchor y el formulario tendrían que ser capaces de hacer repeticiones HTTP o que puedas hacer el click y el submit directamente en estas etiquetas sin utilizar JavaScript.
O incluso poder hacer más métodos, no solo el get y el post, sino un delete, el patch, el put.
O reemplazar la página entera solo con etiquetas HTML.
Esta es un poco la idea.
Y lo vamos a ver que solo utilizando atributos en las etiquetas HTML vamos a poder hacer un montón de cosas.
Y yo creo que lo mejor es probarlo y practicarlo.
Así que vamos a hacer unos cuantos ejemplos.
Nos vamos a ir aquí al código.
A ver, tenía por aquí esto abierto.
Vamos a abrir en curso HTMLX, ¿vale?
Y lo primero que voy a hacer por aquí es crearme, me voy a crear una carpeta web y voy a crear un index.html, ¿vale?
Entonces, ya os digo que la idea de HTMLX se basa en querer extender las posibilidades de HTML con atributos personalizados, ¿vale?
Y con eso mejorar la experiencia no solo del usuario, sino del desarrollador.
Así que, ¿cómo empezaríamos a utilizar HTMLX?
Pues lo primero que tendríamos que hacer es, podríamos instalar con NPM e importar la biblioteca, pero es tan sencillo que lo vamos a hacer de la forma más clásica, que es cargando un script.
Así que cargamos este script, ¿vale?
Ya tenemos ahí nuestro script y ya podemos empezar a utilizar HTMLX.
¿Cómo es HTMLX?
Bueno, pensemos que tenemos una lista de items.
Y en este caso, vamos a decir que la lista de items, pues aquí vamos a poner cargar resultados.
Esto te suena, ¿no?
Esto es HTML, esto no tiene ninguna historia.
Voy a levantar un entorno para poder tener la web, se llama Live Preview.
Es una extensión que tenemos aquí en Visual Studio Code, ¿veis? Cargar resultados.
Yo la recomiendo.
Hay una alternativa también que se llama Asimilar, pero a mí me gusta mucho Live Preview porque mientras escribes se van viendo los cambios.
O sea, tú vas escribiendo, ¿ves?
Y en tiempo real vas viendo los cambios.
Me parece increíble.
Es de Microsoft, es la oficial y tiene mucho mejor rendimiento, creo yo, que la de Live Server.
Pero si te gusta Live Server, utiliza Live Server y ya está.
A mí me gusta más Live Preview y punto.
Vale.
Esto es HTML, ¿no?
O sea, no parece que tenga mucha historia.
Pues mira, voy a utilizar una API que no sé si la conoces, pero bueno, es porque tenemos que utilizar alguna API.
Esta API lo que te permite es buscar en Hacker News las últimas noticias de Hacker News.
A ver si os puedo enseñar esto, ¿vale?
En hn.algolia.com y aquí puedes buscar lo que ha aparecido aquí en la portada de Hacker News.
Súper fácil, ¿no?
Puedes utilizar la API que tú quieras, pero yo voy a utilizar esta.
A ver si encuentro la documentación para que os la pueda pasear.
Es esta, esta.
Esta es la API que yo voy a utilizar porque está bastante bien y además nos viene perfecto.
Puedes recuperar usuarios, las últimas noticias y tal.
¿Y esto cómo funcionaría?
Pues nada, muy fácil.
Por ejemplo, si queremos recuperar las últimas noticias que hay en la portada de Hacker News,
iríamos aquí y nos devuelve un JSON que, fíjate, en Hits tendríamos los resultados,
donde tendríamos el título con el valor, que acaba de salir jQuery 4.0, es increíble.
Todo vuelve, todo vuelve.
Vuelve HTML, vuelve jQuery.
Bueno, esto es una locura.
Entonces, esta sería la API, ¿no?
Vale, vamos a traernos esta API y lo que normalmente aquí utilizaríamos JavaScript para traernos los resultados y tal.
Pues vamos a empezar a utilizar HTMLX.
Y para utilizar HTMLX lo único que necesitamos es utilizar un atributo que sea,
le vamos a decir que quiere utilizar el get.
Y vamos a decirle que la API que tenemos que utilizar es esta, ¿vale?
Queremos utilizar este JSON de aquí.
Pues ya está.
Simplemente con esto, ahora parecería que, vale, no pasa nada.
¡Ojo!
¿Qué ha pasado?
¿Qué ha pasado?
Algo ha pasado.
Fijaos que algo ha pasado.
Algo ha pasado.
Ha pasado que cuando le doy click, aparece aquí un JSON.
¿Cómo?
¿Pero qué está pasando aquí?
¿Qué locura es esta?
Vale.
Lo que está pasando es que, por defecto, lo que va a entender HTMLX es que quieres cargar esta API
y que cuando se haga click en este elemento, entonces va a hacer la petición.
Y por defecto, va a entender que los resultados de esta petición los va a cargar dentro, ¿no?
Y aquí es lo que estamos teniendo.
Fijaos que le doy click y me lo ha cambiado por todo el JSON.
Así que, fíjate, ya hemos hecho una petición a una API con una línea.
No es exactamente lo que queremos, pero ya vamos viendo un poquito por dónde van los tiros, ¿no?
Ya estamos viendo que lo que busca justamente es la facilidad de expresar lo que queremos hacer dentro de la misma etiqueta.
Obviamente yo no quiero que sea cuando le doy click.
Luego veremos cómo podemos arreglar un poquito esto, ¿no?
Pero para forzarle y decirle que cuando lo tiene que hacer, tenemos que utilizar un atributo especial que es el trigger.
Ya veis que esto funciona con atributos, ¿no?
Esto sería, quiero hacer una petición get a esta URL.
¿Y cuándo quieres hacer la petición?
Pues hay que utilizar el atributo hx-trigger.
Y aquí le podemos decir con el load, ¿vale?
Que cuando se cargue, entonces, cuando se cargue, entonces que lo ponga.
Cuando se cargue nuestra página.
Pero también podríamos utilizar otros.
Por ejemplo, podemos utilizar el click.
El click es el que tendríamos por defecto y solo cuando le damos un click, ¿vale?
Cuando damos un click, entonces es que ocurre.
Pero hay un montón de posibilidades aquí.
O sea, no solo tenemos esto.
Podríamos decirle, por ejemplo, que lo haga cuando pase X tiempo.
O que lo haga cada X segundos.
Eso luego lo veremos, ¿vale?
Veremos que tenemos otras diferentes formas de hacer triggers.
Lo más interesante que tiene HTMLX a la hora de buscar cositas es que la documentación la encuentras súper fácil en Google.
Fíjate que es, claro, es que es imposible.
Es que si pones hx-trigger, como solo existe aquí, ya te sale siempre lo primero.
Pero esto es una cosa que está muy bien.
O sea, es súper fácil de encontrar información en Google y encima la documentación oficial.
Y aquí tendríamos todos los atributos.
Por ejemplo, el del click, que es el que hemos visto.
Pero fijaos que hay algunos muy especiales.
Tenemos filtros.
Por ejemplo, que esto solo cuando haces click, mientras estás pulsando la tecla de control.
Luego, si tenemos por aquí, cuando es control y shift key.
O sea, cuando tienes diferentes combinaciones de teclas.
Pero hay más.
También tienes modificadores.
Por ejemplo, que solo lo escuche una vez.
Cuando ha cambiado contenido.
Después de pasar X tiempo.
Le podríamos poner, por ejemplo, aquí le podemos decir load, pero con un delay de dos segundos.
Entonces, cuando pasen dos segundos, es que va a hacer la petición.
Tenemos un montón de modificadores que lo que hace justamente es ayudarnos a una forma muy expresiva a que haga lo que queremos.
Hay un montón de posibilidades.
Luego iremos viendo otros bastante diferentes.
Incluso cómo los podemos utilizar más de uno.
Y aquí tenemos este también, que es el de polling.
Que cada segundo, cada dos segundos, los segundos que tú quieras.
Va preguntando constantemente para hacer la petición y ponerlo ahí.
Pues por ahora tenemos esto.
Pero bueno, no es exactamente lo que queremos.
Porque obviamente tenemos ahí todo el JSON.
Y no queremos solo cargar JSON.
Sería muy, muy raro, muy raro.
Pero bueno, ya muestra alguna cosa.
Ya me muestro.
Aquí voy a poner cuando hagamos clic.
¿Vale?
Para al menos tenerlo aquí.
Y vamos a ir al siguiente.
¿Por qué?
Porque yo normalmente lo que quiero es tener un botón en algún sitio.
Y una vez que tenemos un botón, le digo, vale, ahora quiero que me lo renderices en otro sitio.
No tiene mucho sentido, no tiene mucho sentido, la verdad, el hecho de decir, oye, quiero que esto se renderice aquí dentro.
No tiene mucho sentido, la verdad.
Bueno, vamos a poner aquí el botón, ¿vale?
Y vamos a poner un cargar resultados.
Tenemos ahora el botón de cargar resultados.
Y esto de aquí vamos a poner que sean los resultados o results.
Ahora, donde queremos realmente que empiece nuestra petición es en el botón.
¿Vale?
Pues vamos a poner que el botón es el que va a hacer el get, el que va a tener el trigger.
Pero ahora lo que tenemos que decirle es dónde lo tiene que renderizar.
Así que le vamos a decir que el target, ¿vale?
El objetivo donde lo tiene que renderizar es en el elemento results.
¿Ok?
Entonces ya tendríamos aquí, aquí esto lo podemos quitar, esto también lo podemos quitar.
¿Vale?
Y vamos a poner aquí, aquí irán los resultados.
¿Vale?
Aquí irán los resultados.
Entonces, ya hemos añadido y hemos conocido otro atributo más, hxtarget.
Que esto lo que nos va a permitir es que la acción la hacemos en un elemento y el objetivo donde se va a renderizar es otro.
En este caso, este.
Así que ahora, si guardamos aquí los cambios, le vamos a cargar resultados.
¿Vale?
Y ya veis que nos ha machacado esto.
¿Vale?
Ahora bien, vamos a ver bien esto, qué es lo que está pasando.
Si nos vamos por aquí y miramos aquí el html, vamos a ver aquí en elements, ¿vale?
Aquí tenemos el link, con este, aquí tenemos la información.
Vale, le doy aquí y fijaos dónde se está renderizando.
Se está renderizando dentro del UL.
¿Por qué?
Porque por defecto entiende que lo que queremos es renderizarlo dentro.
Pero también podríamos querer renderizarlo, o sea, sustituir esto.
Por ejemplo, imaginar que tenemos aquí un div que sea results y queremos eliminar este results.
Tal y como está ahora, lo que va a ocurrir, si lo miramos aquí, como está ahora, lo va a renderizar dentro.
Pero también podríamos decirle que el contenido no queremos que lo meta dentro, sino que queremos que lo sustituya.
Así que por defecto tendríamos el inner html, que es lo que está haciendo ahora mismo, es meterlo dentro.
Pero podríamos decirle, no, no, lo que quiero es justamente que te cargues el elemento.
¿Vale?
Y podríamos decir outer html.
Y ahora fíjate que le doy a cargar resultados y ahora fíjate que el div ha desaparecido.
Ahora tenemos ahí el json, ¿vale?
Hay un montón de diferentes valores.
Tenemos el de inner html, que este es el que es por defecto.
Es lo normal.
Lo normal es que quieren meter dentro del elemento.
Pero también podríamos tener el before begin, ¿vale?
Para ponerlo al principio, o el after begin.
El after begin es interesante porque imagínate que tú tienes aquí ya la lista, ¿vale?
Tienes una lista de resultados y ya tienes un elemento, el primer elemento.
Y tú lo que quieres realmente es que este primer elemento se mantenga y se añadan los siguientes.
Pues con esto lo que podríamos hacer es, ¿vale?
Después de, bueno, claro, es que he puesto después del principio.
Debería ser antes del final, ¿vale?
Antes del final, ¿vale?
Y entonces ves, ahora se ha mantenido este aquí, no lo ha tocado, pero antes del final,
o sea, aquí, aquí es donde lo ha hecho, en esta parte es donde ha metido los resultados, ¿vale?
Bueno, fíjate que en cuatro líneas toda la de cosas que estamos haciendo en cuatro líneas, ¿vale?
Hemos hecho la petición, le hemos dicho cuándo tiene que escuchar el evento,
dónde lo tiene que renderizar y dónde lo, o sea, el elemento donde lo tiene que renderizar
y la posición dentro del elemento que lo tiene que renderizar.
Cero líneas de JavaScript por ahora, ¿vale?
Cero líneas de JavaScript.
Ahora, también puede ser que queramos que no haga nada, por ejemplo.
Esto puede ser útil si quieres hacer una petición, pero que no lo muestre.
Y además puedes hacer un delete también, podrías eliminar el elemento.
Esto también puede ser útil si cuando quieres, y esto a lo mejor lo vemos después,
porque haremos pequeñas aplicaciones para que veamos cómo funciona esto
y esto puede tener sentido hacer lo del delete.
Por ahora lo vamos a dejar por defecto, que es en innerHTML.
Lo podría eliminar y haría lo mismo, pero yo lo voy a dejar solo para que veas ese atributo.
Ok.
Hasta aquí bien.
Ahora, sé que ahora mismo estáis pidiendo y estáis pensando,
madre mía, yo lo que quiero es convertir el HTML, porque claro, aquí al darle me devuelve todo el JSON.
No te preocupes que eso también lo vamos a ver y luego lo vamos a ver al siguiente nivel.
Pero te quiero enseñar otra cosa interesante todavía que podemos hacer en este botón.
Y es una cosa que con JavaScript normalmente tendríamos que hacer, guardar un estado,
escuchar el estado y todo esto.
Y es efectivamente mostrar un spinner, mostrar una carga.
Cómo vemos si está cargando o no está cargando.
O sea, mostrar un loader.
Lo vamos a poner, por ejemplo, aquí cargando resultados.
Lo vamos a poner aquí dentro.
Y vamos a poner aquí dentro los estilos de este loader.
¿Vale?
Vamos a poner los estilos, me los voy a copiar de aquí, pa, pa, pa.
Y lo voy a hacer un pelín más pequeño porque me parece que será bastante grande.
Vamos a poner 10, 10, un píxel y vamos a poner que sea de este color.
Vale.
Ahora mismo, claro, ahora sale el loader todo el rato.
No tiene mucho sentido que el loader esté ahí constantemente puesto.
¿Vale?
Lo que podemos hacer es que hay una clase especial que se llama htmx indicator.
¿Ok?
Fíjate que ahora ha desaparecido.
No se ve.
Es htmx indicator.
Lo que estamos diciéndole con esto es que este loader es un indicador de que está cargando.
Por lo tanto, cuando tú pones esta clase ahora no se vería y cuando le das a cargar resultados,
cuando los está cargando, aparece.
¿Vale?
Fijaos, cuando está haciendo la petición, cuando hace la petición, aparece.
Y cuando deja de hacer la petición, desaparece.
Claro, alguien aquí diría, bueno, el problema es que lo estás metiendo dentro del botón y esto es un poco rollo.
Tienes razón.
Porque imagínate que lo podríamos poner fuera también.
Lo podríamos poner fuera del botón.
Aunque sea la acción que esté dentro del botón, fíjate, la ponemos aquí, vale, ahora no aparece.
¿Por qué no aparece?
Porque le tenemos que indicar, igual que le hemos indicado aquí con el target, fijaos que hemos puesto el trigger,
hemos puesto el target, le tenemos que decir aquí cuál es el indicador de carga.
Así que vamos a utilizar el punto loader y ahora no importa donde tengas el loader, no importa.
Ahora vas a ver cuál es el indicador y cuando le demos aquí, fijaos que aunque está fuera del botón,
ya sabe que lo tiene que poner.
Bueno, esto es espectacular porque como podéis ver, ya podéis poner un loader en cualquier sitio de vuestra página
simplemente indicándoselo con un atributo.
Fijaos, cero líneas de JavaScript todavía.
No hemos hecho absolutamente nada que sea muy raro, o sea, una petición, el click, el loader.
Bueno, además muchas veces vais a querer también desactivar el botón cuando hacéis la petición.
Y normalmente utilizamos JavaScript también para esto.
Decimos, cuando haga click, pues escuchamos cuando ha empezado la petición y cuando termina le quitamos el disable y tal.
Bueno, podemos utilizar también otro atributo y decirle qué es lo que tiene que desactivar.
Le podemos decir que lo que tiene que desactivar es este mismo botón.
Y ahora, claro, ahora no se ve, pero vamos a hacer algo.
Vamos a poner aquí button disable opacity.3 pointer events pointer events none.
Y vamos a poner el cursor, cursor not a la web, ¿vale?
Entonces, me ha dejado fatal porque no lo ha hecho.
A ver, es que no lo está haciendo.
No sé si es que he puesto algo mal.
A ver, button disable.
No me lo está haciendo.
Vamos a ver si me está poniendo el...
O igual es que he escrito algo mal.
Ahora, si no, lo he mirado.
A ver, alt.
Mira, not working.
Allow to specify.
¿Ves?
Disable alt this.
Y he puesto bien el this, ¿no?
Ah, es que he puesto disable.
Y es disabled, ¿no?
Vale.
Ahí está.
Vale, vale.
Ya está, ya está.
Gracias.
Gracias que alguien me la ha puesto ahí en el chat.
Mira, transition opacity.3s.
Nada.
Os voy a comentar lo que para mí, a día de hoy, es lo peor que tiene HTMX, ¿vale?
Y lo peor que tiene HTMX es que, aunque sí que os recomiendo que instaléis la extensión
que no le he activado...
Ah, sí, sí que la he activado, que está por aquí.
¿Vale?
Veis que tiene aquí HTMX Attribute Support.
Esta, que no la tengo instalada aquí, es bastante importante que la tengáis activada.
¿Por qué?
Porque así vais a tener justamente el autocomplete y también con los valores y tal.
Así que, nada, le vamos a dar a este, ¿vale?
Este lo voy a desactivar porque me parece que este no está funcionando muy bien.
Y ya está.
Y ahora deberíamos ser capaces de ver si hacemos...
Vale, ¿veis?
Que ahora tenéis todo el autocomplete.
Y si le ponemos, por ejemplo, el HTX Disable...
Ah, mira.
Disable.
Pues, hostia, pues es que está mal entonces.
O sea, era disabled.
Era con D.
Y ahí me lo ha puesto...
¿Ves?
Aquí me lo pone con D.
Pero aquí en el autocomplete, fijaos que en el autocomplete, aparece sin D.
O sea, debe estar mal la extensión, me imagino, también.
Vale, bueno.
Ya veis que ahora sí que se está desactivando, ¿vale?
Veis, se está desactivando automáticamente.
No lo podéis utilizar y lo hemos hecho simplemente con un atributo, ¿vale?
Muy bien.
Ahora, sí, no os preocupéis.
Los templates.
Porque esta es la gracia del mundo, ¿no?
Obviamente, hasta ahora solo estamos trayendo aquí el JSON sin ningún tipo de sentido y mostrándolo.
Pero esto no es lo que vamos a querer hacer.
Pero tienes que saber una cosa muy importante de HTMX.
Lo que tenéis que saber de HTMX es que no es un framework, eso lo primero.
Es una biblioteca en concreto que se dedica a una cosa en concreto, ¿vale?
Se focaliza en darle acceso al lenguaje HTML, a AJAX, CSS Transitions, a todo esto, utilizando atributos.
Por lo tanto, no se preocupa para absolutamente nada de transformar el JSON, que puedas mapear los datos,
el tener algún tipo de sistema de plantillas.
Eso no lo tiene, ¿vale?
No lo tiene.
Por lo tanto, tenemos que hacer dos cosas.
Hay diferentes opciones.
Ahora vas a ver la opción.
Vamos a decirle la opción fácil de utilizar, que es utilizar un sistema de plantillas como puede ser Mustache.
Pero luego vas a ver cómo lo podemos utilizar con Astro y ahí es donde vas a ver la clave, ¿vale?
Donde vas a ver la diferencia.
Pero vamos a empezar a utilizar luego con Mustache para que lo entiendas.
Hay diferentes sistemas de plantillas, cada cual pues te puede gustar más o menos.
Nosotros vamos a utilizar el de Mustache.
Por ejemplo, si vais a HTMX Templates, ¿vale?
Vais a ver HTMX Template Fragments, ¿vale?
Hay diferentes, fijaos que hay un montón de implementaciones totalmente diferentes.
Podemos buscar la de Mustache, Mustache, HTMX, a ver si lo encuentro.
Este.
Client Site Template Extensions.
Porque tienen diferentes extensiones para añadirles funcionalidades a HTMX.
Tenéis Handlebar, tenéis Nanjuks, XSLT, Mustache, tenéis diferentes, ¿vale?
La verdad es que Handlebar suele ser un poquito más potente porque Mustache es muy sencilla.
Es bastante antigua, pero la idea de Mustache, que los más viejos del lugar seguro que os conocen
porque están todos los lenguajes de programación, es un sistema de plantillas que no tiene lógica, ¿vale?
Ves que pone logicless, o sea, no puedes hacer un if, no puedes hacer evaluaciones, no puedes hacer casi nada.
Pero eso hace también que sea muy sencilla, tanto de aprender como de utilizar.
Así que, por ejemplo, para utilizar Mustache, lo primero que tendríamos que hacer es utilizar la extensión
del Client Site Templates, que lo vamos a utilizar aquí, ¿vale?
Vamos a quitar el style, vamos a cargar esto aquí, vamos a utilizarlo todo con un defer, ¿vale?
Mejor práctica de rendimiento.
Y luego vamos a utilizar el de Mustache.
Vamos a importar Mustache aquí.
Ya tenemos las tres dependencias que necesitamos.
Esto cuando sería con NPM, pues ya veréis que es mucho más fácil.
Y luego vas a ver con Astro que esto es una maravilla.
Pues entonces, ¿cómo creamos nuestro template?
Lo primero que tendríamos que hacer es utilizar la etiqueta template.
La etiqueta template, esto es una etiqueta que existe en HTML.
Es una etiqueta bastante interesante que lo que te permite justamente es crear plantillas.
O sea, no es una invención que tiene HTMLX.
Esto es una etiqueta válida de HTML para crear fragmentos.
Aquí podríamos poner, voy a poner template results.
Y simplemente lo que tenemos que hacer aquí es crear la plantilla que queremos renderizar.
Si nos acordamos de cómo es el JSON, fijaos, bueno, aquí se ve un poco regulinchis,
entonces lo voy a enseñar aquí.
Fijaos que tenemos aquí hits.
Hits es un array y en cada uno de los resultados tenemos el título, la URL y tal.
Bueno, pues lo que tenemos que hacer aquí en el template es decirle, vale, dentro de hits, vale,
y aquí hits, vale, no es así, es así.
Dentro de hits lo que vamos a recuperar es cada uno de los leads con el anchor a la URL
y vamos a renderizar el título, ¿ok?
Y aquí tendríamos el template results.
Este a sintaxis, esto es de mustache, no tiene absolutamente nada que ver con HTMLX, ¿vale?
Lo digo para que lo tengáis en cuenta, que no penséis, ah, pero que ha hecho esto, no.
Esto simplemente es de mustache.
Ahora lo que necesitamos es decirle que utilice con este JSON que tenemos que aplique esta plantilla
y entonces le pasará el JSON y renderizará el HTML correctamente.
Pues lo que tenemos que decirle es aquí, simplemente le utilizamos el mustache template
y el template que tenemos que utilizar es template results, ¿vale?
Que es esta ID que tenemos aquí.
Le tenemos que indicar justamente con la ID que tengamos específicamente.
Le damos a cargar resultados y me ha dejado fatal, vale, me ha dejado fatal.
Algo no hemos hecho bien.
A ver, el inner HTML, no, esto debería, de hecho podemos mirar aquí en la documentación justamente.
Ah, ya está, ya está, ya está, ya sé lo que ha pasado, ya sé lo que ha pasado.
No pasa nada, no pasa nada.
Mira, ya sé lo que me ha pasado.
Es que hay que activar la extensión.
Es que esto es increíble, es increíble la cantidad de atributos y tal
y es verdad que a veces, pues claro, si no, me tenía que haber hecho una chuleta de esto
porque tiene un montón de cositas.
Pero veis aquí que está cargando la extensión.
Claro, es que no estoy cargando la extensión.
Y todo se hace con HTML.
Fijaos que aquí podemos poner que esto, por ejemplo, pues sea el body.
Claro, me estaba alucinando, digo, pero si es que esto debe funcionar.
Mira, vamos a poner el cuerpo, ¿vale?
El body.
Y aquí lo que tenemos que hacer es activar la extensión de client-side-templates
que es la que estamos cargando aquí, ¿vale?
Ahora con esto ya, ahora sí que sí.
Ahora.
¡No!
Me ha dejado fatal, me ha dejado fatal.
A ver, aquí lo pone un JSON, pero creo que mustache-template, ¿vale?
El x-target, esto también lo tengo.
¡Hostia!
Pensaba que era eso, ¿eh?
Me parece bastante confuso por el montón de atributos.
La verdad es que sí, que tengo un montón de atributos, pero el target es template-results.
El target es donde lo quieres renderizar.
¿Veis?
Content.
Esto está bien aquí.
Vamos a probar, a lo mejor es que el dip, o sea, a lo mejor es que en body no le gusta,
¿sabes?
Y me he pasado.
No, no, estoy flipando.
Si esto lo he hecho, lo he probado 80 veces esto y ahora no...
A ver, a ver, a ver, a ver, ¿por qué?
A ver, el differ, con el differ y tal lo he puesto, lo he puesto aquí.
Y a ver, a ver, a ver, a ver si es que esto me está...
Ah, estoy flipando.
¡Ostras, es que madre mía, madre mía, madre mía, es que madre mía, madre mía, es que ¿por qué no me decís nada?
No, a ver, falta muy bien, efectivamente.
Me falta esto.
¡Ostras, me falta eso!
Es que hace mil años que no utilizo mustache.
Menos mal, cuando terminemos el curso no utilizamos más mustache y vamos a utilizar astro, ¿vale?
Y no utilizamos más mustache.
Esto lo utilizo ahora solo para probarlo, pero...
No, claro, mil veces lo dijeron, pero pensaba que me lo decían en otro sitio.
Como vosotros me decís, te falta el hash, pero no me ponéis el mensaje entero,
porque pensáis que me puedo leer el chat súper rápido, pues no, ponedme el mensaje entero.
Le falta el hash en hits y tal.
Pues en la línea, entonces es mucho más fácil.
Bueno, a ver ahora.
Ahora sí, ahora sí.
Bueno, bueno, bueno.
Ya está, ya está.
¡Ay, eh!
Ha costado.
Claro, ponedlo entero.
Un mensaje entendible.
Es que si no es muy complicado.
Vale, ahora sí que lo tenemos, ¿vale?
Ahora sí que lo tenemos.
Ahora sí que lo tenemos.
Vale, perfecto.
Entonces, ahora veis, cargar resultados y podéis ver que aparecen aquí los resultados, ¿vale?
Y cuando le damos a buscar, le damos a cargar resultados y aparecen.
Todo esto lo estamos haciendo ahora mismo con HTML, con un poquito de template y ya está.
Ahora, podríamos hacer otra cosita más, que es el Infinity Scroll.
Porque el Infinity Scroll, claro, esto está muy bien, pero el tema, voy a poner aquí unos estilillos, ¿vale?
Body, font family, system UI.
Vamos a hacer un Infinity Scroll con HTML, básicamente, con HTML.
¿Cuántos veo que caben aquí?
A ver, vamos a poner que el UL, bueno, Lee, Margin, Bottom, 4 píxeles, Max Width, 300 píxeles.
Voy a poner un poquito de estilos, básicamente, ¿vale?
3, 4, 5, 6, 7, 8, 9, vale.
Perfecto, ¿vale?
Aquí tenemos 9 resultados.
Vamos a cargar 10 resultados, vamos a decirle aquí, vamos a paginar, le vamos a decir que la página, la página 0 y hits per page, esto es de la documentación de Algolia, ¿vale?
Que ponga 10, ¿vale?
Aquí tenemos 10 resultados.
Pero imaginad que yo lo que quiero justamente es, pues, que siga haciendo scroll y que cada vez que hagamos scroll, que cargue la siguiente página, ¿vale?
Entonces, lo único que tenemos que hacer aquí es, utilizando atributos de HTML, indicarle cuándo tiene que cargar el próximo resultado.
Y aquí lo que vamos a hacer es un truco que le vamos a decir, mira, aquí me vas a poner un Lee.
Y en este elemento Lee vamos a recuperar con el hxget, vamos a hacer una llamada a la siguiente página.
Lo malo es que la API no nos devuelve la siguiente página.
Por lo tanto, yo lo voy a hacer a mano para que lo veáis cómo sería, aunque lo ideal es que la API nos devolviese la siguiente página para poder poner aquí página y ya está, ¿vale?
Entonces, vamos a poner esto y ahora le tenemos que indicar cuándo tiene que hacerse trigger.
Os he dicho que había el click, que había el load y tal.
Aquí le vamos a decir cuando sea rebuild, o sea, cuando se revele, cuando aparezca este elemento en la pantalla, entonces me haces el get.
Y además, lo que quiero es que el swap que quiero es que me quites este Lee y lo elimines totalmente.
Por lo tanto, en el outer HTML.
El outer HTML es que en lugar de meter dentro el contenido, lo que va a hacer es sustituir todo el elemento, ¿vale?
Y además, lo que tenemos que decir aquí es el template que tiene que utilizar, que es exactamente el mismo que en el que está.
O sea, es un poquito, esto sería un poco llamarse a sí mismo, pero bueno, tiene sentido.
Así que, con esto le estamos diciendo un elemento Lee que va a hacer la petición esta de la siguiente página con 10 resultados más.
El trigger de hacer esta petición es cuando aparezca en pantalla.
El swap es de todo el elemento y el template que tiene que utilizar es este mismo.
¿Qué más nos faltaría?
Bueno, podríamos poner un loading, pero por ahora lo vamos a dejar así.
Entonces, cargar resultados.
Y bajamos y no lo hace.
No lo hace, ¿por qué no lo ha hecho?
Vamos a ver por qué no lo hace.
Vamos a ver si está haciendo la petición.
Vamos a hacer si está haciendo la petición y a ver qué nos aparece por aquí.
Vale, tenemos el cargar resultados.
Aquí vemos que está haciendo la primera.
Y si bajamos, vale, vemos que no ha hecho el trigger.
He puesto reveal o reveal.
Es que he escrito mal.
Reveal.
Esto es lo que os digo que no me gusta de HTMX.
Porque como no tiene una buena extensión, pues no tiene autocomplete.
A mí me encantaría que tuviese autocomplete para no cometer estos errores.
¿Vale?
Ahora sí que va a funcionar.
Pues tampoco.
Ahora sí.
¿Habéis visto que ha cargado más?
Ahora sí.
Le damos a cargar resultados.
Y cuando vas haciendo scroll, cuando aparece el último, ¿habéis visto?
Ha hecho ya el infinity scroll.
Ha hecho la siguiente petición y ahí ha recuperado los siguientes.
Ahora, esto sigue funcionando.
Aunque vais a ver que aunque sigue funcionando, no funciona bien del todo.
Porque la paginación siempre está pillando la página 2.
Pero esto es porque la API no nos está devolviendo el contenido.
Podríamos hacer una API nuestra propia justamente para mejorar esto.
Pero bueno, esto lo podemos dejar.
Ahora os enseñaré cómo vamos a llamar a una API nuestra.
Y no vamos a hacer más del infinity scroll, pero ya vemos que funcionar funciona.
¿Vale?
O sea, cargar resultados.
Vamos hacia abajo.
Detecta el elemento.
Y hace la petición a la siguiente página.
Y ya está.
Lo ideal es tener control.
Esto lo vais a ver un montón.
HTMX funciona con cualquier API.
Con cualquier backend.
Lo ideal es que tengáis vuestro backend, que vosotros lo controléis.
Utilizarlo con APIs externas es bastante complejo.
Bastante difícil.
Porque muchas veces no encaja con lo que esperáis.
Así que muchas veces vais a tener que hacer una API intermedia.
Ahí en medio.
Para que realmente tengáis los datos como vosotros queréis.
Que os devuelva directamente a la nueva página.
Y todo esto.
¿Vale?
Pero ya veis que hemos hecho un infinity scroll.
Con, bueno.
O sea, toda esta aplicación.
Toda esta aplicación.
Cargar resultado con un click.
Con el loader.
Con un infinity scroll.
Y todo esto.
Lo hemos hecho contando el style.
En menos de 70 líneas de código.
Lo cual no está mal.
O sea, todo con HTML.
No está nada mal.
Vamos a hacer el típico buscador de películas.
Y para esto.
Ya vamos a mejorar un poquito esto.
Y así luego pasaremos a Astro.
Mira.
Vamos a utilizar diferentes cosas.
Mira.
Voy a utilizar Tailwind.
Eso para empezar.
Tailwind CSS.
Con CDN.
Para que lo tengamos aquí.
Tu, tu, tu.
Play CDN.
No es la mejor forma.
Pero bueno.
Luego no tenemos que preocuparnos de esto.
Así que nada.
Cargamos Tailwind.
¿Veis?
Ya está cargando Tailwind.
Y lo que vamos a hacer.
Voy a traerme una API.
Que yo he creado.
Voy a crear aquí.
Bueno.
Voy a traer por aquí la API.
A ver si puedo.
Agregar carpeta.
Copiar carpeta.
Vale.
Me he creado una API.
Que es una API de películas.
Una API que te devuelve películas.
Que puedes buscar películas.
Y todo esto.
Entonces.
Voy a instalar las dependencias.
Y ahora os enseño el proyecto.
Voy a hacer un MP en Randev.
Básicamente para inicializarlo.
¿Vale?
Y aquí.
Os enseño el proyectito.
Aquí en el Source.
Tenemos esta cosita de aquí.
Esto lo que está haciendo.
Es una API muy sencilla.
Donde puedes hacer un post a Movies.
Y recuperar la información de las películas.
Buscándolas.
¿Vale?
La buscamos en una API externa.
Que lo que te da son los resultados de MDB.
Aquí hago un pequeño mapeo de los datos.
Porque la API esta es un poco rara.
A mí personalmente no me gusta mucho.
Esta API.
Fijaos.
Como devuelve con el.
Una hash o almohadilla.
O como le queráis decir.
Title.
Todo en mayúscula.
Entonces.
Lo que he hecho es una pequeña API.
Donde lo pueda envolver todo esto.
Y me lo devuelva correctamente.
Con el title.
El gear.
El poster.
Y mucho mejor.
Y más presentable.
Y además.
Lo que estoy haciendo es que sea mucho más fácil de trabajar con esta API.
Porque ya le voy a estar pasando específicamente los atributos como yo quiero.
¿Vale?
Así que esta sería la API que vamos a utilizar.
Y lo que voy a hacer aquí.
Es cambiar bastante el diseño.
Un embuscador.
Mostrar las películas.
Y para eso vamos a necesitar tener un formulario.
Así que.
Vamos a quitar este botón.
El indicador.
Los resultados.
Vamos a quitar esto.
Lo primero que voy a hacer.
Es voy a utilizar uno de los fondos que hay por aquí.
Un fondo.
Yo que sé.
Este mismo.
Un fondo así más oscurito.
Que se vea más.
Menos mal que ponía que era oscurito.
Porque aquí no lo veo muy para allá.
Pero bueno.
Voy a poner esto.
¿Vale?
Que se vea ahí.
Vamos a poner esto.
Esto lo voy a mover para acá.
Esto lo movemos para aquí.
Vamos a hacer que esto ocupe toda la pantalla.
Toda la pantalla.
Y aquí vamos a poner que esto sea fixed.
¿Vale?
Y este le pegamos aquí.
¿Vale?
Y entonces ya tenemos.
Bueno.
No sé por qué.
Bueno.
Porque le faltará alguna cosita.
Pero lo importante es que más o menos.
Más o menos.
Más o menos se ve.
¿Vale?
Vamos a ponerlo.
Esto por aquí.
Ok.
Ahora vamos a copiarnos del Flowbyte.
Vamos a copiarnos un formulario.
Un input.
Por ejemplo.
Este.
El base input.
Este de aquí.
Nos lo copiamos.
Nos lo copiamos por aquí.
Ta ta ta.
Vale.
Y.
No aparece.
¿Por qué no aparece mi formulario?
No aparece.
Me parece porque.
¿Por qué no aparece?
Dip 5.
Ah.
No aparece porque está ocupado.
Porque he cerrado el dip antes.
Porque he cerrado el dip antes.
Este.
Sí.
Ahora.
Exacto.
Exacto.
¿Cierto?
¿Cierto?
Exacto.
El tema es que.
Para.
Puedes utilizarlo.
Y luego lo veremos con otros.
Otros frameworks.
Y con otras bibliotecas.
Ah.
No se escucha alerta.
Dice.
Profe.
Pregunta.
Lo que voy entendiendo es que.
HTMLX es para soluciones sencillas.
No puedo manejar variables.
Si necesito reemplazar algo del link.
No puedo.
¿Cierto?
Claro.
Al final lo que podéis hacer.
Es utilizarlo con otra biblioteca.
O con más JavaScript.
Al final sí que podéis utilizar JavaScript.
O sea.
No es imposible utilizar JavaScript.
Pero.
Lo que te hace es.
Evitar al máximo posible.
Que lo utilicéis.
Entonces.
Vamos a poner aquí.
Playholder.
Busca tu película.
¿Vale?
Busca tu película.
Y no sé por qué no ha dejado la.
Pero.
Favorita.
¿Vale?
Vale.
Base input.
Aquí.
Vamos a poner esto.
Aquí vamos a poner.
Avengers.
The Matrix.
Pa pa pa.
Y aquí vamos a poner.
Por ejemplo.
Busca tu película favorita.
Ya tenemos la API.
Tenemos esto más o menos.
Lo que vamos a hacer en este input.
Voy a ponerlo todo en una línea.
Para que lo veáis.
Más o menos bien.
Nos podemos olvidar de esta parte de aquí abajo.
¿Vale?
Esta parte al final es que necesitamos hacer algo.
Vamos a poner que sea del tipo search.
Eso sí.
Y lo que vamos a querer primero.
Es decirle que.
¿Qué es lo que tiene que hacer?
Lo que tiene que hacer.
Es un post.
A nuestra API.
Que tenemos el local.
Que podría no estar el local.
Barra movies.
¿Vale?
Cuando este input.
Por lo que sea.
Por lo que sea no.
Ahora le decimos.
Cuando se escriba y tal.
Pues va a hacer un post.
A este sitio.
¿Cuándo tiene que llamar a este post?
Pues le cambiamos el trigger.
Y aquí viene una de las cosas muy interesantes.
Que tiene HTMLX.
Porque de normal.
Esto sería bastante complicado.
Aquí le podemos poner un input.
Esto significa.
Que cuando el usuario.
Realmente.
Por lo que sea.
Escriba en el input.
Pues que haga ya directamente el post.
Y si vamos aquí.
Lo vamos a ver clarísimo.
Si nos ponemos aquí.
Vale.
Tu tu tu.
Aquí.
Bueno.
He puesto aquí esto.
Vamos a ver.
Si puedo.
Hacer que esto sea un poco más.
Más pequeñito.
¿Vale?
Que esté ahí centrado.
¿Vale?
Entonces.
Fijaos.
En la Nick Word.
Que si tú escribes.
A, B, tal.
¿Vale?
Conforme vas escribiendo.
Pues está haciendo.
Todas las peticiones.
O sea.
Tú estás escribiendo.
Y cada vez que pones una letra.
Pone una.
Pone una búsqueda.
Y esto al final es un rollo.
Muchas veces.
Lo que queremos hacer con este tipo de cosas.
Es un.
Throttling.
¿Vale?
Es básicamente decirle.
Oye.
No es cuando hagas input.
Es que quiero.
Que cuando haya un delay.
Cuando haya un delay aquí.
Por ejemplo.
Delay de 500 milisegundos.
¿Esto qué quiere decir?
Pues lo que quiere decir.
Es que vamos a conseguir.
Que en lugar de.
Cada vez que pongo una letra.
Ahora va a esperar.
Y tener un delay de 500 milisegundos.
Antes de buscar.
¿Vale?
No sé por qué no.
No está haciendo.
Porque.
A ver.
Ahora sí que la ha hecho.
Ahora sí.
¿Vale?
No sé por qué antes no la ha hecho.
Pero veis que hasta que no pasan 500 milisegundos.
Y paro de escribir.
Entonces no hace la búsqueda.
Otra cosa que podemos hacer.
Es evitar.
Que sea al escribir.
Porque imagínate que escribes.
Que pongo.
Ma.
¿Vale?
Entonces funciona.
Pero si pego.
Ma otra vez.
Vuelvo a buscar.
Si pego.
Ma otra vez.
Vuelvo a buscar.
No tiene sentido.
Entonces le podemos decir.
Cuando hay un input.
Y además esté cambiado.
Con un delay de 500 milisegundos.
Entonces me hacen las búsquedas.
¿Vale?
Y ahora sí que vamos a ver.
Que solo.
Y simplemente ahora pongo ma.
Ahora si pego ma otra vez.
Pues no está haciendo la búsqueda.
¿Vale?
Entonces ahora detecta también.
Que esté cambiando el contenido.
Cuando el input.
Se escribe.
Cambia el contenido.
Con un delay de 500 milisegundos.
Para esperar.
Si el usuario.
A ver si sigue escribiendo.
¿Vale?
Ahora.
¿Qué más le tengo que decir?
El post.
El trigger.
Le vamos a decir.
Dónde lo tiene que imprimir.
El resultado.
Y vamos a utilizar otra vez.
El mustache template.
Que es el template results.
Que hemos hecho antes.
Template results.
Lo que pasa es que aquí.
Vamos a cambiar alguna cosa.
¿Vale?
Vamos a poner.
Aquí habíamos puesto un ul.
Con los resultados.
Vamos a poner aquí.
Que sean los results.
Vamos a poner un grid.
Grid calls 2.
Porque no creo que quepa mucho más.
Max 2xl.
¿Vale?
Aquí vamos a listar todos los resultados.
Lo centramos.
Y aquí tenemos que cambiar un poco esto.
En lugar de hits.
Lo que devuelve nuestra API.
Que hemos visto antes.
A ver si lo podemos poner aquí.
Open browser.
¿Vale?
Search.
¿Hola?
O matrix.
Vamos a poner matrix.
No me acuerdo si era search.
O era.
A ver.
Como era el.
Search.
¿Vale?
Search.
Matrix.
¿Vale?
Y es barra.
Barra movies.
Search.
Matrix.
Lo que pasa es que es del tipo post.
O sea.
Importante.
Que es del tipo post.
Tendríamos que hacer un post.
Bueno.
No pasa nada.
Ahora lo veremos aquí.
¿Vale?
Lo importante es.
Saber que lo que nos devuelve es el title.
Aquí vamos a tener.
Por un lado.
Vamos a quitar esto.
Vamos a tener el objeto movies.
¿Vale?
Movies.
Esto lo podemos quitar.
Y tendríamos aquí el title.
La url.
Y dentro podemos poner.
Vamos a poner que esto sea un article.
En lugar de un anchor.
Que no nos interesa que sea un article.
Y vamos a hacer que se muestre el poster.
¿Vale?
Ah mira.
Poster.
¿Vale?
Vamos a ponerle una spread ratio.
Así que quede más o menos bien.
11.
16.
9.
Pues algo así.
Esto.
Auto.
Object cover.
Vale.
Entonces.
Por cada resultado de movies.
Lo que vamos a tener aquí.
Es un artículo.
Con la imagen.
El póster.
El título de la película.
Y podríamos poner también aquí.
Pues el año.
¿Vale?
Vamos a poner el año.
Text.
XS.
Y text.
Vale.
Ahí está.
Con el year.
Me parece que me ha escuchado.
Me parece que me ha escuchado.
Entonces.
Ahora se supone.
Que conforme vayamos escribiendo.
Vamos a.
Espérate que esto no me deja.
Tú, tú, tú.
Es que esto.
Esto.
Esto está mal.
Porque aquí.
El texto este.
Me ha hecho una cosa rara.
Absolute.
Screen.
Es que no me está saliendo bien el fondo.
Y no sé.
Si el fondo este.
Porque pone absolute.
No sé qué.
No sé cuánto.
Bueno.
Mira.
Vamos a quitar el fondo este.
Que lo quería hacer bonito.
El texto.
Pero es que tampoco añade mucho.
Entonces.
A ver.
Vale.
Ya teníamos ahí.
Avengers.
Vamos a poner a ver.
Vamos a ver si está el input bien.
Vale.
Nos falta.
El name.
¿No?
Vale.
Claro.
Como estamos haciendo un post.
Aquí.
Tenemos que pasarle.
¿Cómo se le pasa la información?
Ahora vamos a ver cómo se le pasa la información.
Mira.
Claro.
Para que este input le pase la información al post.
Con el nombre correcto que espera.
Tenemos que ponerle un nombre.
Que es search.
Gracias a este nombre search.
Que le estamos poniendo aquí.
Lo que va a hacer ahora.
En la API.
Es recibir.
Aquí.
Justamente.
Este search.
¿Veis?
Este search.
Se le pasa en el body.
Porque lo que estamos haciendo en este input.
Cuando hacemos el post.
Es que.
Este search.
Que lo tenemos aquí.
Se le pasa directamente.
Ahora sí que debería estar pillando correctamente esto.
Avengers.
¿Vale?
Ahora sí que pilla ahí.
Los Avengers.
De hecho.
Para verlo bien.
Y en grande.
Lo vamos a poner aquí.
Ok.
Aquí podemos buscar.
Avengers.
Vea.
Avenge.
Ok.
Avenge.
Y vamos a buscar.
Matrix.
Y lo interesante de esto.
Es que aparte de que hemos hecho una búsqueda ahí.
En un momento.
Es que son menos de 100 líneas de código.
Fijaos que tiene cosas interesantes.
Por ejemplo.
Tú puedes ir escribiendo.
Y no hace la búsqueda.
Y hasta que no paras de escribir.
Es que no empieza a hacer la búsqueda.
Luego aquí igual.
Tú puedes ir escribiendo aquí.
Vas escribiendo.
Y hasta que no paras.
¿Ves?
Hasta que no paras.
No hace la búsqueda.
Y ya con esto tendríamos la búsqueda de las películas.
El cómo funciona es.
Le estamos indicando.
Qué es lo que tiene que hacer este input.
Que cada vez.
Que.
Se está haciendo un input.
O sea.
Se está introduciendo información.
Y la información está cambiando.
Y ha dejado de escribir el usuario.
Ha dejado de cambiar esta información.
Por 500 milisegundos.
Haces un post.
A esta API.
Y además.
Le pasas.
En el body del post.
Le pasas.
Esta información del name.
Como.
Se la pasas con la key search.
Y esto le va a llegar justamente aquí.
Aquí ya tienes directamente los resultados.
Y se los puedes pasar sin ningún tipo de problema.
Lo bueno de HTMLX.
Es que no tengo que usarlo.
Veo que mucha gente.
O le odia.
O lo odia.
O lo ama.
Mucha gente lo ama.
Mucha gente lo odia.
Yo sinceramente.
A mí.
Me está gustando.
Pero serían para cosas muy pequeñitas.
¿Por qué?
Porque creo que.
A ver.
Esto.
A mí me parece imbatible.
En nivel de.
A mí me gusta.
Bueno.
Veo que hay gente que le gusta.
Hay gente que no.
Es como Tailwind.
Que hay gente que lo odia.
Y gente que no.
Pero.
Lo que sí que es cierto.
Es que.
Son muy.
Muy.
Muy pocas líneas de código.
Y se pueden hacer cosas.
Que está bastante bien.
Ahora.
Para cosas muy tremendas.
De hecho.
Mirad.
Vamos a enseñar.
Dos cositas.
Antes de pasar a Astro.
Por ejemplo.
Vamos a enseñaros una cosa.
Aquí.
Cuando buscamos.
Veis que.
Mira.
Voy a buscar.
Vamos a poner esto.
En el title.
Aquí el title.
H2.
Mira.
Vamos a hacer una cosa.
Que aquí vais a ver también.
La potencia que tiene esto.
Que está muy chulo.
Si aquí.
Buscamos Avengers.
¿Vale?
Y luego.
Buscas Matrix.
Aquí ves que pega como un salto.
Que es un poco raro.
Una de las cosas muy chulas que tiene.
HTMX.
Es que te permite hacer lo que le dicen como swap.
¿Vale?
De hacer transiciones entre el contenido.
De forma mucho.
Muy sencilla.
Y que además quede bastante bien.
Por ejemplo.
Lo primero que podemos hacer es mejorar la salida.
O sea.
Cuando pasamos de Matrix a Avengers.
Que quede bien.
Para eso.
Los resultados que teníamos aquí.
¿Ves?
Estos results.
Podríamos estilarlos.
Porque HTMX le añade unas clases.
Que es esta.
Es swapping.
No.
Swapping.
Le añade unas clases.
Mientras está haciendo ciertas cosas.
Entonces aquí lo que podemos decir es que.
Vale.
Pues deja una opacidad cero.
Y le haces una transición de la opacity.
Durante un segundo y tal.
Y además.
Para que haga el swap.
Lo que le tenemos que avisar.
Aquí.
Es utilizar un atributo.
Igual que tenemos el target.
Aquí sería decirle.
Vale.
El swap este que queremos hacer.
Con el inner HTML.
Quiero.
Que el swap lo hagas durante un segundo.
Entonces.
Ahora lo que vamos a ver.
Es que si tú pones Matrix.
Esto debería aparecer.
Y luego.
Avengers.
¿Ves?
Y has visto que Matrix.
Cuando hemos pasado a Matrix.
Ha hecho como ya el primer swap de salida.
Lo ha hecho bien.
Todavía lo podemos mejorar más.
Porque lo que necesitamos también.
Es hacer el de salida.
Y el de entrada.
Entonces.
Le decimos que haga el swap de un segundo.
Y el settle de un segundo.
Y esto lo que nos va a permitir.
Es poner unos estilos.
Para que haga la animación completa.
Tanto al entrar.
Como al salir.
Y hombre.
Esto normalmente.
Para hacer algo así.
En algunas.
En algunas cositas.
Puede costar bastante.
¿Qué vamos a?
Bueno.
Voy a crear primero.
Una animación.
Que sea de fade in.
¿Vale?
Esta me sirve.
Y lo que vamos a hacer es que.
En los resultados.
Cuando.
Results.
Con el HTMX.
Mientras está haciendo el set.
Set.
Joder.
¿Cómo se escribe?
Selling.
Este.
En lugar de hacer esto.
Porque si no.
Esto no va a quedar bien.
Lo que vamos a hacer es la animación.
Vamos a hacer una animación.
El animation.
Para que se quede con.
Con la animación.
En los dos lugares.
¿Vale?
Para que al final.
Se vea la opacidad bien.
Porque si no.
Si hacemos la transición.
Hará un parpadeo.
Entonces.
Utilizamos el de fade in este.
Le decimos.
Que cuando termine la animación.
Se quede como estaba.
Pero.
Antes de empezar.
Que empiece con la opacidad cero.
Que el estilo de opacidad cero.
Empiece ya.
Entonces.
Empezará siempre con la opacidad cero.
Y luego terminará.
Y se quedará con la opacidad en uno.
Cuando termine la animación.
Y ahora.
Con esto.
En principio.
Si no lo hemos hecho mal.
¿Vale?
¿Veis?
Ahora ya ha ido.
Eso lo ha hecho bien.
Y aquí.
Si buscamos matrix.
Quitará este.
Y pondrá el otro.
Ahora.
Las imágenes.
Lo que pasa.
Es que queda un poco raro.
Pero.
Fijaos.
Que hace ese.
¿Lo ves?
Lo está haciendo con un fade in y un fade out.
Esto lo podéis cambiar como queráis.
¿Vale?
Podéis hacer.
Pero veis que ahora.
Quita uno.
Y pone el otro.
Y lo hace súper bien.
Y mucho mejor.
La verdad.
Es que esto está.
Bastante bien.
Porque con un poquito de CSS.
Lo ha hecho.
Pero.
Hay algo mejor.
Y vas a flipar con esto.
Y la verdad.
Es que tiene algunas cosas que están increíbles.
Porque.
A ver.
Lo he puesto un segundo.
Solo para que lo veáis.
Lo podéis poner.
Dice.
Me gustaría menos de un segundo.
Bueno.
A ver.
Esto que ya.
A la carta.
A ver.
Lo he puesto un segundo.
Solo para que lo veáis.
Pero lo podéis poner como vosotros queráis.
Pero espera.
Porque hay una cosa mejor.
Y si os digo.
Y si os digo.
Que puedo hacer esto.
Quitando todo esto.
Quitando todo esto.
Y básicamente.
Decirle.
Que queremos una transición.
Vale.
Me ha dejado fatal.
Me ha dejado fatal.
A ver.
¿Por qué?
Transition true.
Si lo he hecho bien.
¿No?
A ver.
Avengers.
Ahora.
Es que no sé por qué a veces se le va la olla.
Es un tema de live preview.
Me parece.
Bueno.
Fijaos.
Fijaos.
¿Habéis visto?
La animación.
¿Habéis visto la animación o qué?
¿Habéis visto?
Vale.
Esperad.
Porque esto es brutal.
Lo que estamos haciendo con este HX swap.
Y el transition a true.
Es que está utilizando unas view transitions.
Las view transitions.
Es una tecnología.
Que tenemos en el navegador ahora.
¿Vale?
Y fijaos lo bien que queda.
Es que queda súper bien.
Lo malo es cuando no ha cargado las imágenes todavía.
Pero fijaos.
¿Cómo hace la transición?
¿Habéis visto eso?
Fijaos la transición.
Es que es tremenda.
Pues hace un fade in, fade out.
Y además lo hace con los dos a la vez.
O sea que lo que hace es directamente como intercambiar el contenido.
Y lo está haciendo con las view transitions.
Las view transitions es una cosa que es totalmente nativa del navegador.
Y todavía no está soportado por todos los navegadores.
Aunque ya han dicho todo el mundo que lo van a utilizar.
Y podéis personalizar también las animaciones.
Podéis utilizar la animación que queráis.
Por defecto hace esta.
Que sería básicamente un fade in, fade out.
Pero lo interesante es que esta animación no solo la podéis utilizar aquí.
Es que la podéis utilizar a nivel de toda la página.
A nivel...
Y es tan sencillo como añadir transition true.
Y ya tenéis esta animación que hace este fade in, fade out.
Con cualquier, cualquier contenido.
Y la verdad es que queda, pues queda tremendo.
Claro, el problema aquí es que con las imágenes cuando no cargan han quedado un poco raras.
Pero cuando están cargadas sí que se ve el efecto que queda súper bien.
Si no, lo que se podría hacer es esperar a que cargue la imagen para mostrarla y tal.
Pero bueno, que está súper bien.
Bueno, pues ahí tendríamos el tema este, ¿no?
Con el fade in, fade out y las view transitions.
Pero vamos a ver todavía, vamos a ver lo más impresionante.
Esto está bien porque al final con mustache y tal se pueden hacer un montón de cosas.
Pero yo creo que lo que realmente os puede volar la cabeza es si vemos algunos ejemplos con Astro.
¿Por qué con Astro?
Bueno, porque resulta que Astro es el...
Yo diría uno de los acompañantes perfectos para utilizarlo con HTMX.
Tienen momentos muy guau, muy guau, guau, ¿qué está pasando?
Y no necesitaréis utilizar mustache y lleváis la experiencia tanto de desarrollo como de usuario a otro nivel.
Mirad, voy a crear...
Ah, no, web no.
Vamos a poner aquí Astro.
Bueno, with Astro, ¿vale?
Vamos a poner sample files, ¿vale?
Creamos un proyecto de Astro.
La verdad es que con esto justamente creo que Astro hace que suba de nivel, ¿eh?
Porque es tremendo.
¿Eres el CEO de Astro?
No sé del CEO de Astro.
Ojalá, me encantaría ser el CEO de Astro.
Porque me parece una idea increíble.
Pero de verdad, es que os va a volar la cabeza.
Porque pensad que Astro no es el framework de HTMX.
Pero cuando veáis cómo funciona y las cosas que se pueden hacer, vais a verle todavía más el sentido.
Porque es increíble.
O sea, es tremendo.
Quien quiera puede ser el CEO de HTMX.
Ay, qué bueno.
¿Soy Astro lover?
No, la verdad es que sí.
Pero sobre todo porque...
Por cierto, que es que le he dicho a instalar las dependencias.
Y estaba tardando la vida esto.
With Astro.
PNP install.
Y así quitamos el no modus.
Vale.
Pues, te, te, te.
Vale.
Instalamos las dependencias.
Bueno.
Y mientras las dependencias se instalan, vamos a ir abriendo por aquí el proyecto.
He creado un proyecto con Astro.
Vale.
Lo tenemos aquí.
With Astro.
Entramos.
Y fijaos.
Aquí tenemos un source.
Tenemos las páginas.
Vale.
Pues, esta página lo que vamos a hacer.
Vamos a eliminar todo esto.
Vamos a eliminar también todos los estilos.
Tu, tu, tu, tu.
Y vamos a abrir también la página, el componente de layout.
Este componente de layout.
Yo tengo por aquí ya un layout preparadillo.
Un poquito con algunos estilos.
Vale.
Que nada del otro mundo.
Es muy parecido, pero creo que tenía un fondo y alguna cosa más.
También he preparado un componente que tampoco tiene nada del otro mundo.
Vale.
Que se llama example.
Que básicamente lo que hace es envolver todos los ejemplos que hacemos para que tengan un layout y tengan unas separaciones.
Vale.
O sea, section.
O sea, no tiene nada del otro mundo.
Vale.
Vamos a poner aquí en layout.
Layout Astro.
Y con esto ya tendríamos estos componentes.
Vale.
Quitamos esto.
Y por aquí ya lo tendríamos.
Vale.
Entonces, vamos a importar también.
Vamos a utilizar pnpx astro at tailwind.
Vamos a añadirle tailwind para hacer unos estilos mínimos.
No vamos a astilar nada del otro mundo.
Pero con esto añadimos la dependencia de tailwind.
Y así, si tenemos que hacer algún estilo rápido, pues lo hacemos con tailwind.
Vale.
Esto debería preguntarme si lo quiero añadir.
Nos instala dependencias.
Y nos debería cambiar la configuración.
Perfecto.
Vale.
La integración de tailwind.
Ahora, para instalar htmx en tailwind.
Tenéis diferentes formas.
Una, la más fácil.
Pnpm.
Bueno, add o install.
htmx.org y astro-htmx.
Esto sería la dependencia de htmx y esta sería la integración con astro.
Son dos dependencias que necesitamos.
Así que nada, las instalamos.
Y ahora lo que vamos a hacer, una vez que las tengamos instaladas,
vamos a volver a nuestro proyecto y nos vamos a la configuración de astro.
Y en las integraciones vamos a añadir la de htmx.
Esta la tenemos que importar de astro-htmx.
Así que nos traemos htmx from astro-htmx.
Vale.
Tenemos que añadir la integración.
Y tenemos que ponerle que el output sea de tipo servidor.
¿Por qué?
Porque una de las cosas que tiene muy interesante htmx es que funciona con cualquier backend.
Pero justamente ese es el problema, que funciona con cualquier backend.
Y tienes que crear el backend.
Pero, pero, astro te facilita esto que te vuela la cabeza.
Vamos a hacer un ejemplo pequeñito, muy pequeñito, para ver la primera integración con astro.
¿Vale?
Vamos a crear aquí unas páginas.
Aquí en páginas, páginas voy a crear examples01.astro.
¿Vale?
Y ahí tendremos todos los ejemplos.
Vamos a importar el componente example, que es justamente el que hemos hecho antes.
Punto, punto, components, example, punto astro.
Y así ya tendríamos el example.
Le ponemos el título, ejemplo1.
Ejemplo1, fetching de citas de gatos.
De gatos.
Ahora lo veréis.
Ahora veréis.
Por ahora, es más o menos parecido a lo que ya habéis visto.
¿Vale?
Ya habéis visto que hemos hecho esto del deep.
Podemos tener un deep con el resultado.
Deep id, que sea, por ejemplo, result.
¿Vale?
Vamos a poner el deep vacío.
Y aquí, ¿ves?
Ya me dice, utiliza JavaScript.
Pero no quiero JavaScript, porque tengo algo mejor.
Tengo algo mejor.
Lo que vamos a hacer es que vamos a tener aquí un botón, que cuando le hagamos clic, vamos a hacer un get, pero no a una API.
Vamos a ir a partials barra cat fact.
¿Vale?
Le puedes llamar partials, le podemos llamar output, le podemos llamar como queráis.
Pero vamos a llamarle partials.
Y ahora os explicaré cómo funciona.
Vamos a decirle el target, que obviamente va a ser el resultado.
Y ya está.
Aquí vamos a decirle, dame una curiosidad sobre gatos.
Sobre gatos.
¿Vale?
Y esto sería todo.
¿Vale?
Ahora.
Ahora aquí, a ver.
Ahora aquí yo, para no aburriros con esto, voy a hacer una cosa.
En el index voy a copiarme esto.
Y esto básicamente lo que hace es que detecta todos los ejemplos que tenemos en la carpeta pages barra examples y me lista todos los enlaces.
Entonces, así aparecerán todos los enlaces.
Y cuando veamos la página, así tendremos todos los ejemplos ya puestos.
Y solo tendremos que hacer clic para entrar.
¿Vale?
Básicamente hace eso.
La magia de esto es el astroglobe.
Que esto lo que hace es detectarte todos los ficheros que hay dentro de examples.
Aquí lo que haremos es detectar.
Ahora solo tengo uno, pero cuando añadamos otro, pues aparecerá.
¿Vale?
Globe patterns.
Vale.
Pues la he liado porque el globe patterns me dice que tiene que empezar.
¿Así?
Tiene que empezar.
No ha devuelto nada.
¿Vale?
Pages barra examples.
¿Vale?
¿Y qué he hecho mal de este...?
¿Qué he hecho mal?
¿Por qué me dice que esto tiene que empezar con source?
¿Por qué me dice que tiene que empezar con source?
A ver...
Es que ahora no sé.
Sí.
No sé.
Vale.
Pues nada.
Me ha dejado fatal.
Pensaba que iba a funcionar y puede ser porque esté...
No.
No, no, no.
O sea, porque el punto barra...
O sea, no estoy dentro de la carpeta.
Bueno.
No pasa nada.
Mira, lo hacemos a mano.
Lo iba a hacer así, pero lo hacemos a mano y ya está.
No pasa nada.
Es un momento.
Vamos a hacer aquí que tengamos el example01 y ya está.
Ya miraré a ver cuál es el problema.
Example01, ejemplo01.
Y luego lo copiamos, lo pegamos y ya está.
¿Vale?
Ahí tenemos el ejemplo01 y me deja otra vez 01.
¿Y por qué no me está...
Example01?
Ah, porque he puesto examples.
¿Vale?
Examples.
Vale, vale.
Examples01.
Ahora sí.
Ahora sí.
¿Vale?
Example01.
Vale.
Aquí tenemos nuestro primer ejemplo.
Ah, me faltó pages.
Vale, vale.
Se me olvidó el pages.
Vale, no pasa nada.
Vale.
Esto es un botón, ¿vale?
El dame una curiosidad de un gato, aquí tendíamos...
Aquí tendríamos un botón.
Vamos a ponerle un border white, ¿vale?
Para que veamos ahí la...
Vale.
Tenemos como un botoncito.
Vamos a poner px4, pi2.
Pi2.
Y algo así.
Vale.
Tenemos el botón más triste y normal del mundo.
Lo que queremos hacer con esto, fijaos que le hacemos un get del partials.
Lo que vamos a hacer con Astro es básicamente tener dentro de pages, vamos a tener otra carpeta que le vamos a llamar partials.
Esto es una cosa que se hacía mucho antiguamente en la que en lugar de que la API devolviese JSON, devolvía HTML.
Y lo interesante de esto es que nosotros lo que podemos tener aquí es un catfact.astro que lo que hace es hacer las peticiones, hacer todo el trabajo de las APIs.
Por ejemplo, aquí vamos a hacer un fetching de datos, ¿vale?
A la API de los gatos esta del catninja.
Esta de aquí.
Catninja.
Que lo que te hace es que te da un fact de los gatos y lo puedes hacer que sea random.
En facts, aquí, ¿ves? Get random fact.
Bueno.
Pues esto lo que hace te da un random fact.
Aquí lo tenemos.
Vale.
Pues vamos a hacer que esta página haga el fetching de datos.
Aquí tengamos la respuesta.
Recuperamos el fact del JSON.
Y aquí ponemos lo que queremos renderizar.
Pues imagínate, text yellow 200.
¿Vale?
Y aquí dentro tendríamos el...
Bueno, con uno.
No con dos.
Esto no es Mustache.
Y esto lo que nos permite es que tú tienes este código aquí, haces un get, te traes la información, la renderizas en el resultado y aquí también no solo vas a tener la lógica, sino que también lo que vas a tener es el HTML.
¿Estás escribiendo JavaScript?
Claro que sí, F18, porque esto es el backend.
Yo no he dicho que no íbamos a escribir el backend.
El backend tiene que escribir en JavaScript, pero lo podrías hacer en Golang, en PHP, en Node o lo que sea.
¿Estás escribiendo JavaScript?
La verdad es que tienes unas cosas.
El tema es que lo que podemos hacer con esto es que el backend te devuelva directamente el HTML.
Y no solo eso, sino que el HTML puede tener ya per se HTML también.
Y eso es lo que lo hace realmente interesante la integración con Astro.
Con esto lo que tenemos es que si nos vamos aquí y le damos, dame una curiosidad sobre Astro.
Vale, en este caso no sé por qué no me lo ha puesto en amarillo, porque el textyellow esto me ha ignorado.
¿Puede ser que el tailwind config...
Bueno, no me lo ha puesto en amarillo, ¿no?
A ver.
Me ha puesto la cosa, pero no me lo ha puesto en amarillo.
Quería ver que teníamos los estilos.
Ah, el textyellow está ahí, pero no lo ha detectado bien.
Pero veis el textyellow que sí que está ahí.
O sea, sí que está la clase perfectamente.
Es como que no lo ha detectado tailwind, no sé por qué motivo.
Y en el tailwind config, aquí, source...
O sea, aquí sí que está bien.
Bueno, no sé.
Se le habrá ido...
Se le habrá ido.
No sé por qué el estilo no lo pilla.
Pero bueno, lo interesante de esto es que aquí estamos devolviendo directamente el HTML.
O sea, lo que tenemos aquí es el HTML ya.
Directamente.
¿Veis?
Aquí el sth1.
Y esto es interesante porque lo que tenéis directamente ya...
¿Por qué 500?
¿Qué más da?
Porque no se veía.
No, no.
Es que no se ve.
Se notaría, no.
Safelys, no.
Pero por safelys no es.
Debería funcionar.
Yo creo que es un error que está teniendo aquí o Astro Tailwind.
Pero que es un error.
Entonces, lo interesante de esto es que ya tenemos una integración de Astro con HTMLX
que lo único que hace es hacerte como un puente.
Porque no tienes que escribir ni la petición ni nada.
Simplemente le dices, oye, recupérame un random.
De hecho de esta, ahí ya le puedes decir lo que quieres renderizar.
Aquí tendrían la lógica.
Y ya directamente le dices dónde lo quieres renderizar.
Que lo tendríamos aquí en este resultado.
Y ya está.
Así de simple.
Así de fácil.
Para ver el ejemplo todavía más...
El ejemplo que teníamos antes.
Por ejemplo, el de las películas, ¿no?
El tema de las películas antes quedaba un poco raro con todo el tema del mustache este y tal.
Bueno, vamos a crear el ejemplo de las películas.
¿Vale?
El ejemplo de las películas como lo teníamos todavía por aquí.
Vamos a ver si me lo puedo copiar.
¿Vale?
Todo esto me lo copio aquí.
¿Vale?
Me lo copio por aquí.
Ya obtendría todo esto perfectamente.
Solo que ahora este post que hacía este barra movies, barra no sé qué, lo que le podemos decir es que me lo saque de barra.
Partials, barra movie.
Y lo interesante, ¿veis que hacía un post?
Pues mira, esto no hace falta ni siquiera que lo cambiemos.
Si nos vamos aquí y creamos en Pages, Partials, creamos el movies.
Vamos a crear aquí movies.astro.
¿Vale?
Vale.
Lo que vamos a poder hacer aquí en el movies.astro es detectar justamente si realmente esto es del tipo post.
Porque esto aquí, astro, tiene astro.request.method.
¿Vale?
Y esto lo que te debería decir es si es del tipo post.
Entonces, si es del tipo post, pues puedes hacer una cosa.
Si es del tipo delete, haces otra.
Esto lo veremos después cuando hagamos una pequeña aplicación de un to-do.
Pero lo interesante aquí es que también podemos acceder, por supuesto, a la información del search, por ejemplo.
Podemos recuperar del request el form data.
Form data.
¿Vale?
Esto hay que hacer una wait.
Esto es algo que es nativo realmente.
O sea, no es que sea de astro, sino que la request tiene el form data.
Aquí, del form data, recuperamos el search.
Y ahora aquí ya podríamos tener la respuesta.
Y os acordáis que no me gustaba mucho que tenía aquí una API que yo había hecho, todo esto que yo había hecho aquí para transformar y tal.
Pues es que todo esto que estábamos haciendo aquí, realmente ya no tenemos que crear una API, sino que la puedes hacer aquí directamente.
Aquí directamente podríamos hacer el fetching de datos de la API, la transformación de las movies y estas movies que tenemos aquí, pues ahora ya solo las tenemos que renderizar.
Y espérate, porque encima voy a hacer una cosa que te va a volar más la cabeza, que va a ser cambiarle el título a la pantalla, a la URL.
Vale, aquí tendríamos todo esto y lo que vamos a hacer es copiarnos del index que habíamos puesto aquí todo este li.
Este li nos lo copiamos aquí, vale, y lo único que tenemos que cambiar aquí, pues en lugar de esto, movie.title, esto aquí sería el movie.title, esto así, vale, aquí el póster, pues movie.poster y aquí el movie.year, vale.
Ah, mira, aquí es importante hacer el return, que si no la liamos. Vale, con esto ya tendríamos el ejemplo, vamos a ver si tenemos, vamos al curso de htmx, al 2, el ejemplo 2.
Vale, tenemos que envolver todo esto en el componente example, vale, para tener el layout y todo eso.
Title, buscador de películas, vale, y no sé por qué no me lo... ¡Ay, porque no es aquí!
No es aquí, no es aquí, es aquí, es aquí, perdón, perdón, es aquí, es aquí, aquí.
Buscador de películas, claro, lo he puesto en el partial, no, es aquí.
Este lo podemos quitar de aquí y este lo quitamos de aquí.
Entonces, ahora que sigo en los envuelto, ahora sí que le aparece bien.
No sé por qué, creo que se le ha ido... A ver si Tailwind me lo pilla ahora bien.
Ahora sí, ahora sí me está pillando los estilos. Creo que se le había ido la olla a Tailwind.
Bien, entonces, ya hemos recuperado el ejemplo que teníamos del buscador de películas que habíamos hecho antes.
Nos lo hemos traído aquí y lo interesante que tenemos aquí es que ahora lo hacemos con el partial.
Esto nos sirve tanto de API como lo que queremos renderizar.
Entonces, ahora ya, pues buscamos Avengers, vale, y tiene un error, espérate.
Vale, partials, movie, es que he puesto movie y es movies, movies, ¿vale?
A ver ahora, Avengers...
No, ha funcionado.
Vamos a ver, Avengers, partials, Avengers, headers...
Vale, esto, la respuesta que está haciendo, no me está devolviendo la respuesta, ¿no?
A ver, partials, movies, astro...
Aquí en results, esto sí que lo está devolviendo bien.
Pero aquí en movies...
A ver, vamos a ver si estamos...
Si el search está pillándolo bien, search.
Y si en movies...
Tenemos las movies.
En movies.
Movies, map, no sé qué.
Ah, puede ser...
Claro, puede ser que haya...
Ah, no, no.
No puede ser eso.
No puede ser.
A ver, vamos a ver aquí.
Avengers...
Vale.
El partial lo está haciendo, pero la respuesta no está bien.
De hecho...
Vale, vale, vale.
Es que me he equivocado yo en alguna cosa.
Me he equivocado.
Es que a la hora de recuperar aquí este...
Ah, joder.
Esto está mal.
Esto es así.
Ahora sí.
Ahora sí.
Ahora sí.
Estaba recuperando eso mal.
Vale, ahora sí.
Ahora sí.
Ahora sí.
Ahora sí.
Y fijaos que sigue funcionando justamente con el View Transitions este que hemos dicho antes, ¿vale?
Con las transiciones entre cada una de las páginas y tal.
Lo interesante de esto es que no tienes que crear ni siquiera el endpoint porque aquí tendrías la lógica del endpoint y directamente lo que quieres que renderice.
Y aquí lo que estaríamos diciendo simplemente con HTML, o sea, la parte del frontend sería simplemente decirle dónde tiene que hacer el post, cuándo lo tiene que hacer, dónde lo tiene que renderizar y encima las transiciones y todo esto.
Os voy a dar mi opinión de HTMLX.
Yo no lo utilizaría en mi día a día.
No me veo utilizando HTMLX ni me parece que es una cosa que realmente yo recomiendo en un proyecto muy grande.
Porque sí que me parece interesante que se escribe poco código, que tiene ideas muy buenas, pero por otro lado veo mucho el ir y venir, ¿no?
De tener que ir, tienes que pensar aquí, el tema de la extensión a mí al menos me molesta a día de hoy, creo que se tendría que trabajar más.
Pero el cómo se trabaja con Astro está interesante, ¿por qué?
Hombre, porque tienes aquí los atributos, le puedes decir el partial directamente lo que devuelve y tal.
Y vamos a hacer también una aplicación del ToDo, pero creo que lo vamos a dejar aquí.
Porque, no sé, tampoco me apetece ya mucho más de continuar con lo de Astro ya y ya está.
Y otro día igual seguimos con el curso de HTMLX y lo hacemos con otra cosa.
Lo podemos hacer con el backend de Go o lo podemos hacer con otra tecnología justamente para que lo miremos y tal.
Bueno, amigos, espero que os haya gustado el curso de HTMLX.
A mí me parece una tecnología súper interesante, la verdad, que se pueden hacer cosas muy, muy chulas en muy pocas líneas de código.
Sé que hay gente que lo odia, lo entiendo perfectamente, hay gente que sí que le gusta.
Bueno, pero lo interesante es, no sé, cambiar un poco el paradigma de estar pensando siempre igual,
de siempre los componentes de React, siempre de esta forma.
No dejes que ganen los freaking Astro haters. No, no, hombre, no.
Pero aún así yo os invito a que le deis una oportunidad, que le echéis un vistazo, que lo probéis,
que veáis a ver si realmente es tan impresionante como parece.
Hay cosas que se vienen en la versión 2.0 que está a punto de salir,
porque esta es la versión 1. algo, 1.8, ocupa 14K, que me parece que es un montón.
Es compatible con Internet Explorer 11, que la verdad es que es bastante sorprendente.
Pero creo que la próxima versión le quitan la compatibilidad con Internet Explorer 11.
Creo que van a hacer que ocupe bastante menos.
Y yo creo que la próxima versión todavía va a ser más interesante.
A mí, personalmente, el hacerlo con Astro me parece bastante chulo,
pero ya veis que lo podéis utilizar con cualquier, cualquier framework.
De hecho, he visto en Internet mucha gente que lo está utilizando con .NET.
Y creo que tiene sentido, la verdad, tiene bastante sentido.
Fijaos, mira, aquí, por ejemplo, este chico.
Welcome to the raw coding, YouTube show.
Raw coding.
Pues este chico, por ejemplo, lo está utilizando justamente con C Sharp, con .NET.
Y es que todo lo que, sobre todo a lo mejor para backends,
gente que no tenga ganas de pelearse mucho con los nuevos frameworks y tal,
creo que lo pueden entender súper fácil.
Y que en el backend, pues te devuelven HTML, que te lo pones ahí,
puedes hacer que sea interactivo súper fácil, sin tener que preocuparte,
y lo puedes hacer súper rápido.
Así que yo creo que va a dar mucho, mucho que hablar
y puedo entender porque a mucha gente le gusta.
De nuevo, yo no lo veo para cualquier proyecto,
para proyectos pequeños sí que lo veo,
pero aún así me parece súper interesante.