Analyse de la valeur ajoutée d'Ajax dans l'entreprise (sans céder à l'effet de mode)
Par François Lasselin le lundi, avril 10 2006, 19:07 - Technologie - Lien permanent
Aujourd'hui incontournable, Ajax s'invite partout. Impossible d'oser concevoir une application web sans Ajax ! La conception d'application web profite des nouvelles possibilités offertes par AJAX mais surtout par son utilisation conjointe avec le DHTML(javascript + CSS). Il convient tout d'abord de bien cerner ce qu'est Ajax et ce qu'il permet de faire (en PHP ou avec d'autres technologies Web). Il est nécessaire de démêler l'innovation de l'effet de mode et d'apporter un regard éclairé sur les bonnes et mauvaises pratiques qu'il engendre.
Ajax ( Asynchronous JavaScript And XML) est une méthode de développement, qui se résume quasiment en une seule instruction : XMLHttpRequest. Cette fonction a été introduite par Microsoft dans Internet Explorer 4.0 en octobre 1997. Ajax est en fait un nom qui désigne l'utilisation conjointe de plusieurs technologies web. Pour simplifier, Ajax est un ensemble de fonctionnalités qui permet de recharger une partie d'une page web: c'est tout. Présenté ainsi, ça ne paraît pas grand-chose. A quoi cela peut-il servir ?
Un des exemples les plus classiques est la sélection du code postal d'une commune de France dans un formulaire (En France, plusieurs communes ont le même code postal). Cet exemple n'est pas innocent. Nalis rencontre couramment cette problématique dans la réalisation de système d'information. L'utilisateur sélectionne un département puis un code postal pour enfin choisir la commune. Techniquement, quelles sont les possibilités ?
Autre exemple plus évolué, l'affichage d'une carte dynamique (déplaçable dans l'espace, zoom, ..).
Quelles sont les possibilités ?
Maintenant que les présentations sont faites, on ne pourrait qu'être étonné de voir le traitement réservé à AJAX. Ajax c'est fashion, c'est branché, c'est tendance ... Tout le monde parle d'une révolution. Une révolution ça ? C'est juste l'utilisation conjointe de technologies existantes. Évidemment, « Ajax », ça sonne beaucoup mieux que DHTML, XmlHttpRequest, SOAP et de service web (qui lui même sonne mieux que flux RSS). En fait, c'est surtout Javascript et le DHTML qui sont à l'origine de l'engouement derrière Ajax plus qu'Ajax lui-même. Grace au DHTML on peut faire du "drag and drop" : dans Windows ça existe depuis toujours, mais dans une page web. En voici un petit exemple. Je propose de réordonner les lettres du logo Nalis par cliqué glissé.
Il ne s'agit de simplement déplacer les éléments, à l'écran leur ordre est bien enregistré. En effet, le bouton affiche les lettres dans l'ordre.
On peut donc imaginer de nombreuses applications sur ce principe. Seulement le drag and drop n'est pas nécessairement de l'AJAX .. Justement, mon exemple n'en est pas. Pour que cela soit de l'AJAX, il faudrait qu'un appel XmlHttpRequest avertisse le serveur de chaque changement d'ordre. Or, cela n'est pas le cas. Dans la pratique de mon métier, il est courant de recueillir le besoin sous la forme d'une possible réponse à ce besoin. Ainsi, un client dira qu'il a besoin de SPIP alors qu'il a besoin d'une solution pour gérer le contenu de son site internet. De même pour Ajax, le besoin n'est pas une application technologiquement innovante. Ajax, ne résoudra pas les problèmes d'une entreprise. Par contre, Ajax est un moyen d'augmenter la valeur ajoutée d'une solution. Mais Ajax peut également faire perdre de la valeur à une solution. C'est à ce stade de la réflexion que le parallèle entre l'utilisation de flash et d'AJAX devient intéressant.
Le Flash continue de déchaîner les passions. Le format de Macromedia (maintenant propriété d'Adobe) est en effet vecteur du meilleur du web comme du pire. Bien utilisé, il peut apporter une originalité créative et aider à créer des chefs d'oeuvres. Mais généralement, il est la source d'irritation de nombreux surfeurs qui s'arrachent les cheveux devant la dernière "innovation" en matière de publicité animée et bruyante.Certaines personnes vont même jusqu'à masquer avec un objet ces zones tellement animées qu'elles rendent difficile la concentration sur la lecture d'un texte. Finalement, la situation se stabilise. Le flash est maintenant surtout utilisé pour afficher les publicités et pour les sites qui ont besoin d'un support visuel fort (parfois faute de mieux à proposer pour être attractif). Qu'a vraiment apporté le flash à internet ? Il y a 5 ans, on parlait du flash comme on parle d'Ajax aujourd'hui : "François, il est impensable que tu fasses du web sans Flash!". Comme toute nouveauté technologique, un effet de mode évident né. Quand Pierre et Marie Curie découvrent la radio-activité, il est devenu indispensable de vendre du radio-actif, même l'eau minérale que cela soit utile ou non.
Il en va pour la radio-activité comme pour le flash et Ajax, il n'est pas bon de l'utiliser sans raison. Le flash permet d'apporter un contenu multimédia et réponds bien à ce besoin. C'est la bonne pratique du flash. De la même manière, Il convient de définir les bonnes pratiques d'AJAX.
Il est important d'identifier les effets indésirables des technologies pour pouvoir les évités et offrir le meilleur. Il faut d'abord préciser qu'Ajax comme le flash nuit à l'accessibilité des pages. L'accessibilité désigne la caractère possible de l'accès au contenu d'une page par des moyens spécifique à un handicap (navigation via un PocketPc, un terminal braille ou un synthétiseur vocal). Le javascript d'une manière générale nuit à l'accessibilité.
De même, le flash et Ajax ne sont pas des contenus référencés par le moteur de recherche. Ainsi,le contenu réalisé via ces techniques ne viendra pas (ou peu) enrichir le référencement portant préjudice au référencement naturel du site.
Il est tentant de réaliser un site ou une interface complètement en flash. Les liens hypertextes, ne provoquent plus le chargement d'une nouvelle page, mais vont provoquer un appel pour remplacer une partie du contenu de la page ou de l'écran de l'application. De mon pont de vue, ceci est une mauvaise pratique. Tout le monde reconnaît les sigles suivants : |<< > >>| Ils sont les symboles de la lecture vidéo. Ils permettent à l'utilisateur de naviguer linéairement dans une vidéo. De même, tout le monde connaît les sigles :
Ils sont les symboles de la navigation Internet. Ajax comme flash, offre la possibilité de reconstruire une navigation au dessus de la navigation internet en rechargeant une partie de la page dynamiquement. Cela n'est pas souhaitable. En effet, l'url est la même. Comment placer mes favoris ? Comment faire "précédent" ? A l'inverse, il y a des cas où reconstruire une navigation est un objectif ! Dans le cas d'une cartographie, on souhaite reconstruire la navigation dans l'espace (latitude, longitude, niveau de zoom). Qui n'est pas permise par les navigateurs. Dans ce cas, le référencement n'est plus un obstacle: comment un moteur pourrait-il référencer une carte ? Et l'accessibilité devient une moindre contrainte: un non-voyant peut difficilement lire une carte via l'informatique. Il est donc important de réfléchir à l'utilité de ce que l'on met en place.
Ajax c'est bien si cela rend service à l'utilisateur en ajoutant une valeur ajoutée sans détruire un fonctionnement harmonieux du web. Dans cet optique, il y a des petites choses vraiment interessantes même si elles peuvent passer inaperçues à l'utilisateur, il s'agit d'une véritable valeur ajoutée :
Voila pour l'utilisateur, mais plaçons nous un peu du côté du chef d'entreprise. Reprenons l'exemple de la complétion. On peut imaginer généraliser ce dispositif à l'ensemble d'une application. A chaque lettre tapée par un utilisateur dans un champ, Ajax va interroger le serveur. Sans Ajax une requête par utilisateur permet d'enregistrer le formulaire. Avec Ajax, il faut plusieurs centaines voire plusieurs milliers de requêtes par utilisateur. Cette façon de faire peut donc devenir rapidement un gouffre financier:
Forte valeur ajoutée pour l'entreprise, oui ! Ajax va dans ce sens. Ajax offre des façons pour traiter plus efficacement des problématiques Web. Et le prix dans tout ça ? Le fait est que qu'Ajax demande un travail supplémentaire pour chaque fonctionnalité. De plus Ajax est jeune, les solutions de développement Ajax (framework) se multiplient, mais rien ne s'impose encore. Tout ceci est très mouvant. Il convient d'être prudent sur les coûts de développement initiaux et surtout sur les coûts d'évolutions et de maintenances applicatives de framework qui pourrait tomber en désuétude.
Un des exemples les plus classiques est la sélection du code postal d'une commune de France dans un formulaire (En France, plusieurs communes ont le même code postal). Cet exemple n'est pas innocent. Nalis rencontre couramment cette problématique dans la réalisation de système d'information. L'utilisateur sélectionne un département puis un code postal pour enfin choisir la commune. Techniquement, quelles sont les possibilités ?
- Envoyer la liste des 36 000 communes de France dans la page web ... très lourd, temps de chargement excessif.
- Recharger une nouvelle page à chaque sélection de liste ... pas très fluide, va induire un temps d'attente chez l'utilisateur
- Utiliser Ajax, qui actualisera la liste des codes postaux une fois la région sélectionnée (puis de même avec la liste des communes). C'est en fait une utilisation standard (javascript) et efficace (faible quantité de données transférée). Le temps de latence existe toujours, mais il est bien moindre.
- un développement côté serveur ( PHP ou autre) comme on peut voir sur ratp.fr
- Un développement Flash (comme l'utilise www.mappy.fr de puis longtemps pour les cartes script et itinéraires routiers)
- un développement AJAX (comme l'utilise maps.google.com pour les images satellites)
Maintenant que les présentations sont faites, on ne pourrait qu'être étonné de voir le traitement réservé à AJAX. Ajax c'est fashion, c'est branché, c'est tendance ... Tout le monde parle d'une révolution. Une révolution ça ? C'est juste l'utilisation conjointe de technologies existantes. Évidemment, « Ajax », ça sonne beaucoup mieux que DHTML, XmlHttpRequest, SOAP et de service web (qui lui même sonne mieux que flux RSS). En fait, c'est surtout Javascript et le DHTML qui sont à l'origine de l'engouement derrière Ajax plus qu'Ajax lui-même. Grace au DHTML on peut faire du "drag and drop" : dans Windows ça existe depuis toujours, mais dans une page web. En voici un petit exemple. Je propose de réordonner les lettres du logo Nalis par cliqué glissé.
 |
|
Il ne s'agit de simplement déplacer les éléments, à l'écran leur ordre est bien enregistré. En effet, le bouton affiche les lettres dans l'ordre.
On peut donc imaginer de nombreuses applications sur ce principe. Seulement le drag and drop n'est pas nécessairement de l'AJAX .. Justement, mon exemple n'en est pas. Pour que cela soit de l'AJAX, il faudrait qu'un appel XmlHttpRequest avertisse le serveur de chaque changement d'ordre. Or, cela n'est pas le cas. Dans la pratique de mon métier, il est courant de recueillir le besoin sous la forme d'une possible réponse à ce besoin. Ainsi, un client dira qu'il a besoin de SPIP alors qu'il a besoin d'une solution pour gérer le contenu de son site internet. De même pour Ajax, le besoin n'est pas une application technologiquement innovante. Ajax, ne résoudra pas les problèmes d'une entreprise. Par contre, Ajax est un moyen d'augmenter la valeur ajoutée d'une solution. Mais Ajax peut également faire perdre de la valeur à une solution. C'est à ce stade de la réflexion que le parallèle entre l'utilisation de flash et d'AJAX devient intéressant.
Le Flash continue de déchaîner les passions. Le format de Macromedia (maintenant propriété d'Adobe) est en effet vecteur du meilleur du web comme du pire. Bien utilisé, il peut apporter une originalité créative et aider à créer des chefs d'oeuvres. Mais généralement, il est la source d'irritation de nombreux surfeurs qui s'arrachent les cheveux devant la dernière "innovation" en matière de publicité animée et bruyante.Certaines personnes vont même jusqu'à masquer avec un objet ces zones tellement animées qu'elles rendent difficile la concentration sur la lecture d'un texte. Finalement, la situation se stabilise. Le flash est maintenant surtout utilisé pour afficher les publicités et pour les sites qui ont besoin d'un support visuel fort (parfois faute de mieux à proposer pour être attractif). Qu'a vraiment apporté le flash à internet ? Il y a 5 ans, on parlait du flash comme on parle d'Ajax aujourd'hui : "François, il est impensable que tu fasses du web sans Flash!". Comme toute nouveauté technologique, un effet de mode évident né. Quand Pierre et Marie Curie découvrent la radio-activité, il est devenu indispensable de vendre du radio-actif, même l'eau minérale que cela soit utile ou non.
Il en va pour la radio-activité comme pour le flash et Ajax, il n'est pas bon de l'utiliser sans raison. Le flash permet d'apporter un contenu multimédia et réponds bien à ce besoin. C'est la bonne pratique du flash. De la même manière, Il convient de définir les bonnes pratiques d'AJAX.
Il est important d'identifier les effets indésirables des technologies pour pouvoir les évités et offrir le meilleur. Il faut d'abord préciser qu'Ajax comme le flash nuit à l'accessibilité des pages. L'accessibilité désigne la caractère possible de l'accès au contenu d'une page par des moyens spécifique à un handicap (navigation via un PocketPc, un terminal braille ou un synthétiseur vocal). Le javascript d'une manière générale nuit à l'accessibilité.
De même, le flash et Ajax ne sont pas des contenus référencés par le moteur de recherche. Ainsi,le contenu réalisé via ces techniques ne viendra pas (ou peu) enrichir le référencement portant préjudice au référencement naturel du site.
Il est tentant de réaliser un site ou une interface complètement en flash. Les liens hypertextes, ne provoquent plus le chargement d'une nouvelle page, mais vont provoquer un appel pour remplacer une partie du contenu de la page ou de l'écran de l'application. De mon pont de vue, ceci est une mauvaise pratique. Tout le monde reconnaît les sigles suivants : |<< > >>| Ils sont les symboles de la lecture vidéo. Ils permettent à l'utilisateur de naviguer linéairement dans une vidéo. De même, tout le monde connaît les sigles :
Ils sont les symboles de la navigation Internet. Ajax comme flash, offre la possibilité de reconstruire une navigation au dessus de la navigation internet en rechargeant une partie de la page dynamiquement. Cela n'est pas souhaitable. En effet, l'url est la même. Comment placer mes favoris ? Comment faire "précédent" ? A l'inverse, il y a des cas où reconstruire une navigation est un objectif ! Dans le cas d'une cartographie, on souhaite reconstruire la navigation dans l'espace (latitude, longitude, niveau de zoom). Qui n'est pas permise par les navigateurs. Dans ce cas, le référencement n'est plus un obstacle: comment un moteur pourrait-il référencer une carte ? Et l'accessibilité devient une moindre contrainte: un non-voyant peut difficilement lire une carte via l'informatique. Il est donc important de réfléchir à l'utilité de ce que l'on met en place.
Ajax c'est bien si cela rend service à l'utilisateur en ajoutant une valeur ajoutée sans détruire un fonctionnement harmonieux du web. Dans cet optique, il y a des petites choses vraiment interessantes même si elles peuvent passer inaperçues à l'utilisateur, il s'agit d'une véritable valeur ajoutée :
- La complétion, on désigne par ce terme, la tentative de l'ordinateur de compléter un mot dont on a saisi que les premières lettres. Attention, on peut faire de la complétion en javascirpt sans Ajax. Ainsi quand les sites de voyages proposent une destination. Les destinations sont en nombres importants (ADP recence 421 aéroports dans le monde), mais ce nombre peut être suffisaient faible pour être envoyé avec la page au chargement (6 ko). De cette manière on supprime complètement le temps de latence entre la saisie et l'affichage des destinations possible.
- L'enregistrement d'un champ de saisie de manière transparente. Qui n'a jamais perdu un mail en cours d'écriture dans son webmail ? Ajax permet de sauvegarder comme brouillon à intervalle de temps régulier des informations saisies dans la page. Fini la valeur perdue par les déconnexions, les fins de sessions et autres mauvaises manipulations !
- en bande passante (connexions des serveurs à internet facturés au débit)
- en puissance machine nécessaire pour gérer mille fois plus de requêtes (l'augmenation de la charge et du coût ne sont toutefois pas proportionnel au nombre de requête, les requêtes de complétion générant une charge inférieure à la soumission d'un formulaire).
Forte valeur ajoutée pour l'entreprise, oui ! Ajax va dans ce sens. Ajax offre des façons pour traiter plus efficacement des problématiques Web. Et le prix dans tout ça ? Le fait est que qu'Ajax demande un travail supplémentaire pour chaque fonctionnalité. De plus Ajax est jeune, les solutions de développement Ajax (framework) se multiplient, mais rien ne s'impose encore. Tout ceci est très mouvant. Il convient d'être prudent sur les coûts de développement initiaux et surtout sur les coûts d'évolutions et de maintenances applicatives de framework qui pourrait tomber en désuétude.
Commentaires
Un billet très pertinent et argumenté, bravo !
Superbe explication : claire, honnête, lumineuse !
Merci pour ces explications précises et concrètes.
Des explications claireset structurées!!!
merci pour tes explications, je cherche justement toutes les possibilités qu'offre AJAX pour voir ce qui serait applicable à un annuaire !!
très bon billet :)
Je vais apporter un point négatif à cette liste de félicitations car je trouve que si l'article de vulgarisation que vous avez produit est intéressant, je trouve que vous exprimez souvent des raccourcis sur les termes techniques ... J'ai un peu de mal à considérer que le DHTML soit une simple utilisation conjointe du javascript et des css ... Dans le même registre ... vous parlez des services web comme d'une simple reformulation des flux RSS ... un peu court quand même ... Maintenant cela n'enlève rien à votre démonstration qui est certainement pertinente pour des développeurs web qui débute dans ces technologies sinon que cela vous enlève de la crédibilité.
Merci en toux cas pour cet effort de vulgarisation sur des technos nécessaires à la professionalisation du développement web.
Corto,
Vous avez raison, le billet laisse abusivement pensez qu'un service web et qu'un flux RSS sont la même chose. Pour que ce blog reste abordable est lisible par le plus grand nombre, j'ai tendance à vulgariser mon propos. Vous conviendrez néanmoins que sur le fond, Webservice est un terme plus vendeur que SOAP.
Par contre pour moi, DHTML = HTML + CSS + javascript. Pourriez-vous préciser votre vision du DHTML ?
Je vous remercie pour cette critique constructive.
A bientot
Bravo, enfin un article complet sur l'Ajax. Merci.