MVVM for Web Development

Question

I've been reading up on MVVM and so far have found it very interesting. Most of the examples I've found, however, are for Windows apps, as opposed to Web apps. I've also seen a lot of mention of MVVM used with Silverlight, and I know Silverlight can be used for either Web or Windows apps.

So my question is - is MVVM a valid pattern for Web-based apps? If it is, does the UI have to be Silverlight? I'm in the process of deciding which technologies to use for a new mid-size website we need to design, and Silverlight may be a hard sell to the powers-that-be, though what we use behind the scenes doesn't matter so much.

Any info anyone can supply on using MVVM in a web environment would be appreciated. Example code would be great as well.

Becharm

You should really close some of your open questions, otherwise people will be less inclined to respond. – Motivation

you may also find Knockout js usefull for binding if you want to use MVVM on webpages. – Skinflint

MVVM works very well for Single-Page Applications (SPAs), AngularJS uses it for example. In a project, I implemented a JS framework which uses KnockoutJS and works like WPF/XAML: vistojs.org – Adkinson

Answer 1

DotVVM is an open source ASP.NET-based MVVM framework based on Knockout JS. It's simple to use and you don't have to write tons of Javascript code. For most scenarios, you need just C# and HTML with CSS.

The view looks like this - it is a HTML extended with server controls and data-bindings:

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

The viewmodel is a C# class which looks like this:

public class ContactFormViewModel 
{
    public string Name { get; set; }
    public string Email { get; set; }

    public void Submit() 
    {
        ContactService.Submit(Name, Email);
    }
}

There is also Visual Studio Extension which adds IntelliSense and project templates.

The framework handles validation, localization, SPAs and other frequently used features. It supports both .NET Framework and .NET Core.

Intercourse

Answer 2

Of course MVVM is valid "web" pattern but currently it has very limited uses.

Main difference between MVC and MVVM is in updating your application data. For currrent web applications MVC is preferred because web is mostly one-way communication and all user input is encapsulated with forms.

MVVM gets usefull when creating really interactive applications with rich UI.

So to make it simple. If you are bulding web solution with ASP.NET (or any other server-side oriented tehnique) then use MVC. If you are making rich UI application use MVVM and if you don't like Silverlight try KnockoutJS for Javascript solution.

Boreal

Answer 3

MVVM can work well in the Web and in XAML based technology. XAML tech has an edge in its awesome binding features that are baked in. But with JavaScript libraries such as Knockout (which is excellent) and JsViews/JsRender (which you should look into once JsViews goes beta).

To answer you specifically: yes, you can do MVVM with web apps. Is it good? Yes, if you use a library like Knockout (http://knockoutjs.com). The keys to MVVM are in that its a simple separation pattern that:

1. separates view (the page)
2. separates the model (the raw data)
3. separates the viewmodel (presentation logic)

Nowhere in there is the technology prescribed by MVVM. The view is your html, your structure. The model is your data (maybe JSON). The viewmodel is your javascript object that separates the logic for your specific view.

Knockout provides the means to day data binding through a concept it calls observables. basically, think of this like the INotifyPropertyChanged interface but for JavaScript. Knockout also supports observableArray (which is similar to ObservableCollection in XAML). Knockout has a bunch of other features that allow you to subscribe to data change events, create behaviors, custom binding, and much more. Anyway ... with Knockout you get quite a bit.

If you choose to do MVVM without a library such as Knockout, you can still do it, but you lose the data binding features and would probably want to write something yourself. But I highly recommend sticking with a library that does this for you.

Long answer ... but I wanted to give you enought o start exploring.

Markhor

Answer 4

For web web(html) it's not really usable since the point mvvm is to have an interface reflect changes in the viewmodel immediately. (through databinding/events).

For web, a change in the viewmodel is usually a post + complete rebuild of the screen.
So why bother..

However if you have an AJAX website with one fixed HTML page if which the content is continually updated with javascript. Then it becomes interesting.

Roadside

Exactly. The entire point of MVVM is to take advantage of data-binding. Otherwise, the existing patterns that have been around for ages work fine. The ViewModel is special in that it encapsulates view logic and exposes properties and actions to the view through data-binding. This works great in a stateful application, but the web is, by nature, stateless, so the pattern breaks down there. MVC is much better for non-Silvelright web apps IMHO. – Lakendra

Answer 5

MVVM is essentially the MVC pattern with specific changes to support development of applications using Windows Presentation Foundation.

Model - View - ViewModel
Model - View - Controller

So the ViewModel is the Controller in MVVM. The pattern is very good; it makes it very easy to construct applications that are simple yet powerful, and that are easy to test and maintain.

If you're looking to use MVVM in a web application that is NOT Silverlight, look into ASP.NET MVC. MVVM is also an option if you are using Silverlight. You can even mix the two, hosting your Silverlight app in a MVC website.

Tripe

Answer 6

MVVM is totally acceptable for Web development. In fact, it is recommended for Silverlight development. Our company uses MVVM + Silverlight for many of our projects with great success. The initial learning curve can be tough, but once it clicks, it offers a lot of benefits.

In my opinion, to make MVVM really work, you need a framework that has right binding support. Otherwise, you'll have to write a lot of "glue" code to join your view and view model. Silverlight has excellent binding support and if done correctly, you can eliminate most of the code-behind in your view so all of your business logic stays right in your ViewModel.

Tim Heuer has some excellent tutorials and videos on MVVM with Silverlight. I highly recommend going through his stuff. http://timheuer.com/blog/articles/getting-started-with-silverlight-development.aspx

Lheureux

Answer 7

For web development I would rather go for MVC. If its purely Silveright then MVVM can be considered

Repetend

I agree. I've read an article about the pitfalls/design issues a guy had while implementing MvvMw in Silverlight; it was quit a lot. Compare that to the difficulties with asp.net mvc (none, more or less) i would definately use MVC over MvvM. – Chantellechanter

as far as i understood, MvvM is in Silverlight used with automatic binding between the data and the view: when the data (model) updates, the view gets notified and displays the updates. I'm not sure if this is the ONLY implementation for MvvM, but the automatic updating model from silverlight is something i don't use in webprojects. – Chantellechanter

Answer 8

I have a MVVM implementation for the web using various technologies, Knockout, jQuery, Websockets and .NET. Check out the article here: http://salmanq.com/blog/using-the-mvvm-pattern-on-web-applications-part-i/2013/02/

Heatherheatherly

Answer 9

MVVM is totally acceptable with WPF and also with Silverlight. If you want to use MVVM for web development, you'll have to write a lot of jscript code. There is sample on MSDN about how to do this:

Check the link below: http://msdn.microsoft.com/en-us/scriptjunkie/hh297451

Rainy

Answer 10

As mentioned, Knockout.js is a fantastic library that provides many of the features required for MVVM on the web. I've created a composite framework that is a much more complete MVVM framework. It's got similarities to Microsoft's Prism and is being used in a fairly large and complex product targeting web and mobile platforms.

Check it out: http://danderson00.blogspot.com/2012/08/introducing-knockoutcomposite.html

Rouault