Patron MVVM
El patrón MVVM, nos permite separar la lógica de negocio, el comportamiento de la aplicación y la interfaz de usuario. Lo cual posibilita una separación clara entre desarrollo y diseño. Facilita el desarrollo de aplicaciones web complejas. Se compone de:
- Model: Modelo de negocio.
- View: Interfaz de Usuario.
- ViewModel: Modelo que conecta los ambos anteriores; que contiene el comportamiento de la aplicación.
- Gestiona la presentación del modelo en los elementos de la Vista.
- Gestiona las operaciones en la Vista; que afectan al modelo.
Frameworks
Existen multiples Frameworks de Javascript para el Patron MVVM; vamos a comentar tres de ellos:
- Knockout: http://knockoutjs.com/
- Angular: http://angularjs.org/
- Ember: http://emberjs.com/
Knockout
- Como se desglosan los componentes:
- Modelo: Se registran las propiedades del objeto para notificar/recibir cambios de los mismos. Estas propiedades se definen en el modelo como ko.observable
function Model() { var self = this; self.name = ko.observable('car'); self.description = ko.observable('red and offroad'); } - View: Se mapean los elementos del html a las propiedades del objeto del modelo.
</pre> <div>Name: <strong data-bind="text: name"></strong></div> <div>Description: <strong data-bind="text: description "></strong></div> <pre>
- ViewModel: Contecta ambos:
ko.applyBindings(new Model());
- Modelo: Se registran las propiedades del objeto para notificar/recibir cambios de los mismos. Estas propiedades se definen en el modelo como ko.observable
- Simplicidad y inicio rápido.
- Mejor rendimiento.
- Mejor Documentación. Excelente Manual interactivo.
Angular
- Como se desglosan los componentes:
- Modelo: se define el modelo, no es necesario registrar observables. Automáticamente detecta los cambios en los valores; para proceder a la sincronización.
function ModelCtrl($scope) { $scope.name = 'car'; $scope.description = 'red and offroad'; } - View: Se mapean los elementos mediante {{
</pre> <div>Name: <strong>{{name}}</strong></div> <div>Description: <strong>{{description}}</strong></div> <pre> - ViewModel: Conecta ambos, se indica mediante el tag ng-app; esto permite utilizar el scope automáticamente
...
- Modelo: se define el modelo, no es necesario registrar observables. Automáticamente detecta los cambios en los valores; para proceder a la sincronización.
- Es mas complejo.
- Más tendencia de uso.
- No se limita a registrar (bindear) los objectos, sino también ofrece una solución más completa:
- Un framework que permite el ciclo complento del modelo (un controlador que permite realizar llamadas ajax al servidor automaticamente).
- Un framework que permite validación del modelo.
- Un framework que permite encapsular Vistas parciales (realizando componentes reutilizables).
- Orientado a IOC y TDD.
Ember
- Como se desglosan los componentes:
- Modelo: se define el modelo “heredando” de la clase Ember.Object.extend.
App.Model= Ember.Object.extend({ name: 'car', description: 'red and offroad' }); - View: Se mapean los elementos mediante {{
</pre> <div>Name: <strong>{{name}}</strong></div> <div>Description: <strong>{{description}}</strong></div> <pre> - ViewModel: Realmente es un framework MVC, el proceso en que las vistas que afectan al modelo se han de programar.
window.App = Ember.Application.create();
- Modelo: se define el modelo “heredando” de la clase Ember.Object.extend.



