Aplicaciones Web MVVM con Kendo UI y NodeJS (y Jade)

En esta entrada hablaré un poco de lo que puede ofrecer Kendo UI en su versión Open Source para crear aplicaciones Web con el patrón MVVM, utilizando Node.js como lenguaje y Express como framework web. En entradas anteriores hablé sobre NodeJS y MongoDB pero bajo Windows y pre compilado con TypeScript. Ahora será diferente, lo haremos bajo ambiente Unix utilizando Atom como nuestro editor de texto y NodeJS puro sin pre compilar por TypeScript.

UPDATE:

Esto ya se convirtió en una serie de posts, te invito a que la sigas toda:

  1. Parte 1 (esta)
  2. Parte 2

Aquí ya voy a suponer que tienes NodeJS instalado en tu computadora, ya sea linux, mac o windows, el código y el proceso que se mostrará funcionará en cualquier plataforma.

Crear Proyecto Express

Como les comenté, utilizaremos Express JS para hacer este ejemplo, pero en realidad será puro Front-end y no importará el lenguaje.

Primero, utilizaremos el generador que contiene express, si no lo tienes, ve a la página de expressjs y aprende a instalarlo.

Screen Shot 2015-03-25 at 9.47.20 PM

NOTA: El mkdir no nos sirvió para nada 😀

Primero creamos una carpeta llamada expressKendoUI y luego ejecutamos el comando express para generar un proyecto nuevo:

Screen Shot 2015-03-25 at 9.47.32 PMSi abrimos la carpeta creada con Atom o Sublime, tendremos la siguiente estructura:

Screen Shot 2015-03-25 at 9.51.33 PMPara probar lo que este generador nos creó corremos primero el comando npm install (tal vez necesites sudo) para instalar todos los paquetes que ya vienen incluidos, y luego despues el comando:

DEBUG=myapp ./bin/www

