Introducción a Dragon.js

Alan Badillo Salas
Apr 30 · 2 min read

Me alegra anunciar la primer versión estable del microframework que he nombrado dragon.js ya que se basa practicamente en una librería de javascript nombrada así, que tiene un gran potencial para facilitar el desarrollo de aplicaciones web. El microframework es bastante sencillo de utilizar y tiene una gran integración ya que es puramente nativo basado en DOM.

Con sus escasos 13kb de tamaño y menos de 400 líneas de código con todo y comentarios de documentación, dragon.js se basa en una filosofía de diseño basada en plantillas, en realidad se podría decir que es una librería para consumir plantillas HTML de forma natural.

La única restricción para utilizar el microframework es que este opere sobre un servidor de recursos para brindarlos componentes, sin embargo, se puede utilizar consumiendo los componentes ya construidos desde cualquier servidor con los CORS activados (esto se debe a las llamadas fetch que realiza) o insertar los componentes directamente en el código.

Conceptos fundamentales

La estructura principal del microframework se basa en plantillas HTML, las cuales entenderemos a partir de ahora como componentes.

Un componente es un fragmento HTML que contiene una etiqueta <template> con la interfaz y lógica necesaria para replicar un componente.

Una buena práctica será definir el componente en un archivo HTML independiente como explico en mi entrega acerca de los Microframeworks.

En el siguiente ejemplo se muestra un componente, el cuál se compone de un botón. Observa la interfaz del componente está definida en la plantilla y los estilos son externos a la plantilla, esto último debido a que no necesitamos replicar los estilos por cada vez que montemos el componente.

El siguiente concepto es la lógica del componente la cuál será definida dentro de la plantilla mediante una etiqueta<script>. Es importante recordar que para que el código dentro del script quede completamente aislado del resto de la aplicación, deberemos encapsular el código en un bloque dentro de { ... }, dentro de una función auto-ejecutable (() => { ... })() o una función asíncrona auto-ejecutable (async () => { ... })(). Esos tres modos nos van a permitir ejecutar la lógica de nuestro componente de forma aislada respecto al resto del código en nuestra aplicación. Si llegamos a olvidar aislar nuestro código, las variables definidas serán globales y podrían ser accedidas desde cualquier otro lado (como en otros componentes) entrando en conflicto de definición de las mismas variables, etc.

El siguiente ejemplo muestra un componente de botón como en el ejemplo anterior, al que se le modifica su propia lógica. Observa que como se ha venido comentando, podemos recuperar el botón desde su padre, el cuál es el contenedor de la interfaz montada, es decir, el mismo componente.

Esos son los conceptos fundamentales para entender la contrucción de componentes en Dragon.js, en las siguientes entregas profundizaremos en el uso de la librearía dragon.js y su filosofía.


Programacion Holistica

Temas de programación de alto nivel

Alan Badillo Salas

Written by

L. Matemáticas Aplicadas UAM-Cuajimalpa. M. en Inteligencia Artificial IPN-CIDETEC. Desarrollador Full Stack MEAN/MERN. Data Scientist.

Programacion Holistica

Temas de programación de alto nivel

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade