Prototype vs Jquery

**Myfred** · 26/02/2009, 10h40

Bonjour,
une question qui peu être récurrente sur internet, qui me touche en depuis quelques mois.

Je travail sous le framework prototype et scriptaculous que je maitrise maintenant très bien.

Pas que je m'en lasse, mais je suis toujours en eveil techno sur les bibliothèques javascript et je me posais la question, si aujourd'hui il n'est pas plus judicieux de bosser sous Jquery qui à mon sens commence à devenir intéressant en terme de flexibilité, simplicité, accessibilité...

J'aimerai bien avoir vos avis.
Merci

**RomainVALERI** · 03/03/2009, 21h56

La question me semble d'autant plus intéressante que je suis dans la même situation que toi ^^
J'ai pas mal utilisé le duo Prototype & script.aculo.us et j'adore ça, mais j'entends beaucoup parler de jQuery et je n'ai pas le temps de l'essayer pour le moment, alors...

Allez les jQuerystes ! donnez-nous votre avis*

* (enfin bon je veux dire : SI vous avez déjà utilisé Prototype aussi bien entendu ^^)

**marcha** · 05/03/2009, 10h13

Salut,

Pour ma part j'ai abandonné prototype pour jQuery et je ne reviendrais
pas en arrière :-) ça vaut la peine de l'essayer.

**RomainVALERI** · 05/03/2009, 11h49

Même si tu ne donnes pas les raisons de ton choix, j'ai déjà eu l'occasion de constater que tu es toujours d'excellent conseil

je vais sérieusement envisager de tester jQuery ^^

**hansaplast** · 10/03/2009, 19h17

avec le peu que j'ai pratiqué de prototype, la difference majeure, est la lisibilité :
avec jquery, non seulement, tu peut coder a 90% avec des selecteurs CSS, mais, en plus, chaque fonciton renvoie un objet jquery, tu peut donc les chainer entre elle. A cela, tu ajoute l'usage intensif des foncitons anonymes, et tu as un code dense mais lisible.

exemple (au hasard) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$('.tableRowDataDyn tbody tr:visible td.c0').each(function(){
    console.debug($(this).text().trim())
});

ceci, en trois lignes, te recupere tous les td, avec une classe c0, contenu par un tr actuellement affiché, et contenu par la classe "tableRowDataDyn ".
ca récupère le contenu texte et le trim.

**SpaceFrog** · 10/03/2009, 19h53

oui le coté selecteurs js accessibles pour la selection des objets est un serieux plus
j'ajouterais à cela de nombreux plugins sympas.

A noter que l'on peut avec JQuery intégrer prototype

**RomainVALERI** · 11/03/2009, 09h13

Envoyé par hansaplast

avec le peu que j'ai pratiqué de prototype, la difference majeure, est la lisibilité :
avec jquery, non seulement, tu peut coder a 90% avec des selecteurs CSS, mais, en plus, chaque fonciton renvoie un objet jquery, tu peut donc les chainer entre elle. A cela, tu ajoute l'usage intensif des foncitons anonymes, et tu as un code dense mais lisible.

Heu...je comprends tout-à-fait que les points que tu cites sont des avantages, mais... ce ne sont pas de bons critères de différenciation entre jQuery et Prototype à mon sens, parce que Prototype fait aussi tout ça ^^

Alors ? quels autres avantages ?

Niveau portabilité et simplification des traitements ajax, jQuery c'est aussi bien fait que Prototype ? mieux ? ^^

**marcha** · 11/03/2009, 10h10

Bonjour,

Il existe de nombreux comparatifs sur le web entre JQuery et Prototype,
on sent presque un coté "religieux" dans ces comparatifs :-)

J'aimerai souligner qu'un framework a une philosophie, et que celle-ci vous
incite à coder d'une certaine manière.

Pour illustrer ceci, voici un squelette d'un bout d'application que j'ai
d'abord écrite avec prototype puis réécrite avec jquery.

prototype

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
function init() {
	$$('.ed_zone').each( function(e) {
		new ImageZone(e);
	});
}
 
var ImageZone = Class.create();
 
ImageZone.prototype = {
 
	initialize: function(e) {
		this.element = e;
		Event.observe(e, 'mouseover', this.handleMouseOver.bindAsEventListener(this));
		Event.observe(e, 'mouseout', this.handleMouseOut.bindAsEventListener(this));
		Event.observe(e, 'click', this.handleClick.bindAsEventListener(this));
	},
 
	handleMouseOver: function(event) {
		this.element.addClassName('ed_highlight');
	},
 
	handleMouseOut: function(event) {
		this.element.removeClassName('ed_highlight');
	},
 
	handleClick: function(event) {
		...
	}
}

