Yahoo VS Prototype cas pratique (2)

Suite et fin de la comparaison Yahoo User Interface / Prototype. Il y a quelques semaines, je comparais le code utilisé pour réaliser un élément d’interface animé selon que l’on se sert de la librairie YUI ou de prototype. A l’époque j’avais menti. Je l’avais réalisé avec YUI et j’avais cherché le code pour le réaliser avec prototype ; je ne l’avais pas réalisé moi même.

Pour des raisons diverses et variées et notamment par souci de cohérence avec mes collègues qui préfèrent prototype (seigneur pardonne-leur car ils ne savent pas ce qu’ils font), j’ai refait le même élément d’interface avec prototype et scriptaculous. Et quand je dis le même, c’est le même ! Même façon de charger le script, même gestion moderne des évènements (séparation comportements, présentation et structures – pas de onclick tout crado dans le code), même façon d’appeler le script. Et oh surprise ! Le script n’est pas si lourd que ça. Par contre les librairies…

YUI

le code de defil.js

var divToAnimate = 'dg_photos';
var leftButtonId = 'scroll_left';
var rightButtonId = 'scroll_right';
scroll_right = function() {
var myAnim = new YAHOO.util.Scroll(divToAnimate, {
scroll: {by: [150, ]}
}, 1, YAHOO.util.Easing.easeOut);
var animate = function(e) {
myAnim.animate();
return false;
};
YAHOO.util.Event.addListener(rightButtonId, 'click', animate);
};
scroll_left = function() {
var myAnim = new YAHOO.util.Scroll(divToAnimate, {
scroll: {by: [-150, 0]}
}, 1, YAHOO.util.Easing.easeOut);
var animate = function(e) {
myAnim.animate();
return false;
};
YAHOO.util.Event.addListener(leftButtonId, 'click', animate);
}
YAHOO.util.Event.addListener(window, 'load', scroll_right);
YAHOO.util.Event.addListener(window, 'load', scroll_left);

Eléments de la bibliothèque chargés

Mes scripts à moi

Ce qui nous fait un total ma bonne dame de 37,3 ko.

Prototype / scriptaculous

le code de slide.js (oui, j’ai pas repris le même nom)


// JavaScript Document
Event.observe(window, 'load', initSlide, false);
function initSlide() {
myDiv = $('hideblogsmen');
leftButton = $('scroll_left');
rightButton = $('scroll_right');
Event.observe(leftButton, 'click', moveLeft, false);
Event.observe(rightButton, 'click', moveRight, false);
}
function moveLeft(e) {
new Effect.MoveBy(myDiv, 0, 100)
}
function moveRight(e) {
new Effect.MoveBy(myDiv, 0, -100)
}

Éléments de la bibliothèque chargés

Mes scripts à moi

Ce qui nous fait un total ma bonne dame de 94,9 ko tout rond [1].

En conclusion

YUI est beaucoup plus légère que le couple prototype/scriptaculous grâce à sa conception modulaire [2] mais bien plus verbeuse à cause de l’utilisation des namespace.

Autre paramètre à prendre en compte : prototype étant la librairie la plus utilisée à l’heure actuelle, vous trouverez bien plus de scripts réutilisables et quasi-prêts à l’emploi si vous optez pour cette dernière.

Maintenant, faites votre choix !

  1. Je rassure les éventuels développeurs fous qui passeraient par là : les presque 90 ko de script des librairies prototype/scriptaculous ne servent pas qu’à animer un seul élément d’interface. Ces librairies sont utilisées pour d’autres scripts sur la même page. Sinon effectivement, aucun intérêt d’utiliser des bibliothèques.
  2. on ne charge que les modules dont on a besoin contrairement à prototype où l’on est obligé de chargé les 55ko de la bibliothèque

Réagissez

Si ce billet vous a plu ou si vous voulez apporter des précisions, ou si vous n’êtes pas d’accord avec ce que je raconte, c’est ici qu’il faut vous manifester. Je me réserve toutefois le droit de supprimer toute contribution insultante ou qui n’aurait rien à voir avec la choucroute.

  1. mmmm moi je dit ……………. JQuery

  2. Dès que j’ai un moment je te colle mon objet grille ^^

  3. bon alors
    jquery pese 21 ko, je me foule pas je reprends les plugins
    ( 6,7 et 8 ko )
    passons au plus dur le code
    $(document).ready(
    function () {
    $(‘#scroll_right’).click( function(){ SlideInRight(500);} );
    $(‘#scroll_left’).click( function(){ SlideInLeft(500);} );
    });

    hoplà… bon sans les plugins 21 ko de librairies seulement

    $(document).ready(
    function () {
    $(‘#scroll_right’).click( function(){ this.animate({ right: 100 }, 500); } );
    $(‘#scroll_left’).click( function(){ this.animate({ left: 50 }, 500);} );
    });

    mais bon dans l’autre version j’ai des effets sympa en supplément à ma disposition

    les 500 sont le timer pour achever l’effet

    Ces codes dont certifié 100% faits sans tests en 10 secondes , et n’engagent que la responsabilité de leur auteur ^^

  4. L’un des avantages de YUI, c’est que le code est full object. Pas de fonctions procédurales ignobles. Et encore moins de $(machin).truc().chose().bidule(); qui n’ont absolument aucun sens.

  5. Je ne te suis pas bien Hadrien, Prototype est aussi orientée objet, et jQuery et Dojo et les autres. Après libre à toi dans ton propre code de manipuler des fonctions ou des objets mais la programmation procédurale bien maniée n’est pas plus infâmes que la POO.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *