Os voy a enseñar una cosa que os va a volar la cabeza con HTML.
Y es que HTML está evolucionando.
Está evolucionando de una forma que no os esperáis para nada en la vida.
Os voy a enseñar un código y quiero que me digáis si veis algo raro de este HTML.
Ya tenemos if, no tenemos if en HTML todavía.
¿Qué es esto?
¿Command for?
¿Command?
¿Command for?
¿Command?
¿Esto funciona o no funciona?
¿Esto qué es?
¿Esto qué es?
Bueno, bueno, bueno.
A ver, esto obviamente a día de hoy no funciona.
El HTML ver se vería, pero no funciona como esperaríamos, ¿no?
Por ejemplo, si voy a abrir una pestaña de Codilink, si esto lo intentamos ejecutar aquí en Codilink,
vamos a ver que sí, que tenemos aquí los estilos, o sea, se ve aquí la modal, pero si le doy un clic no funciona.
¿Qué se supone que es esto?
¿Esto qué es magia negra?
¿Qué es lo que se supone que debería hacer esto?
Si miramos el código, decimos que este botón tiene un comando que es para el elemento info, que es este dialog,
y el comando que tiene es que tiene que mostrar la modal.
Dentro del dialog tenemos un botón que tiene un comando también para info, que es este dialog,
y el comando es que se tiene que borrar, ¿vale?
Entonces ya veis que ahora no funciona, por ahora, porque ahora os voy a enseñar cómo funciona.
No os preocupéis que os voy a enseñar cómo funciona.
Esto en realidad ya funciona en Canary.
Aquí, activando la versión experimental, pero fijaos que aquí, a ver si soy capaz de mover esto un poco,
le he puesto unos estilos para que lo veáis, ¿vale?
Fijaos, sin JavaScript, ¿veis que se abre y funciona correctamente?
Sin JavaScript, o sea, tengo cero líneas, cero líneas de JavaScript.
No hay JavaScript, ¿vale?
Entonces, estaríamos abriendo y cerrando una modal solo con HTML.
Esto que veis aquí, esto que veis aquí, es una cosa en la que se está trabajando para HTML y hay progreso.
Ya lleva mucho tiempo en el que se está trabajando.
La idea sería dejar de escribir JavaScript para hacer este tipo de comandos, porque estos comandos tienen un nombre.
Se llama invoker commands, ¿vale?
Está todavía en experimental, solo lo tenéis en Canary y solo funciona en botones, ¿vale?
Solo los botones, vamos a tener este atributo, comando, command for, que sería el elemento al que vamos a ir, ¿vale?
¿Y cómo funciona esto?
Que nosotros le indicamos a qué elemento tiene que activarse y este elemento, qué método es el que vamos a querer ejecutar.
En este caso, showModel, que ya sabéis que showModel es un método que para los dialog, dialog, showModel, es parte de la API, ¿vale?
ShowModel no es que pongas un string ahí y ya está, sino que showModel es como lo harías en JavaScript.
Una vez que tienes el elemento dialog, harías dialog.showModel, ¿vale?
Y también tendrías el close, el show, o sea, tendríamos diferentes formas de hacerlo.
Esto no solo funciona para los dialog, esto en realidad funcionaría en todos los botones que queráis, ¿vale?
Lo vamos a tener también, pues lo podríamos tener para los popover, para el details, ¿vale?
Esto también lo podríais hacer aquí en el details, por ejemplo.
Vamos a hacer esto en el details, ¿vale?
Tenemos aquí un detalle, ¿vale?
Y le damos el click, le damos a open details, ¿vale?
Fíjate que ahora se ha abierto.
Si le doy aquí a open details, pum, se abre.
¿Por qué?
Porque este botón open details, le estoy diciendo que tiene el comando que my details se tiene que abrir.
Y hace que esto se abra, sin escribir JavaScript de ninguna manera.
Es bastante interesante lo que, a ver, os voy a explicar la trampa que tiene un poquito esto, ¿vale?
Esto es una cosa en la que se ha estado trabajando durante bastante tiempo, ya desde el año pasado.
Ha cambiado el nombre, han ido habiendo bastantes iteraciones.
Pero, cuidado, esto no es parte del consorcio, del World Wide Web Consortium, que serían los que realmente tienen que añadir esto en un estándar, ¿vale?
De dónde sale esto, por qué se está trabajando en esto, quién está trabajando sobre esto.
Hay un grupo de trabajo que se llama OpenAI, que es un grupo de comunidad del consorcio World Wide Web Developer, pero es Community Group.
¿Veis aquí que pone Community Group?
Que hay un montón de gente de, por ejemplo, gente de Google, gente de un montón de diferentes vendors, ¿no?
Aquí lo que hacen es trabajar en propuestas y prepararlas para luego llevarlas bastante masticadas una vez que ya tienen mucho feedback y habiendo trabajado en ellas, ¿no?
Y aquí tenéis un montón de propuestas, que en realidad hay propuestas en las que al final, pues, hay algunas que, pues, oye, han desaparecido, otras que se están investigando, ¿vale?
Por ejemplo, el avatar, ¿no? Porque quieren mejorar, si podemos tener un elemento que pueda ser avatar, no sé qué, no sé cuánto, ¿no?
Hay algunas propuestas que pueden ser que tengan tirón y otras que no.
Pero esta, ojo, porque ahora les diréis, ay, pero es que claro, esta propuesta, esta propuesta, ojo, cuidado, porque hace dos semanas aquí tendríamos Upcoming WhatNot Meeting, ¿vale?
Hay unos meetings donde ahora sí lo tenemos dentro de lo que sería la organización donde se trabaja en el HTML, ¿vale?
Y aquí están hablando de diferentes cosas. En la última meeting tenemos que esto que habíamos visto por aquí, el invoker, ¿vale?
Invoker. Fijaos que lo tenemos como propuesta, invoker buttons. Y aquí han estado hablando de esto, de esta propuesta que hay aquí.
Es una pull request que sí que está aquí, fijaos que está desde el 2023 y están avanzando en ella.
He estado mirando lo que han comentado justamente, lo podéis mirar vosotros mismos en los diferentes minutos, ¿ves?
Y aquí han estado hablando de esto. ¿Y qué es lo que están comentando por aquí?
Lo que están comentando es qué pasa si tiene símbolos raros en el atributo, qué pasa con esto, cómo hacemos que sea accesible.
Y lo que han llegado a un acuerdo es que sólo los botones, sólo los botones, sean los que tengan esta posibilidad.
Han resuelto eso y sigue avanzando por ahora. Y a ver cómo va.
No significa que va a llegar pronto, pero es un avance. Han hablado sobre ello.
Van a estar revisando otras cosas que no han quedado muy claras desde el nombre y cositas así.
Pero ojo, cuidado, porque esto es una cosa que podría llegar, podría llegar a HTML y que nos evitaría el hecho de escribir mucho JavaScript.
De hecho, aquí lo tenéis, hablan cómo se han basado en algunas cosas como React, Vue o HTMLX.
Que tienen esto de poner en un atributo como la acción que debería hacer y todo esto.
Así que fijaos que hay un montón de gente interesada en que esto tira adelante.
Así que no me extrañaría que antes de lo que crees, puedas hacer esto en tu HTML y dejar de escribir mucho JavaScript que hasta el día de hoy hay que escribir para hacer que sea interactiva la página.
¿Os gusta o no os gusta? ¿Lo usaríais o no usaríais esta forma de escribir HTML y evitaros algo de JavaScript?
Pues claro, si no, al final lo que habría que hacer con esto, para que nos hagamos un poco la idea, tendrías que, por ejemplo, recuperar el elemento.
Teníamos que hacer el details, habría que recuperar el elemento.
Esto es lo que nos estaríamos ahorrando, sería básicamente esto.
Vale, veo que os gusta.
My details, tendríamos que, cuando hacemos un clic, entonces hacemos esto.
Ah, no, habría que recuperar el botón.
Perdón, perdón, habría que recuperar el botón, document query selector.
No estoy utilizando clases ni nada, pero ya os imagináis, ¿vale?
Entonces, cuando el botón, entonces details.open, ¿vale?
Esto es lo que habría que hacer, básicamente.
O sea, te está ahorrando ese código.
Tampoco es mucho más, pero es verdad que al menos es bastante...
JavaScript está muerto ya, ya está.
HTML en 2050 con un millón de APIs.
Bueno, en este caso, eso es un atributo, ¿no?
Más que una API, como tal.
Tiene mejor performance, supongo, y escribir menos código.
¿Y cuál es el beneficio?
Bueno, por performance, sí que es verdad que tendría mejor performance.
Y os voy a explicar por qué.
Porque lo malo que tiene este código de JavaScript es que,
hasta que no se carga el JavaScript, tu página no es interactiva.
Que eso es interesante.
O sea, tú, hasta que no carga el JavaScript, no puedes darle clic si tienes esto.
O sea, si esto es un comportamiento que está en JavaScript, hasta que no se carga el JavaScript,
pues esto no funcionará.
Y esto puede pasar en un montón de cosas, modales, lo que sea.
Así que sí que tendría mejor rendimiento porque tu página sería interactiva antes.
No lo había pensado, la verdad.
Pero tiene todo sentido del mundo.
Y el otro beneficio, obviamente, sería escribir menos código.
Yo esto quizás lo veo bien para librerías de componentes.
A mí me da igual.
Bueno, claro, no estaréis obligados a utilizarlo, obviamente.
O sea, si no lo queréis utilizar, si no os gusta, pues a tomar por saco.
Ahora sí será real la búsqueda de desarrolladores HTML.
Bueno, es verdad que cada vez vamos viendo que HTML, pues cada vez puede hacer más cositas.
Con la tontería, pues ahí lo tenéis, que puede hacer sus cositas.