Afin de découvrir en douceur les possibilités disponibles dans le Framework AJAX v4 de Microsoft, j’ai tout simplement choisi d’utiliser mon API de prédilection et de l’utiliser dans un cas simple pour commencer.

Bing Maps for Enterprise MS AJAX 4.0

Le but des exemples qui vont suivre sont multiples mais globalement, l’idée est d’introduire les problématiques Ajax, découvrir le Framework MS AJAX 4.0 et en quoi il peut vous aider, le tout agrémenter de cartographie pour le plaisir d’exploiter ces nouveautés dans un cadre concret.

Ici ce premier exemple simple va nous permettre de mettre en évidence une des possibilités du Framework MS AJAX 4.0 tout en le présentant dans un cas concret afin de charger à la demande et de manière asynchrone le script permettant l’utilisation du MapControl AJAX de Bing Maps API. 
 

Petits rappels sur la technologie Ajax, MS AJAX v4 et liens

MS AJAX 4.0 Header Bing Maps API

Ajax d’une manière générale a permis de fournir aux utilisateurs finaux, des interfaces web avec des fonctionnalités et des comportements proches de ceux observés dans des applications lourdes ou des clients dédiés.

Le seul hic’ concerne les développements et la complexité relative qui est ajoutée ce qui pour les entreprises est un souci majeur (lié au manque de ressources réellement qualifiées pour ce genre de développement, lié aux problématiques de maintenance applicative, etc.…)

Microsoft a proposé une approche visant à simplifier l’emploi de cette technologie en mettant à disposition des contrôles “magiques” permettant de facilement “ajaxiser” le comportement des contrôles sur les pages.
Ces contrôles ne sont en réalité que la poudre aux yeux et qui parfois peut s’approcher de la poudre explosive. Il est nécessaire de rester très prudent si on décide des les utiliser surtout dans des cadres particuliers où l’on ne maitrise pas toujours l’ensemble du cycle de vie ou de déclenchement des événements de la page.

L’UpdatePanel n’est pas une solution miracle ni une solution à éviter absolument (c’est un réel débat :)), c’est un composant dont il faut connaître le comportement précis notamment dans son impact sur les données transportées.

En clair et pour revenir sur la problématique, la technologie Ajax n’est pas toujours simple à implémenter et d’une manière générale, on observe en utilisation purement client-side, des limitations ou des difficultés au premier abord pour réaliser des choses qui sont simples lorsqu’elles sont réalisées côté serveur comme par exemple les notions de binding ou de templating.

Ici, avec MS AJAX v4, l’idée est de passer sur une solution “full Ajax” (ou plutôt full JavaScript) sous entendu pas dépendant d’un contrôle UpdatePanel lui même lié à un contexte ASP.Net qui implique des comportements qui peuvent être lourds.

Plus aucune dépendances à ASP.Net pour faire de l’Ajax facilement ? Pour un développeur ASP.Net, il y a de quoi être, surtout si tout n’est pas à refaire à la main (oui car c’est quand même le but hein ;p).

 

Pour une introduction plus concrète et pratique, je vous invite à retrouver la session donnée par Aurélien Verla (un vrai guru du JavaScript !) lors des Techdays 2010 :
Icon video MS AJAX 4.0 Bing Maps API
A la découverte du Framework MS Ajax 4.0 : « UpdatePanel or not UpdatePanel : That is the question »

 

Pour découvrir plus en détails le Framework MS Ajax 4.0, ses possibilités et ensuite apprendre à vous en servir, voici quelques liens recommandés :

 

MS AJAX 4.0 et le chargement différé de script

Le Framework MS AJAX permet de charger des scripts de manière asynchrones de manière à réduire le nombre de script à inclure de base dans la page. Les définitions d’inclusions de script sont ici limitées.

MS AJAX 4.0 Header Bing Maps API

En effet, ces scripts seront téléchargés à la demande et de manière asynchrone de façon à garantir le meilleur temps de réponse d’une page pour ensuite ajouter les fonctionnalités.

Cela devient alors très intéressant dans le scénario où les éléments ne sont pas forcément nécessaires par défaut, on peut tout à fait envisager de ne charger des scripts volumineux que lorsque l’on souhaite réellement utiliser une fonctionnalité qui exploite ces scripts.

 

Développement d’un scénario simple utilisant Bing Maps

