Dynamiser une application web

Dans mon dernier billet, Évoluer avec le web, il était question d’amélioration de compétences à travers un projet concret. ActivityMapper a servi de projet cobaye dans cet exercice. L’objectif premier était de le faire passer d’un site web vers une application web. La différence est qu’au lieu de naviguer d’une page à l’autre, on tente d’imiter le comportement d’une application native. On tente donc de créer un espace de travail avec des barres d’outils servant à gérer l’affichage des activités sur la carte au centre de l’écran. Tant qu’à changer totalement de principe, pourquoi pas réécrire l’application au complet en ASP.NET MVC?

Afin d’en arriver à ce résultat, il faut permettre plus d’intéractivité avec le serveur à partir d’une page web en utilisant du javascript. L’avantage c’est qu’une partie du code est exécuté dans le navigateur de ceux qui visitent le site, donnant davantage l’impression d’utiliser un logiciel dynamique.

Ce langage est plutôt ancien mais a beaucoup gagné en momentum récemment. Plusieurs raisons en font maintenant un incontournable. Premièrement il est intégré dans tous les navigateurs web et son implémentantion est standardisée. Depuis l’avènement de Google Chrome, les navigateurs se font la compétition à savoir qui exécute le javascript le plus rapidement. On a donc été témoin d’une escalade de performance au point où l’exécution de certaines tâches qui pouvaient se compter en plusieurs secondes avant est maintenant quasi instantanée.

Il n’en fallait pas plus pour donner beaucoup de popularité à toute une série de frameworks basés sur ce langage. Parmi ceux-ci, on compte jQuery, ExtJS et Prototype. Au début de mon analyse de ces produits, j’ai opté pour jQuery parce qu’il avait une excellente réputation, et c’est toujours le cas aujourd’hui d’ailleurs. J’ai donc lu tour à tour Learning jQuery 1.3, jQuery UI 1.6 et jQuery Reference Guide pour me familiariser avec le concept.

Le principe derrière ces frameworks, c’est de trouver des éléments HTML et leur appliquer des modifications en très peu de code. Exemple, la ligne ci-dessous cherche tous les éléments de la page qui ont la classe CSS “important” et y ajoute la classe “evidence”. Ça pourrait permettre de faire ressortir des éléments importants d’un texte en le mettant en souligné jaune comme avec un marqueur, par exemple.

$(".important").addClass("evidence");

Mis à part les modifications esthétiques qui peuvent être appliquées, on peut aussi faire appel au serveur pour récupérer des nouveaux éléments ou des informations brutes. Ici, on peut facilement récupérer le nom de l’activité numéro 3 et l’afficher dans tous les éléments qui ont la classe “activityName”.

$.get('http://localhost/activity/3/name', function(name){
  $('.activityName').html(name);
});

C’est là que le JSON, JavaScript Object Notation, prend tout son sens. Il s’agit d’une manière d’encoder des informations structurées. En une seule ligne de code, javascript peut transformer une string JSON en objets. C’est donc possible de transporter des objets du server pour consommation telle quelle dans le navigateur. Exemple pratique, récupérer une liste d’activités complète de la base de données sur le serveur et bâtir dynamiquement une grille pour les afficher dans le navigateur du client. C’est à partir de ce principe que j’ajoute de la vie dans une page web. Il s’agit de modifier la page existante avec des nouveaux éléments en réaction à des événements quelconques, tels que l’intéraction d’un utilisateur avec la page.

Le passage de ASP.NET à ASP.NET MVC facilite l’utilisation de javascript dans un projet web principalement parce que les ID des éléments sont attribués au niveau du HTML plutôt que dans des contrôles serveurs. Le fait que ASP.NET fasse une abstraction partielle du HTML en utilisant des contrôle complexifie l’utilisation du javascript. Bien souvent les éléments HTML avec lesquels on voudrait intéragir ont des ID générés avec la page. Ils sont dépendants de la hiérarchie des contrôles utilisés et peuvent devenir très complexes. Sans rentrer dans les détails ici, je peux vous assurer que ça fait partie des raisons pourquoi beaucoup de programmeurs ASP.NET sont allergiques au AJAX. Microsoft a encapsulé le principe dans un système de panneaux à rafraîchissement dynamique. C’est une belle initiative, mais on est loin du one-liner qui met en évidence tous les éléments importants d’une page.

Tout ça pour dire que sous ASP.NET MVC, les contrôles sont révolus. Le principe est simple: récupérer les données dans un premier lieu et les insérer dans une page. Ensuite, si la page veut rappeller le serveur pour se mettre à jour, juste la peine de faire un call AJAX et modifier la page avec les nouvelles informations reçues.

Avec ces principes, en plus de sauver sur le temps de développement, on se permet de dynamiser le site web. Ensuite vient la mise en production, dont il sera question lors du prochain billet.