Ajax dope l'ergonomie des applications Web

L'architecture améliore le confort et la productivité des utilisateurs en leur offrant une ergonomie proche de celle des applications client-serveur courantes.

Basée sur des technologies standards telles que HTML et JavaScript, l'architecture Ajax (Asynchronous JavaScript and XML) améliore l'ergonomie des applications Web en la portant presque au même niveau que celle des applications Windows traditionnelles. Elle propose en outre un modèle de programmation événementielle très proche de langages largement maîtrisés comme Visual Basic.Enfin, Ajax améliore les temps de réponse des applications Web en isolant le comportement de chaque composant graphique : seuls ceux qui nécessitent une mise à jour sont rechargés.Malgré sa jeunesse, cette architecture possède donc de sérieux atouts pour séduire les entreprises. Nombre d'entre elles combinent ainsi le meilleur du Web ?" pas de déploiement, mise à jour automatique de l'application... ?" et de l'architecture client-serveur traditionnelle : ergonomie de l'interface, temps de réponse, etc.Ajax représente également une alternative attrayante aux clients riches. ' Pour développer notre application de présentation et de consultation des dossiers médicaux des patients, nous n'avons pas hésité face à une architecture client riche ', explique François Lion, chef de projet à l'Institut Gustave Roussy, premier centre européen de lutte contre le cancer. ' A l'époque [2002, NDLR], XUL était la seule alternative viable, mais elle imposait un navigateur, Firefox ou Mozilla ', détaille-t-il.En revanche, Ajax n'est pas toujours adaptée au développement de certaines applications de bureau. ' Contrairement aux promesses du client riche, le client léger Ajax ne dialogue pas facilement avec les ressources locales du poste de travail ?" logiciels, système d'exploitation, etc. ?" et ne peut pas non plus stocker d'importantes quantités de données en local ', met-il en garde. Des restrictions qui sont essentiellement liées à la politique de sécurité des navigateurs.

L'utilisation : plus de confort pour l'utilisateur

Dans ce contexte, les entreprises cherchent surtout à apporter davantage de confort aux utilisateurs d'applications Web. Ce confort ne se traduit pas simplement par la possibilité d'effectuer des glisser-déplacer ou des copier-coller au sein des pages Web. Il s'agit également d'optimiser les temps de réponse du logiciel en s'appuyant sur les échanges asynchrones de cette nouvelle architecture.Le Centre d'information et de documentation de la jeunesse (CIDJ) édite, par exemple, un corpus de 360 fiches sur divers sujets susceptibles d'intéresser les jeunes : métier, formation, emploi, mobilité internationale, etc. ' Pour publier ces fiches sur le Web, nous avons choisi Ajax afin d'offrir un meilleur confort de navigation à nos utilisateurs en leur permettant d'interagir avec notre serveur sans rechargement de pages ', illustre Marc-André Grosy, responsable informatique du CIDJ.' Pour faciliter la saisie des mots-clés qui permettent d'accéder aux fiches, nous avions besoin de fonctions de complétion [remplissage automatique des champs, NDLR] basées sur une liste de plusieurs milliers de mots-clés. La transmission de la totalité de cette liste impliquait un important flux de données, et donc un temps de chargement et de traitement trop long côté client. Ajax nous a permis de filtrer les données à transmettre, et donc d'accélérer la navigation ', explique Victor Spanneut, responsable du projet au CIDJ.Le réseau social 6nergie.com et le gestionnaire de patrimoine Richelieu Finance utilisent, de leur côté, l'architecture Ajax pour permettre, entre autres, l'édition de pages Web directement depuis le navigateur en mode Wysiwyg. ' Chaque membre peut ainsi mettre à jour sa fiche directement, sans passer par un formulaire spécifique ', explique Alain Lefebvre, fondateur de 6nergie.com.L'interface d'administration du site Web de Richelieu Finance repose sur le même principe. ' C'est une approche bien plus efficace que celle proposée par le back office des outils de gestion de contenu traditionnels ', constate Hervé Schmitt, responsable e-business à Richelieu Finance. Son entreprise s'est également appuyée sur Ajax pour développer un simulateur de fonds en ligne. ' Il s'agit davantage d'une application interactive que d'une simple page Web. Dans ce cadre, la programmation événementielle proposée par l'architecture Ajax était bien plus appropriée qu'une approche Web traditionnelle ', explique Hervé Schmitt.

