Dragon Microframework — Parte IV
Componentes en línea
Hasta ahora hemos visto los fundamentos y el origen que ha motivado a Dragon.js ser un microframework objetivo y potente, que tiene una filosofía minimalista, que busca posicionarse como uno de los microframeworks más utilizados para la contrucción de aplicaciones reactivas y basadas en componentes.
Una de las principales ventajas es la ausencia de compiladores y su fácil integración desde el CDN https://cdn.jsdelivr.net/gh/badillosoft/dragon-js@master/dragon.min.js
Las función dragon.inlineTemplate(html, renderHandler) combina la potencia de las plantillas con la lógica declarativa de @render para el acceso a la configuración. El argumento principal html define la interfaz HTML del componente en un texto. La función de callback renderTemplate(config, parent, parentHandler) pasado como segundo argumento recibe la configuración config envíada al componente en su contrucción además del parent y su parentHandler asociado. Esto nos permite definir un componente rápidamente sin tener que complicar su sintaxis o recordar aislar el código correctamente.
En el siguiente codepen se muestra un ejemplo de la creación de un botón funcional mediante inlineTemplate.
Observa que en la configuración del codepen se ha establecido la librería CDN a dragon.min.js. La función dragon.run(callback) recibe una función callback y la ejecuta, con la ventaja que esta puede ser asíncrona (sólo sirve para aislar código asíncrono sin la fea sintaxis de la función auto-ejecutable). Finalmente debes notar el uso de dragon.handle(htmlElement) que recibe un elemento DOM y lo encapsula en un objeto con los métodos subscribe(channel, callback) y fire(channel, data) que controlan eventos DOM nativos y los definidos por el usuario mediante CustomEvent.
Veámos un ejemplo más del uso de los componentes en línea. Observa cuidadósamente el código e interprétalo.
Ahora que ya has visto la potencia de los componentes en línea, es momento de crear tus propios componentes y mostrárselos al mundo, no sin antes olvidar apoyar con un café :D
