MVVM "binder" definition and its usage?

Question

I've been looking around on internet to get a better understanding of MVVM in general.

On Wikipedia it states the components of the MVVM pattern are:

• Model
• View
• View Model
• Binder

This is the first time I encountered the binder definition along with the model, view, view-model that are part of the acronym.

The Wikipedia definition of the MVVM 's "Binder" states the following:

Declarative data- and command-binding are implicit in the MVVM pattern. In the Microsoft solution stack, the binder is a markup language called XAML. The binder frees the developer from being obliged to write boiler-plate logic to synchronize the view model and view. When implemented outside of the Microsoft stack the presence of a declarative databinding technology is a key enabler of the pattern.

Question: Does every MVVM pattern always include a binder? What is the binder exactly used for? Is it something that you actually code or is there just some automation going on with the framework?

I work and use AngularJS almost every day, and some agree that its pattern is MVVM as opposed to MVC/MVP. I got that the View Model it's what AngularJS calls "Controller", as a reminiscence of "classical" MVC. But does AngularJS use a binder too? I still haven't seen anything like that while coding in AngularJS, maybe the binder is just used on a desktop programming framework rather than on browsers?

On Wikipedia it gives WPF's XAMl as a C# example of binder, so what would be the counter-example on AngularJS? The AngularJS's templates and/or their syntax are the view and/or binder too?

Could you provide a better explanation of the Wikipedia's article, maybe with a couple of examples (AngularJS and/or WPF)?

EDIT: I've looked more on SO and found a like to these slides which introduce the term MVB rather than MVVM, so: is this binder we're talking about an optional, and does it appear in both MVVM and MVB?

Does the binder just refer to the data-binding going on between the View and the View-Model? How would you represent the binder on a chart? Is it just like the "Data-Binding" on this one?

Thank you.

Answer 1

A "binding" is something that describes how data within the View Model will be displayed in the View. A "binder" is some component that performs the actions described by the binding. Binders are important to the MVVM framework as they allow you to decouple the View from the ViewModel, and takes the heavy weight of handing the synchronization of state between the two.

The binder does the following

• Interprets bindings defined in (typically) the UI
• Observes the View Model for changes in state and updates the View
• Observes the View for changes in state and updates the View Model

Note that the introduction of an initial state is also a change in state, and the act of updating depends on the interpretation of the bindings.

As far as I know, there is no programming language where the concept of binding is baked into the language (i.e., synchronizing the state of two instances of an object via language features, like how the Observer pattern is baked into C# as events), so binders must be coded when designing a system that implements the MVVM pattern.

Wikipedia's definition of a binder, as described in your question, is terrible. They're conflating markup language with the act of binding. Xaml, WPF's markup language, is just XML that describes an object graph. It extends xml through the addition of markup extensions, which are defined via specifically formatted attribute values.

<!-- Attributes that are curly bracketed {} are markup extensions -->
<TextBox x:Name="My textbox lol" Text="{Binding Name}" />

The xaml deserializer recognizes these special attributes as markup extensions, which are in fact classes that extend MarkupExtension. The xaml deserializer includes them in the deserialization process. The Binding class from the above example is a type of MarkupExtension, and is the primary (but not the only!) implementation of a binder in WPF.

The binding system in WPF is very complex. It is primarily based on DependencyProperties, but can interact very well with INotifyPropertyChanged properties and in a limited way with POCO properties. During deserialization these Bindings are instantiated and configured as described in markup, and then work with the binding subsystem to tie the View and View Model together.

I'm more familiar with knockout than with Angular, but the process is similar. You define bindings in the UI, which is interpreted by the framework at some point not long after the DOM is constructed. This is triggered by some mechanism determined by the framework itself. The framework then interprets these bindings in order to bind observable properties within your View Model with the UI.

Without this interpretation work, your binding definitions would just sit there in your HTML, doing nothing. Something has to interpret them and set up bindings that will handle synchronization of state.

In Knockout, this happens when you call ko.applyBindings(), passing in your View Model. Without calling that, all the data-bind binding definitions will sit unused in your html.

How this process happens in each framework, how it is implemented, and what each calls their bindings, can be different.

Answer 2

The Wikipedia is not where everything comes from. First, read this blogpost from John Gossman, the architect of WPF and Silverlight: Introduction to Model/View/ViewModel pattern for building WPF apps
See? There is no any "Binder" in there. What he wrote instead is:

Model/View/ViewModel also relies on one more thing: a general mechanism for data binding.

To understand what MVVM really is read first sentence of this post:

Model/View/ViewModel is a variation of Model/View/Controller (MVC) that is tailored for modern UI development platforms where the View is the responsibility of a designer rather than a classic developer.

Binding mechanism is not a part of the pattern itself. It's an underlying technology, which is essential for applying the pattern.