2010-08-06 13 views
7

He estado leyendo en MVVM y hasta el momento lo he encontrado muy interesante. La mayoría de los ejemplos que he encontrado, sin embargo, son para aplicaciones de Windows, a diferencia de las aplicaciones web. También he visto muchas menciones de MVVM usado con Silverlight, y sé que Silverlight puede usarse para aplicaciones Web o Windows.MVVM para desarrollo web

Entonces mi pregunta es: ¿MVVM es un patrón válido para las aplicaciones basadas en web? Si es así, ¿la interfaz de usuario debe ser Silverlight? Estoy en el proceso de decidir qué tecnologías usar para un nuevo sitio web de tamaño mediano que necesitamos diseñar, y Silverlight puede ser difícil de vender a los poderes fácticos, aunque lo que usamos detrás de escena no importa tanto.

Se agradecerá cualquier información que alguien pueda proporcionar sobre el uso de MVVM en un entorno web. El código de ejemplo sería genial también.

+9

Debería * realmente * cerrar algunas de sus preguntas abiertas, de lo contrario las personas estarán menos inclinadas a responder. –

+0

También puede encontrar que Knockout js es útil para el enlace si desea usar MVVM en páginas web. –

+0

MVVM funciona muy bien para aplicaciones de una sola página (SPA), AngularJS lo usa, por ejemplo. En un proyecto, implementé un marco JS que usa KnockoutJS y funciona como WPF/XAML: http://vistojs.org –

Respuesta

2

MVVM es totalmente aceptable para el desarrollo web. De hecho, se recomienda para el desarrollo de Silverlight. Nuestra empresa utiliza MVVM + Silverlight para muchos de nuestros proyectos con gran éxito. La curva de aprendizaje inicial puede ser difícil, pero una vez que hace clic, ofrece muchos beneficios.

En mi opinión, para que MVVM realmente funcione, necesita un marco que tenga soporte de encuadernación correcto. De lo contrario, tendrás que escribir una gran cantidad de código "pegamento" para unir tu vista y ver el modelo. Silverlight tiene un excelente soporte de enlace y si se hace correctamente, puede eliminar la mayor parte del código subyacente en su vista, de modo que toda la lógica de su negocio permanezca en su ViewModel.

Tim Heuer tiene excelentes tutoriales y videos en MVVM con Silverlight. Recomiendo revisar sus cosas. http://timheuer.com/blog/articles/getting-started-with-silverlight-development.aspx

3

MVVM es esencialmente el patrón MVC con cambios específicos para apoyar el desarrollo de aplicaciones usando Windows Presentation Foundation.

Modelo - Vista - ViewModel
Modelo - Vista - Controlador

lo tanto, el modelo de vista es el controlador en MVVM. El patrón es muy bueno; hace que sea muy fácil construir aplicaciones que sean simples pero potentes, y que sean fáciles de probar y mantener.

Si está buscando usar MVVM en una aplicación web que NO es Silverlight, consulte ASP.NET MVC. MVVM también es una opción si está usando Silverlight. Incluso puede mezclar los dos, hospedando su aplicación Silverlight en un sitio web de MVC.

1

Para el desarrollo web prefiero usar MVC. Si es puramente Silveright entonces MVVM puede considerarse

+0

Acepto. Leí un artículo sobre los inconvenientes/problemas de diseño que tuvo un chico al implementar MvvMw en Silverlight; fue mucho. Compare eso con las dificultades con asp.net mvc (ninguna, más o menos) Definitivamente usaría MVC sobre MvvM. – Michel

+0

por lo que entiendo, MvvM se utiliza en Silverlight con enlace automático entre los datos y la vista: cuando los datos (modelo) se actualizan, la vista se notifica y muestra las actualizaciones. No estoy seguro si esta es la ÚNICA implementación para MvvM, pero el modelo de actualización automática de Silverlight es algo que no uso en los proyectos web. – Michel

4

Para web web (html) no es realmente utilizable ya que el punto mvvm es tener una interfaz que refleje los cambios en el modelo de vista inmediatamente. (a través de enlace de datos/eventos).

Para web, un cambio en el modelo de vista suele ser una reconstrucción posterior a la publicación completa de la pantalla.
Entonces, ¿por qué molestarse ...

Sin embargo, si tiene un sitio web AJAX con una página HTML fija si el contenido se actualiza continuamente con javascript. Entonces se vuelve interesante.

+1

