D'abord, une courte introduction...

Développer rapidement des applications Web interactives peut se montrer chaotique

1. On développe une première fois l'application

2. Les usages font évoluer la définition

3. Le code n'est plus aussi propre et organisé qu'au départ

4. Il y a de plus en plus de bugs, et de moins en moins de temps pour développer des features...

...et on n'a parfois ni le temps ni les moyens de redévelopper ou refactoriser le code

Une idée de solution:

• Centraliser tout le moteur de l'interface au même endroit

• Déterminer quelles sont les parties critiques du code, qui doivent rester propres et solides

• Prévoir comment débugger efficacement

C'est là qu'intervient domino.js

• contrôleur événementiel
• open-source (license MIT)
• sans dépendance
• documentation: dominojs.org
• sources: github.com/jacomyal/domino.js

1. Le contrôleur

• Le contrôleur (l'instance de domino) est dans un seul fichier et décrit tout le coeur de l'application

• La majorité des données et des appels Ajax sont simplement décrites de manière déclarative, dans de simples objets

• Les hacks gèrent tous les comportements délicats à implémenter élégamment ou non prévus dans le design initial

2. Les modules

• Les modules relient les éléments d'interface (HTML, Web Components) au contrôleur

• Ils sont spécifiques à l'application, et peuvent donc être développés vite

• Ils communiquent avec le contrôleur de manière exclusivement événementielle

3. Le debug

• Des logs très complets (événements, mises-à-jour, appels Ajax, etc)
• Tout contrôleur propose une API complète accessible depuis la console
• De nombreux paramètres permettent de customiser ou désactiver ces logs

Un peu de code, pour voir

Un exemple de contrôleur

var config = {
  name: 'myController',
  properties: [{
    id: 'myFlag',
    type: 'boolean',
    value: false,
    triggers: 'updateMyFlag',
    dispatch: 'myFlagUpdated'
  }],
  hacks: [{
    triggers: 'myFlagUpdated',
    method: function() {
      this.log('myFlag is ' + this.get('myFlag'));
    }
  }]
};

Un exemple de module

var moduleConstructor = function() {
  domino.module.call(this);

  var _self = this;
  this.checkbox = document.createElement('input');
  this.checkbox.type = "checkbox";

  this.checkbox.addEventListener('change', function(e) {
    _self.dispatchEvent('updateMyFlag', {
      myFlag: _self.checkbox.checked
    });
  });

  this.triggers.events.myFlagUpdated = function(controller) {
    _self.checkbox.checked = controller.get('myFlag');
  };
};

Initialisation de tout ça

// Configuration globale:
domino.settings({
  verbose: true,
  strict: true
});

// Initialisation du contrôleur:
var myController = new domino(config);

// Initialisation du module:
var myModule = myController.addModule(moduleConstructor);

// Ajout de la checkbox dans le DOM:
var body = document.getElementsByTagName('body')[0];
body.innerHTML = null;
body.appendChild(myModule.checkbox);

Le log, lorsqu'on clique sur la checkbox

/* Le module émet l'événement "updateMyFlag": */
 > [myController] Iteration 1 (loop 1)
 > [myController]  -> Events:  ["updateMyFlag"]
/* Le contrôleur met à jour la propriété "myFlag": */
 > [myController] Iteration 2 (loop 1)
 > [myController]  -> Update:  ["myFlag"]
/* Le contrôleur émet l'événement "myFlagUpdated": */
 > [myController] Iteration 3 (loop 1)
 > [myController]  -> Events:  ["myFlagUpdated"]
/* Notre hack s'exécute: */
 > [myController] myFlag is true

Et enfin, l'API accessible depuis la console

/* Récupérer l'instance du contrôleur: */
var mc = domino.instances('myController');

/* Récupérer la valeur d'une propriété: */
console.log(mc.get('myFlag')); /* log: true */

/* Mettre à jour la propriété (directement): */
mc.update('myFlag', false);
console.log(mc.get('myFlag')); /* log: false */

/* Mettre à jour la propriété (événementiel): */
mc.dispatchEvent('updateMyFlag', { myFlag: true });
console.log(mc.get('myFlag')); /* log: true */

Démo time!

TODO-MVC

Helping you select an MV* framework

todomvc.com / Github

Une implémentation avec domino.js

(démo ici, sources ici)

On regarde le code (si on a le temps)

(le fichier "app.js" sur Github)

Merci beaucoup!

présentation dispo sur github.com/jacomyal

et faite avec Reveal.js