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.

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

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

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

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

Solution 5

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

View more solutions

Comments

[Michel]

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.

[Michel]

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.

[Jeremy Likness]

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.