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