Prototype VS JQuery

[naholyr]

J'utilise prototype par habitude, je n'ai pas trop confiance dans les sélecteurs CSS qui imposent un parsing et du coup j'ai toujours le sentiment (infondé) que ça va prendre trop de ressource.
Et puis j'adore les Event.observe, Array.each, Object.extend etc... Pour la doc : http://www.prototypejs.org/api

Même jQuery semble excellent, quelques arguments/préjugés me font rester sur prototype :
- J'adore l'API prototype qui est très bien pensée (car fondée sur RoR, mais conservant une syntaxe plus explicite grâce à notre merveilleux langage qu'est ECMAScript).
- Les "write less, do more" libraries, j'en ai connu beaucoup et la plupart donnent du code "write-only" (c'est un peu le cas de RoR justement).
- Cette histoire de parsing (je n'utilise jamais $$ dans prototype justement pour éviter ça).

Mais il faudra vraiment que je me penche dessus, même au boulot je vois de plus en plus de partenaires web qui abandonnent prototype/scriptaculous au profit de jQuery. Donc je crois qu'un peu de veille techno spéciale javascript ne me fera pas de mal

Edit : après avoir revisité le site de jQuery, une chose m'a choquée et m'a rappelée pourquoi je ne l'utilisais pas. Où est passé l'orienté objet, ni même dans les plugins d'ailleurs ? Pas de Class.create() ni d'Object.extend() pour les librairies par défaut ? L'esprit Prototype à ce niveau me semble beaucoup plus "propre" et permet de faire de belles librairies avec une homogénéité du code (une convention définie pour créer des classes, et pas chacun sa méthode). Sans doute cet aspect fortement orienté objet rend l'exécution parfois plus lourde, mais ça m'est indispensable.
Du coup je range toujours aujourd'hui jQuery dans la catégorie "librairies à sortir pour de petites bidouilles" mais je n'irai jamais baser une interface riche là-dessus. Sans doute est-ce par contre très bien adapté à nos projets pour lesquels le Javascript est plus utilisé pour de "petits détails" (pour ne pas dire "petites bidouilles") que dans de gros projet de RIA.
On appréciera dans le fait que jQuery se base systématiquement sur des sélecteurs CSS que cela pousse inconsciemment le développeur à passer la première étape d'un JS dégradable : ne pas mêler JS et HTML.

[Sephi-Chan]

Pourtant, il y a bien 2 méthodes de prototypage :

• jQuery.fn.extend
  jQuery.extend
  

Le nombre de plugin de jQuery qui existe laisse tout de même penser que la création d'extensions est aisée ! :O Quand aux conventions, il suffit de respecter celles du cœur de jQuery, non ?

Je ne comprends pas ce qui te gêne.


Sephi-Chan

[naholyr]

Leur extend est juste là pour ajouter des méthodes, on est au niveau de ce qu'on fait quand on utilise des classes pour stocker des fonctions (simulation d'un "package").

Si tu veux te créer des "vraies" classes, manipuler des tableaux de manière astucieuse (Array.each, Array.slice, .shift, etc...) ou tout ce que Prototype propose, on est très loin du compte

Je dirais que jQuery c'est scriptaculous sans Prototype : c'est à dire qu'on a plein d'effet à sa disposition, une API sympa, mais le coeur n'est pas aussi complet que ce qui se peut faire dans l'API Prototype.

Mais pour donner une chance à la bête, voici quelques éléments de Prototype dont je ne peux pas me passer, quels sont les équivalents que l'on peut trouver pour jQuery ?

• Manipulation des tableaux
  
• "sucres syntaxiques" pour la création et la manipulation de classes
  
• Gestion du DOM (création d'éléments avec new Element), du positionnement, etc... (pour ça je pense qu'il répond à tout, j'ai vu passer un plugin pour absolutize, bon faut fouiller un peu)
  
• Les classes Enumerable et Hash [edit]jQuery.each semble y répondre[/edit]
  
• Les raccourcis pour gérer les évènements (isLeftClick, element, etc...)
  
• Le binding de fonction (pour changer la valeur de this dans une fonction)[edit]je dirais qu'il n'y en a a priori pas besoin dans le cadre strict de jQuery, mais ça manquera quand-même vite[/edit]
  
• Object.is*, Object.toQueryString...
  
• Les exécutions périodiques
  
• Manipulation de chaines de caractères
  

Note que je ne suis pas de mauvaise foi et je ne doute pas qu'on puisse retourner la question pour des fonctionnalités de jQuery qu'on ne retrouverait pas dans Prototype+Scriptaculous, mais je ne suis pas sûr qu'il y en ait autant a priori


En gros je dirais que jQuery est imbattable dans la gestion du DOM. Mais pour tout le reste... Or j'en conviens la gestion du DOM est la problématique number one dans 90% des cas où l'on souhaite ajouter du JS à une page.
J'ai personnellement souvent eu des besoins plus poussés et les méthodes citées plus haut me sont toutes utiles. Si je peux me contenter de jQuery je l'utiliserais avec plaisir, et je pense que dans nos jeux on n'a pas besoin de plus, à la rigueur Array.each, Event.* et PeriodicalExecuter, alors elles sont où ? Que je m'y mette pour de vrai ?

[Harparine]

Je ne connais pas jQuery depuis très longtemps mais la plupart des fonctions que tu évoques existent : le DOM est très bien géré, les lectures en boucle d'objets (each), les événements (il y a d'ailleurs un sacré paquet de trucs). Pour la manipulation tableaux, il semblerait effectivement que c'est encore assez primaire. Je crois que l'on peut changer la valeur de this mais c'est à vérifier. La classe create existe bien d'une certaine manière mais l'objet jQuery est rarement déclaré de cette manière car $(); est une déclaration de l'objet ($ est un alias de la classe jQuery).

