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

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