Aplicaciones fáciles con hyperHTML — 1
hyper que? Una introducción a una librería JS rapidísima y ligera.
Parte 1 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)
Mientras todos están interesados sobre los frameworks que usan Virtual DOM como React y Vue, yo siempre sentí que algo hacía falta en ellos. No me parecía correcto tener que mantener una “copía” del DOM en la memoría. Intente algunos frameworks cuando encontré Mithril — tiene ventajas como el uso de Vanilla JavaScript y no te obliga a hacer las cosas de cierta forma — pero realmente no estaba satisfecho con ninguno de ellos.
Después encontré el trabajo hecho por Andrea Giammarchi. Andrea ah trabajado en herramientas como Vitamer, pero al poco tiempo el publico un nuevo y muy ligero framework llamado hyperHTML. Al leer su blog The DOM Is NOT Slow, Your Abstraction Is (en ingles), estaba intrigado y muy interesado. Entendí lo fácil que era trabajar con el, me encanto que todo era Vanilla JavaScript como en Mithril — solo son 2 funciones en el API para aprender!! ademas de la simplicidad de las plantillas que están descritas usando template literals, y tienes una librería que es super rápida para pintar tus cambios en la interfaz gráfica.
Y sin usar Virtual DOM.
Vamos a adentrarnos en las cosas básicas de hyperHTML, y despues trabajaremos en una table simple para aplicar lo que aprendimos. Para empezar todo lo que necesitas saber es HTML básico, y tener un buen entendimiento de JavaScript.
Básicos — Plantilla (template)
Las plantillas en hyperHTML son basadas en template literals (en ingles). Son muy faciles de usar, a grandes rasgos solo es una cadena de caracteres entre comillas invertidas:
`some string `
Pero también puedes usar JavaScript en ellas y sera evaluado:
`myvar value is ${myvar}`
Si myvar = 8; vas a obtener “my var value is 8”. Esto es todo lo que necesitas saber, para empezar con las plantillas en hyperHTML.
Básicos — Bind
Bind() es una de las 2 functions que vas a aprender. Esta va a reproducir la plantilla descrita a el elemento DOM proveído. Bind() es diferente de wire() (vamos a hablar de este en un momento) en que to usas bind() para agregar contenido a un elemento existente en el DOM. Bind() regresar una función que puedes rehusar para actualizar el contenido, por ejemplo:
const render = bind(document.getElementById('app'));
Va a “unir” (bind) el elemento con el identificador “app” a esta función así que cada vez que utilizamos “render” con una plantilla este elemento sera actualizado. Puedes leer mas acerca de bind() en la documentación oficial (en ingles)
Uno de las características interesantes de hyperHTML es que la reproducción de las plantillas (rendering) es muy rápido, y claro solo va a actualizar las partes que necesita actualizar y no todos los elementos, vamos a ver un ejemplo de un simple reloj.
Si inspeccionas el elemento, veras que solo el elemento “h2 ”con el tiempo se esta actualizando cada segundo.
Básicos — wire
La otra función que aprenderás es wire(). Esta regresa HTML basándose en la plantilla proveída. Vamos a usar wire() cuando necesites crear nuevos elementos DOM. Puedes generar un elemento o una colección de elementos. En la función tu puedes pasar como primer argumento un object (o colección), y como segundo parámetro el tipo de wire. El tipo de wire por defecto es HTML, pero también puede ser SVG o solo un identificador (para que el elemento no sea actualizado). Puedes ver mas a detalle en la documentación oficial (en ingles)
En este simple ejemplo, wire() esta regresando un elemento “h1” para el titulo:
Para el siguiente ejemplo, la primera colección esta siendo actualizada cada vez (inspecciona el elemento para confirmar), pero para la segunda colección estamos pasando un objecto a la función wire — wire(obj) — el objecto no se esta actualizando cada segundo. Esto es algo poderoso.
Una pequeña cosa para tener en cuenta… si vienes de otras librerías como Vue, tal vez esperes tener atributos parciales en tus elementos, por ejempo:
<div class="myclass ${classvar}"></div>
HyperHTML no permite esto, porque realmente no es necesario. Sin embargo, puedes hacer lo siguiente:
<div class="${`mylcass ${classvar}`}"></div>
Comillas invertidas anidadas resuelven el problema de manera simple!, como siempre para entender mas a fondo porque los atributos parciales no son soportados, revisa la documentación oficial.
Tabla simple — 1
Vamos a usar lo que hemos aprendido hasta ahora para escribir una simple tabla basada en una colección. El primer paso es crear nuestro HTML básico. Después vamos a crear nuestra función bind() y finalmente nuestra plantilla. Vamos a usar la función map para iterar sobre nuestra colección para generar los renglones y columnas para la tabla… y eso es todo! Fácil no! En la parte 2 del tutorial, vamos a agregar ordenamiento a nuestra tabla
