YUI vs Prototype : cas pratique

J’ai réalisé un petit bout d’interface pour présenter des témoignages. Le principe :

Le tout animé en javascript. Si l’utilisateur n’a pas javascript, toutes les photos s’affichent selon le sacro-saint principe de la graceful degradation ou du design dégradable (la formulation anglosaxonne est quand même plus classe).

scroll demo

Voici deux morceaux de code qui permettent de réaliser ce genre d’animation, l’un avec la librairie YUI, l’autre avec les librairies Prototype et script.aculo.us.

YUI

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);

Prototype + scriptaculous

Récupéré dans le « treasure Chest » de scriptaculous, par Jeff Pennal

Effect.SlideRight = function(element) {
element = $(element);
Element.cleanWhitespace(element);
// SlideDown need to have the content of the element wrapped in a container element with fixed height!
var oldInnerRight = Element.getStyle(element.firstChild, 'right');
var elementDimensions = Element.getDimensions(element);
return new Effect.Scale(element, 100, Object.extend({
scaleContent: false,
scaleY: false,
scaleFrom: 0,
scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width},
restoreAfterFinish: true,
afterSetup: function(effect) { with(Element) {
makePositioned(effect.element);
makePositioned(effect.element.firstChild);
if(window.opera) setStyle(effect.element, {top: ''});
makeClipping(effect.element);
setStyle(effect.element, {width: '0px'});
show(element); }},
afterUpdateInternal: function(effect) { with(Element) {
setStyle(effect.element.firstChild, {right:
(effect.dims[0] - effect.element.clientWidth) + 'px' }); }},
afterFinishInternal: function(effect) { with(Element) {
undoClipping(effect.element);
undoPositioned(effect.element.firstChild);
undoPositioned(effect.element);
setStyle(effect.element.firstChild, {right: oldInnerRight}); }}
}, arguments[1] || {})
);
}

Effect.SlideLeft = function(element) {
element = $(element);
Element.cleanWhitespace(element);
var oldInnerRight = Element.getStyle(element.firstChild, 'right');
return new Effect.Scale(element, 0,
Object.extend({ scaleContent: false,
scaleY: false,
scaleMode: 'box',
scaleFrom: 100,
restoreAfterFinish: true,
beforeStartInternal: function(effect) { with(Element) {
makePositioned(effect.element);
makePositioned(effect.element.firstChild);
if(window.opera) setStyle(effect.element, {top: ''});
makeClipping(effect.element);
show(element); }},
afterUpdateInternal: function(effect) { with(Element) {
setStyle(effect.element.firstChild, {right:
(effect.dims[0] - effect.element.clientWidth) + 'px' }); }},
afterFinishInternal: function(effect) { with(Element) {
[hide, undoClipping].call(effect.element);
undoPositioned(effect.element.firstChild);
undoPositioned(effect.element);
setStyle(effect.element.firstChild, {right: oldInnerRight}); }}
}, arguments[1] || {})
);
}

Voilà, ça se passe de commentaires. Enfin bon, si tu veux commenter, lecteur, tu es le bienvenu !

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. Bien que plus simple à implémenter (un code plus court, mais pas forcément plus lisible), le modèle YUI semble plus rigide, moins propice à une adaptation personalisée.

    Je ne connais pas YUI, je suis donc mal placé pour comparer les deux.

    Neanmoins il me semble évident que le choix d’une librairie javascript doit se faire en fonction du temps que l’on souhaite investir dans son exploitation.

    Prototype/scriptaculous: un max de possibilités, mais un investissement en conséquence

    YUI: Des possiblités plus limitées, mais plus simple à mettre en oeuvre.

  2. A mon sens, la simplicité de mise en oeuvre est plutôt une qualité. Quant aux possibiltés de YUI, tu peux en avoir un aperçu dans un article rédigé par Dustin Diaz sur Vitamin.com : http://www.thinkvitamin.com/features/javascript/15-things-you-can-do-with-yahoo-ui. Dans cet article, il compare d’ailleurs la librairie à un couteau suisse qui t’offre la possibilité de faire à peu près tout ce que tu veux :

    it lets you make up your own effects by giving you the finely crafted tools (like a utility knife) to make what you want.

    Ok, il prêche un peu pour sa paroisse, vu qu’il est développeur de chez Yahoo! Cependant, c’est vrai, il existe beaucoup plus de scripts à copier/coller/adapter avec les librairies Prototype et scriptaculous, et c’est plutôt ça la grande force de prototype (en plus d’être une excellente librairie). De ce côté là, YUI est un peu plus sec, pour l’instant…

  3. […] 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 je vous avais menti chers lecteurs. 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. […]

  4. J’avoue que je n’ai pas eu le courage de me plonger dans le code que tu as mis mais la longeur du code pour créer un effet ne montre en rien la qualité d’une lib.

    La seul chose qui se passe de commentaire c’est la différence de temps entre le chargement de YUI et Prototype.

    YUI propose certe des choses qui dépassent parfois ce qu’on pourrai imaginer mais le temps de chargement de la lib me desespère.

Laisser un commentaire

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