Vous êtes sur Barbablog et tu kiffes jeune. Cherche sur ce blog...

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

  • animation-min.js – 14,2 ko
  • dom-min.js – 11,4 ko
  • event-min.js – 8,6ko
  • yahoo-min.js – 0,9 ko

Mes scripts à moi

  • yahoo_defil.js – 0,9 ko
  • yahoo_toggle.js – 1,3 ko

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

  • prototype.js 55,8ko
  • builder.js 4,3 ko
  • effects.js 34 ko

Mes scripts à moi

  • slide.js 0,2ko
  • blogtoggle.js 0,6 ko

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

5 réponses à “Yahoo VS Prototype cas pratique (2)”

  1. bloodrath dit :

    mmmm moi je dit ……………. JQuery

  2. bloodrath dit :

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

  3. bloodrath dit :

    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. Hadrien dit :

    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. Gregoire dit :

    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