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

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. — Alex, Aug 05 '14 at 08:56
@AlexG Well, there are tools that coordinate the communication between a viewmodel & the UI. I would call those MVVM frameworks. — Simon Bergot, Aug 05 '14 at 09:10
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?"* — Alex, Aug 05 '14 at 09:15
@AlexG so you would say it is an implementation detail? I think it answers my question. — Simon Bergot, Aug 05 '14 at 09:19
@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 — Bart van Ingen Schenau, Aug 05 '14 at 10:05

score 12 · Accepted Answer · edited May 23 '17 at 12:40

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

Reactive programming vs MVVM pattern for managing GUI updates

1 Answers1