Exactamente. El objetivo de MVVM es aprovechar el enlace de datos. De lo contrario, los patrones existentes que han existido durante años funcionan bien. ViewModel es especial porque encapsula lógica de visualización y expone propiedades y acciones a la vista a través del enlace de datos. Esto funciona muy bien en una aplicación con estado, pero la web es, por naturaleza, sin estado, por lo que el patrón se descompone allí. MVC es mucho mejor para las aplicaciones web que no son de Silvelright. –

0

MVVM es totalmente aceptable con WPF y también con Silverlight. Si desea usar MVVM para desarrollo web, tendrá que escribir una gran cantidad de código jscript.Hay muestra en MSDN sobre cómo hacer esto:

Comprobar el siguiente enlace: http://msdn.microsoft.com/en-us/scriptjunkie/hh297451

6

Por supuesto MVVM es válida "web" patrón, pero actualmente tiene usos muy limitados.

La principal diferencia entre MVC y MVVM está en la actualización de los datos de su aplicación. Para las aplicaciones web actuales, se prefiere MVC porque la web es principalmente una comunicación unidireccional y toda la entrada del usuario se encapsula con formularios.

MVVM se vuelve útil al crear aplicaciones realmente interactivas con una interfaz de usuario rica.

Para hacerlo simple. Si está creando una solución web con ASP.NET (o cualquier otra tecnología orientada al servidor) entonces use MVC. Si está haciendo una aplicación de interfaz de usuario enriquecida, use MVVM y, si no le gusta Silverlight, pruebe KnockoutJS para la solución de Javascript.

5

MVVM puede funcionar bien en la Web y en la tecnología basada en XAML. La tecnología XAML tiene una ventaja en sus asombrosas funciones de vinculación que se preparan. Pero con las bibliotecas de JavaScript como Knockout (que es excelente) y JsViews/JsRender (que debe considerar una vez que JsViews pase a ser beta).

Para responderte específicamente: sí, puedes hacer MVVM con aplicaciones web. ¿Esta bien? Sí, si usa una biblioteca como Knockout (http://knockoutjs.com). Las claves para MVVM están en que es un patrón de separación simple que:

  1. separa vista (la página)
  2. separa el modelo (los datos en bruto)
  3. separa el modelo de vista (lógica de presentación)

En ninguna parte está la tecnología prescrita por MVVM. La vista es tu html, tu estructura. El modelo es tu información (tal vez JSON). El viewmodel es su objeto javascript que separa la lógica de su vista específica.

Knockout proporciona los medios para el enlace de datos durante el día a través de un concepto que llama observables. básicamente, piensa en esto como la interfaz INotifyPropertyChanged pero para JavaScript. Knockout también es compatible con observableArray (que es similar a ObservableCollection en XAML). Knockout tiene muchas otras funciones que te permiten suscribirte a eventos de cambio de datos, crear comportamientos, enlaces personalizados y mucho más. De todos modos ... con Knockout obtienes un poco.

Si elige hacer MVVM sin una biblioteca como Knockout, aún puede hacerlo, pero pierde las funciones de enlace de datos y probablemente quiera escribir algo usted mismo. Pero le recomiendo que se quede con una biblioteca que hace esto por usted.

Respuesta larga ... pero quería darte lo suficiente como para empezar a explorar.

0

Como se mencionó, Knockout.js es una biblioteca fantástica que proporciona muchas de las funciones necesarias para MVVM en la web. Creé un framework compuesto que es un framework MVVM mucho más completo. Tiene similitudes con Prism de Microsoft y está siendo utilizado en un producto bastante grande y complejo que apunta a plataformas web y móviles.

Compruébelo usted mismo: http://danderson00.blogspot.com/2012/08/introducing-knockoutcomposite.html

12

DotVVM es un marco de MVVM basado en ASP.NET de código abierto basado en Knockout JS. Es fácil de usar y no tienes que escribir toneladas de código Javascript. Para la mayoría de los escenarios, solo necesita C# y HTML con CSS.

La vista se parece a esto - es un HTML ampliado con controles de servidor y de datos encuadernaciones:

<div class="form-control"> 
    <dot:TextBox Text="{value: Name}" /> 
</div> 
<div class="form-control"> 
    <dot:TextBox Text="{value: Email}" /> 
</div> 
<div class="button-bar"> 
    <dot:Button Text="Submit" Click="{command: Submit()}" /> 
</div> 

El modelo de vista es una clase C#, que se ve así:

Hay también Visual Studio Extension que agrega IntelliSense y plantillas de proyectos.

El marco maneja la validación, localización, SPA y otras características de uso frecuente. Es compatible con .NET Framework y .NET Core.

Cuestiones relacionadas