Plusieurs techniques peuvent être utilisées pour optimiser les performances d’une application Web (mise en cache, compression des fichiers, minification, etc). Je vais me pencher aujourd’hui sur le package NuGet d’optimisation d’un site Web « ASP.NET Optimization – Bundling » qui a été publié récemment par Microsoft.

Ce package ajoute le support du regroupement et de la minification des fichiers JavaScript et CSS – qui sont des caractéristiques d’ASP.NET 4.5 et ASP.NET MVC 4 (disponibles actuellement en version Developper Preview) – avec le minimum d’effort pour les applications ASP.NET 4 et ASP.NET MVC.

Le regroupement et la minification sont des procédés de réduction de la taille des fichiers en les combinant, et en supprimant les espaces et autres caractères inutiles. Ces méthodes permettent de rendre l’exécution d’une page Web plus rapide avec le moins de demandes de chargement des fichiers.

Nous verrons dans ce billet de blog comment améliorer les performances d’une application Web ASP.NET MVC en utilisant les techniques de regroupement et de minification introduites par le package Microsoft.Web.Optimisation.

Pour commencer, nous allons créer un nouveau projet ASP.NET MVC 3.
Comme l’illustre l’image ci-dessous, nous constatons que notre application contient par défaut un nombre déjà assez important de fichiers JavaScript et CSS.

En exécutant une page de cette application (LogOn.chtml), nous obtenons les statistiques suivantes issues de l’analyse d’un outil de mesure de performance comme YSlow.

Pour cette page, nous avons un nombre total de 7 requêtes HTTP qui ont été effectuées, avec 4 fichiers JavaScript d’une taille totale de 119,9K qui ont été chargés.

Nous allons maintenant essayer de réduire le nombre de requêtes et la taille des fichiers qui sont chargés en utilisant ASP.NeT Optimisation Bundle.

Pour cela, nous allons dans un premier temps ajouter une référence à Microsoft.Web.Optimisation dans notre application.

L’ajout de ce composant se fera via NuGet. Pour installer le package en utilisant NuGet voir mon article sur NuGet.

Après avoir installé le package, nous pouvons démarrer le regroupement et la minificatioon de nos fichiers en ajoutant tout simplement la ligne de code suivant dans la procédure Application_Start() du fichier Global.asax.cs.

BundleTable.Bundles.EnableDefaultBundles();

Et c’est tout ;).

N’oubliez pas d’ajouter une référence à Microsoft.Web.Optimization dans le fichier Global.asax.cs :

using Microsoft.Web.Optimization;

Tous les fichiers JavaScript contenus dans le répertoire Scripts (les sous dossiers ne sont pas pris en compte) de notre application seront regroupés, compressés et traités comme un seul fichier. Ces fichiers seront regroupés par défaut dans un dossier Script.

Ils seront désormais référencés en utilisant la ligne de code suivante :

<script src="@Url.Content("/Scripts/js")" type="text/javascript"></script>

De même, les fichiers CSS contenus dans le répertoire Content seront également compactés par défaut dans un dossier Content.

Ils seront référencés en utilisant la ligne de code suivante :

<link href="@Url.Content("/Content/css")" rel="stylesheet" type="text/css" />

Après avoir appliqué ces modifications, exécutons à nouveau la page précédente. Nous obtenons le résultat suivant :

En comparant avec le résultat précédent, nous constatons que le nombre de requêtes est passé de 7 à 4, avec l’utilisation d’un fichier JavaScript unique, contre quatre précédemment.
C’est déjà une bonne chose. Par contre, on se rend compte que la taille du JavaScript a plutôt augmenté, passant de 119,9k à 437,5k.

Pourquoi avons-nous plutôt une augmentation de la taille du JavaScript ?

En utilisant le dossier Scripts par défaut, ce sont environ une vingtaine de fichiers JavaScript contenus dans notre application ASP.NET MVC qui sont regroupés, minifiés et référencés dans une page qui n’utilise que quatre de ces fichiers.
C’est tout à fait normal donc que malgré l’opération d’optimisation, on se retrouve avec une taille totale de ces fichiers supérieure à celle des quatre référencés dans notre page.

Pour pallier à cela, nous pouvons définir nos propres regroupements de fichiers.

Avec cette option, nous avons la liberté dans le choix des fichiers qui seront dans un regroupement, ainsi que l’URL qu’aura le regroupement. À ce stade, le choix des dossiers de regroupement doit être fonction de la récurrence des fichiers JavaScript et CSS dans les pages de votre application.

