Neck

Papillon

smalluban/neck

smalluban/papillon

Backbone.js in angular way

Smart change detection library

Contribute!

Give a star!

What is it?

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.

What does it mean?

DATA

LOGIC

UI

LOGIC

DATA

UI

MODEL

VIEW

CONTROLLER

Change detection connects all the parts together.

How is it implemented?

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

How can it be used?

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

Do you have any questions?

Thank you.