jquery

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
$(function() {
	$('.ed_zone').makeEditable();
}
 
(function($) {
 
  $.fn.makeEditable = function() {
 
	return this.each(function() {
		var obj = $(this);
		obj.mouseover( function(event) {
			$(this).addClass('ed_highlight');
		});		
		obj.mouseout( function(event) {
			$(this).removeClass('ed_highlight');
		});		
		obj.click( function(event) {
			...
		});
	});
  };
 
})(jQuery);

Pour moi prototype nous incite à utiliser une notation plus proche de la POO,
à créer des classes.

De l'autre coté, Jquery incite à utiliser une approche orientée "plugin", en
étendant jquery

Lors de mes débuts avec Jquery, je cherchait désespérément comment
créer des classes, puis en découvrant les plugins, je me suis adapté à
la philosophie de jquery et j'ai retrouvé mes repères.

Je trouve que la librairie prototype incite à travailler avec javascript comme
si c'était un langage POO classique comme java par exemple.

Alors que Jquery n'impose pas d'utiliser javascript pour ce qu'il n'est pas.

Je trouve personnellement que Jquery est plus proche de javascript. (c'est
peut-être aussi pour ça qu'il est plus rapide).

Et en dernier lieu, l'approche "plugin" de jquery favorise la participation
communautaire, et les nombreuses extensions que l'on trouve pour jquery
le prouve.

**DoubleU** · 11/03/2009, 10h20

Je pense que la philosophie de jQuery et prototype est un peu différente.

jQuery se contente de manipuler le DOM alors que Prototype a un champ d'action plus large, puisqu'en plus de l'objet Element, il touche beaucoup d'autres objets (Array, Function, String, Form, ect...).

Par ailleurs, la fonction $ dans jQuery retourne l'objet jQuery, alors que dans prototype, $ renvoie un Element enrichi des méthodes du framework. Du coup, avec jQuery on perd l'acces a tous les attributs/méthodes du DOM classique (corrigé avec l'ajout de l'attribut context dans les dernieres versions je crois). Perso, ce comportement me gêne un peu.

Edit:

Pour moi prototype nous incite à utiliser une notation plus proche de la POO,
à créer des classes.

De l'autre coté, Jquery incite à utiliser une approche orientée "plugin", en
étendant jquery

Tout a fait d'accord, et je pense que c'est pour ca que j'ai tendance à préférer prototype, même si je l'utilise au final assez peu ^^

**SleTT** · 11/03/2009, 10h27

Tout à fait d'accord avec toi Marcha...

Mon avis est que jQuery a une syntaxe beaucoup plus simple à utiliser, tant au niveau des sélecteurs que de la manipulation des DOM en eux même. C'est très intuitif.

De plus, j'ai l'impression (mais je me trompe peut être) que jQuery est de plus en plus flexible, comme on le dit avec un collègue au boulot, la seule chose que Jquery ne fait pas, c'est le café...

Les requêtes Ajax sont simples avec prototype et jQuery, mais les sélecteurs (On en parle tout le temps dit donc... ) n'ont rien à voir, qui n'a pas gagné beaucoup de temps en reprenant une fonction après l'avoir écrit de manière très lisible?

L'exemple de Hansaplast cadre bien ce fait. Pour moi le choix est fait en tout cas

**marcha** · 11/03/2009, 10h46

Envoyé par DoubleU

avec jQuery on perd l'acces a tous les attributs/méthodes du DOM classique (corrigé avec l'ajout de l'attribut context dans les dernieres versions je crois). Perso, ce comportement me gêne un peu.

L'élément DOM est facilement accessible avec jQuery, par exemple:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$('#toto')[0]
ou 
$(this)[0]

Le context dont tu parles fait référence à un élément DOM utilisé comme
point de départ pour une selection, voir l'argument context passé
a la fonction $(), par exemple:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
var truc = $('#toto');
// sélectionne les liens dans des li, mais uniquement enfants de truc
$('li a', truc).context // vaut ici $('#toto')[0], l'élément DOM servant de point de départ

**hansaplast** · 11/03/2009, 11h03

et puis un truc tout bête, mais au final qui pèse énormément, en tout cas, avec moi : la doc de jquery est un exemple du genre : propre, clair, rangé, commentée et avec exemple (note particulière pour la version adobe air et sa rapidité)

ps :
pour ce qui est de récupérer les éléments DOM, il suffit de faire un :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('...').get(0)

a ne pas confondre avec :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('...').eq(0)

qui réduit le dataset au premier élément
équivalent à

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('...:eq(0)')

pour ce qui est de la syntaxe OO ou pas, je en suis pas d'accord, jquery propose juste une syntaxe fluide, mais, la notion de plugin ne peut elle être comprise comme un système de namespace : tout est stocké dans l'objet jquery, en effet, mais, c'est justement le namespace de base qui lui permet d'avoir un mode noconflict. M'enfin, a titre personel, je ne fait quasiment jamais de plugin, généralement, un gros pavé de $(document).ready(...) suffit, et reste relativement propre, grâce, encore une fois, a la syntaxe épurée de jquery.
(le fanatisme est pas loin, dsl)

**DoubleU** · 11/03/2009, 11h08

Ah ok. Faut parcourir avec each et le this représente l'objet, j'avais pas vu ^^.

Fin ce qui me gene (je m'étais mal exprimé au dessus), c'est de ne pas retrouver comme dans prototype les objets DOM étendus des méthodes du framework.

Par exemple, avec prototype, je peux faire ca:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$$("a").each(function(elt){
  console.log(elt.hasClassName("foo")
)})

C'est quoi l'équivalent avec jQuery? Si je fais ca:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$("a").each(function(){
 console.log(this.hasClass("foo")
)})

Je me mange assez logiquement une TypeError: this.hasClass is not a function

**marcha** · 11/03/2009, 11h23

Envoyé par DoubleU

Fin ce qui me gene (je m'étais mal exprimé au dessus), c'est de ne pas retrouver comme dans prototype les objets DOM étendus des méthodes du framework.

D'accord avec ça, c'est bien pratique dans prototype (mais je trouve
qu'il y a trop par défaut, on en utilise peu en fin de compte)

Envoyé par DoubleU

C'est quoi l'équivalent avec jQuery?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$("a").each(function(){
 console.log($(this).hasClass("foo"));
});

**RomainVALERI** · 11/03/2009, 11h26

Bon, les choses deviennent de plus en plus claires

Je comprends mieux pourquoi Prototype m'a plu dès le départ : j'ai beaucoup d'affinités avec la POO (notamment Java ^^) et la logique qui s'en dégage me semble naturelle et intuitive. Par contre, je conçois très bien que l'on puisse ne pas aimer cette approche.

Quoi qu'il en soit, ça ne me dispensera pas de pratiquer jQuery quand même, histoire de comprendre le code jQuery que je ne manquerai pas de rencontrer dans mes futurs développements web...

**DoubleU** · 11/03/2009, 11h30

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$("a").each(function(){
 console.log($(this).hasClass("foo"));
});

Tout bete mais j'arrive pas a m'y faire, ca me parait vraiment pas naturel

D'accord avec ça, c'est bien pratique dans prototype (mais je trouve
qu'il y a trop par défaut, on en utilise peu en fin de compte)

Comme dans tous les langages objet, t'as pas forcément l'utilité de toutes les méthodes ^^

**Bovino** · 11/03/2009, 14h05

En ce qui me concerne, j'aurais tendance à aller dans le sens de DoubleU. L'approche de Prototype est plus globale et concerne l'ensemble du noyau JavaScript : ajout de nombreuses méthodes particulièrement utiles (lorsqu'on les connait bien sûr

) là où je trouve que jQuery insiste essentiellement sur l'accessibilité des éléments du DOM. Donc, au final, plus de souplesse pour jQuery pour sélectionner des collections d'éléments du DOM, mais plus de facilité pour manipuler l'ensemble des objets JavaScript.

Sinon, en ce qui concerne :

et puis un truc tout bête, mais au final qui pèse énormément, en tout cas, avec moi : la doc de jquery est un exemple du genre : propre, clair, rangé, commentée et avec exemple

là je suis pas trop d'accord, la doc jQuery (sur le site, pas version AIR) est d'une lenteur affligeante alors que celle de Prototype ets selon moi mieux organisée, mieux commentée (bien que ce point évolue pas mal en s'équilibrant) et beaucoup plus rapide.

Cependant, ma tendance actuelle est plutôt de me passer de framework...

**marcha** · 11/03/2009, 17h05

+1 avec Bovino, prototype est une extension du langage javascript dans son
ensemble, jquery se limite essentiellement aux manipulations dom.

**hansaplast** · 11/03/2009, 18h17

c'est là que je devient limité dans mon analyse de prototype, j'ai surtout utilisé scriptaculous, et n'ai finalement pas senti (probablement car je ne le connait pas) le besoin d'utiliser les ajouts que fait prototype au JS.

quelqu'un aurait-t-il 1-2 exemples? Car en fait, je voit pas trop de quoi il s'agit.

tient j'en profite pour une digression : y'a t il avec prototype un équivalent a a jquery-ui / dojo-dijit-dojox ?

(je suis en grande phase de brainstorming pour un future tres gros projet avec un penchant pour jquery ui malgré le peu d'ui et le choix du ZF de privilégier dojo)