Pour Bing Maps API, le script de base, dans l’état actuel représente un fichier d’un total d’un peu moins de 250 ko ce qui peut être problématique sur les connexions lentes mais également sur des pages où ces éléments cartographiques ne sont pas affichés par défaut.

Le chargement de ressources référencées dans une page s’effectue de manière non contrôlable par défaut et ainsi on peut avoir le script du MapControl qui se charge avant même les autres petits scripts exposant du contenu en exploitant des données bien moins volumineuses.

Bref, il est important de pouvoir contrôler le chargement du script global et de pouvoir de fait, modifier les ordres de chargement des scripts afin de garantir la meilleure expérience pour l’utilisateur final.

Ici nous allons démontrer comment il est possible d’utiliser les chargements asynchrones pour accélérer les disponibilités d’une application.

Tout d’abord, il est nécessaire d’ajouter une référence au fichier définissant les bases du Framework MS AJAX ce que l’on fait ici à travers l’inclusion du script depuis le CDN de Microsoft :

  <
  script 
  src
  ="http://ajax.microsoft.com/ajax/beta/0911/Start.js" 
type ="text/javascript"></ script >

Ensuite, on ajoute une section de script JavaScript et on souhaite alors ajouter le script lors de l’événement que l’on associe dans notre cas à un clic sur le bouton de chargement. Pour cela on utilise la méthode loadScripts() du namespace Sys :

Sys.loadScripts(["http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2"], 
function () { ... });

Cette méthode dont quelques détails sont disponibles à travers ce lien, prend dans notre cas d’utilisation, en premier paramètre une chaîne correspondant à la référence vers le script du contrôle AJAX de Bing Maps (hébergé sur l’ECN), le second paramètre est quant à lui, un pointeur vers une fonction (ou une fonction directement définie).

Cette fonction passée en paramètre nous permet de charger le composant cartographique (instanciation de l’objet de type VEMap) et d’initialiser la carte à l’aide de la méthode LoadMap() de la classe VEMap :

  function loadMapControl(divElement) {
    Sys.loadScripts([scriptReference], function () {
        // Bing Maps init
        map = new VEMap(divElement);
        map.LoadMap(new VELatLong(50, 4), 6, 'h');
    });
}

 

Les résultats

Voici la synthèse résultats observés à l’aide de Firebug : 
image
Note : je précise par ailleurs que ce chargement dynamique pose une erreur avec le script du Bing Maps AJAX control dans Firefox

Ici le chargement de la page avant le clic, on observe le chargement unique du fichier HTML :

Bing Maps asynchronous loading MS AJAX 4.0

Lors du clic sur le bouton de chargement différé, on observe le chargement du script du contrôle Bing Maps AJAX :

Bing Maps API with MS AJAX 4.0 in Firebug Asynchronous load script Très simplement, on peut remarquer que le temps d’attente de mise à disposition de l’application web (ou ici, de la page) est réduit ce qui garantit de pouvoir de visualiser la page et utiliser l’application instantanément.

Les scripts du contrôle AJAX Bing Maps et les dépendances sont chargés dynamiquement et il est alors possible de favoriser la rapidité de l’application.

Il serait alors envisageable d’établir une priorité dans le chargement des scripts et dans l’ordre des chargements des données en utilisant en cascade ces options de chargement dynamique.

Vous pouvez tester dès à présent cette page et récupérer le code source (en éditant la page) à travers ce lien : http://www.boonaert.net/element/bingmaps/samples/MSAJAX/asyncloading/mapasynctotal.htm

 

Conclusions

Ici, on ne présente qu’une fonctionnalité de l’ensemble des possibilités mises à disposition par MS AJAX 4.0 et qui peuvent pourtant fournir des avantages importants surtout dans des applications volumineuses en scripts ou sur des sites à forte volumétrie.

Il est à noter également que Google propose une librairie aux possibilités de chargement similaires permettant de simplifier le chargement de script depuis leur CDN, cependant, cette utilisation nécessite une clé d’application qui peut parfois être ennuyeux à gérer et sur lequel on ne dispose pas véritablement de garantie dans l’état actuel. Il est toutefois intéressant de garder en tête ces 2 technologies.

 

Dans le prochain article consacré à MS AJAX 4.0 en utilisation avec Bing Maps for Enterprise, nous verrons comment aller plus loin avec MS AJAX 4.0 en utilisant les possibilités de templating client et de binding avancé pour simplifier et accélérer les développements.

Encouragé et accompagné par Aurélien, c’est forcément plus motivant !