Comparatif Prototype vs Jquery
Par jblanche le jeudi 27 mars 2008, 00:36 - geeks - Lien permanent
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 ?
Commentaires
Faut quand meme etre bien calé en informatique pour suivre ton blog... Je veux bien te dire ce que j'en pense mais a vrai dire, je ne savais meme pas que les frameworks javascripts, ca existait... Donc merci beaucoup d'enrichir ma culture d'informaticien, mais je pense avoir plus de chance dans un débat sur le foot...
J'aime beaucoup Prototype et je suis jQuery de très loin. Par contre j'adore Mootools. Plus simple que prototype, tout aussi puissant, et tellement mieux que l'infâme scriptaculous pour les animations !
Intéressant ce comparatif mon John ! Tu m'as fait découvrir les templates de Prototype. Ca à l'air cool !
A quand un tuto sur la chasse aux processus utilisant le disque dur sous Ubuntu ?
Très bonne idée que ce petit comparatif...
Prototype Rocks !!!
Sans compter que c'est le framework le plus utilisé actuellement ce qui compte pas mal quand on bosse en équipe.
ps : à quand un comparatif PSG - Availlés en Chatelleraut...
Pourquoi toutes ces comparaisons au foot..? ! =)
Sinon, je dirais Prototype, Jquery, les 2 sont très bien.
Au final c'est peut être une question d'habitude, de goûts persos..
Niveau clarté et visibilité, Jquery me convient plus que bien.. Après, sur la question des templates tu gagnes un point mais je vais voir de ce coté là s'il n'y aurait pas une solution du coté de JQ.
Très bon post en tout cas =)
Et je rejoins djib en ce qui concerne scriptaculous !
Il est tout chaud (il n'existait même pas quand j'ai commencé la rédaction de ce post), mais le manque est comblé :
http://plugins.jquery.com/project/j...
Toutefois, je tenais à tester ici les frameworks sans plugins.
Car avec il y a moyen de faire beaucoup mieux pour écouter les évenements sur plusieurs objets sous Prototype, notemment avec LowPro :
Event.addBehavior({ 'span#show_hide_search.click' : MyBehavior });
Salut a tous,
J'aimerai vous alerter sur un problème que j'ai rencontré et qui est vraiment pas cool...
J'ai eu l'occaz de tester une clé 3G SFR d'accès internet. C'est top parce qu'on a le net partout, mais le gros souci c'est que vous allez sur n'importe quel site utilisant prototype et rien ne fonctionne!! avez vous pu tester ce phénomène également? avec d'autres framework? A+
salut,
c clair les deux librairies sont tres biens on trouvera tjs le pour et le contre. J ai bossé pendant un ptit moment sur prototype et je viens de passer a jquery apres quelques mois de reflexions. ce que j adore avec prototype c que la librairie est vraiment complete pour faire court c le top de la boite à outil. Quasiment tout est la pour coder sans se prendre la tete a redev des fonctions basiques qui sont po sure d etre 100% optimisé. Mais du coup prototype est lourd. Ce que j aime avec jquery c que c leger. quand j ai commencé a apprendre javascript la methode pour coder objet avec prototype etait super simple. Mais avec l experience je tourve que jquery respect plus le language javascript. Ensuite on peut aussi parler de la communauté des deux lib. J ai bien l impression que celle de jquery est plus dynamique. ya aussi le tout jeune jquery Ui tres prometteur. j oublies de parler de plein de truc mais bon. perso ce qui m a fait passer a jquery: parlons boite a outil :D avec prototype j avais une super boite a outil tro complete mais je me servais finalement tjs des memes outils donc pkoi m encombrer avec une si grosse boite. Avec jquery j ai ma ptite boite a outil de tout les jours et quand j ai besoin d'un truc vraiment soecifique je vais dans mon garage pour recuperer l outil dont j ai besoin. (jquery plugiin)
a plus
Bonne idée ce comparatif, même si effectivement un peu subjectif.
Un autre comparatif intéressant que j'approuve pour avoir déjà travaillé avec ces 2 frameworks, ainsi qu'avec MooTools :
http://www.brunosabot.com/prototype...
Par goût je préfère Prototype que je trouve plus pro, plus carré, plus puissant. Dommage qu'il n'intègre pas nativement Sriptaculous, même si de base il est déjà bien lourd.
Comme dit dans le comparatif, malgré sa syntaxe plus concise, le manque de cohésion de jQuery est une très grosse tare à mon sens. La "logique" de son implémentation semble parfois un peu fantaisiste et ses fonctionnalités un peu pauvre à côté de ses concurrents.
Par contre, il propose des options d'intégration qui lui permettent de coexister avec d'autres frameworks comme Prototype. C'est un choix lucide et un effort très appréciable.
MooTools quant à lui a de nombreux avantages avec des choix intelligents dans sa conception. Il a beaucoup pompé sur la syntaxe et l'implémentation de Prototype en optimisant les performances, mais sans en hériter toute la rigueur et la puissance. MooTools est plus récent que Prototype, il n'est donc pas encore tout à fait aussi mature. Mais il n'a pas eu à respecter des contraintes de rétro-compatibilité entre versions et du coup a opté pour une implémentation très élégante par modules, qui dans certains cas dépasse les lacunes du Maître Prototype.
En résumé de ce post qui commence à se faire long (désolé), Prototype 1.6 fait encore la loi mais gare à MooTools de plus en plus tentant depuis la 1.2.
jQuery, pourquoi pas ? Mais je ne lui vois aucun avenir à long terme.
Fil des commentaires de ce billet