Web Development – How Does Two-Way Data Binding Differ from Auto-Sync?

modelmodelingmvcweb-applicationsweb-development

The AngularJS documentation mentions that it considers one-way data binding to be 'bad' and two-way data bind to be 'good*'. However, on looking over the definitions of two-way data binding used, all it seems to be is an auto-sync put in place between the view and the model.

Diagram

Two-Way Data Binding

Surely this has a performance hit and uses additional resources. Or am I missing something? Is two-way data binding something more than an MVC auto-sync, and are there any aspects of data binding theory which would cause two-way data binding to always be preferable, as seems to be implied in the documentation and diagrams?

*it does this with sad and smiley faces instead of words, as can be seen above…

Best Answer

From the documentation, I am assuming that by "most templating systems", they are referring primarily to server-side templates which get rendered into a view. I feel comfortable making this assumption due to a later statement explaining why angular is different: "... the template ... is compiled on the browser. The compilation step produces a live view." And also because other client-side MVVM / MVC / MVP (aka MV*) libraries offer a similar two-way binding.

For server-side templating, it is not usual for it to be a "live view", because the view is actually rendered on the server instead of the browser. This essentially makes server-side binding one-way. The client must submit changes. Then the server recomputes binding values and renders a new view from those values. I'm not only talking about traditional form-based pages. This applies equally to frameworks which asynchronously load view partials which are computed on the server.

In angular, the model and controller live alongside the view. So, when the user changes a view value, it is pretty immediately changed on the model, and the controller can react to that change... recalculating computed values, loading related data, etc. But again, other client-side libraries are capable of this.

I would say that the terminology is not great here, because angular internally has one-way and two-way binding on directives. This confuses the issue a bit. But for directives, it more amounts to whether the model property is exposed as read-only (one-way) or read/write (two-way). (There's slightly more to it than that, but that's the gist of it.)

Update

So it seems to me that this page is more targeted at something like ReactJS, although it could apply to server-side techs as well. Here is an interesting (biased) article further discussing one-way vs two-way binding. (React is one-way.)

Related Topic