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

YUI vs Prototype : cas pratique

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

  • un div « dg_photos » contient les images des tous les utilisateurs dont on affiche le témoignage.
  • On n’affiche que 5 ou 6 photos dans ce div.
  • On utilise deux boutons latéraux pou faire défiler les photos.

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 !

4 réponses à “YUI vs Prototype : cas pratique”

  1. jerome dit :

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

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

    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