Algunos experimentos con HMTL5

Si bien hace rato estamos cosechando los frutos de las novedades que llegan con HTML5 y CSS3; muchas de ellas, por falta de tiempo y dedicación, sólo podemos escuchar su nombre y dejarlas pasar.

Una de estas tecnologías es WebComponents. Realmente ese nombre es un paráguas para varias tecnologías relacionadas pero independientes:

  • Custom elements
  • Shadow DOM
  • Templates
  • Otras que no utilicé

Hace unos días meses decidí intentar hacer algo para, al menos, saborear su potencial.

El resultado fue este pequeño ejemplo que se puede ver en el siguiente GitHub:
https://github.com/soluciones3f/html5-webcomponents-experiments (también se puede ver online en http://codepen.io/fniwes/pen/eNqxPb pero por delays en cargar las imágenes puede no ejecutarse correctamente)

Repasemos cada una de las tecnologías y el como fue que me surgió el deseo de utilizar cada una de ellas, cuando intenté hacer una página simple, en la cual haciendo click sobre unas imágenes, estas se dieran vueltas como si fueran naipes.

Custom Elements

Yo soy un fanático del HTML Semántico y como tal, me disgusta el abuso de tags que no tienen un significado intrínseco como, como son los famosos DIV y SPAN.

Lamentablemente, cuando se quiere utilizar Javascript en algo no trivial, el uso de estos elementos, para demarcar fragmentos de un documento, o para crear elementos extras es inevitable.

En mi caso, necesitaba un elemento que representara cada una de las cartas de mi pequeño juego.

¿Que tag se puede utilizar en HTML para representar un naipe? La verdad es que no existe algo que signifique naipe, por lo que generalmente usaríamos un tag DIV y le daríamos un class para identificarlo como tal.

Pero yo no estaba conforme con eso. Quería un tag que significara Naipe. ¿Qué me impide tener un tag ?

Idealmente, además de tener un tag Naipe, sería grandioso que tuviera su propio comportamiento. En mi caso, el comportamiento sería rotar cuando le hacen click.

Bueno, para esto tenemos Custom Elements.

Hay mucho más que decir sobre este tema que lo que yo se, y lo que necesité para hacer este ejemplo. Pero básicamente, se registra el nombre del tag, se le asocia una clase (realmente un prototype) y en un método llamado createdCallback inicializo todo lo que necesito inicializar, y hago todos los bindings que necesite hacer.

Podemos ver en el ejemplo, que en ese momento lo que hago es escuchar el evento onClick sobre el elemento para llamar al método spin, y también importar en el HTML el resto del HTML necesario para generar el naipe utilizando ShadowDom y Templates.

Templates

Algo terrible cuando utilizamos Javascript y necesitamos generar HTML dinámicamente, es el tener que estar concatenando strings. No sólo el código se ve horrible, además perdemos la ayuda de los editores de texto, el colores de sintaxis y otras cosas más.

Un truco que se suele utilizar es crear un tag <script> con un type que lo identifique como cualquier cosa menos javascript, para que no sea ejecutado, y luego utilizar INNER HTML para obtener su contenido como un String, sin tener que usar concatenaciones.

Esto es algo que aprendí utilizando Handlebars pero que en mi fuero interno siempre odié, en parte porque no es semántico, y principalmente porque al hacer esto perdía el coloreo de sintaxis en mi editor de texto favorito.

En resumidas cuentas, Templates es una forma oficial de hacer lo mismo.

Shadow DOM

Desde mi punto de vista, de todas las tecnologías que utilicé en este ejemplo, ésta es la que más me voló la cabeza.

¡Shadow DOM nos permite tener un DOM dentro de otro DOM sin que interfieran!

El concepto es bastante simple, lo que se hace es crear, sobre un determinado punto del HTML un Shadow DOM, el cual se comporta como un nuevo documento, totalmente independiente.

Por ejemplo, si dentro del Shadow DOM creo un elemento con id=”foo”, cuando ejecuto document.getElementById(“foo”), el resultado será NADA, debido a que ese elemento no pertenece al DOM del documento principal, sino que corresponde al Shadow DOM.

En el ejemplo que hice, utilizo utilizo el atributo ID para ubicar determinadas partes del HTML de cada naipe. Sabemos que en un DOM no puede haber ID repetidos, pero entonces ¿cómo puedo tener varios naipes sin repetir ID? Respuesta: Como cada naipe está en un DOM independiente, dentro de cada uno el ID es único

Y esto no es todo, el sandbox del Shadow DOM no se limita únicamente al HTML, sinó también al CSS.

Si observamos el ejemplo, cada naipe (tile) es agregado con un pequeño bloque de estilos, cuyo objetivo es que todos los DIV tengan color rojo.

Pero, los DIVS que están en el documento principal, no aparecerán de color rojo, ya que el CSS pertenece a otro DOM solo afecta a ese.

Otras cosas muy interesante de Shadow DOM es que permite componer HTML. Esto es dentro de algún punto del HTML del Shadow DOM, el HTML del documento que está siendo tapado.

Recordemos que yo indico en que TAG del documento comienza se insertará el nuevo DOM, pero nada le impedía a ese tag tener su propio contenido, el cual será ocultado (a menos que el Shadow DOM indique donde debería mostrarse)

Esto ya es un tema más avanzado y merece su propio post al respecto.

Algunas notas finales

Para las animaciones utilicé la fabulosa librería GSAP. Hablar sobre ella le corresponde más a mis compañeros que la han usado mucho más que yo.

Un tema que me hubiera encantado hablar, pero no ya era mucho es sobre HTML Imports el cual nos permite disgregar un HTML en varios fragmentos.

Lamentablemente, al momento de escribir este ejemplo (no se si al momento de escribir el artículo, porque han pasado varios meses) Chrome Canary (otra forma de decir beta) era el único que lo soportaba y por default estaba desactivado tras un flag de la configuración.


Discussion Area - Leave a Comment