Two-way Bindings

Angular | Ember | Knockout

@gundersenMarius

My name is

Marius Gundersen

I work as a frontend consultant with

You should follow me on twitter

@gundersenMarius

Two-way Bindings

Binding HTML and JS

HTML/DOM

JavaScript

⇔

<input
    bind="message"
    value="" />

var email = {
    message: ""
};

email.message = "Hi";

This is not a tutorial or an introduction

I'm going to skip some details

HTML

<span data-bind="text: message"></span>

Preview

<input data-bind="value: message" />

JavaScript

var message = ko.observable();

message("Hello, JSConf");

message();

Handlebars

<span>{{ message }}</span>

Preview

{{Ember.TextField valueBinding=message}}

JavaScript

var email = Ember.Object.create({
    message: ""
});

email.set('message', "Hello, JSConf");

email.get('message');

Html

<span>{{ message }}</span>

Preview

<input ng-model="message">

JavaScript

$scope.message;

$scope.message = "Hello, JSConf";

$scope.message = "Hello, JSConf"; $scope.$apply();

$scope.$apply

$scope.message = "Hello, JSConf"; $scope.$apply();


for each property in $scope
  has it changed?
    update the DOM
    save the new value

Dirty checking

Observable Properties

✘

✔

Was Ember.js at rendering the list?

Async

✔

✘

Computed Properties

Celcius to Farenheit


 F = C*9/5 + 32;

°C = °F


$scope.C = 0;

$scope.F = function(){
    return $scope.C*9/5 + 32;
}

Dirty checking

F is recomputed when anything in the $scope changes!


Ember.Object.create({
    C: 0,

    F: function(){
        return this.get('C')*9/5 + 32;
    }
});


Ember.Object.create({
    C: 0,

    F: function(){
        return this.get('C')*9/5 + 32;
    }.property('C')
});


Ember.Object.create({

    if_A_then_B_else_C: function(){

        if(this.get('A')){
          return this.get('B');
        }else{
          return this.get('C');
        }

    }.property('A', 'B', 'C')
});

Even if A is true, the property will recompute when C changes value...


var C = ko.observable(0);

var F = ko.computed(function(){
    return C()*9/5 + 32;
});


var A = ko.observable(true);
var B = ko.observable(0);
var C = ko.observable(0);

var if_A_then_B_else_C = ko.computed(function(){

    if(A()){
      return B();
    }else{
      return C();
    }

});

Computed Properties

✘

✔

Computed Properties

✘

✔

Dynamic Dependencies

✘

✔

Summary

Syntax

Summary

Syntax
Dirty Checking vs Observable Properties

Summary

Syntax
Dirty Checking vs Observable Properties

Summary

Syntax
Dirty Checking vs Observable Properties
Synchronous vs Asynchronous

Summary

Syntax
Dirty Checking vs Observable Properties
Synchronous vs Asynchronous

Summary

Syntax
Dirty Checking vs Observable Properties
Synchronous vs Asynchronous
Computed Properties

Summary

Syntax
Dirty Checking vs Observable Properties
Synchronous vs Asynchronous
Computed Properties
Performance

Two-way Bindings

Angular | Ember | Knockout

@gundersenMarius

My name is

Marius Gundersen

I work as a frontend consultant with

You should follow me on twitter

@gundersenMarius

Two-way Bindings

Binding HTML and JS

HTML/DOM

JavaScript

This is not a tutorial or an introduction

I'm going to skip some details

HTML

Preview

JavaScript

Handlebars

Preview

JavaScript

Html

Preview

JavaScript

$scope.$apply

Dirty checking

Observable Properties

✘

✔

✔

Was Ember.js at rendering the list?

Async

✔

✔

✘

Computed Properties

Celcius to Farenheit

°C = °F

Dirty checking

F is recomputed when anything in the $scope changes!

Even if A is true, the property will recompute when C changes value...

Computed Properties

✘

✔

✔

Computed Properties

✘

✔

✔

Dynamic Dependencies

✘

✘

✔

Summary

Summary

Summary

Summary

Summary

Summary

Summary

Summary

Which one is fastest/slowest?

Ember is slowest when rendering lists

Angular is slowest when the model is complex

Knockout is slowest when pushing many items

Thank You

@gundersenMarius