Pour le reste, Prototype est sans doute bien plus puissant car plus mâture. jQuery est une librairie encore jeune et de nouvelles fonctionnalités apparaissent à chaque nouvelle version. Après, c'est une question de goût et de compétences : jQuery est accessible aux débutants et il est très facile de l'utiliser en liaison avec des classes CSS. Par contre, dès que ça devient un peu élaboré, il faut rajouter du javascript à l'ancienne. Espérons que le projet continuera à se développer !

[naholyr]

Pourrais-tu donner des exemples où il a fallut rajouter du "JS à l'ancienne" ? Afin de voir dans quel sens il faut contribuer pour répondre ce besoin tout simplement

[Sephi-Chan]

J'aimerai aussi savoir.

Plugin jQuery - Timer, dont je cite la description :

Timer is an extension that is loosely based on Prototype's PeriodicalExecuter.

Il y a vraiment un paquet d'extensions qui font ce qu'on veut.


Sephi-Chan

[Harparine]

C'est vrai que je n'utilise pas tous les plugins et il y en a beaucoup. Pour le javascript que j'ai du rajouter, ça n'allait pas très loin (je maîtrise très mal le javascript) mais c'était plus des fonctions perso qui convenaient à une situation bien précise. Comme je ne connais pas toutes les finesses de jQuery, je préférais coder mes propres trucs (du genre des manipulations sur des chaînes de caractères, etc.). Un exemple simple ou je mélange la syntaxe jQuery et la syntaxe classique (un menu contextuel sur une galerie de photos : un clic droit sur une miniature déroule un menu proposant d'enregistrer la photo. Ici, ce qui se passe en cliquant sur "Enregistrer" - avec l'extension contextMenu) :

Code PHP :

<?php 

$('img.miniature').contextMenu('menuPhotos', {

        bindings: {

            'download': function(t) {

                //On récupère les variables

                var idPhoto = t.id;

                var lien = $('#'+idPhoto).parent().attr('href');

                //On conserve juste l'id numérique

                idPhoto = idPhoto.substr(5, 5);

                //On appelle le script de téléchargement

                document.location.href='traitement/download.php?fichier='+lien+'&id='+idPhoto;        

            }

        }

    }); 

[naholyr]

Je dirais que tu peux réécrire le $("#" + idPhoto) en $(t) tout simplement.
Après le "t.id.substr(5, 5)" ne me parait pas modifiable (et je n'en vois pas l'intérêt).
On peut imaginer une API de redirection au lieu du document.location.href, genre une fonction $.redirect(url [, delay ]) mais c'est du détail.

Après visite plus approfondie je trouve la chose élégante mais manque de toutes les fonctionnalités que j'ai citée plus haut (ok pour PeriodicalExecuter c'est reglé, reste tout le reste ). Cela dit quand on regarde ce ne sont pas les plus importantes de Prototype, donc ça s'exporte très bien.


naholyr, bien heureux d'avoir fait dériver le sujet en

[Sephi-Chan]

La gestion des événements (très importante) est assez proche.

http://docs.jquery.com/Events

jQuery utilise bind() là où Prototype utilise observe(). jQuery propose des raccourcis qui utilisent utilise directement la fonction de l'événement (click, change, etc.), le déclenchement de l'événement appelle alors la fonction (nommée ou non) donnée :

Code :

$('foo').click(function({ alert('Click !'); });

Pour ce qui est des chaînes, des tableaux et des objets, il semble que le cœur soit assez pauvre en la matière (cf. http://docs.jquery.com/Utilities), mais je ne doute pas que des extensions doivent exister. Il en existe pour tout et n'importe quoi, plus ou moins bien.

Par exemple Checkbox Shiftclick, qui permet de (de)sélectionner plusieurs case à cocher en cliquant sur l'une d'elle puis en cliquant sur une autre en maintenant la touche Shift du clavier. C'est tout bête mais trop peu de Webmails proposent cette fonctionnalité.

Flexigrid, un petit qui fait de la pagination, du tri et plus sur un tableau HTML.

GraphTable, qui crée des graphes à partir de tableau.

Impromptu, qui permet de recréer (pour les rendre plus esthétiques et moins énervantes) des fonctions telles que confirm(), prompt() ou alert().

Petite note aussi : j'en veux à Prototype de porter ce nom car c'est très chiant de se retrouver avec leur documentation quand l'on cherche à s'informer sur la programmation orientée prototype.


Sephi-Chan

[La-source]

Petite question (qui va parraitre débutante) sais t'on empêcher le chargement d'un lien avec JQuery, je sais qu'avec prototype oui... mais avec JQuery j'ai pas encore trouver.
Et si oui merci de me dire comment :p