La mise en ?"uvre : les frameworks accélèrent les développements

L'Institut Gustave Roussy a développé son propre framework Ajax entre 2002 et 2004. ' A l'époque, on ne parlait pas encore d'Ajax, et aucun framework n'était disponible ', indique François Lion. Le développement a nécessité deux personnes à mi-temps pendant deux ans et demi, et a donné naissance à Rialto, un framework open source qui rencontre un certain succès en France depuis qu'il est promu et diffusé par la SSII Improve.Contrairement à l'IGR qui a lancé très tôt son projet, la plupart des entreprises font aujourd'hui appel à un prestataire pour les accompagner ?" 'est le cas du CIDJ, de 6nergie.com et de Richelieu Finance ?" et s'appuient sur des frameworks Ajax prédéveloppés. Richelieu Finance a, par exemple, exploité Symphony, dont la partie serveur est écrite en PHP.Quant au CIDJ, il s'est tourné vers OpenRico. ' OpenRico ajoute à la bibliothèque cliente JavaScript Prototype un format de réponse XML à la fois simple et élégant qui permet de mettre à jour plusieurs éléments ?" JavaScript et HTML ?" simultanément. La mise à jour de la page est donc transparente, ce qui permet de garder un code client simple et de se concentrer sur l'efficacité des réponses côté serveur ', explique Christophe Desguez, chef de projet chez Smile, le prestataire qui a développé l'application pour le CIDJ.La mise en ?"uvre d'Ajax nécessite cependant des développeurs expérimentés, qui sont encore rares. Mais, grâce aux frameworks, un développement Ajax ne prend pas tellement plus de temps qu'une application Web traditionnelle. ' Il ne nous a fallu que cinquante jours pour développer notre application ', illustre Victor Spanneut au CIDJ. Le projet de 6nergie.com a, lui, en revanche, mobilisé quatre personnes à plein temps pendant douze mois, car il est assez complexe, et celui de Richelieu Finance a été réalisé en trois mois.Grâce à l'approche par composants, ' il ne nous a fallu qu'un week-end pour développer le prototype de notre simulateur de gestion de portefeuilles de fonds en interne ', complète Hervé Schmitt. Ajax influe également peu sur la charge de maintenance de l'application. ' Il s'agit d'une mise en ?"uvre Java/JSP, somme toute assez classique. Ajax ne représente que quelques bibliothèques JavaScript supplémentaires dans ce déploiement ', précise Victor Spanneut.

Les écueils : les navigateurs ne respectent pas les standards

Ce sont surtout les différentes versions des navigateurs cibles et l'absence de débogueur JavaScript de qualité qui posent aujourd'hui des problèmes. ' Aucun navigateur ne gère exactement de la même façon l'utilisation conjointe de JavaScript, CSS, HTML, XML, etc. ', constate Alain Lefebvre de 6nergie.com. ' Par exemple, Internet Explorer 5.5 et 6.0 de Microsoft ne se comportent pas de la même façon face à un code identique ', illustre-t-il.Même si les frameworks clients (Prototype, etc.) prennent en partie en charge ces incompatibilités, la mise au point de l'interface utilisateur est parfois pénible et fastidieuse. C'est pourquoi, ' nous développons d'abord pour notre plate-forme cible principale qui est Internet Explorer. Puis, nous adaptons ensuite notre code pour le rendre compatible avec les autres navigateurs ', explique Hervé Schmitt de Richelieu Finance. ' Nous proposons aussi des écrans HTML alternatifs lorsque cela se révèle nécessaire ', ajoute-t-il. L'absence de débogueur et d'outil de développement graphique rend également le travail de mise au point de l'interface plus complexe.Heureusement, de nombreux outils sont en préparation chez les principaux éditeurs. Dans le monde Java, Sun vient, par exemple, de présenter le plug-in jMaki qui complète son atelier de développement Net-Beans, et JBoss proposera bientôt le framework Seam qui facilite l'intégration des modèles de pages JavaServer Faces (JSF) avec les Enterprise Java Beans (EJB). Tibco propose également un atelier de développement Ajax relativement abouti.En attendant leur sortie, ' l'absence d'outils Wysiwyg n'est pas un réel handicap, car les bons développeurs Web ne recourent que rarement à ce type d'atelier RAD ', estime Frédéric Bon, fondateur de Clever Age, le prestataire qui conseille Richelieu Finance. ' De plus, le look'n'feel des composants graphiques fournis avec les frameworks Ajax peut être adapté à l'aide de simple feuilles de styles ', précise-t-il.En revanche, comme les applications Ajax reposent sur le motif de conception Single Page Interface (SPI), certaines adaptations ergonomiques doivent impérativement être réalisées. ' L'absence de bouton précédent/suivant oblige, par exemple, à mieux concevoir son interface en s'inspirant des applications client-serveur traditionnelles ', note Hervé Schmitt. ' Le fait que l'utilisateur ne puisse pas ajouter une page à ses favoris demande également un effort supplémentaire de conception ', complète Victor Spanneut.

