Cela fait toujours plaisir d'assister à une session donnée par Nikhil Kothari

Pour rappel, Nikhil est Architecte autour de la plateforme Web de Microsoft. Il a notamment travaillé sur ASP.NET Ajax Extensions, SilverLight et consort.

Cette session orientée Ajax Patterns & Practices a été pleine d'enseignements. Tout d'abord, Nikhil sépare les Patterns en 2 grandes catégories :

  • Foundationnal Patterns : Smart Data Access, Searchability...
  • User Experience Patterns : Navigation, Notification...

Une fois cette petite introduction terminée, Nikhil nous montre une application de gestion de Photos sur laquelle va se baser la suite de la présentation. Il a donc décider de s'attarder sur 5 patterns courant dans les applicatifs Ajax d'aujourd'hui :

  • Script attachment
  • Logical Navigation
  • Update Indicators
  • Smart Data Access
  • Mashing Up

Voyons ceci plus en détail.

Script Attachment
Ce pattern s'attache à la séparation complète du code, contenu et behavior. Il nous explique ici en quoi il est important de séparer son code javascript de son contenu HTML (pas de onclick="" par exemple) afin d'arriver à une plus grande souplesse. Pour cela, il link l'ensemble du javascript dans un fichier externe, et fait en sorte d'attacher ses onclick dynamiquement via $addHandler. Vous allez me dire, mais quel est l'avantage de ce pattern. Et bien, cela est plutôt simple, par cette injection dynamique des évenements, il vient de séparer son contenu du comportement attendu. Cela lui permet donc de complétement modifier son comportement sans apporter de modification à son code HTML, par exemple remplacer les onclick par des onmouseover. Il obtient donc une plus grande souplesse dans l'implémentation de son comportement. De plus, une fois ce travail effectué, il est alors beaucoup plus facile de transformer son script en Ajax Behavior au travers d'un Extender Ajax.

Logical Navigation
Ce pattern s'attache à controller une grosse problématique des interfaces Ajax : les boutons Back / Forward et la notion de Bookmark. Et oui, je vous vois déjà debout sur votre chaise vous, qui comme moi vous êtes battus contre ce bouton Back !!!! Afin d'apporter une solution à cette problématique, Microsoft propose donc un nouveau WebControl <asp:History /> ainsi qu'une API ClientSide permettant la gestion d'un stack d'historique. Cela permet notamment la gestion des boutons Back / Forward, mais aussi le Bookmarking d'une interface Ajax dans un état spécifique. Je vous invite donc à télécharger la release ASP.NET Ajax Futures pour de plus amples informations, mais cela vaut vraiment le coup de s'attarder sur ce contrôle.

Update Indicators
Une des problématiques des interfaces Ajaxifiées réside dans le fait que certaines actions modifiant le contenu de la page ne sautent pas forcement à l'oeil de l'utilisateur. Notamment quand ces dernières ajoutent du contenu en bas de page alors que la scrollbar est en haut. Pour palier à cette problématique, Microsoft propose un nouveau WebControl <asp:UpateIndicator /> que vous retrouverez dans ASP.NET Ajax Futures. Ce contrôle permettras donc de positionner la scollbar au niveau où apparaît le nouvel élément ainsi qu'un effet "blinking" d'une couleur différente autour de ce dernier. Avec ce mécanisme, impossible de rater le résultats des actions Ajax.

Smart Data Access
Ce nom a été trouvé par Nikhil mais il ne représente pas forcement ce qu'il veut dire. En fait, ce pattern est là pour résoudre une problématique bien connue, à savoir : Comment puis modifier le contenu de mes pages via Ajax sans pour autant sacrifier mon référencement auprès des moteurs de recherche. Cela fait plaisir de voir que la version de notre site (http://www.wygwam.com) fonctionne quasiment de la même façon que ce que nous propose Nikhil, le tout avec 1an et demi d'avance !!! Pour exemple : http://www.google.com/search?hl=fr&q=expertise+.net&lr=. Si vous passez sur notre site, vous verrez que cette page est une page Ajax, n'existant pas au sens physique du terme. Elle pour autant bien référencée dans Google.

Mashing Up
Alors là, je vous avoue que je reste perplexe. Ce pattern parle de l'intégration des services distants. Par exemple, lorsqu'en Ajax vous voulez appeler le WebService de Flickr, vous utilisez ce qu'on appelle un ServiceProxy pour contrer les problématiques de crossdomain. Vous créer un handler dans votre site qui fera l'appel au service distant. Avec l'implémentation de JSONP par les fournisseurs de services, à savoir délivrer le contenu sous forme de JSON via un appel de callback vers une de vos fonctions, la solution proposée par Nikhil repose donc sur l'injection de balise <script type="text/javascript" src="http://monserviceexterne"></script>. Cette méthodologie est toute nouvelle et mérite donc qu'on s'y penche de plus près avant de se prononcer. Au premier abord, c'est pas des plus séduisants car cela repose entierement sur le fait que le service externe vous envoie bien ce qu'il a promis et pas des ordres javascript malicieux qui seront injectés directement dans votre site. Pour cette raison, je préfère donc l'utilisation des ServiceProxy qui permettent de controler le retour. Mais il ne faut jamais vendre la peau de l'ours avant de l'avoir tué. A creuser ...

 

Pour finir, 2 petites url sur les Ajax Patterns :

 

Je vous invite donc à télécharger ASP.NET Ajax Futures afin de découvrir toutes ses nouveautés.

Stay Tuned...

Aurelien
Member of WygTeam