Aplicaciones fáciles con hyperHTML — 2

Eventos y components

English Version

中文版

Parte 2 escrita por Ivan Torres y Paul Thompson.

Traducción por Lupita Hernandez e Ivan Torres

Easy apps with hyperHTML

1. Introducción, wire/bind
2. Eventos y componentes
3. Más acerca de componentes y manejo de estado simple
4. Tipos de wires y definiciones personalizadas (intents)
5. Custom elements con hyper
6. Personalizando mis custom elements
7. Corriendo pruebas!
8. Carga asíncrona, placeholder y un Typeahead con hyper
9. Manejando rutas
10. Usando librerías externas (3rd party)

Si seguiste la parte 1, ya sabes por ahora lo basico para empezar a trabajar con hyperHTML. Podemos ahora revisar temas mas complejos. Recuerdas la tabla que hicimos en la parte 1:

Vamos a empezar habilitando el ordenamiento de las columnas al presionar las cabeceras de la tabla.

Eventos

Primero, vamos a mover la parte de nuestro ejemplo anterior que contiene la plantilla para que podamos reutilizarla. Empezamos con esto:

Vamos a cambiar ese código a esto:

La siguiente cosa que tenemos que hacer es actualizar las cabeceras de nuestras columnas para que contengan un elemento <a> para que los usuarios sepan que pueden hacer click en ellas. También vamos a capturar los eventos onclick. Para facilitarnos la vida, vamos a agregar el attribute data-target para saber que esta el usuario intentado ordenar. Con estas partes en su lugar, nuestra plantilla se vera de la siguiente forma:

Que significa el código en onclick? hyperHTML nos deja pasa una función al evento y la llamara por nosotros. Vamos a crear una para ordenar los datos:

El target del evento (e) y ‘this’ apuntan al elemento, Muy bien!. Ahora que tenemos nuestro elemento enlace, el cual contiene el atributo data-target, que usaremos para ordenar los datos en la tabla. Vamos a actualizar nuestra función para ordenar:

Mientras todo esta bien y funciona, si el usuario le da click una segunda vez a la misma cabecera, no va a cambiar el sentido del ordenamiento. Esta es la funcionalidad que esperamos tener, vamos a actualizar el código para arreglar eso… revisemos lo que llevamos hasta ahora:

Si inspeccionas el código de la tabla (con el navegador), veras que solo los renglones del cuerpo de la tabla se actualizan con cada click. HyperHTML es lo suficientemente inteligente para solo actualizar las partes que cambiaron, esto demuestra que rápido es y lo “barato” que es utilizar la funcion de render.

Componentes

Ahora que tenemos nuestra tabla, tal vez sea mas fácil si ponemos todo el código relacionado en un solo lugar. Ademas de limpiarlo, vamos a poder reutilizar esta tabla en otros projectos. Podemos lograr esto con un simple objeto:

Tenemos un objeto básico de JavaScript con los siguientes atributos: html como nuestra variable que contiene la función para procesar la plantilla, data que es nuestro arreglo con los datos para la table y state que mantiene el estado actual de la tabla. Movimos render() afuera de la función display(), date cuenta que ya no tenemos sort(). En su lugar pasamos ‘this’ al evento onclick.

onclick=${this}

y lo manejas con…

HandleEvent

Esta función especial es parte del estándar EcmaScript. Si un objeto contiene esta, sera llamada de la siguiente forma obj.handleEvent(e). Esto significa que podemos vincular una función para manejar el evento:

el.addEventListener('click', Table)

y el evento click sera pasado a handleEvent. this sera el objeto actual (no el elemento!). Esto resuelve algunos de los típicos problemas que nos encontramos cuando estamos manejando eventos. Para mas información sobre la asombrosa handleEvent hazlo en el siguiente enlace https://medium.com/@WebReflection/dom-handleevent-a-cross-platform-standard-since-year-2000-5bf17287fd38

En nuestro caso, estamos pasando el objeto actual a handleEvent. Ahora, solo moveremos toda la funcionalidad de ordenamiento adentro de esta función. Claro que podemos hacer mas cosas con esto, pero por ahora así nos da la funcionalidad que necesitamos para ordenar los datos de la tabla.

También puedes usar una función para construir tu objeto, justo como esperas que funcione.

Prácticamente lo mismo que antes, el único cambio es que agregamos un Id (identificador) a la tabla. Si no quieres usar clases, puedes usar este acercamiento y hyperHTML no se interpondrá en tu camino.

Clases

“Todo eso esta bien pero y las clases de ES6?” tal vez te estas preguntando. Bueno, también puedes usarlas.

Y ahora ya tienes una clase, la única cosa que cambias (ademas de convertirlo a una clase) fue la forma de pasar las propiedades, en lugar de pasar una cadena de caracteres, pasamos el identificador (id) adentro de un objeto. Nada fuera de lo común, esto solo nos ayuda para mejorar el código después.

Y si, hyperHTML también tiene una forma muy sencilla de crear componentes. Se llama hyper.Component. Esta función te da algunas cosas extras que veras son muy útiles:

• Manejo de estado
• por defecto el atributo html enlazado asi mismo.
• handleEvent, pero mas fácil!
• funciones para los eventos onconnected y ondisconnected
• y mas

Para mas información acerca de hyper.Component puedes leer la documentación oficial(en ingles) https://viperhtml.js.org/hyperhtml/documentation/#components-3

Suficiente de vender la idea, vamos a ver un ejemplo usando todas las cosas!!

Primero, agregamos Component donde importamos hyperHTML (Component es hyper.Component), después hacemos que la clase Table lo extienda. Como la clase Component también provee la propiedad “html”, removimos “this.html” de nuestra clase.

Manejando eventos con Component

Donde esta nuestra función handleEvent?, bueno pues Component ya lo implementa así que tampoco lo necesitamos!. La forma en que Component define handleEvent es:

this[‘on’ + event.type](e)

Esto significa que si quieres agregar una función que reaccione al evento onclick, handleEvent va a recibir el evento con tipo “click” y va a invocar this.onclick(e), asi que ahora podemos tener funciones por tipo de evento, por ejemploonclick(e) {…}.

También puedes definir funciones para manejar eventos Custom!, por ejemplo, digamos que algo esta emitiendo el evento “enroll”, puedes agregar un evento de la siguiente forma:

onenroll=${this}

y después manejar agregando una función a la clase así:

onenroll(e){ /* codigo para manejar inscripcion (enroll) */}

De regreso a nuestra Tabla, ahora tenemos nuestroonclick para manejar el evento “click” en las cabeceras de las columnas y hacer el ordenamiento.

Estado

Date cuenta que agregamos get defaultState(){...}. Esta es una función que regresa el estado inicial, así que si no has actualizado o cambiado el estado, vamos a recibir lo que se encuentre en este objeto adentro de esta. Lee mas acerca de defaultState en la documentación

También en onclick (que usamos para ordenar) agregamos setState, esta llamada va a actualizar el objeto donde guardamos el estado con el objeto que estemos pasando y ademas va a invocar automáticamente la función render() para actualizar la plantilla. Otros frameworks van a actualizar el estado de manera asíncrona por “razones”, pero como las actualizaciones son muy rápidas con hyperHTML, setState invocara render() inmediatamente. De todas formas si necesitas actualizar varias cosas del estado te recomiendo construir un objeto y después invocar setState con el nuevo objeto setState(newobj).

Vimos mucho código en esta parte. Apenas estamos empezando a profundizar en hyperHTML. En la siguiente parte, veremos como utilizar varios componentes en una sola aplicación, como actualizar condicionalmente partes de la plantilla y aun mas detalles sobre los componentes.