reconstruction de la librairie javascript rnb

Premier rapport d'étape de la reconstruction de la librairie javascript rnb : les grandes lignes ont été définies ; reste a tout mettre en place.

  1. Normalisation de la gestion des événements.

  2. Utilisation des transitions CSS 3 pour les animations.

  3. Organisation de la librairie sous forme de modules.

  4. Abandon progressif du support des anciens navigateurs.

Une première évolution a consisté à normaliser les objets événements émis par de nombreux composants de la librairie en adoptant l'interface CustomEvent des recommendations DOM 3. Elle n'est pas encore entièrement implémentée mais l'API est disponible. Cette gestion passe par une « factory », rnb.createEvent : si l'interface CustomEvent est supportée par le navigateur, la méthode utilisera le constructeur natif du DOM (document.createEvent), sinon elle retournera une instance de l'objet rnb.CustomEvent. Quand tous les navigateurs supporteront nativement ce type d'événemenent, il suffira de « débrancher » la construction de l'objet. Un second aspect de cette normalisation a été l'adoption de l'interface EventTarget pour caractériser les composants capables d'émettre des événements. C'était déjà implicitement le cas ; il suffisait de corriger la signature de certaines méthodes.

Une deuxième modification a pour but de tirer partit des nouvelles fonctionnalités permises notamment par les CSS 3, en particulier les transitions, avec l'adaptation de l'objet rnb.fx.Anim : quand cela sera possible, il s'appuiera donc sur les possibilités du navigateur. Reste que la gestion des transitions peut poser problème :

  • Difficile parfois de les contrôler quand on modifie en même temps des styles non animés - ce qui force le rendu de l'élément.
  • L'événement de fin de transition est émis pour chaque style modifié alors que l'objet rnb.fx.Anim émet un unique événement pour l'ensemble de l'animation.
  • Cet événement n'est pas émis lorsque les valeurs de début et de fin du style à animer sont identiques ; cela paraît logique mais il est parfois nécessaire d'être tout de même avertit, ne serait-ce que du fait que l'animation n'a pas eu lieu.

Enfin, l'évolution la plus profonde va consister à repenser la manière dont les différents objets sont déclarés / créés. Jusqu'à présent, un objet était défini dans un fichier dédié de la manière suivante :

rnb.foo = function () {
    rnb.baz.call(this);
};
rnb.foo.prototype = {
    createBar: function () {
        this.bar = new rnb.bar();
        this.quxMethod();
    }
};
rnb.fwk.register({
    "name"      : 'rnb.foo',
    "depend"    : ['rnb.bar'],
    "extend"    : "rnb.baz",
    "mixins"    : ['rnb.qux'],
    "options"   : ['css']
});
Création de l'objet rnb.foo dans un fichier foo.js.

La méthode rnb.fwk.register se chargeait d'importer les dépendances de l'objet (propriétés depend, extend et mixins) puis de construire l'objet (propriétés extend et mixins).

Dorénavant, les objets seront défini ainsi :

rnb.define('rnb.foo', ['rnb.bar', 'rnb.baz', 'rnb.qux'], function () {
    rnb.foo = rnb.create({
        constructor: function () {
            rnb.baz.call(this);
        },
        createBar: function () {
            this.bar = new rnb.bar();
            this.quxMethod();
        }
    }, rnb.baz, rnb.qux);
}, ['css'])
Nouvelle syntaxe de déclaration et de création d'un objet.

Le chargement des dépendances et la création de l'objet sont séparés et gérés par deux méthodes distinctes, rnb.define et rnb.create respectivement. Cette dernière abandonne la distinction pour le moins artificielle entre « extend » et « mixins » : la librairie n'utilise en faite que les mixins. Voir la documentation pour plus de détail. Le but est de se rapprocher progressivement des spécifications qui voient peu à peu le jour dans la manière d'organiser son code javascript en modules.

A suivre...

SCHEPERS, Doug ; HÖHRMANN, Björn ; LE HÉGARET, Philippe, et al.. Document Object Model (DOM) Level 3 Events Specification. W3C, . 4.2 Interface CustomEvent

SCHEPERS, Doug ; HÖHRMANN, Björn ; LE HÉGARET, Philippe, et al.. Document Object Model (DOM) Level 3 Events Specification. W3C, . 4.3 Interface EventTarget

JACKSON, Dean ; HYATT, David ; MARRIN, Chris, et al.. CSS Transitions Module Level 3. W3C,

CSS transitions. Mozilla Developer Network,

COLLECTIF. Modules/AsynchronousDefinition. commonjs.org,