Comparatif Prototype vs Jquery

jblanche — Thu, 27 Mar 2008 00:36:00 +0100

Retour des billets plus "technos" avec un comparatif des deux frameworks Javascripts les plus utilisés du moment, j'ai nommé Prototype et Jquery.
Jusqu'ici j'étais plutôt Prototype, car je l'ai connu avant, qu'il est le framework par défaut de Rails auquel il est magnifiquement intégré.
Mais à force d'entendre dire que Jquery était plus esthétique plus facile, plus sympa, je me suis dit qu'il fallait que j'essai.

Il en est ressorti le billet suivant comparant le nécessaire dans chacun des deux framework pour réaliser les mêmes opérations.
Ces bouts de code correspondent en partie à ceux utilisés dans le billet Tutorial : Prototype and JSON et les fichiers sont disponibles au téléchargement (prototype / jquery).
L'application est quand à elle visible ici pour Jquery et ici pour Prototype.

Ecouter l'évènement signalant que le DOM est chargé et lancer une méthode.

Prototype

document.observe('dom:loaded', init);

Jquery

$(document).ready(init);

La syntaxe Jquery est un peu plus courte, mais à mon sens un peu moins lisible ('dom:loaded' est plus clair que 'ready' ) Pas de quoi fouetter un chat donc :

Prototype 1 - 1 Jquery

Écouter un évenement sur un ensemble d'objets du DOM

Prototype

$$('a').invoke('observe', 'click', link_click_handler);

Jquery

$('a').click(link_click_handler);

Ici clairement, la concision comme la clarté sont du côté de Jquery à moins qu'il y ait moyen de faire plus propre en Prototype ?

Prototype 1 - 2 Jquery

Réaliser une opération Ajax simple (1 callback max).

Prototype

new Ajax.Request('json.php', {

    method: 'post',

    parameters:  $H(link),

    onSuccess: function(transport){populate_links_table(transport.responseJSON);}

  })

Jquery

$.post( 'proto.php', 

        link,

        function(data, textStatus){populate_links_table(data)},

        "json");

La concision est encore légèrement du côté de Jquery, mais la lisibilité est encore pour Prototype.
Perso j'aime beaucoup l'utilisation de chaine comme clé de tableau (method, parameters...) de Prototype qui fait penser aux symboles de Ruby.
Par contre je n'aime pas le fait de devoir passer mon tableau link à la méthode $H pour que tout ce passe bien.

Pas de note ici, vous allez comprendre pourquoi juste après.

Réaliser une opération Ajax avancée (plus de 1 callback).

Prototype

new Ajax.Request('json.php', {

    method: 'post',

    parameters:  $H(link),

    onLoading: toggleLoader,

    onSuccess: function(transport){populate_links_table(transport.responseJSON);},

    onFailure: function(){alert('There was a problem')},

    onComplete: toggleLoader

  })

Jquery

$.ajax({ type: "POST",

         url: "json.php",

         data: link,

         dataType: "json",

         beforeSend: toggleLoader,

         success: function(msg){ populate_links_table(msg);},

         error: function(req,str,e){alert(str)},

         complete: toggleLoader

        });

Alors là, du coup je suis bien embetté, Jquery se met aux clés nommées également et y gagne en lisibilité mais du coup, il perd en cohérence.
Si l'on veut rajouter un callback à une requête comme celle écrite au-dessus, il suffit de rajouter 1 lignes en Prototype alors qu'il faut tout réécrire en Jquery.
A moins bien sûr d'écrire toutes ses requêtes avec la méthode de plus haut niveau .ajax et d'oublier les .post, mais ce n'est pas ce que l'on voit la plupart du temps dans les forums, tutoriels...

Autre différence, Jquery à besoin de savoir dès le départ qu'il va recevoir du JSON alors que Prototype décide dans le callback quel objet utiliser (responseJSON ici).
Deux points à attribuer ici puisque l'on en a pas attribué au cas précédent.
Pour moi l'avantage va à Prototype qui garde la même logique et facilite les modifications sur une requête tel que l'ajout de callback et ne nécessite pas de connaitre le type de la réponse avant d'en avoir besoin.

Toutefois Jquery étant clair dans le deuxième cas, je dirais 2-1 pour Prototype dans cette partie du tutoriel, soit au total :

Prototype 3 - 3 Jquery

Utiliser des templates pour insérer le code souhaité.

Prototype

var rowTemplate = new Template(

        '<tr>'+

                '<td>#{text}</td>'+

                '<td>#{href}</td>'+

                '<td>#{timestamp}</td>'+

        '</tr>'

        );

  $('clicked_links_table').insert({

    bottom: rowTemplate.evaluate({

      text: link.text,

      href: link.href,

      timestamp: link.timestamp

    })

  });

Jquery

Pas de système de template chez Jquery à ma connaissance, on doit donc faire :

function populate_links_table(link){

        $('#clicked_links_table').append(

                '<tr>'+

                        '<td>'+link.text+'</td>'+

                        '<td>'+link.href+'</td>'+

                        '<td>'+link.timestamp+'</td>'+

                '</tr>');

}

Alors là, par contre il n'y a pas photo, Ce n'est peut-être pas très visible sur un petit template comme celui ci mais le code Prototype est beaucoup plus lisible et facile à écrire, relire, débugger...

Prototype 4 - 3 Jquery

Conclusion

Évidemment, toutes ces notes sont très subjectives, mais pour ma part je vais en rester à Prototype.
Jquery est un excellent framework Javascript et est bien plus concis que Prototype dans la majorité des syntaxes mais à mon sens il y perd en lisibilité et en clarté.

Et vous, vous en pensez quoi ?

Blog Bang Bang - Tag - prototype

Comparatif Prototype vs Jquery

Ecouter l'évènement signalant que le DOM est chargé et lancer une méthode.

Prototype

Jquery

Écouter un évenement sur un ensemble d'objets du DOM

Prototype

Jquery

Réaliser une opération Ajax simple (1 callback max).

Prototype

Jquery

Réaliser une opération Ajax avancée (plus de 1 callback).

Prototype

Jquery

Utiliser des templates pour insérer le code souhaité.

Prototype

Jquery

Conclusion