Bien choisir un framework javascript pour un site à forte audience

Bonjour,

Je travaille pour un groupe de presse belge qui produit plusieurs sites à forte audience. Je m'occupe du code client de plusieurs d'entre eux.

Avec le temps, je réalise de plus en plus de domScripting et j'envisage donc la possibilité de recourir à un framework javascript afin d'augmenter ma productivité.
Mais je ne suis pas encore convaincu qu'il s'agit d'une bonne idée dans notre cas. En effet, différents éléments me font craindre un impact négatif sur les performances:

1. Le poids de ces bibliothèques:
Par exemple, 120 Ko sans compression pour prototype.js

2. Le nombre de requêtes HTTP :
Sur le site de script.aculo.us, on peut observer 7 requêtes dans le head du document.

  <script src="prototype.js" type="text/javascript"></script>
  <script src="scriptaculous.js" type="text/javascript"></script>
  <script type="text/javascript" src="http://script.aculo.us/builder.js"></script>
  <script type="text/javascript" src="http://script.aculo.us/effects.js"></script>
  <script type="text/javascript" src="http://script.aculo.us/dragdrop.js"></script>
  <script type="text/javascript" src="http://script.aculo.us/controls.js"></script>
  <script type="text/javascript" src="http://script.aculo.us/slider.js"></script>

3. Enfin, la vitesse d'exécution des scripts:
Est-ce les scripts s'exécuteront rapidement sur, par exemple, une config "vieux pc + ie6" ?

Lors de ParisWeb 2007, j'ai eu la chance d'assister à l'atelier "Bibliothèques JavaScript" animé par Christophe Porteneuve et Julien Wajsberg. C'est là que j'ai été définitivement séduit par ce que pouvait m'apporter les frameworks mais, malheureusement, je n'ai pas eu le temps de poser toutes les questions que je souhaitais.

Après la relecture des différents documents présentés à l'atelier, je me pose toujours les même questions:
- Est-ce une bonne idées d'utiliser une bibliothèque js sur un site à forte audience ?
- Si oui, lequel choisir ?

Avez-vous un avis qui pourrait m'éclairer ?

Merci
Modifié par Mathieu_vd (14 Jan 2008 - 15:25)

Bonjour,

je n'en connais que les aspects basiques mais pour le 1. on n'utilise en production que la version 'compressée' ('minifiée') de ces bibliothèques donc le poids compressé n'est pas bien important non?
Sur l'intérêt de ces bibliothèques, tout dépend de l'usage prévu: si beaucoup de fonctions vont être utilisées, ce serait une perte de temps de s'en passer. Si c'est pour 2-3 effets, mieux vaut les recoder en repartant de zéro (si on a le temps et les compétences pour l'écrire, le maintenir, le tester, etc). On peut aussi ne s'en servir que dans certains types de pages plus riches en contenu 'multimédia' (photos, bourse, etc)

EDIT: pour la vitesse, tu peux chercher "safari opera firefox ie6 ie7 speed javascript"
Exemple de résultat: http://www.codinghorror.com/blog/archives/001023.html
Une bonne plate-forme de test, c'est un vieux portable par une après-midi de canicule: ça s'entend quand ça mouline
Modifié par Felipe (14 Jan 2008 - 15:36)

Côté vitesse d'exécution, pas grand chose à craindre : le tout est de *bien* employer ces libs, auquel cas on obtiendra de bonnes perfs.

Pour la vitesse de téléchargement, on a plusieurs options : minifier (jouable mais pas très utile au final), packer (je suis plutôt contre, ça nique plein d'optims possibles pour la VM) et GZipper. Bon, IE6 n'aime pas le gzipping, donc il faut bien configurer son serveur pour renvoyer la version normale (ou minifiée) à IE6, et le gzip (imbattable) aux autres.

Enfin, n'oublions pas que la lib est ensuite dans le cache, surtout si tu configures bien ton serveur en termes de E-Tags et autres en-têtes relatifs au cache (Revisit-After, Max-Age, Cache-Control, Pragma, et j'en passe). Donc le temps de DL initial, c'est pas non plus la mort. Par exemple, Proto+Scripty gzippés sont à moins de 30Ko je crois, soit 10x moins qu'une JPEG classique…

Pour finir, côté choix entre les libs, et pour rester sur jQuery vs. Proto/Scripty, je trouve personnellement que la première est bien adaptée à de petits sites perso voulant juste un peu de "bling bling" sympa à moindre coût (tant d'apprentissage que de poids de lib), au détriment parfois de la maintenabilité et de la cohérence de la syntaxe. Inversmeent, Proto/Scripty sont plus demandeuses en rigueur et plus structurées/cohérentes, donc plus appropriées pour des vraies webapps ou des sites riches et complexes. Mais bon, ce n'est que mon avis…

1. Niveau poids, ce n'est pas vraiment un problème si c'est bien géré (voir le post de TDD juste au dessus).
2. Pour le nombre requêtes, fusionner au maximum les différents fichiers du framework (par exemple 1 "gros" fichier générique au site, et d'autres petits fichiers pour les pages qui ont besoin de fonctionnalités avancées).
3. Pour la vitesse, à condition de ne pas exécuter 36 effets en même temps, tu ne devrais pas avoir de problèmes.

Utilisant un framework depuis plus d'1 an sur des sites à forte audience, aucun problème à ce niveau là. Donc, si vraiment tu en ressens le besoin, je te conseil de sauter le pas.

Après au niveau du choix, c'est très personnel
J'ai opté pour Mootools et j'en suis très satisfait (choix séparé des éléments, rapidité, syntaxe puissante mais compréhensible, développement très actif, bonne documentation, etc.).

Mais ça dépend entre autre de ce que tu recherche (simplification pour l'écriture de scripts, effets "eye-candy", création d'UI, etc.).

Merci pour vos réponses.

Après réflexion, je pense que je vais me tourner vers jquery car cela me semble le meilleur rapport fonctionnalité/poids et que cette bibliothèque répond à mes besoins actuels.

Mais j'espère que j'aurais aussi l'occasion de découvrir prototype qui me semble super.

Salut, je te conseille de te pencher sur mootools, qui est très léger, en plus de proposer de télécharger seulement certains modules si l'on a pas besoin de toutes les fonctionnalités.

Niveau fonctionnalités il propose autant, voire plus que jQuery et il est juste un peu plus compliqué à prendre en main pour les effets.

Sinon je n'ai aucun problème avec ie6 et les fichier js/css gzippés personnellement.

Je préfère aussi jQuery à prototype et script.aculo.us qui pour moi sont une vraie usine à gaz surtout script.aculo.us!!
Par contre, peut-être serait-il intéressant de se pencher vers le framework de yahoo que je n'ai pas testé, mais qui de mieux peut développer un framework pour site à fort trafic?