Aplicaciones fáciles con hyperHTML — 4
Tipos de wires y definiciones personalizadas (intents)
Parte 4 escrita por Ivan Torres y Paul Thompson.
Traducción por Lupita Hernandez e Ivan Torres.
- Introducción, wire/bind
- Eventos y componentes
- Más acerca de componentes y manejo de estado simple
- Tipos de wires y definiciones personalizadas (intents)
- Custom elements con hyper
- Personalizando mis custom elements
- Corriendo pruebas!
- Carga asíncrona, placeholder y un Typeahead con hyper
- Manejando rutas
- Usando librerías externas (3rd party)
Anteriormente en este tutorial, vimos como usar componentes con hyperHTML. Construimos una tabla que puede hacer ordenamiento, pero ahora es tiempo de ver algunas de las características adicionales que hyperHTML nos da. Podemos personalizar wire(). Con una función wire() personalizada, podemos transformar nuestras plantillas, o cargar partes de ellas de manera asíncrona. Antes de adentrarnos a esto, vamos a explorar un poco mas la funcionalidad estándar de la función wire() un poco mas.
Tipos integrados
hyperHTML wire() contiene 2 tipos integrados. El tipo por defecto es “html”, pero tambien soporta svg. Como hemos visto, usar el tipo de “html” no require de trabajo adicional de nuestra parte. Pero, si quieres usar un nodo svg tienes que definirlo explicitamente:
hyperHTML.wire(data, 'svg')`<rect width=${data.width} height=${data.height} />`
El segundo parámetro que pasamos a la función de wire() es el tipo, en este caso svg. Veamos el ejemplo funcionando:
Recuerdas la parte 1. En nuestro ejemplo del reloj, usamos wire() de 2 formas. Primero, lo usamos sin ninguna referencia:
hyperHTML.wire()`…`
Pero después también la usamos pasando un objeto a la función:
hyperHTML.wire(user)`…`
En aquel primer ejemplo mencionamos que el objeto pasado a wire() no sera actualizado cada vez que sea pintado. Esto es porque al pasarlo a wire() estamos creando una relación entre el y los contenidos del objeto pasado. Esta relación hace mas que optimizar el re-pintado de los elementos, también podemos rehusar este objeto en diferentes lugares con diferentes plantillas. Podemos entonces pasar el mismo objeto pero con diferentes ids:
hyperHTML.wire(user, ':address')`…`
hyperHTML.wire(user, ':profile')`…`
hyperHTML.wire(user, ':login')`…`
También podemos especificar un tipo junto al id:
hyperHTML.wire(user, 'svg:avatar')
Tipos de contenido
Tocamos un poco acerca de los diferentes tipos de contenido en la parte 1. Vamos a revisarlos a fondo.
Piensa acerca de las template literals. Dentro de ellas usamos ${…} para evaluar la expresión. Cualquier expression que pases a ${…} sera añadida a tu plantilla dependiendo del tipo. Por ejemplo, hyperHTML es seguro porque la cadena de caracteres pasada sera inyectada comotextContent.
<p>Hola ${'<script src="http://badguy.com"></script>'}</p> // whew, safe!
Pero también puedes forzarlo a ser texto. Para hacer eso, puedes pasar un objeto a hyperHTML:
<p>Hola ${{text: 'Mundo'}}</p>
Y si, puedes pasar un nodo y sera agregado:
<p>Hola ${node}</p>
o puedes forzarlo pasando un objeto como arriba, pero con html:
<p>Hola ${{html: '<strong>Mundo</strong>'}}</p>
Hasta puedes pasar un promise!. Si pasas una promesa (promise), entonces cuando esta sea resuelta sera incluida en la plantilla en cualquiera de los tipos definidos. Para esto tenemos el tipo, any. Este usualmente recibe una promesa, pero puede tomar cualquier otro tipo también, y hyperHTML intentara igualarlo con algun tipo conocido.
Veamoslos en acción:
Pero espera, eso no es todo!. También puedes pasar un arreglo!. Lo único que debes de tener en cuenta al hacerlo es que todos los elementos del arreglo *tienen* que ser del mismo tipo: cadena de caracteres o números o nodos, o hasta una lista de promesas. Vas a obtener resultados inesperados si tu arreglo incluye tipos diferentes.
Típicamente usamos promesas cuando no tenemos los datos en el momento, pero prometemos tener algo en el futuro. hyperHTML provee placeholder que se muestra mientras los datos se están cargando. Veamos un ejemplo.
Atributos
Los atributos en los elementos pueden ser atributos regulares, booleanos, o eventos. Si vienes de otro framework, tal vez quieras pensar en usar atributos parciales, pero no los necesitas (en ingles). Existen otros 2 tipos de atributos de los que necesitamos hablar — style y data. Estos atributos nos ayudaran a construir fácilmente interfaces.
El atributo de style puede recibir una cadena de caracteres como cualquier otro atributo, o también puedes pasar un objeto:
wire(ref)`<p style=${{fontSize: 32}}>${'BIG CONTENT'}</p>`;
El atributo data te deja pasar un objeto JavaScript al elemento:
wire(ref)`<p data=${user} />`;
El ejemplo como siempre:
Tipos personalizados
Podemos usar la funcionalidad de pasar objetos y crear nuestros tipos para mostrar lo que queramos. Dependiendo del nombre sera interpretado como un atributo (si tiene “-” en el nombre) o como un intent personalizado.
Intent personalizado
Para definir un nuevo tipo, vamos a usar hyperHTML.define() . Conveniente no?. La función define() toma 2 parámetros, el nombre y una función de callback.
define(intentName, callback)
El callback recibe cualquier valor usado en la expresión como parámetro, y regresa datos que serán usados en la plantilla. Esta puede regresar cualquiera de los tipos conocidos.
Por ejemplo, vamos a definir un intent para mostrar fechas. Cuando recibimos una fecha, vamos a regresar una fecha pero formateada de una forma correcta. Para este ejemplo también usaremos un intent asíncrono.
HyperHTML primero intentara igualar a cualquiera de los intents conocidos como html, text o any. Si no puede encontrar uno, seguira ahora buscando en los intentos personalizados registrados, es decir, los que definimos con hyperHTML.define(). Si hyperHTML lo encuentra ahí, entonces usara ese.
Atributos personalizados
Como mencionamos anteriormente, si defines un intent con “-” en el nombre, sera usado como atributo. Esto significa que podemos agregar cualquier atributo nuevo a cualquier elemento.
Whoah. En serio?
Sip, es cierto.
En el ejemplo siguiente, la función callback va a recibir el element y cualquier otro valor pasado al atributo. Si estas regresando algo, sera usado como valor para este atributo. Nota que para que el atributo personalizado funcione, tienes que usar ${…} para el valor de este.
Con lo que sabemos hasta ahora, vamos a actualizar la tabla de la parte 3.
Vamos a añadir un icono svg, asi sabremos cual columna esta siendo ordenada y si es ascendente o descendente. También vamos a actualizar nuestros datos para mostrar mejor información sobre el usuario, así como agregar una fecha para poder usar nuestro intent y mostrar las fechas con el formato definido.
Estamos usando el paquete de icons Octicons. Ahora veamos el resto del código, revisa con detenimiento los archivos Header y Table.
Grandioso!. Ahora ya sabes que tan poderoso puede ser hyperHTML. Esto es prácticamente todo lo que necesitas saber sobre la librería, pero vamos a empezar a revisar otras utilidades proveídas por Andrea Giammarchi para agregarlas a nuestro cinturón de herramientas. Con todo esto combinado, vamos a poder crear aplicaciones impresionantes y de alto rendimiento.