Les gains : une ergonomie qui motive les utilisateurs

Au final, ces contraintes sont largement compensées par l'accueil des utilisateurs, généralement unanimes sur l'apport de ces interfaces en termes de confort d'utilisation et de productivité. ' Les médecins étaient assez réticents à utiliser l'émulation en mode terminal de l'application VMS permettant d'accéder aux dossiers des patients ', illustre François Lion à l'IGR. ' Quand nous leur avons proposé l'interface Ajax, ils ont très vite adhéré au projet. Au point que nous avons dû étendre la portée de notre application à des utilisateurs que nous n'avions pas prévus au départ, les infirmières anesthésistes, par exemple ', se réjouit-il.Du point de vue du service informatique, le surcoût de développement lié à la nouveauté d'Ajax est largement compensé par l'absence des coûts de déploiement liés aux clients lourds et/ou riches. Plus le nombre d'utilisateurs est important et plus l'intérêt d'Ajax pour remplacer certains clients lourds devient donc intéressant. De plus, ' comme Ajax ne transmet que les données utiles à l'utilisateur, cette architecture diminue aussi la bande passante exploitée par l'application ainsi que le volume de données à traiter sur le serveur ', complète Victor Spanneut.

L'architecture Ajax

1 - Une interface ergonomique et réactive
Le modèle de programmation événementiel et les échanges asynchrones de l'architecture Ajax permettent de proposer aux utilisateurs une interface réactive ?" seul le composant en cours d'utilisation est mis à jour ?" et très ergonomique : glisser-déplacer, remplissage à la volée des listes déroulantes avec des données contextualisées, etc.

2 - Un client ' riche ' standard
Une application respectant l'architecture Ajax s'appuie entièrement sur des standards : HTML pour le cadre de l'écran, des feuilles de styles pour le ' look'n'feel ' des composants graphiques, et JavaScript pour gérer les événements et l'interaction avec l'utilisateur. Les bibliothèques de fonctions Ajax (écrites en JavaScript) et les outils de développement associés tendent, eux aussi, à se standardiser.

3 - Un outil simple pour communiquer avec ses partenaires
Il suffit qu'un partenaire de l'entreprise expose ses données dans des fichiers XML pour que le client Ajax les lise directement depuis le navigateur via le protocole HTTP. Cette architecture Rest est désormais maîtrisée par la plupart des prestataires, et la génération de fichiers XML à la volée ne pose aucune difficulté.

4 - Attention au poids des échanges
Même si l'architecture Ajax évite d'avoir à renvoyer l'interface graphique (HTML, CSS, etc.) à chaque action de l'utilisateur, le poids des données XML peut se révéler dissuasif. De plus, l'architecture asynchrone multiplie les échanges entre le client et le serveur. Peu de prestataires possèdent un réel retour d'expérience sur la montée en charge de ce type de schéma d'échanges. Des tests préalables de montée en charge peuvent donc être nécessaires pour les applications fortement sollicitées.

