Data binding is the process that establishes a connection between the application UI (User Interface) and business logic. If the settings and notifications are correctly set, the data reflects changes when made.

Definition from Wikipedia.

It can also mean that when the UI is changed, the underlying data will reflect that change.

Definition from Wikipedia.

DATA

LOGIC

UI

LOGIC

DATA

UI

MODEL

VIEW

CONTROLLER

Change detection connects all the parts together.

CHANGE DETECTION

Backbone.Model
.set()

Template expressions
$scope.$apply(), $scope.$digest()

Virtual DOM
.setState()

FRAMEWORK

UI

Backbone.Model 
Backbone.Collection

Backbone.View

trigger
update event

.listenTo(model,'update', ...)

.render() {
 ... $el.html( _.template...
}

.set('property', ...)

UI events callbacks

TRIGGER

UI

$scope

UI events callbacks

{{ someProperty }}

View (template)

$watchers

$scope expressions

$scope.$watch(...)

$digest loop

 $scope.$apply()

Controller / Directive

TRIGGER

UI

React Component

this.state, this.props

this.setState({ 
  ...newState... 
})

this.render()

UI events callbacks

Virtual DOM

Reconciliation*

* Reconciliation is the process by which React updates the DOM with each new render pass.

Definition from React docs.

TRIGGER

Simple forecast application

1. Shared async API for fetching temperature
    
2. Form for adding address
    
3. List of added addresses
    
4. Update and remove button for address

Forecast shared API

Forecast demo application - edit on plunker

Forecast demo application - edit on plunker

Forecast demo application - edit on plunker

Thank you.