Nous pouvons définir nos regroupements personnalisés en procédant comme suit dans la procédure Application_Start() du fichier Global.asax.cs :

BundleTable.Bundles.EnableDefaultBundles();

Bundle jsBundle = new Bundle("~/Scripts",typeof(JsMinify));
jsBundle.AddFile("~/Scripts/jquery-1.5.1.min.js");
jsBundle.AddFile("~/Scripts/modernizr-1.7.min.js");
jsBundle.AddFile("~/Scripts/jquery.validate.min.js");
jsBundle.AddFile("~/Scripts/jquery.validate.unobtrusive.min.js");

BundleTable.Bundles.Add(jsBundle);

Bundle cssBundle = new Bundle("~/Style", typeof(CssMinify));
cssBundle.AddFile("~/content/themes/site.css");
cssBundle.AddFile("~/content/themes/base/jquery.ui.all.css");

BundleTable.Bundles.Add(cssBundle);

Nous allons désormais référencer ces regroupements dans notre page comme suit :

<link href="@Url.Content("~/Style ")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts")" type="text/javascript"></script>

Et en exécutant la page précédente, nous obtenons le résultat suivant :

Et voilà, la taille de nos fichiers JavaScript passe de 119,9K à 2,3K, soit une réduction de plus de 95 %.

Vous pouvez également ajouter à votre regroupement tous les fichiers JavaScript d’un répertoire en procédant comme suit :

jsBundle.AddDirectory("~/Scripts", "*.js", false);

Nous avons maintenant de quoi compresser et réduire au maximum le nombre de hits de nos pages Web avec souplesse.

Seul bémol, la minification des fichiers contenant du code CSS3 semble ne pas fonctionner pour l’instant.

Dans le même ordre d’idée, nous allons continuer à explorer les nouveautés du Framework Web avec cette fois, une analyse détaillée des améliorations apportées au modèle Web par défaut.

Pour cela, nous allons comme d’habitude lancer notre environnement Visual Studio, qui bien évidemment contient ASP.NET MVC 4 Developer Preview et procéder à la création d’un nouveau projet.

Dans la zone de sélection des modèles de projet, nous allons choisir le modèle Internet Application et valider ensuite sur OK.

Procédons à l’exécution de notre application (ctrl + f5) :

On peut s’apercevoir que le design du modèle par défaut auquel nous avons été habitués depuis la première version d’ASP.NET MVC jusqu’à la version trois a été totalement remanié et est désormais beaucoup plus esthétique.

Rendu adaptatif (Adaptive Rendering) avec CSS Media Query et Viewport

La nouveauté la plus intéressante que je vais noter est cependant ce qui se cache derrière ce nouveau Template. Pour illustrer cela, je vais exécuter un modèle de base d’ASP.NET MVC 3 et celui de MVC4 avec un terminal mobile. Ici, je vais utiliser un émulateur d’Opera Mobile :

À première vue, on se rend compte que le texte de notre site sur MVC 3 est carrément illisible, tandis que le contenu de celui en MVC 4 a été adapté en fonction de la taille du terminal.

Ceci est possible grâce à l’implémentation d’une nouvelle fonctionnalité de rendu adaptatif, qui couple le tag meta viewport et le CSS Media Queries.

Tag meta viewport

Pour un site Web classique de largeur par exemple 980px, le navigateur mobile va se charger de redimensionner le contenu proportionnellement. Du coup, à l’affichage, l’on peut se retrouver avec des caractères beaucoup trop petits, carrément illisibles, comme c’est le cas avec notre site sous ASP.NET MVC 3.

La balise meta viewport permet au navigateur de comprendre que l’affichage de notre page doit être adapté en fonction de la taille du terminal sur lequel est exécutée l’application. En spécifiant cette balise dans une page, au lieu de procéder à une réduction du texte, le navigateur redessine plutôt la page de telle sorte qu’elle soit parfaitement conforme aux dimensions de l’appareil.

La balise meta viewport est renseignée dans le fichier _layout de votre projet :

<meta name="viewport" content="width=device-width">

CSS Media Queries

Nous avons grâce au meta viewport, spécifié à notre navigateur qu’il peut adapter le contenu de notre page en fonction de la taille du terminal. Cependant, celui-ci n’est pas assez futé pour définir automatiquement les règles d’affichages et les dispositions graphiques de votre page.

