jQuery, Mootools… les librairies JavaScript
Aujourd’hui je vais vous parler des librairies JavaScript. Tout bon informaticien qui se respecte est un gros fainéant qui a encore des morceaux de chips bolognaise dans sa barbe, composée de poils durs mais aussi de ceux de la puberté, vous savez, ceux qu’on a jamais vraiment voulu couper. Bref, il est tout à fait normal de ne pas vouloir refaire ce que des personnes ont déjà codé. C’est un fait (si bien sur ça ne vous apporte rien de plus qu’une perte de temps). Il arrive donc fréquemment lors de la conception d’un site Internet que l’on souhaite intégrer une fonctionnalité qui nous parait cool (en ce moment, il y a souvent le mot Ajax/Web2 qui traine a coté du nom de cette fonctionnalité) mais qui est franchement casse-couille à mettre en place. Heureusement pour vous, des librairies JavaScript sont là pour vous faire gagner un temps fou.
Elles ont pour but de vous faciliter la vie avec le JavaScript qui est par défaut un langage vraiment indigeste. Elles vous permettront avec une syntaxe facile et surtout en étant cross-browser (c’est à dire que le code produit le même résultat sur tous les navigateurs) de gérer vos pages HTML. Elles permettent d’accéder facilement à des éléments div, tableau, etc et entre autres d’y appliquer des effets pour les afficher, cacher, faire glisser de droite à gauche ou encore de les faire disparaitre avec un fondu des plus coquet. On peut aussi utiliser les fonctions d’XMLHttpRequest plus connu sous le doux nom d’Ajax pour pouvoir modifier votre page en interogeant des pages distances sans recharger toute votre page. Elles permettent aussi d’utiliser pas mal de fonctions qui vous faciliteront la tache tout au long de vos développements JavaScript. De quoi vous évitez beaucoup de boulot. Reste à décider lequel choisir.
jQuery (site officiel) : Surement le plus populaire. Il est facile à prendre en main et une des fonctionnalités que j’apprécie énormément c’est la possibilité d’enchainer les fonctions. Tester certaines fonctions ici mais la page et les démos ne montrent pas vraiment toutes les possibilités de ce framework.
Prototype (site officiel) : Très connu lui aussi et traine souvent avec script.aculo.us. C’est d’ailleurs son principal intérêt car il est à mon gout un peu moins bien que jQuery bien que mieux commenté. On se retrouve vite à faire en plusieurs lignes ce qu’on aurait fait en une seule avec jQuery. Vous pouvez voir des démos ici.
Mootools (site officiel) : Celui que j’utilise en ce moment. Je l’ai rajouté aussi sur Carrefour.fr par exemple, c’est un peu mon petit protégé du moment. Il dispose de très jolies animations, et possède une doc’ agréable à lire et plutôt complète. De nombreux exemple sont disponible ici.
Dojo (site officiel) : je vous parle de celui là mais je ne l’ai pas encore testé. Il semble disposer d’énormément de fonctionnalité (mail, fisheye, etc) et à première vue dispose d’une documentation assez impressionnante. Par ici pour les démos.
Voilà, je n’ai pas parlé de Yahoo User Interface Librairy (YUI) que je ne connais pas du tout, ni de plusieurs autres frameworks. Bien sur la question que vous devez vous poser (si tout cela vous intéresse) c’est "lequel dois-je choisir ?" Et bien il n’y a pas vraiment de réponse. Certains framework sont plus rapide que d’autres. Certains offrent des fonctionnalités plus exotiques. C’est à vous de vous faire votre idée en fonction de vos besoins !

