Aplicaciones Web del lado del Cliente con MVVM

Aplicaciones web con alta carga de lógica del lado cliente han comenzado a popularizarse, la idea es que mucho de lo que antes se hacía en el servidor, ahora se lo puede hacer en el cliente (browser) y dejar al servidor solo como un API de acceso a la persistencia de los datos.

Ejemplos de este tipo de aplicaciones web son: Gmail, Twitter, Facebook, etc.

En estos escenarios librerías como jQuery se queda corto para organizar la estructura de la aplicación, jQuery es un gran aliado en la lucha contra la estandarización de llamadas de bajo nivel de cada browser como por ejemplo el acceso al DOM, y realizar cambios sencillos en la página, pero para organizar lógica no, e inmediatamente comienza a sentirse un código difícil de mantener en el futuro.

Durante los pasados 2 años he vivido esta transición de tratar de usar jQuery para todo, a usar una nueva librería que me ha permitido hacer mucho más y tener un código más limpio, la librería de la que les hablo es knockout.

Esta librería de javascript tiene estas principales características:

• Declarative Bindings: Esto permite enlazar los elementos del DOM usando un atributo especial de html5 (data-bind), se puede enlazar desde eventos en el elemento, hasta cambios de estilos manejados por evaluación de código javascript.

• Automatic UI Refresh: En esta librería los models son simples objetos javascript a los cuales se puede atar vía data-bind los valores de estos para automáticamente desplegar en la vista sin tener que codificar estos cambios, esto en mi experiencia es lo mejor de knockout porque ahorra mucho código repetitivo.

• Dependendy Tracking: Cuando se definen los modelos en objetos javascript se utiliza ciertas funciones que permiten enlazar propiedades compuestas por otras propiedades o atributos calculados.

• Templating: En combinación con el refresco del UI automático permite definir como desplegar datos usando simple html más etiquetas de template como foreach of if para crear el html final.

Los tutoriales en la página son muy explicativos learn.knockoutjs.com y la documentación es bastante completa.

Este cambio de librería requiere un poco de cambio en la forma de pensar para crear una solución más robusta, lo bueno de este cambio es que adicional a tener un mejor código he comenzado a escribir tests para mis clases javascript, lo que antes era imposible con jQuery simple.

Les dejo con un ejemplo de como usar ko.observable y ko.observableArray son las funciones basicas de KO que permiten hacer uso de todo su potencial.

ko.observable permite rastrear los cambios a una variable simple, una vez creada una variable con esta función, se puede usar para realizar el refresco automático de la interfaz, crear atributos calculados, etc.

ko.observableArray permite rastrear los cambios a una colección de objetos cuando se agregan/remueven.