Articles contenant le tag javascript

Google Closure Compiler

Posté par Jimmy dans Laboratoire le 12 janvier 2010

Dernièrement, Google a lancé officiellement Google Closure, une gamme d’outils pour le javascript. Il y a trois volets dans Google Closure : Google Closure, Compiler, Google Closure, Library et Google Closure, Templates.

Closure Templates offre des modèles de projets pour programmer des applications en java. Du moins, c’est ce que j’en comprends. Puisque je travaille en .Net, je n’ai pas regardé cet aspect plus en détail.

Closure Library, comme le dit le nom, est un cadre d’application pour le javascript. Mais pour l’instant je préfère toujours jQuery.

Par contre, Closure Compiler est assez impressionnant, voici quelques explications.

Premièrement, j’aime bien les différentes possibilités d’utilisation du compilateur :

Il y a trois modes de compilation pour Google Closure Compiler :

  • Retrait des espaces blancs (Whitespace only)
  • Renommage des fonctions et variables (Simple)
  • Avancé

C’est de ce dernier que je parlerai car c’est ce qui est révolutionnaire. La compilation en mode avancée cherche à optimiser le javascript.

Exemple de base

Code initial


function printText(txt)
{
  alert("text : " + txt);
}
printText("aaa");

Code compilé

alert("text : aaa");

Explication

Puisque la méthode est simple, le compilateur élimine la déclaration de la fonction dans le but d’appeler directement son exécution. Un compilateur qui fait seulement renommer les fonctions aurait laissé la fonction en place ce qui aurait généré plus de texte.

Exemple légèrement plus complexe

Code initial


function printText(txt)
{
  if (txt == "")
  {
    alert("rien");
  }
  else
  {
    alert(txt);
  }
}
printText("");
printText("le texte");

Code compilé

alert("rien");alert("le texte");

Explication

Le compilateur ne fait pas seulement extraire le corps de la méthode, en fait il est capable d’interpréter le résultat dans le but de fournir le code optimal.

Exemple même complexité, plus de texte

Code initial


function printText(txt)
{
  if (txt == "")
  {
    alert("Le texte envoyé à cette fonction est vide");
  }
  else
  {
    alert ("Voici votre texte pour cette fonction : " + txt);
  }
}
printText("");
printText("le texte");

Code compilé


function a(b){b==""?alert("Le texte envoy\u00e9 \u00e0 cette m\u00e9thode est vide"):alert("Voici votre texte pour cette fonction : "+b)}a("");a("le texte");

Explication

Ici, c’est la même logique que l’exemple précédent par contre dû à la grosseur des chaînes de caractères le compilateur à laisser la méthode en place. Donc, l’élimination de la déclaration de la méthode ne se fait pas systématiquement, il y a une comparaison afin de savoir si oui ou non c’est optimal de retirer la fonction.

Attention

À moins que tout le javascript soit dans le même fichier il se peut que le code compilé ne fonctionne plus. Il est fortement suggéré de lire la documentation de la compilation avancée.

Malgré ça, le mode avancé de Google Compiler est le premier en son genre et je crois que ça deviendra un incontournable pour ceux qui veulent optimiser au maximum le javascript. Il ne serait pas étonnant que d’autres grands joueurs dans le domaine – YUI (Yahoo! User Interface Library) par exemple – offrent bientôt un outil similaire.

, , , ,

2 commentaires

Ajax à son plus simple avec Asp.Net

Posté par Jimmy dans Bonnes pratiques le 12 mai 2009

Asp.Net contient plusieurs contrôles permettant de faire du Ajax. Je ne les ai pas testés, mais j’aime bien connaître et contrôler ce qui se passe en arrière plan. C’est pourquoi j’ai décidé d’étudier comment faire du Ajax et de me faire quelques outils pour avoir plein contrôle de la communication client-serveur en Ajax.

Côté serveur

En réalité, côté serveur, il n’y a pas de différence entre une requête normale ou une requête Ajax. Ce qui est important c’est d’avoir le contrôle du texte qui sera retourné au client. Ma première idée était de créer une page aspx et de surcharger la méthode Render. Dans cette méthode il suffit de faire Response.Write("le texte de retour"); et de ne pas appeler base.Render();. Ça fonctionne, mais ce n’est pas très élégant.

Une meilleure méthode est d’utiliser un httpHandler. Pour en savoir plus sur les httpHandler, voici quelques articles intéressants.

Rien ne sert d’expliquer comment faire fonctionner un httpHandler, car ces articles le font très bien. Par contre, je vais démontrer comment l’utiliser pour répondre facilement à une requête Ajax.
Voici, un peu simplifié, ce que fait la méthode ExecuteRequest.

  
	string[] arrPath = context.Request.Path.Split('/');
	string pageMethod = Path.
		GetFileNameWithoutExtension(arrPath[arrPath.Length - 1]);
	string className = "ExempleAjax.Ajax." + pageMethod;
	IAjaxRequest pageRequest = (IAjaxRequest)System.Reflection.
		Assembly.GetExecutingAssembly().CreateInstance(className, true);
	pageRequest.ExecuteRequest(context);

La méthode extrait la partie de l’URL qui sera, en réalité, le nom de la classe à instancier. Cette classe hérite d’une interface qui contient une seule méthode : ExecuteRequest. Son utilité est de prendre en charge la requête, aller chercher l’information nécessaire et retourner le texte qui sera interprété en Javascript par le client.

De cette façon si on veut créer une nouvelle méthode Ajax il suffit d’ajouter une nouvelle classe et d’implémenter l’interface IAjaxRequest.

Côté client

Il est possible de tester la méthode simplement en inscrivant l’URL dans un fureteur. Pour l’utiliser, voici quelques sites qui expliquent comment faire du Ajax.

Par contre, j’aime bien concevoir des outils pour rendre efficace le développement. Donc voici une classe en Javascript qui aidera à faire du Ajax : AjaxHelper.js

Pour l’utiliser, il suffit d’instancier la classe pour ensuite définir les méthodes :

  
	var ah = new AjaxHelper();
	ah.OnAjaxRequestComplet = function(txt) {alert(txt);};
	ah.StartRequestProcessGET("/HelloWorld.ajax", null);

Voici l’exemple Hello world complet fait avec Visual Studio 2008 : ExempleAjax.zip

Liens d’intérets

, ,

2 commentaires