Frameworks javascript para el Patrón MVVM (Model View ViewModel)


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:

Knockoutlogo

  • 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());
      
  • Simplicidad y inicio rápido.
  • Mejor rendimiento.
  • Mejor Documentación. Excelente Manual interactivo.

Angularangular

  • 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
      ...
      
      
  • 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.

Emberember

  • 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();
      
  • Anuncios
Esta entrada fue publicada en Desarrollo, javascript, Patron Software y etiquetada . Guarda el enlace permanente.

3 respuestas a Frameworks javascript para el Patrón MVVM (Model View ViewModel)

  1. ¿ Algún ejemplo de integración de alguno de estos framework de forma directa con MVC .Net?

    • Rodrigo Perez Burgues dijo:

      Microsoft cuando generas un proyecto MVC en Visual Studio 2012 por defecto ya incorpora Knockout.
      Con respecto a lo que comentas:

      • Tanto Angular y Ember puedes llamar directamente a controladores de MVC para la carga inicial de datos. Ambos incluso permiten definir rutas al estilo MVC. En angular también actualiza los datos.
      • En KnockOut no lo permite. Lo que por lo que leído la gente lo complementa con SammyJs.
  2. Pingback: Primera aplicación en Angularjs (I) | Pensando bajo la lluvia

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