De website à webapp

Knockout JS

Rémi Alvado / @remialvado / Shopping Adventure

Un principe fort : MVVM

  1. Model : la représentation de vos données => des POJOs sous stéroïde
  2. View : un template HTML directement dans la page.
  3. View-Model : la glue permettant un lien bi-directionnel entre les deux.

Quelques mot-clés / notions

  1. Observable : un élément de model ou de vue que l'on peut observer
  2. Computed : un élément de model ou de vue qui est calculé en fonction d'un autre élement
  3. Binding : une action à déclencher suite à un évènement
  4. et pas mal d'autres... ET C'EST TOUT !!!

Principale force : Gestion des dépendances

Account Balance
Status
Message
Alerte
# Model/account.js
define(["knockout", "sms-service"], function(ko, sms) {
    return function account(name, balance) {
        var self = this;
        self.name    = ko.observable(name);
        self.balance = ko.observable(balance);
        self.status  = ko.computed(function() { 
            return self.balance() >= O ? "positive" : "negative";
        });
        self.message = ko.computed(function() { 
            return self.status() === "positive" ? 
                "vous avez encore de l'argent" : 
                "arrêtez de dépenser autant !!";
        });
        self.alerte = ko.computed(function() {
            if (self.status() === "negative") 
                sms.send("Alerte !", "Account balance : " + self.balance());
        });
    }
}

Template

# View/account.html
<html>
  <head>
    <script src="knockout.js"></script>
    <script src="account.js"></script>
  </head>
  <body>
    ...
    <label>Balance : 
      <input data-binding="{value: balance, valueUpdate: 'afterkeydown'}" />
    </label>
    <p>
      Status : <span><% status %></span>
    </p>
    <p>
      Message : <span data-binding="{text: message}"></span>
    </p>
    ...
  </body>
</html>

Bindings

  1. Text : visible, text, html, css, style, ...
  2. Control flow : foreach, if, with, ...
  3. Forms : value, submit, event, disable, click, checked, ...

View Model

# Controller/bank.html
define(["knockout", "Model/account"],
    function(ko, account) {
        ko.applyBindings(
            new account("Rémi Alvado", 0),
            document.querySelector("body")
        );
    });

Tests

  1. Unitaires : sur le model avec qunit, jasmine via zombie, nodejs, ...
  2. Fonctionnels : sur la vue avec jasmine via selenium, zombie, phantom, ...

80 / 20

80% de Knockout en 7 minutes !

Les 20% restants pour devenir expert

  1. Debugger knockoutjs : chrome extension ou json export
  2. Créer des bindings
  3. Etendre l'interface Observable

Questions ?

Fork me on GitHub