Comme vous l’avez remarqué, j’utilise beaucoup Javascript en ce
moment… et comme tous les utilisateurs de librairies complexes, je me
suis trouvé confronté au problème du poids des scripts. Une bonne
librairie Javascript peut faire parfois jusqu’à 200 Ko, ce qui prend
plus d’une minute à charger pour une connexion 56K.
Ce billet présente quelques méthodes et conseils pour minimiser ce
problème.
Le cache
La première astuce, évidemment, est d’utiliser au maximum le cache du
navigateur. Après tout, un gros CSS peut aller jusqu’à 20-30 Ko, mais il
n’est chargé que lors de l’affichage de la première page du site - pour
les pages suivantes, la version en cache est utilisée.
Il peut donc être au final rentable d’utiliser une librairie lourde,
mais complète. On la charge ainsi en première page, cela prend un peu de
temps, mais ensuite elle sera réutilisée tout au long du site. Deux
inconvénients cependant : le Javascript doit être parsé par le
navigateur à chaque page, même s’il n’est plus téléchargé, ce qui prend
du temps ; de plus, si la première page ne s’affiche pas rapidement, le
visiteur peut être tenté d’aller voir ailleurs.
La compression
Une autre idée est de compresser les fichiers Javascript. Il ne s’agit
pas ici d’une compression ZLIB ou autre, mais d’une réduction de la
taille du code, tout en le conservant sous forme de texte. La plupart
des compresseurs Javascript enlèvent les commentaires, les espaces
inutiles et les sauts de ligne ; certains, plus avancés, renomment les
variables internes, pour gagner encore un peu de place. Un bon
compresseur peut parfois diviser le poids d’un gros fichier Javascript
par deux.
Le meilleur compresseur Javascript est sans doute
ShrinkSafe, par l’équipe de
Dojo. Il est basé sur un interpréteur
Javascript, et non pas sur des expressions régulières plus ou moins
hasardeuses, comme beaucoup d’autres compresseurs. En utilisant
ShrinkSafe, j’ai par exemple fait passer la totalité du code de
script.aculo.us de 171 Ko à 99 Ko, ce qui est
extrêmement appréciable, en particulier pour les 56K.
Utiliser des librairies légères
Identifier précisément ses besoins permet d’utiliser la bonne librairie,
et donc d’adapter le poids du Javascript. Si vous envisagez de bâtir un
site faisant appel à des effets visuels riches et à des requêtes Ajax
fréquentes, l’utilisation du couple
script.aculo.us/prototype
est tout à fait envisageable, pour les raisons de cache exposées
ci-dessus. En revanche, si vous ne voulez intégrer que quelques effets
simples à un endroit précis, ou seulement une requête Ajax particulière,
il est inutile de forcer le téléchargement d’une librairie complète.
Moo.fx est une librairie d’effets
graphiques de 3 Ko seulement. Elle permet d’utiliser des effets de
redimensionnement et de fondu, de les combiner, et de les implémenter
facilement. Il devient donc tout à fait enviseagable d’intégrer des
effets visuels à une page seulement : moo.fx se charge aussi rapidement
qu’une petite image. Elle n’est de plus pas compressée, on peut donc
réduire encore un peu sa taille en utilisant ShrinkSafe. Son seul point
faible est le manque d’exemples, la documentation est en revanche assez
complète.
Conclusion
En résumé, l’utilisation d’un compresseur Javascript permet de diminuer
le temps de chargement des librairies Javascript. Après, si l’on compte
utiliser intensivement effets et Ajax, mettre en cache une librairie
complète est une bonne idée ; pour des effets poncutels, il vaut en
revanche mieux adopter une librairie légère, comme
Moo.fx.
Boot Camp permet donc,
officiellement et facilement, d’installer Windows XP sur un Macintel.
D’aucuns pensent que c’est la ruine de Mac OS X, car les logiciels ne
seront plus portés sur Mac, d’autres y voient au contraire enfin une
possibilité de switcher en douceur.
La meilleure réaction que j’aie lu à ce sujet est sans doute celle de
Daniel
Glazman,
qui se dit enfin « converti » … Je pense que je vais faire comme lui ;
à moi le MacBook Pro !
Fluxiom est une application de gestion de
contenu en ligne. Développée par Thomas Fuchs,
l’auteur de la librairie script.aculo.us,
elle est pour l’instant en phase de test… mais la vidéo de
démonstration est impressionante. L’équivalent de l’application de
bureau la plus riche et de la plus complète est disponible sur le Web,
en pur XHTML/CSS/Javascript ; animations, contrôles utilisateurs, Ajax
et interactivité sont au rendez-vous. Une merveille, jetez-y un coup
d’oeil !
Ce billet présente la librairie Javascript
script.aculo.us. Cette librairie permet très
facilement :
- D’animer des éléments dans une page web
- D’ajouter des contrôles modernes : éléments triables par drag/drop,
sliders, champs de texte auto-éditables
- D’utiliser des fonctionnalités
Ajax prédéfinies
(autocomplétion, tri) ou personnalisées
Bref, une merveille, simple d’utilisation, qui peut donner à un site web
un réel plus en terme d’ergonomie. Lisez le billet complet pour une
présentation détaillée et quelques exemples d’utilisation de la
librairie.
Les animations
Les animations “candy-eye” sont de plus en plus fréquentes dans les
pages web. Si elles sont gratuites, elles distraient l’utilisateur…
mais elles peuvent aussi améliorer l’ergonomie d’un site complexe en
mettant l’accent sur le comportement.
script.aculo.us fournit quelques effets de base, ainsi qu’une multitude
de combinaisons d’effets. Implémenter un effet est très simple ; voyons
par exemple comment ajouter un effet de fondu à un bloc quelconque :
[xml]<p onclick="new Effect.Fade(this)">Cliquez moi</p>
C’est tout ! Tous les autres effets sont implémentables de la même
façon. Vous trouverez sur script.aculo.us une page de démonstration de
tous les
effets
; pour voir comment cela peut améliorer l’ergonomie, rendez vous sur
script.aculo.us, decsendez un peu, et tapez
moins de trois lettres dans le champ de recherche.
Contrôles
Tri et Drag/drop
Le drag/drop est extrêment pratique lorsqu’il s’agit de trier ou de
réorganiser des éléments. Il peut aussi être utilisé sur les sites
d’achat en ligne, pour ajouter des éléments au panier de manière
intuitive. script.aculo.us propose différents contrôles pour implémenter
facilement des méthodes de tri. Imaginons par exemple que nous voulions
trier une liste :
[xml]<ul id="list"> <li id="item_1">I'm number 1</li> <li id="item_2">I'm number 2</li> <li id="item_3">I'm number 3</li></ul><script type="text/javascript"> Sortable.create('list');</script>
Cela suffit à créer un effet Sortable. On peut également rajouter une
demi-ligne de Javascript pour envoyer automatiquement une requête Ajax
après avoir terminé le tri, pour par exemple sauvegarder le nouvel ordre
des éléments :
[xml]<script type="text/javascript">Sortable.create( 'list', {onUpdate:function(){ new Ajax.Request( '/list.php', {parameters: Sortable.serialize('list')} )} };</script>
A chaque fin de tri (lorque l’élément est relâché), une requête Ajax
sera envoyée à la page “list.php”, contenant en paramètre l’ordre des
éléments. Il est alors facile de sauvegarder l’ordre des éléments, par
exemple dans une base de donnée. Voici un exemple de Tri de liste avec
callback Ajax.
On peut également trier des éléments entre deux listes
différentes,
en les mélangeant éventuellement.
Sliders, champs auto-éditables
Les sliders implémentent un contrôle absent de HTML. Cela permet de
modifier avec précisions des valeurs, dans un certain intervalle. De
même que pour le Tri, il est possible d’envoyer une requête Ajax
contenant la valeur du Slider lorsqu’il est modifié. La démo
proposée est
assez moche, mais tout est stylable à vonlonté avec un peu de CSS.
Un autre contrôle très sympathique est le champ auto-éditable.
Popularisés par le site Flickr, ils vous
permettent d’éditer un texte en cliquant simplement dessus. Le texte
devient alors éditable, et peut être sauvegardé sans même recharger la
page, grâce à Ajax. Un exemple sera sans doute plus clair, vous pouvez
en trouver un au milieu de cette
page.
Généralités Ajax et auto-complétion
Généralités Ajax
Tout d’abord, si vous voulez avoir une définition précise de ce que
recouvre le terme Ajax, rendrez-vous sur
Wikipedia:Ajax.
script.aculo.us est basé sur la librairie
Prototype,
qui possède de multiples fonctions très pratiques. Elle permet entre
autre d’envoyer facilement des requêtes Ajax fonctionnant dans la
plupart des navigateurs. Un exemple type d’utilisation des
fonctionnalités Ajax de Prototype est :
[xml]<script type="text/javascript">new Ajax.Request( url, { method: 'get', parameters: 'data=somestuff', onComplete: showResponse });</script>
On peut difficilement faire plus simple : ce code envoie une requête
Ajax de base, avec les paramètres spécifiés, et apelle la fonction
showReponse lorsque la réponse à la requête a été reçue. On peut
également utiliser l’objet Ajax.Updater pour spécifier en plus l’id
d’un élément, dont le contenu sera mis à jour avec le résultat de la
requête.
Auto-complétion
En ce basant sur ce système, script.aculo.us propose un système
d’auto-complétion facile à mettre en oeuvre. Cet outil permet par
exemple d’afficher un aperçu des résultats dans un champ de recherche,
lorsque l’utilisateur a déjà tapé quelques lignes. Cela s’implémente
d’une manière semblable à un Tri, c’est à dire en une seule ligne. Il
suffit de définir le champ que l’on veut auto-compléter, l’adresse de la
page du serveur renvoyant le contenu de l’aperçu, et cela suffit. Le
résultat est quelque chose de très proche d’une application logicielle
classique. Vous pouvez essayer la
démonstration
ici.
Conclusion
Impossible en ce moment de parler d’Ajax et de Javascript sans
mentionner ajaxWrite, un traitement de texte entièrement en ligne
permettant d’éditer des documents Word avec une interface très
similaire.
Il existe d’autres librairies que script.aculo.us, bien sûr, proposant
des fonctionnalités semblables. On peut citer
Rico, qui comporte des effets très intéressants,
comme la LiveGrid. Je préfère néanmoins script.aculo.us, pour sa
simplicité d’utilisation et le nombre impressionnant de fonctionnalités
qu’elle comporte.
Il ne me reste plus qu’à vous souhaiter bonne chance dans votre
découverte de script.aculo.us et de l’Ajax !
Après 6 longs mois de travail, “Viens voir ce site
!” est enfin lancé ! Il s’agit d’un
site destiné aux créatifs et professionnels de la publicité, réalisé
pour le compte de Comkillers. J’ai du
reprendre une ancienne version du site, qui avait été codée très
rapidement (et donc très mal), alors il y a beaucoup de choses moches…
Mais également des tas de fonctionnalités sympatiques : galerie, books,
Lightbox pour les images, Player Flash pour les sons, etc.
Il y a également pas mal d’Ajax, qui est utilisé un peu partout :
- Autocomplétion dans le champ de Recherche
- Chatterbox auto-rafraîchie
- Glisser/déposer pour organiser la mise en page de sa fiche
Le tout réalisé dans les règles du Hijax : implémentation d’une
version standard fonctionnant sans script activé, avant d’insérer du
Javascript non obstrusif pour activer l’Ajax. Je vous reparlerai sans
doute des techniques et librairies utilisées dans un autre billet.
Bref, vous pouvez aller jeter un coup d’oeil, et éventuellement me dire
ce que vous en pensez. Pour information, le site a été testé sous IE
5.5/6/7b, Firefox 1.0*/1.5*, Opera 8, Konqueror, Safari 1.2/1.3 et
Netscape 7.