C’est à ce stade qu’interviennent les Media Queries. Cette fonctionnalité introduite par le CSS3 va permettre de définir des règles d’affichage personnalisées en fonction du type de média, de la taille de la fenêtre, de la résolution de l’écran, etc.

À titre d’exemple, avec le script suivant, l’affichage de ma page dans un navigateur ayant une taille supérieure à 850px sera en bleu, tandis que sur un navigateur ayant une taille max de 850px, elle aura un background noir.

body {background-color:blue;
      color:black;}
@media only screen and (max-width: 850px) {
    body {background-color:black;
          color :white ;}
}

En effet, lors du chargement de la page, le navigateur applique plutôt le code CSS contenu dans le bloc @media si la résolution de l’écran est inférieure ou égale à celle définie par l’attribut max-width.

Vous trouverez les règles d’affichage personnalisées pour le modèle de projet par défaut d’ASP.NET MVC4 dans le fichier Site.css, dans le bloc de code @media only screen and (max-width: 850px).

Utilisation de jQuery UI

Une autre amélioration qui a été apportée au modèle est l’utilisation du JavaScript pour fournir une interface utilisateur plus riche. Les pages connexion et inscription utilisent désormais jQuery UI pour afficher à l’écran une page beaucoup ergonomique :

Conclusion

Il est intéressant de constater que des règles CSS ont été définies dans le Template Web par défaut pour prendre en charge les tailles d’écrans différents. Mais, je tiens à signaler que ce modèle n’est pas adapté pour la navigation sur les écrans tactiles. Par exemple, vous pouvez remarquer qu’il n’utilise pas la bibliothèque jQuerie Mobile.

À mon humble avis, se serait bien que soit introduit un autre template dans ASP.NET MVC 4 qui couple le modèle mobile et le modèle Web pour fournir une application optimisée à la fois pour les terminaux mobiles et les navigateurs Desktop.

En tout cas peut-être d’ici à la publication de la version finale, ce sera le cas ;).

Aujourd’hui je vais me pencher sur l’utilisation même de Nuget au sein de Visual Studio 2010 pour installer et gérer des packages.

Dans ce billet de blog, nous allons découvrir une nouveauté/astuce qui avait été introduite par la dernière version de Nuget, permettant d’installer et maintenir simultanément dans plusieurs projets un package.

Pour l’exemple, nous devons disposer comme pré requis Visual Studio 2010 et le gestionnaire de package Nuget.

Lançons votre EDI, créons une nouvelle solution et ajoutons-y deux projets comme l’illustre l’image ci-dessous :

Nous allons ajouter un package à la fois dans notre application MVC et notre application Windows Forms en une seule opération.

Pour cela, nous devons faire un clic droit sur notre solution, dans le menu contextuel qui va s’afficher, nous allons cliquer sur « Manage Nuget Packge ».

Dans la fenêtre de gestion des packages Nuget, nous allons essayer d’installer Entity Framework dans nos deux projets en cliquant sur le bouton « Install ».

Une seconde fenêtre va s’afficher, nous demandant de sélectionner les projets de notre solution dans lesquels nous souhaitons que Nuget installe le package.

Par défaut, tous les projets de la solution sont cochés.

Nous allons cliquer enfin sur le bouton OK pour lancer l’installation.

Nous nous rendrons compte que Nuget a téléchargé le package et ajouté automatiquement une référence à celui-ci dans les deux projets de notre solution.

Et voilà, c’est tout plutôt facile ;).

Dans la fenêtre de gestion de packages Nuget, grâce au bouton « Manage » désormais affiché sur le package que nous venons d’installer, nous pouvons à tout moment désinstaller le package dans un projet, ou ajouter le package dans un nouveau projet que nous avons ajouté à notre solution.

Pour effectuer une installation directement dans un projet uniquement d’une solution, au lieu de faire un clic droit sur la Solution, faites-le plutôt sur le dossier « References » du projet, et cliquez sur Manage Nuget Packages.

- Exemple VB.net

– Exemple C#

Bonne programmation à tous et à bientôt pour d’autres astuces

– Cacher une ligne de la grille
 Grid.Rows(i).Visible = False

– Récupérer le numéro de la ligne sur laquelle l’on a cliquer
dim Row as integer = Grid11.MouseCellPosition.Row

On s’arrête la pour l’instant en espérant que sa va aider plusieurs personne, bonne programmation a tous et si vous avez un soucis vous me contacter en postant juste dans le forum VB.net.