Despues de este comando, no veremos nada (no sé porqué >=( ) solo tenemos que ir a http://localhost:3000 para ver nuestra aplicación corriendo.

Screen Shot 2015-03-25 at 9.59.10 PM

Descargando Kendo UI Core

Kendo UI Core es la versión Open Source de Kendo UI. Cuenta con casi todas las caracteristicas de Kendo a excepción de varios Widgets que en lo personal son los mejores (El Grid y otros). Yo ya he hecho muchos proyectos basados en ASP.NET MVC UI (versión de kendo con Wrapper en .NET) y la verdad los recomiendo al máximo. Más si usas .NET, Java o PHP, ya que tienen su wrapper del lado del servidor.

Para descargarlo, vamos a su repositorio de Github y lo pueden clonar o utilizar los static cdns:

<link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css" rel="stylesheet" />
<script src="http://cdn.kendostatic.com/2014.2.716/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.ui.core.min.js"></script>

Incluir Kendo UI Core en nuestra plantilla con Jade

Si ya han usado node, sabrán que se puede usar Jade como lenguaje de Templates (como Razor en MVC), es fácil de entender si saben obviamente HTML. Pero no se preocupen.

Los scripts y estilos que agregué arriba, serán los que utilizaremos para fines prácticos, lo haremos de la siguiente manera editando el archivo layout.jade:

Screen Shot 2015-03-25 at 10.30.29 PM

Lo que hicimos fue agregar los dos estilos y los dos scripts, si corremos el resultado será el siguiente HTML:

Screen Shot 2015-03-25 at 10.32.39 PM

Nada fuera de este mundo.

Primer vista MVVM

Ahora vamos a crear dentro de index.jade nuestra primer escena MVVM, el cual será muy sencilla pero nos servirá para comenzar. Primero crearemos un archivo llamado app.js dentro de public->javascripts que va a ser donde escribamos toda nuestra lógica frontendera :B

y dentro de layout.jade lo incluimos al final de los scripts que ya hemos agregado

script(src='/javascripts/app.js')

Y dentro de app.js simplemente agregamos el clásico evento “on load” de jQuery

$(function(){
//TODO: Code here
console.log("Hola mundo!");
})

Verificamos que en la consola se imprima “Hola mundo!” y si sí, ya sabemos que el script se carga sin problemas. Ahora nuestra vista en index.jade la dejaremos de esta forma:

Screen Shot 2015-03-25 at 10.50.00 PM

¡No te asustes! veremos que está pasando aquí.

La vista index.jade ya existía porque el generador express la creó. Lo nuevo aquí está a partir de .myView. En Jade, como es en base a indentaciones (así se dice?) estamos creando una etiqueta div con clase myView como si fuera un selector de CSS, y todo lo que esté indentado debajo de .myView será su hijo. Principios de Jade.

Despues creamos un elemento input, y claro está que lo de los parentesis son sus atributos, pero lo interesante de MVVM entra en los atributos data-bind. Aquí estamos especificando como van a actuar nuestros elementos según lo que se haga en el ViewModel y en que se van a involucrar. En este caso, el elemento input se involucra en su value que obviamente es su valor (lo que se escribe en él) y lo estamos vinculando con una propiedad que se llama name. El span de abajo pasa lo mismo, pero aquí no estamos vinculando su value, porque en si el span no es nada, entonces le estamos diciendo que su texto (propiedad text) será del mismo valor que el que tome name.

Dentro de app.js escribiremos lo siguiente:

Screen Shot 2015-03-25 at 10.55.31 PM

Creamos el viewModel con kendo.observable y le damos la propiedad name que nuestra vista está esperando, ya le damos un valor por default que es Isaac Ojeda. Luego hacemos el binding con el método bind,esto significa que estamos enlazando o vinculando nuestra vista (lo que está en div con clase myView) con el viewModel que acabamos de hacer.

Si corremos, veremos el siguiente resultado:

Screen Shot 2015-03-25 at 10.57.30 PM

Puse el HTML para que vieran el resultado de la compilación con Jade.

Lo que escribamos en el Text Box, al perder el focus, el span será actualizado en automatico con el valor que tenga el Text Box, de esto se trata MVVM, crear enlaces entre la vista y el view model, pero el view model estará escuchando los cambios en la vista, para actualizar todos los bindings. Esto es lo genial de MVVM.

Ahora lo que haremos, es un par de text boxes que representarán un producto a comprar, cantidad y precio para irlas agregando a un listado y poder calcular totales como si fuera un carrito de compras.

En index.jade haremos las siguientes modificaciones, será un cambio fuerte pero pon atención:

Screen Shot 2015-03-25 at 11.33.48 PM

Veamos que pasó aquí. Primero que nada, estamos agregando dos partes importantes: un ul y un table,el ul tendrá 4 elementos, tres son text boxes para introducir datos y el cuarto elemento será un botón para agregar los datos ingresados en el table. El ul ocurre de la linea 20 31y la tabla ocurre del 32 al 40. Lo interesante aquí es que la tabla tiene un tbody y un tfoot, estos dos tienen templates.

Los templates son segmentos de código html con funcionalidad javascript que pueden ser re utilizadas. En este caso tenemos un template para cada fila que se va a crear (lineas 7 – 12) y este template también está conectado el view model porque podemos ver que tiene bindings. Pero en la linea 10 vemos que tiene algo diferente, lo envolvemos en #:# para decirle a kendo que lo que hay dentro de ese segmento, será código javascript. Hacemos uso de kendo.toString para dar formato a la propiedad price. Lo mismo sucede con el template del footer, el contexto es nuestro view model, así que tenemos acceso a cualquier función que se haya declarado ahí, en cambio del template rowTemplatetiene acceso exclusivamente a lo que haya en products.

En app.js modificaremos el view model que teníamos antes de la siguiente manera:

Screen Shot 2015-03-25 at 11.33.59 PM

Agregamos todas las propiedades y métodos que nuestra vista está esperando que existan. El método get del view model sirve para poder leer una propiedad del mismo view model, se ve eso también en los templates.

Si corremos, veremos en nuestra vista lo siguiente comportamiento al agregar muchos productos:

Screen Shot 2015-03-25 at 11.43.44 PMComo pueden ver, el template del footer esta procesando todo lo que hay en el data source products. Y éste al ir cambiando, se irá actualizando. La magia de los Bindings de MVVM.

Yo sé que te diste cuenta que no sirvió de nada que usaramos Node Js, pero sí!, aprendimos un poco de Jade, que este puede llegar ser un pilar al programar en Node Js. Pronto espero aumentar éste ejemplo para utilizar ahora sí Node Js y MongoDb para la persistencia de datos.

Puedes revisar la documentación de Kendo y ver el ejemplo en el que me basé

Si te resulta confuso, no dudes en preguntar o revisar la documentación de Kendo para conocer más sobre MVVM y Jade, que fueron los principales en esta entrada.

¡Saludos!

Repositorio en Github

Anuncios

2 comentarios sobre “Aplicaciones Web MVVM con Kendo UI y NodeJS (y Jade)

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s