Anteriormente, comentaba en una entrada anterior, como manejar templates en Html 5 puro combinado con JavaScript de una manera muy accesible, sin embargo, así como comente en la entrada anterior, esto se vuelve algo tedioso cuando tenemos que realizar ciertas validaciones como por ejemplo:
  • Mostrar un markup un poco distinto dependiendo de alguna validación
  • Agregar una serie de clases dependiendo de ciertas condiciones
  • Ciclar cierto contenido
Entre algunas otras situaciones, que bien, se pudiesen realizar de una manera mas fácil con los templates de Html 5 pero aún asi, seria algo tedioso, es por eso, que comente con anterioridad, que para este tipo de situaciones existen Motores de Templates, tales como Swig, veran, swig es el motor de templates utilizado por Django y Node.js para renderizar sus plantillas con información, básicamente, funciona, creando archivos denominados en estos como vistas, con una pequeña estructura en Html que dentro contiene ciertos tags que representan instrucciones para el motor, por ejemplo: La vista anterior, representa un caso muy común de uso para swig, vamos a suponer que tenemos un objeto JSON llamado bulto, que contiene ciertos valores como, nombre, descripcion, existencia y precio, y tenemos un markup en HTML que ya tiene estilos y todo el rollo, pero que dependiendo si el bulto tiene existencias se proporcionará la opción de comprar, sino, se muestra un mensaje donde el producto esta agotado, es algo sencillo, y como veran, en la vista anterior, tenemos ciertas etiquetas que representan impresiones de valores dentro del JSON como {{ bulto.nombre }} y ciertas etiquetas que son de interpretación lógica para el motor, como {% if bulto.existencia > 0 %}. Ahora bien, ¿que sucede despues de tener esto? .. es sencillo, simplemente con un objeto particular de Swig le pasamos el JSON a un render generado por la libreria, para que nos genere el Html correspondiente y lo podamos incrustar donde queramos, para esto, e preparado un pequeño y sencillo ejemplo del uso de la libreria, creando un pokedex con apoyo de un api que encontré por ahí, bootstrap y swig.

Visitar Ejemplo

Repositorio del Ejemplo

Ahora bien, no me detendré a explicar como funciona el CSS ni como funciona el Markup del Html por que no tiene caso, lo único que les pediré es que observen en el Markup del index.html dos secciones que son las más importantes: El select donde coloco los rangos de selección de los pokemon: El contenedor de las vistas de los pokemon: Y por ultimo, el template: Como pueden ver, el template se coloca dentro de dos etiquetas de script especificando un type=text/template, para que javascript no lo reconozca como código Javascript y lo intente ejecutar, así mismo, le hemos colocado un id, simplemente para poderlo utilizar en el código posteriormente. Ahora bien, ¿que es lo siguiente?, super sencillo!, necesitamos obtener el texto dentro de nuestro template, y luego, crear un objeto render con la función compila de la libreria Swig, el cual, permitirá recibir un json y general una cadena de texto con los datos ya sustituidos, esto, lo pueden ver en el código inicial de mi Javascript en la parte inferior del html, son simplemente dos lineas. Sinceramente, esas dos lineas son las que hacen la magia, el único trabajo que nos queda, es armar un json que contenga los datos que va a recibir nuestro template, que en este caso, es un json llamado pokemons, que va a contener elementos, y cada elemento tendrá su pkdx_id, name, sprites, types, tecnicamente, un json similar a la siguiente manera: Ahora bien, para esto, me he apoyado en un API que encontré en internet llamada http://pokeapi.co/ muy buena y con una base de datos de 778 pokemons con sus imagenes y todo el contenido necesario para armar una aplicación muy completa. Ahora bien, hay ciertos algoritmos, que aunque no cuentan con las mejores practicas, sirvieron para terminar la aplicación en un tiempo muy rápido, por ejemplo: Como pueden ver, la funcion anterior solo hace una cosa, llenar los selects, es un pequeño algoritmo basado en que solo existen 718 pokemons y hace una division de una determinada cantidad de numeros a seleccionar a otra, por ejemplo, del 1 al 5, y llena a la manera “antigua” los options del select, esto lo hice con la intención de que se vea que sucio se ve el código cuando haciamos este tipo de practicas. Posteriormente, tenemos el algoritmo que crea cada uno de los pokemons, este algoritmo sinceramente, tiene pesimas practicas, pero funciona, sinceramente me propuse cambiarlo pero por falta de tiempo no lo he podido hacer, pero bueno, es un algoritmo medio extraño. Tecnicamente lo que hace es que toma el id que le mandemos, crea las urls necesarias para hacer las peticiones, y luego hace la peticion a la url del pokemon, el detalle esta en que la url me devuelve los sprites como una url, a la cual luego le tengo que hacer una peticion cuando termine de obtener los datos principales, para tener acceso a los sprites, entonces, en lugar de utilizar OOJS, se me ocurrio la estupenda idea de darle un delay a la hora de mostrarlos para darles tiempo a las peticiones ajax, no fue mi mejor idea en su momento, pero bueno, funciona… xD En fin, por ultimo, tenemos la funcion principal: Esta funcion, es la que se va a ejecutar cada vez que se de click en el botón consultar, bloqueará el mismo botón (Un tip de usabilidad), obtendrá los rangos seleccionados, y para cada rango creará una lista de pokemons con la función anterior, y aca es donde les comento que hice el delay, que horror, pero bueno, da un delay de 3000 milisegundos y luego hace la magia antes de activar nuevamente el botón: Como pueden ver, es algo bastante simple, lo único que hay que hacer, es utilizar el render que inicializamos con el swig.compile, para que le mandemos el json que hayamos formado y que nos devuelva un html ya armado, ahora lo unico, es enviarlo al contenedor donde se va a mostrar. Y listo!, un consultor de Pokemons rápido y sencillo utilizando Swig.

Quizá también te interese

Utilizando ES6 en tus aplicaciones Node
Creando dialogos personalizados en Java con JDIalog
Creando dialogos personalizados en Java con JDIalog
Estamos de vuelta, y más fuertes que nunca.
ECMAScript 6, lo nuevo.

Ivan Alvarado Diaz

Ingeniero en sistemas computacionales, apasionado por la tecnologia, programador, siempre con ganas de aprender mas y comprometido con mi trabajo.