What's the relationship between data flow and data binding?

Question

Data flow and data binding. Often times I read about one of the terms, I find it is interchangeably used with the other.

E.g. source:

Two-way flow aka data binding binds two pieces of state: in most cases, one inside the controller (e. g. some variable), and one inside the view (e. g. contents of textbox). Binding means that, when one piece changes, the other piece changes as well and gets the same value, so you can pretend that there's only one piece of state involved (while there's two actually). Write events are going back and forth between controllers and views - thus two-way.

The questions:

Are both terms the same thing named differently, or are there important differences?
What is the proper way/context to use either of these terms?

P.S. I've tagged modern js technologies like react and angular since that's the context I'm coming from but examples without them are fine as well. Feel free to edit the questions above, if you feel like the list is incomplete or could be better.

score 0 · Answer 1 · edited Dec 15 '20 at 04:00

Let's talk about the React js for an instance.

When we want to bind the data between view and controller, we have to use setState/redux/flux. Here, setState/flux/redux is used for the data-flow. React has a uni-directional data-flow, which means, the changes we make in the view, don't automatically reflect in the controller. You have to explicitly call some method to pass the data.

Also, the data-flow is not only restricted to the binding. If you want to pass the data between components, you can use this mechanism. (Don't confuse it with binding)

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

In the code above, you can see how this.state.value is updating.

In contrast to React, Angular has a two-way data binding. What it means is, you don't have to explicitly change the variable. It gets updated automatically when we change the view.

<script>
  angular.module('changeExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.counter = 0;
      $scope.change = function() {
        $scope.counter++;
      };
    }]);
</script>
<div ng-controller="ExampleController">
  <input type="checkbox" ng-model="confirmed" ng-change="change()" id="ng-change-example1" />
  <input type="checkbox" ng-model="confirmed" id="ng-change-example2" />
  <label for="ng-change-example2">Confirmed</label><br />
  <tt>debug = {{confirmed}}</tt><br/>
  <tt>counter = {{counter}}</tt><br/>
</div>

Here, you can see, confirmed is two-way bound, therefore, we don't need to update the state manually.

score -1 · Answer 2 · answered Dec 15 '20 at 03:45

Angular's two-way data binding : It's made possible by a mechanism that synchronizes the view and the model whenever either change. In Angular, you update a variable and its change detection mechanism will take care of updating the view, and vice versa. What's the problem? You don't control the change detection mechanism. I found myself having to resort to ChangeDetectorRef.detectChanges or NgZone.run to force the view to update.

To not dive too deep into change detection in Angular, you trust it will update what you need when you change a variable, or when it gets changed after an observable resolve, but you'll find you have no idea how and when it runs, and sometimes it will not update your view after variable changes. Needless to say, it can sometimes be a pain to find where and when a problem occurred.

React's one-way data flow : It means that the view always gets its state from the model. To update the view, you need to update the model first, and then redraw the view. React makes the view redrawing process extremely efficient because it compares not the actual DOM but a virtual DOM it keeps on memory. But how does change detection work in this dynamic? Well, you trigger it manually.

In React, you set the state's new value, which then causes a ReactDOM.render, which causes the DOM comparing/updating process. In React/Redux you dispatch actions that update the store (single source of truth) and then the rest. Point is, you always know when the stuff changes, and what caused the change. This makes problem-solving quite straight forward. If your app depends on the state, you look at it before and after the action that triggered the change, and you make sure variables have the value they're supposed to.

What's the relationship between data flow and data binding?

2 Answers2