3 avril 2008 à 1:33 Citer
Perso je suis passé par Prototype et YUI. Depuis quelques mois je n’utilise plus que jQuery quand j’ai besoin de faire de l’Ajax.
Y’a des trucs vraiment pas mal sur YUI, le YUI reset CSS par exemple.
3 avril 2008 à 7:45 Citer
J’utilise Mootools, c’est selon moi le plus rapide, et le plus compatible. Au début j’utilisais Script.aculo.us, mais sous certains navigateur en environnement Linux, il lui arrivait de ramer.
De plus Mootools est très sympa à prendre en main et très souvent mis à jour.
3 avril 2008 à 9:09 Citer
Umh, ouais, sauf que mootools, il nécessite 3000 lignes de code embarqué dans ta source pour faire une pauvre cellule contextuel de description par exemple. Scriptaculous s’est bien amélioré depuis.
3 avril 2008 à 9:56 Citer
Pas vraiment, puisque tu peux choisir quels modules tu veux intégrer lors du download de Mootools.
Moi perso c’est mon préféré : c’est juste un framework (pas de trucs inutiles concernant l’UI, contrairement à YUI), et il est vraiment très facile a prendre en main, tout en permettant de réduire un maximum son code.
3 avril 2008 à 11:03 Citer
Merci pour ce listing. Je connaissais que jQuery mais j’ai jamais vraiment chercher a en trouver d’autre. Ah et j’ai lu tes autres billets, ton blog est super interessant!
3 avril 2008 à 15:53 Citer
ben moi je code ce dont j’ai besoin ….
3 avril 2008 à 16:23 Citer
Hum je serais curieux de savoir ce que tu codes. Je pense que tu ne parles pas des mêmes fonctions que nous. Il y a surement plein de trucs basics que tu peux faire directement par toi même. Mais beaucoup d’effet sont vraiment galère à mettre en place sans parler du cross-browser.
3 avril 2008 à 18:23 Citer
J’suis un peu dans le même genre que toi :s
Si j’veux une fonctionnalité, je préfère la créer, quitte à me faire chier pour qu’elle marche mais au moins, j’aurais pas re-sucer un code utilisant une librairie.
Mais attention! J’ai pas dis que ça ne servait pas ! J’utilise pour ma part la librairie XHRClass de Thanh et ça me sert que pour l’Ajax en fait.
Les slides, effects fade in/out, je code et la documentation du web est assez complète pour que mon code soit rétro-compatible et fonctionnel.
J’ai jamais vraiment trop compris l’intérêt des librairies toutes faites qui font qu’en fin de compte t’as pas developpé de lignes de code mais t’as juste utilisé une appli web de quelqu’un d’autre.
Super pour la créativité et la découverte du fonctionnement du comment ça marche :s !
P.S: Je sens venir les remarques me prouvant le contraire, je vous écoute :)
3 avril 2008 à 18:44 Citer
L’intérêt, c’est que tout le monde ne code pas pour s’amuser et avec un délai infini. Avoir des trucs qui marchent parfaitement et qui sont directement utilisables, c’est quand même un peu pratique.
3 avril 2008 à 21:33 Citer
C’est sur que si tu as du temps à perdre, que tu ne connais rien au javascript et que tu souhaites découvrir le langage. Oui, c’est mieux de faire des trucs avec ses doigts. Mais sérieusement, quel intérêt quand tu refais la fonctionnalité pour la énième fois ? Et je ne parle pas du point qu’à soulever Netsabes qui est encore un autre cas.
Il vaut quand même mieux réfléchir à comment améliorer la navigation à l’aide de ses outils plutôt que de réinventer la roue à chaque fois.
4 avril 2008 à 0:15 Citer
Les frameworks c’est pas (que) un truc de flemmard ou de kéké qui veut faire des slide dans tous les sens.
Un framework comme Mootools permet d’étendre et d’améliorer considérablement Javascript pour le mettre pratiquement au niveau d’un AS3, en plus d’y ajouter une tonne de fonctionnalité et de raccourcis (surtout pour la manip du DOM) et autre oubli des versions JS embarquées par IE.
4 avril 2008 à 17:06 Citer
Mais est-ce que tu sens que c’est toi qu’à fait le bousin à la fin ?
Moi en tout cas non, j’aurais l’impression d’avoir fait ce qu’un enfant connaissant jQuery/rOnRail/etc pourrait faire en tapant la bonne ligne de code.
Okay pour le cas d’Anonyme, ça aide vachement à developper son appli; je le reconnais pour symphony.
Okay pour le cas de Netsabes, mais là si t’as pas le temps à consacrer pour developper tes appli, autant prendre un CMS, quelque chose de déjà mis en place.
Mais pour ce qui est du cas de jQuery, j’ai l’impression de me servir d’un langage dans un langage, à la fin ya pas de créativité/et/ou de prise de tête; ça a jamais aidé à comprendre comment le système fonctionnait.
Pour ma part, je n’utilise qu’XHRClass comme j’ai dis plus haut et je developpe mon framework se servant de cette classe. Certains diront que c’est con vu que les autres ont déjà fait ça, que ça a eu tellement de reflexion qu’au bout du compte c’est stable et plus productif.
Mais, je préfère (et c’est mon avis) faire mon framework, mes classes de A à Z qui seront réutilisées dans mes autres projets (bien qu’interne) et dont le but n’est pas d’être distribué publiquement non plus, mais au moins, je pourrais modeler comme je le souhaite et savoir ce que telle ou telle fonction fait et comment la modifier, ajouter des possibilités plutôt que de prendre quelque chose qui va tout me macher et dont je n’aurai aucun contrôle de modification, juste d’execution.
Je sais pas si on peut apparenter ça à un effet de mode, ya tellement de site maintenant qui utilise les différentes librairies et langage dans un langage que ça devient naturel. Je remet pas en cause l’utilité de la chose, je dis juste qu’on répare pas forcement une voiture parce qu’on a pris les bons outils.
5 avril 2008 à 0:49 Citer
C’est tout à ton honneur de vouloir faire ton propre framework. Si tu n’utilises pas un framework par peur de ne pas comprendre ce qu’il fait, et bien, je sais pas trop quoi te dire… Le but du framework n’est pas de t’éviter de comprendre… Au lieu de perdre du temps à refaire des fonctions qui sont déjà faites, tu vas pas me dire que refaire un truc qui existe 500 fois peut être qualifié de créatif ? Pourquoi ne pas utiliser ton cerveau à faire des trucs créatifs à partir de ces frameworks ?
Je veux dire, ton discours sonne très cool etc. Mais c’est à cause de ça qu’on avance pas et que les systèmes d’infos sont lents… Tu imagines si tout le monde faisait comme toi ? "Oh bien sur je pourrais re-utiliser mySQL mais je ne comprendrais pas tout ce qu’il y a derrière, je vais donc me faire mon propre système de base de données." Je prends un exemple extrème mais tu vois ou je veux en venir ?
Personnellement je préfère partir de ces frameworks et essayer d’être créatif à un niveau supérieur. Et c’est là que ça devient intéressant. Et puis, je suis sur que tu n’es pas idiot et que tu n’as pas besoin de refaire de fond en comble un framework JS pour le comprendre. Pourquoi ne pas essayer d’améliorer l’expérience utilisateur ? Pourquoi ne pas essayer de pousser ces frameworks pour voir ce qu’on peut en tirer ?
Je comprends totalement ton point de vue. Mais pour moi ce n’est pas la bonne façon de faire avancer les choses. Et puis rien ne t’empêche de taper dans ses librairies. C’est l’intérêt de l’opensource, monde auquel tu n’as pas l’air d’appartenir.
Par contre à la lecture de ton commentaire je ne sais pas vraiment si on est sur la même longueur d’onde quand on parle de re-use etc. Donc ne prend pas mal mon commentaire s’il te plait.
5 avril 2008 à 21:11 Citer
Non non pas de souci, si j’ai décidé de mettre mes idées sur papier web c’était surement pas pour ne pas les soutenir :) Y’a pas de mal dans ce que tu dis, je le prend bien.
Dans tout ce que je dis, je le dis pour un aspect tout à fait personnel, du coding fait maison, pour des projets persos ou autre; pour le domaine professionnel en entreprise où l’utilisation de librairies est plus que recommandée (bien que ce soit des librairies maisons), ça ne concerne pas ça.
T’as vraiment pas l’impression que quand tu utilises des classes, librairies, etc… tu composes plutôt qu’impose ? Tu as pas la sensation d’être l’auteur de ton taff, t’as l’impression d’avoir appuyer sur le bon bouton au bon moment, d’avoir agencer les bonnes chose aux bons endroits; je ne ressent carrément pas cette sensation de fierté d’avoir fait un travail propre et qui va où je lui ai demandé d’aller.
En ce qui concerne l’open source, je trouve ça louable de mettre à disposition ces librairies, je n’ai rien contre l’open-source et bien qu’ayant quelques projets de ci-de la, j’ai même pour projet d’en mettre un (bien que je préfère une license CC que GNU GPL) à disposition.
Après, c’est peut être (surement) parce que je me suis fait tout seul au langage info. que j’ai ça dans les veines de savoir exactement ce que je veux faire et comment je vais le faire; et donc renie un peu ce qui est déjà fait, parce que je pourrais le refaire avec le bonus +1 de compréhension du fonctionnement. Mon discours semble cru, limite anti-sociable, à la limite d’une croisade contre les users de lib mais non, ce n’est que mon point de vue, que vous utilisiez telle lib qu’une autre, je vous aimerais du pareil au même.
Ce que je pourrais rajouter aussi comme argument serait qu’un framework intègre beaucoup de chose. Ces choses, sont-elles vraiment nécessaires à tous les niveaux ? Si tu veux juste manipuler le DOM, pourquoi t’embéter à prendre les effets stylisées avec ? (Bon okay ce n’est que quelques ko en plus, une fourmi…). Mais je ne vois pas que des bons effets dans un framework, chose que ton article semble oublié quand tu en parles.
Je suis dans une optique d’apprentissage plutôt que d’utilisation mais ça je sais que tu l’avais compris.
J’ai d’autres amis de ton point de vue, qui me prenne pour un fou, à refaire de A à Z quelque chose déjà fait et le discours n’abouti pas à la fin. Je ne pense pas paraître cool, ni a me démarquer, c’est juste que j’ai l’impression de voir tout le monde foncer sur ces nouvelles extensions de langage comme s’il s’agissait du messie pour coder mieux et plus rapidement. Là, où moi je vois une perte de l’apprentissage des langages et de se creser la tête pour réussir à faire marcher ce p**** de code qui bug!
Mon intérêt est de comprendre, donc j’ai vite choisis mon camp. Ton discours est valable aussi, je n’ai rien contre tes propos; juste que ça ne correspond pas à l’idée que je m’y fait.
Sympa, ce petit débat. Même si tu voulais avoir des echos sur qui utilise quoi, désolé d’avoir plombé le truc avec mes questions =)
(D’ailleurs, j’utilise actuellement XHRClass et Lightbox v2 (mais là aussi j’ai fait mon propre lightbox avant d’intégrer celui là à mes projets)
14 avril 2008 à 17:54 Citer
XHRClass
14 avril 2008 à 18:16 Citer
XHRClass = XHRConnection
Autant pour moi…
19 mai 2008 à 12:47 Citer
Bonjour,
Cet article est très intéressant. Parler de JQuery est une action
d’utilité publique pour le web.
Vous pouvez consulter plus d’informations sur le site http://www.webjax.eu
et plus particulièrement la rubrique http://www.webjax.eu/r/14-JQuery-javascript-framework-ajax-library-jquery-j-query-Framework-Javascript-Library-Ajax-asyncronous-web2.0-ria-dom-control-enhancer
qui présente la documentation officielle de Jquery en version française.
Vive le web2.0 et ajax, longue vie aux codeurs :-)