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.
Merci pour ce petit comparatif, c'est sûr c'est subjectif mais cela vient de ton expérience et c'est normal.
Pour ma part j'adore Prototype qui est une exemple de bonnes pratiques, il est très bien conçu et plus que complet. Un bonheur à l'utilisation.
Ce qui me donne aujourd'hui envie d'essayer les autres solutions, c'est que script.aculo.us bien que proposant des effets très intéressant reste très lourd et lent, sur des projets sérieux, utilisants intensivement JS, ça devient vite pénalisant ...
Alors je vais jeter un oeil à Dojo et MooTools (j'ai déjà jeté un oeil rapide à jQuery mais plusieurs choses m'y dérangent déjà ...)
Gros utilisateur de Prototype, il me fait gagner un temps fou, et je ne regrette pas le tps passé sur la doc...
A noter par contre qu'il est possible d'utiliser une méthode de l'object String pour appeler implicitement les templates :
....var rowTemplate = '<tr><td>#{text}</td><td>#{href}</td><td>#{timestamp}</td></tr>';
....var linkVars = {text: link.text, href: link.href, timestamp: link.timestamp};
....$('clicked_links_table').insert({
........bottom: tpl.interpolate(linkVars)
....});
n'importe quelle chaine peut donc devenir template, ce qui se révelle très pratique si doit en abuser dans un projet...
Est-ce que quelqu'un peut m'expliquer comment jQuery remplace le modèle de binding de Prototype? Parce que, je me rend compte que jQuery est effectivement supérieur (que Script.a.licious) pour ce qui à trait à la gestion des belles tites animations qui font jouir nos clients.
Par contre, sans mon event binding, cette fonction équivalente à .bind(this), qui me permet, comme dans Prototype, d'avoir le degré de contrôle équivalent à une réelle programmation objet, tout ce qu'on fait n'a aucun sens.
Aucun blog ni supposément expert en la matière n'est capable de fournir un remède à mon ignorance!
De ce que je lis de tous les blogues, c'est que jQuery est plus fun, prototype plus complexe, mais rend le code plus structuré...
Notre job n'est-il pas de faire du sens avec la complexité que nos clients ont à gérer? N'est-ce pas le but d'un code de programme, de rendre ce code lisible? Non, bien entendu, tout les fervents défenseurs de l'illetrisme informationnel vous répondront que non.
Est-ce que nos clients nous paient pour avoir du fun ou pour que leur code ait du sens? Et soit ainsi plus maintenable, plus structuré?
À mon sens, avoir du fun, c'est à la retraite que ça se passe!
Désolement vôtre,
jpthebec
La réflexion de jaaaaaaaaaaaaaab m'a fait beaucoup rire.
Alors, juste pour son information, les frameworks en question facilitent de développement JavaScript, c'est à dire client-side...
Ce sera de toutes façons, au final, toujours du JavaScript qui sera exécuté et le fait d'utiliser une clé 3G+ ou 3G- ne change rien : le code reste exécuté sur le navigateur (une connexion Ajax, il va y avoir un échange de données avec le serveur, mais lancé par JavaScript)
La syntaxe plus objet de Prototype le rend plus lisible. Vu que les languages prennent de plus en plus la voie POO je vais rester sur Prototype, d'autant plus que mes clients ne m'ont jamais dit que leurs sites sont "lents".
1 an et demi après la parution de ce billet, il y en a qui pensent toujours que Prototype est un bon choix ?
l'écosystème autour de prototype est risible, scriptaculous (et scripty 2) y compris alors que les plug-ins jQuery pullulent et ce dans tous les styles, des animations au parsing de css en passant par l'édition in-place ou la transformation de tableaux en tableaux éditable "à la word" ou petits enrichissements d'interface (autogrow ou redimensionnement "à la safari" des textareas, select drop-down multiple, etc.).
bref, l'offre est tellement riche que c'est impossible de s'en passer à moins de vouloir perdre son temps avec un snobisme étrange... ou alors il faut coder en Java et pas en PHP.
'faut être cohérent avec le niveau d'exigence qu'on a au niveau de la qualité du code.
"ouais mais le php c'est 10x plus rapide à coder pour des applis web
- pareil pour jQuery"
Il y en a surement mais ce n'est effectivement plus mon cas.
Si je devais commencer un nouveau projet demain c'est Jquery que je choisirais en effet
En effet, JQuery a l'air bien plus rapide, et c'est toujours un facteur clé aujourd'hui.
Bref, pour ma part, je suis prêt a faire des concessions afin d'améliorer ce facteur sur mes productions, quitte à travailler avec une librairie moins cohérente, lisible, ou même complète.
Pour l'instant je travaille sur Prototype, mais je me dis de plus en plus qu'il faut que je change ^^
Un petit comparatif-test qui parle de lui même (Prototype fait peur quand on voit ça) et qui a finit de me décider :
http://mootools.net/slickspeed/
Au lieu d'écrire :
$(document).ready(init);
on écrit juste :
$(function() {
// et ici on écrit tout le code
});
Fil des commentaires de ce billet