Les principaux frameworks Ajax

1er retour d'expérience : François Lion (IGR) : ' Valider les performances du navigateur '

L'institut utilise l'architecture Ajax en production, pour une application de consultation et d'édition des dossiers médicaux des patients, utilisée par 700 professionnels.

Précurseur en France, l'Institut de cancérologie Gustave Roussy utilise l'architecture Ajax depuis plus de deux ans en production, pour une application de consultation et d'édition des dossiers médicaux de ses patients utilisée par 700 professionnels (dont 60 en même temps). ' Pour des applications de grande taille avec des interfaces faisant intervenir beaucoup de composants graphiques et beaucoup de transformations du DOM, il est indispensable d'éprouver l'application au fil de son utilisation ', estime François Lion, chef de projet à l'IGR et codéveloppeur du framework Ajax Rialto.
' Certains navigateurs présentent en effet des faiblesses dans la gestion de la mémoire : le ramasse-miettes d'Internet Explorer notamment. Or, ce point est critique car une application Ajax déporte une partie de la logique applicative des traitements côté client. Il faut en tenir compte lorsque l'on code et qu'on espère des améliorations de performances des navigateurs déficients, induites par la popularité croissante d'Ajax ', explique-t-il. D'autre part, comme l'architecture Ajax modifie le schéma des échanges entre le navigateur et le serveur, ainsi que le rôle de la couche graphique, tous les modèles de conception ne sont pas encore aboutis et constituent donc des gisements intéressants de performances.

Institut de cancérologie Gustave Roussy (IGR)

2e retour d'expérience : Victor Spanneut (CIDJ) : ' L'application devait fonctionner avec n'importe quel PC '

Le centre d'information s'appuie sur le framework Ajax OpenRico et sur le serveur d'applications Tomca pour développer son encyclopédie en ligne.

Pour développer son encyclopédie en ligne, le Centre d'information et de documentation pour la jeunesse (CIDJ) s'est appuyé sur le framework Ajax OpenRico et sur le serveur d'applications Tomcat. Un choix essentiellement guidé par les contraintes de déploiement. ' Avec des dizaines de milliers d'utilisateurs potentiels, il fallait que notre application fonctionne sans installation complémentaire sur les postes clients, quel que soit le système d'exploitation cible. Ce qui excluait de fait les clients riches ?" Rich Desktop Application ?" tels que Eclipse RCP et XUL ', explique Victor Spanneut, responsable projet au sein du CIDJ.
De plus, ' les fonctionnalités supplémentaires telles que l'établissement d'une connexion permanente ou les bibliothèques multimédias offertes par Flex d'Adobe ne correspondaient pas à nos besoins et ne justifiaient donc pas son coût de déploiement élevé ni le recours au lecteur Flash. Ajax nous a donc semblé être la solution la plus portable et la moins coûteuse, compte tenu de nos contraintes ', conclut-il.

Centre d'information et de documentation pour la jeunesse (CIDJ)

avis d'intégrateur : Didier Girard (Improve) : ' Ajax privilégie l'intégration d'applications côté serveur '

Le directeur technique de la SSII estime que ce type d'architecture est surtout indiqué pour les projets ne nécessitant pas de reprise d'un existant.

Comment peut-on choisir entre clients riches et Ajax ?
Les clients riches privilégient l'intégration des applications sur le poste client. Moyennant le déploiement d'un socle d'exécution sur le PC, ils gèrent le mode déconnecté et proposent une meilleure ergonomie que les applications Web. A l'inverse, Ajax ne nécessite aucun déploiement puisque c'est le navigateur qui sert de socle d'exécution. Cette architecture privilégie l'intégration des applications côté serveur. Elle est surtout indiquée pour les projets ne nécessitant pas de reprise d'un existant.

Pourra-t-on un jour travailler en mode déconnecté avec une application Ajax ?
Oui. Cela commence à être possible techniquement. Mais la gestion d'un cache de données locales se heurte encore aux limites du langage JavaScript. Plus les frameworks Ajax permettront ce type de comportement, et plus ils se rapprocheront d'un socle technique de type client riche (Rich Desktop Application).

Improve