Reactive programming vs MVVM pattern for managing GUI updates

Question

Reactive programming and MVVM are two approaches that can address the problem of separating the domain layer from the UI.

• MVVM does this by defining a viewmodel, which is a data structure mapped to UI components. The UI display the data, and maybe update it when user occurs.
• a reactive framework defines a graph of observables which notify the UI that some piece of data has changed

Reactive frameworks are gaining mind share, both in mainstream platforms (with Rx in .net & java, react.js) and more experimental places (FRP in haskell).

I have mainly used MVVM with angular, and I find the simplicity to expressiveness ratio quite satisfying, although I have only worked on small/medium projects with it.

What does a reactive framework buys the developer that mvvm don't?

Is there really a difference? For example, knockout.js is advertised as a mvvm framework, but has a reactive feeling in its interface:

this.firstName = ko.observable("John");
this.lastName = ko.observable("Smith");
this.fullName = ko.computed(function() {
 return this.firstName() + " " + this.lastName();
}, this);

• Alex: MVVM is a pattern to separate the concern of presentation from domain. Reactive frameworks are tools that can be used to achieve this separation pattern. They aren't exclusive.
• Simon Bergot: @AlexG Well, there are tools that coordinate the communication between a viewmodel & the UI. I would call those MVVM frameworks.
• Alex: The point stands - KnockoutJS uses a reactive framework to enable the MVVM separation of concerns. AngularJS uses dirty-checking to enable MVVM. They are just different ways of achieving the pattern. Perhaps your question is "What does the Reactive paradigm achieve in an MVVM framework that the Dirty-Checking technique doesn't?"
• Simon Bergot: @AlexG so you would say it is an implementation detail? I think it answers my question.
• Bart van Ingen Schenau: @Simon: I wouldn't qualify it as an implementation detail, but more as different approaches of communicating changes in the Model up to the ViewModel

Answer 1

Those are different non-competing concepts and they can easily work together to produce a great result.

In layman terms:

MVVM is useful to get away from the codebehind (GUI/model coupling) clutter. Reactive approach is useful to reduce the event/callback clutter.

I would recommend learning a bit about XAML/WPF since Microsoft is the original inventor of the MVVM. Microsoft also produced a very good implementation of Reactive approach: Reactive Extensions.

Here is a decent attempt to combine them:

http://www.reactiveui.net https://github.com/reactiveui/ReactiveUI

Related SO question:

https://stackoverflow.com/questions/1763411/reactive-extensions-rx-mvvm