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...

Titre
Document Object Model (DOM) Level 3 Events Specification
Auteurs
Doug SCHEPERS
Auteurs
Björn HÖHRMANN
Auteurs
Philippe LE HÉGARET
Auteurs
PIXLEYTOM
Editeur
W3C
Date
Chapitre
4.2 Interface CustomEvent
Titre
Document Object Model (DOM) Level 3 Events Specification
Auteurs
Doug SCHEPERS
Auteurs
Björn HÖHRMANN
Auteurs
Philippe LE HÉGARET
Auteurs
PIXLEYTOM
Editeur
W3C
Date
Chapitre
4.3 Interface EventTarget
Titre
CSS Transitions Module Level 3
Auteurs
Dean JACKSON
Auteurs
David HYATT
Auteurs
Chris MARRIN
Auteurs
David BARON
Editeur
W3C
Date
Titre
CSS transitions
Editeur
Mozilla Developer Network
Date
Titre
Modules/AsynchronousDefinition
Auteurs
  • COLLECTIF
Editeur
commonjs.org
Date