En effet, si vous développez un projet ASP.NET Core qui utilise uniquement le CoreCLR, vous ne devez qu’utiliser les dépendances qui offrent une prise en charge du CoreCLR.

Depuis l’annonce de .NET Core, de nombreux éditeurs de librairies se sont activés pour offrir une prise en charge de cette version, c’est notamment le cas des outils de tests, dont MSTest.

Microsoft a publié il y a quelques semaines une préversion de la V2 de MsTest, qui introduit une architecture unifiée et apporte une prise en charge de .NET Core. Dans le cadre de ce billet de blog, nous verrons comment mettre en place des tests unitaires dans un projet ASP.NEt MVC Core avec MSTest V2.

Nous allons dans un premier temps créer une application ASP.NET Core en utilisant le modèle Web Application.

Ceci fait, vous allez ajouter un nouveau projet de type bibliothèque de classe à votre projet. Pour l’instant, il n’existe pas de modèle de projet pour la nouvelle version du framework de test de Microsoft. Cette prise en charge sera effective dans la version stable de l’outil, avec la sortie de Visual Studio 15.

Ajoutez les dépendances suivantes à votre projet en utilisant la console Nuget :

• MSTest.TestFramework
• MSTest.TestAdapter
• dotnet-test-mstest

Le package MSTest.TestFramework permet d’installer le framework MSTest V2. Pour l’installer, cliquez sur Tools dans la barre de menu de Visual Studio, puis Nuget Package Manager, ensuite sur Package Manager Console. Rassurez-vous que dans la zone Default Project, vous avez sélectionné votre projet de test :

Dans la console NuGet, tapez la commande suivante :

Install-Package MSTest.TestFramework -Pre

MSTest.TestAdapter est utilisé pour trouver et exécuter le framework de test sur lequel votre projet de test est basé. Pour l’installer, vous devez exécuter la commande suivante dans la console NuGet :

Install-Package MSTest.TestAdapter -Pre:

Enfin, vous allez exécuter la commande suivante pour installer le dernier package NuGet :

Install-Package dotnet-test-mstest -Pre

Vous allez probablement obtenir un message d’erreur d’incompatibilité lors de la restauration des packages par NuGet. Ouvrez le fichier Project.json et remplacez :

"frameworks": {
   "netstandard1.6": {
     "imports": "dnxcore50"
   }
}

Par

"frameworks": {
   "netcoreapp1.0": {
     "imports": [
       "dnxcore50",
       "portable-net45+win8"
     ],
 
     "dependencies": {
       "Microsoft.NETCore.App": {
         "version": "1.0.0",
         "type": "platform"
       }
     }
   }
 }

Vous remarquerez sans doute que nous avons marqué notre bibliothèque de classes comme une application (netcoreapp1.0). Cela est dû au fait que notre projet de test utilise le .NET CLI. Sa méthode Main sera fournie par le runner de mstest.

Vous devez par la suite ajouter au fichier Project.json la ligne suivante, pour spécifier que votre projet de test unitaire repose sur mstest :

« testRunner »: « mstest »,

Ajoutez une référence au projet ASP.NET Core. Votre fichier Project.json devrait ressembler à ceci :

{
 "version": "1.0.0-*",

 "testRunner": "mstest",

 "dependencies": {
   "dotnet-test-mstest": "1.1.1-preview",
   "MSTest.TestAdapter": "1.0.3-preview",
   "MSTest.TestFramework": "1.0.1-preview",
   "NETStandard.Library": "1.6.0",
   "SampleApp": "1.0.0-*"
 },

 "frameworks": {
   "netcoreapp1.0": {
     "imports": [
       "dnxcore50",
       "portable-net45+win8"
     ],

     "dependencies": {
       "Microsoft.NETCore.App": {
         "version": "1.0.0",
         "type": "platform"
       }
     }
   }
 }

}

Ajoutez un nouveau fichier HomeControllerTest.cs à votre projet de test. Ajoutez un appel à l’espace de nom Microsoft.VisualStudio.TestTools.UnitTesting :

using Microsoft.VisualStudio.TestTools.UnitTesting;

Jetons maintenant un coup d’œil au fichier HomeController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace SampleApp.Controllers
{
   public class HomeController : Controller
   {
       public IActionResult Index()
       {
           return View();
       }

       public IActionResult About()
       {
           ViewData["Message"] = "Your application description page.";

           return View();
       }

       public IActionResult Contact()
       {
           ViewData["Message"] = "Your contact page.";

           return View();
       }

       public IActionResult Error()
       {
           return View("~/Views/Shared/Error.cshtml");
       }
   }
}

Nous allons écrire du code pour tester le ViewResult et une autre pour le ViewData.

Le code que nous allons écrire va permettre de vérifier que la méthode d’action Error() retourne le bon ViewResult. Le code de test est le suivant :

[TestMethod]
        public void Error_ReturnErrorView()
        {
            // Arrange
            var controller = new HomeController();
            var errorView = "~/Views/Shared/Error.cshtml";

            // Act
            var viewResult = controller.Error() as ViewResult;

            // Assert
            Assert.AreEqual(errorView, viewResult.ViewName);
        }

Pour le ViewData, nous allons tester que notre méthode d’action renvoie le bon ViewData. La méthode de test pour effectuer cela est la suivante :

[TestMethod]
       public void About_ReturnViewData()
       {
           // Arrange
           var controller = new HomeController();
           var viewData = "Your application description page.";

           // Act
           var viewResult = controller.About() as ViewResult;

           // Assert
           Assert.AreEqual(viewData, viewResult.ViewData["Message"]);
       }

Le code complet est le suivant :

[TestClass]
    public class HomeControllerTest
    {


        [TestMethod]
        public void Error_ReturnErrorView()
        {
            // Arrange
            var controller = new HomeController();
            var errorView = "~/Views/Shared/Error.cshtml";

            // Act
            var viewResult = controller.Error() as ViewResult;

            // Assert
            Assert.AreEqual(errorView, viewResult.ViewName);
        }


        [TestMethod]
        public void About_ReturnViewData()
        {
            // Arrange
            var controller = new HomeController();
            var viewData = "Your application description page.";

            // Act
            var viewResult = controller.About() as ViewResult;

            // Assert
            Assert.AreEqual(viewData, viewResult.ViewData["Message"]);
        }

    }

A l’exécution, vous allez obtenir le résultat suivant dans l’explorateur de test :

C’est tout. Dans un prochain billet, nous verrons comment écrire des tests unitaires smockés avec mstest v2 et la preview de Moq, qui prend aussi en charge .NET Core.

Le Web évolue rapidement, et Microsoft est conscient de cela. L’éditeur a ainsi adopté un cycle de mise à jour pour ASP.NET plus rapide que celui de Visual Studio.

La société compte donc publier une mise à jour pour sa plateforme de développement Web ASP.NET en début d’année prochaine.

Les développeurs qui veulent commencer à « jouer » avec les nouvelles fonctionnalités de cette mise à jour peuvent déjà télécharger sa version Release Candidate (RC) qui vient d’être publiée par les équipes ASP.NET et Visual Web Developer de Microsoft.

« ASP.NET et Web Tools 2012.2 » RC étend le runtine ASP.NET existant et ajout de nouveaux outils Web à Visual Studio 2012 pour WebForms, MVC, WebAPI, etc. Il s’agit des fonctionnalités suivantes :

1. De nouveaux modèles de projets ASP.NET MVC. la création d’applications Facebook est désormais plus facile avec le modèle Facebook, qui permet en quelques étapes de créer une application qui interagir avec le réseau social. Le nouveau modèle « Single Page Application » permet aux développeurs de créer des applications Web interactives côté client à l’aide de jQuery, Knockout et ASP.NET Web API ;
2. Le support de la communication en temps réel avec ASP.NET SignalR. SignalR est une bibliothèque client/serveur qui permet aux clients basés sur un navigateur et aux composants serveur basés sur ASP.NET d’avoir une conversation à étapes multiples et bidirectionnelle;
3. Le support de l’IntelliSense pour Knockout et l’ajout de la prise en charge de JSON en tant que classe ;
4. L’introduction de nouvelles fonctionnalités pour ASP.NET Web API, y compris le support d’OData, l’ajout des fonctions de traçabilité, de monitoring et de génération d’une page d’aide pour une API Web;
5. Des améliorations de l’inspecteur de page, qui offre désormais de meilleures performances pour JavaScript et CSS, dont la capacité de voir les mises à jour en temps réel d’un fichier CSS ;
6. L’unification de l’expérience de publication pour une application Web et un projet de type site Web, ainsi que l’ajout des options de publication sélective ;
7. L’intégration de la nouvelle fonctionnalité ASP.NET Friendly URL. Cette fonction rend facile la génération des URL sans l’extension .aspx. Elle permet également au développeur d’ajouter plus facilement le support du mobile dans son application Web ;
8. La mise à jour des modèles de projets Web dans Visual Studio 2012.

Cette mise à jour est livrée comme des packages NuGet supplémentaires. Ce qui signifie qu’il ne peut avoir aucun problème de compatibilité avec les projets existants.

Télécharger « ASP.NET et Web Tools 2012.2″ RC

Au vu des besoins d’interaction de plus en plus croissants entre une application Web et un ensemble très large de clients (réseaux sociaux, navigateurs, terminaux mobiles, applications natives, etc.), il était indispensable de fournir aux développeurs un moyen de communiquer dans leurs applications avec ces différents types de clients.

Web API a fait son apparition comme une technologie pour WCF (Windows Communication Framework). Elle a pour objectif principal de fournir un cadre pour exposer applications, données et services sur le Web directement à travers HTTP.

Les fonctionnalités et améliorations qui ont été apportées à ASP.NET Web API ont été intégrées en totalité comme partie du Framework Web ASP.NET MVC 4.

Dans ce tutoriel introductif qui est le premier d’une série sur le sujet, nous verrons comment créer une API Web avec ASP.NET MVC et comment consommer celle-ci. L’exemple portera sur une API Web qui va renvoyer une liste de clients. La liste sera ensuite affichée dans une interface via jQuery et également en utilisant HttpClient pour une application native.

– Lire l’article complet

-Télécharger le code source d’exemple sur GitHub

Dans ce article, nous avons créer une première API et consommer celle-ci dans une page Web en utilisant jQuery. Dans ce billet de blog, je vais vous montrer comment vous pouvez interagir avec votre API dans une application native en utilisant HttpClient.

Dans une application Web, vous pouvez simplement interagir avec une API Web coté client en appelant les requêtes HTTP Get, Put, Post et Delete dans un Script JavaScript ou en utilisant jQuery. Mais, si vous voulez accéder à votre API à partir d’une application Desktop par exemple, comment procéder ?

C’est à ce niveau qu’intervient HTTPClient. HTTPClient est un client moderne HTTP pour les applications .NET. Il peut être utilisé pour consommer avec souplesse et simplicité les fonctionnalités exposées via HTTP. Vous pouvez utiliser HTTPClient pour mettre en œuvre des interactions avec une API Web en envoyant et en recevant des réponses à partir des verbes standards Get, Put, Post et Delete de HTTP grâce aux méthodes GetAsync, PutAsync, PostAsync, DeleteAsync.

L’exemple ci-dessous illustre comment vous pouvez consommer les données au format XML d’une API Web en utilisant la méthode GetAsync.

HttpClient client = new HttpClient();
client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/xml"));
var response = client.GetAsync("http://localhost:59130/api/Customer").Result;

Si vous souhaitez que les données soient retournées au format XML, vous pouvez procéder comme suit :

HttpClient client = new HttpClient();
client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
var response = client.GetAsync("http://localhost:59130/api/Customer").Result;

La procédure client.DefaultRequestHeaders.Accept.Add() permet de définir le format qui sera utilisé pour sérialiser les données.

La procédure asynchrone GetAsync() de la classe HttpClient() prend en paramètre une URI ou une chaine de caractères qui représente l’URL de l’API Web. GetAsync effectue une requête HTTP GET en utilisant l’URL passée en paramètre, puis retourne directement une tache dont la propriété Result (Task.Result) contient la réponse HTTP (HttpResponseMessage).

NB : Il est recommandé lors de l’utilisation d’une méthode asynchrone d’utiliser également le mot clé await pour éviter que l’application ne soit bloquée jusqu’à ce que l’opération soit complète. On peut s’en passer pour une application console, mais pour une solution Desktop, faudra penser à utiliser await pour éviter le blocage de l’interface utilisateur. Pour plus de détails sur async et await, je vous invite à lire cet excellent article sur le sujet : les nouveautés de C# 5.0.

A titre d’exemple, vous allez créer une application console qui consomme l’API que vous avez créée ci-dessus. Cliquez sur le menu « FICHIER », sélectionnez « Ajouter » puis « Nouveau projet ». Sélectionnez le projet « Application Console » et donnez-lui le nom « TestFirstWebAPI ».

Après création du projet, vous allez ajouter une référence à HTTPClient. HTTPClient n’étant pas disponible par défaut dans le Framework .NET ou avec ASP.NET MVC 4, vous devez passer par le gestionnaire de packages NuGet pour ajouter cette dépendance à votre application.

Faites un clic droit sur votre projet dans l’explorateur de solution et sélectionnez la commande « Gérer les packages NuGet… ». Lorsque l’interface de NuGet va s’afficher, recherchez le package HTTPClient.

L’installation du package va entrainer l’installation des dépendances System.Net.Http et System.Json que vous allez utiliser dans votre application.

Ajoutez une classe dans votre projet ayant la même définition que la classe Customer dans le projet ASP.NET MVC. Pour rappel, cette classe doit avoir la définition suivante :

public class Customer
    {
        public int Id { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string EMail { get; set; }
    }

Ajoutez par la suite une référence à System.Net.Http.Formatting et System.Net.Http.Headers.

using System.Net.Http.Formatting;
using System.Net.Http.Headers;

Vous allez maintenant ajouter les lignes de code suivantes à la fonction Main de votre application.

HttpClient client = new HttpClient();


client.DefaultRequestHeaders.Accept.Add(
     new MediaTypeWithQualityHeaderValue("application/json"));

 var response = client.GetAsync("http://localhost:59130/api/customer").Result;  

 if (response.IsSuccessStatusCode)
 {
     
     var Customers = response.Content.ReadAsAsync<IEnumerable<Customer>>().Result;
     foreach (var c in Customers)
     {
         Console.WriteLine("{0}\t{1}\t{2}", c.FirstName, c.LastName, c.EMail);
        
     }
 }
 else
 {
     Console.WriteLine("{0} ({1})", (int)response.StatusCode, response.ReasonPhrase);
 }
     Console.ReadLine();

La procédure ReadAsAsync() lit et déserialise automatiquement le corps de la réponse HTTP qui contient la liste des clients.

En appuyant sur F5 pour lancer le débogage de votre application, vous allez obtenir le résultat suivant :

Rassurez vous que vous utilisez un numéro de port spécifique pour votre application (59130 pour mon cas). Vous pouvez vérifier cela dans les propriétés du projet, onglet Web :

Vous avez le choix entre utiliser un numéro de port spécifique ou utiliser le serveur Web IIS local si vous en avez. Dans ces cas, le numéro de port ne varie que si vous décidez de le modifier.

Il faut dire que pour cette version, Microsoft n’a pas fait les choses à moitié.

WebMatrix 2 apporte un nombre important de nouveautés dont les fonctionnalités phares sont :

– une galerie d’extensions et un modèle d’extensibilité pour permettre d’écrire rapidement ses propres plugins et étendre les fonctionnalités de l’EDI ;
– une rapidité améliorée pour installer, modifier et publier les applications open source comme Joomla, WordPress, Drupal, DotNetNuke et Umbraco ;
– l’intégration de nouveaux modèles de projets pour PHP, Node.js, HTML5 et pour le mobile ;
– le support amélioré pour les langages Razor, C#, VB, PHP, Node.js, HTML5, CSS3 et Jquery, avec notamment l’ajout de l’IntelliSense et l’accès à la documentation pour PHP ;
– la possibilité de prévisualiser son site mobile avant publication grâce à des émulateurs pour iPhone, iPad et Windows Phone ;
– une interface simple pour installer les composants externes nécessaires pour votre application via NuGet ;
une intégration plus étroite avec la plateforme Cloud Windows Azure ;
– la possibilité de télécharger et modifier un fichier depuis le serveur.

J’ai deja redigé un nombre intéressant d’articles sur les nouveautés de cette mouture :

– WebMatrix 2 : utiliser l’extension OrangeBits pour améliorer le temps de chargement des pages Web

– WebMatrix 2 beta : intégration du gestionnaire de packages NuGet et la galerie d’extensions

– WebMatrix 2 bêta : validation des données utilisateur

– WebMatrix 2 bêta : intégrer l’authentification Twitter à son site Web

– WebMatrix 2 bêta : support amélioré pour PHP avec l’IntelliSense

A bientôt pour de nouveaux articles sur l’EDI, qui est l’un de mes environnements de développement phare.

Un petit message pour annoncer la publication de mon nouvel article sur le regroupement et la minification du JavaScript et CSS, des techniques d’optimisation qu’apporte ASP.NET MVC 4, pouvant grandement influencer le temps de chargement des pages Web.

Le temps de chargement d’une page est un facteur important dans l’évaluation des performances d’un site Web. Il a un impact non négligeable sur l’expérience utilisateur et même sur le référencement naturel. Plus les pages de votre site se chargent rapidement, plus l’expérience de navigation est fluide et plus les utilisateurs sont contents.

Dans nos applications, nous avons recours à plusieurs bibliothèques dont jQuery, knockout, etc. et des feuilles de styles qui ont des conséquences non négligeables sur le temps de chargement des pages.

Dans cet article, nous verrons comment améliorer les performances d’une application Web ASP.NET MVC en utilisant le regroupement et la minification à la volée du CSS et JavaScript.

L’article complet peut-être consulté sur cette page.

Pour les commentaires, ça se passe ici.

Télécharger le ZIP de l’article.

Télécharger l’article au format PDF.

Télécharger l’article au format eBooks.

Bonne lecture

Pour améliorer le temps de chargement d’une page, les développeurs ont recours à plusieurs techniques d’optimisation coté client ou coté serveur dont la mise en cache, l’utilisation d’un CDN ou encore la compression et la minification du CSS et JavaScript.

Dans ce billet de blog, je vais montrer comment vous pouvez grandement améliorer le temps de chargement des pages de votre site Web en minifiant vos fichiers JavaScript et CSS, et en optimisant les images grâce à l’extension OrangeBits.

La minification du CSS et JavaScript est un procédé qui permet de réduire la taille des fichiers en supprimant les caractères inutiles à l’instar des commentaires, les espaces, les sauts de lignes, etc.

Pour cet exemple, je vais utiliser le modèle de projet Startet Site. Créez une nouvelle application avec WebMatrix 2. Mon application utilise le fichier JavaScript « jquery-1.6.2.js ». Lorsque j’exécute mon application avec un outil de mesure de performance comme Yslow, je peux avoir la taille et le nombre de fichiers JavaScript qui sont chargés.

Ici, j’ai 3 fichiers JavaScript d’une taille totale de 315.0k, la taille de mon fichier « jquery-1.6.2.js » est de 233Ko. Il est temps pour nous d’installer OrangeBits et l’utiliser pour réduire la taille de ce fichier.

Pour rappel, WebMatrix 2 dispose d’une galerie d’extension qui contient à nos jours plusieurs outils assez intéressants, permettant d’étendre les fonctionnalités de l’EDI. Parmi ces extensions, figure en bonne place OrangeBits pour l’optimisation.

Pour installer l’extension, cliquez sur le bouton Extensions dans la barre d’outils de WebMatrix. La fenêtre de téléchargement, d’installation et de gestion des extensions pour votre EDI s’affiche. Pour son utilisation, vous pouvez vous référer à mon précédent billet de blog sur l’intégration du gestionnaire de packages .NET NuGet et de la galerie d’extension à WebMatrix 2.

Dans la liste des extensions qui vont s’afficher, recherchez OrangeBits Compiler et cliquez sur Installer. Une fenêtre va s’afficher avec les termes de licences concernant l’add-on. Cliquez sur j’accepte pour lancer l’installation de celui-ci.

Vous voilà prêt pour minifier votre fichier. Il suffit juste de le sélectionner, dérouler le menu contextuel et sélectionner minify.

Vous constaterez qu’un fichier « xxxx.min.js » est créé dans le dossier contenant vos fichiers JavaScript ou CSS. Dans votre code, vous allez référencer ce fichier avant de publier votre site ou de mettre celui-ci en production. Pour mon cas, un fichier « « jquery-1.6.2.min.js » a été créé dans mon dossier script. Ce fichier à une taille de 101 Ko (contre 233Ko au début), soit une réduction de plus de 50%.

Il est également possible dans les options, de personnaliser OrangeBits de telle sorte qu’à chaque modification du fichier CSS ou JavaScript, le fichier minifié soit régénéré automatiquement. Vous avez même le choix du dossier dans lequel ce fichier pourra être enregistré.

Pour personnaliser les options d’OrangeBits, il suffit de faire un clic droit au niveau de l’explorateur de fichier et sélectionner la ligne OrangeBits Options.

Optimisation des images

En plus de la minification du JavaScript et CSS, vous pouvez également utiliser OrangeBits pour optimiser les images. Cette option peut être utilisée pour réduire considérablement la taille d’une image. Elle peut permettre de réduire par un facteur de deux la taille d’une image.

Avec cet outil, vous avez de quoi réduire le temps de chargement des pages de votre application. WebMatrix 2 apporte une quantité importante de nouvelles fonctionnalités et celui-ci est facilement extensible. Les développeurs indépendants peuvent repousser les limites de l’EDI qui devient de plus en plus un outil vraiment Pro, permettant de faire des choses assez complexes.

En plus de la minification du JavaScript, CSS et l’optimisation des images, OrangeBits peut également être utilisé pour compiler les fichiers CofeeScript, Scss, Sass au sein de WebMatrix.

Sur le même sujet :

WebMatrix 2 : améliorer le temps de chargement des pages Web en utilisant le regroupement et la minification du CSS et JavaScript

optimisation du temps de chargement d’une page ASP.NET MVC Part 2 : La mise en cache

Microsoft.Web.Optimisation : ou comment optimiser une application ASP.NET en utilisant le regroupement et la minification à la volée du JavaScript et CSS

Pour optimiser le temps le chargement d’une page, on peut avoir recours à plusieurs techniques côté client et côté serveur dont la mise en cache, l’utilisation d’un CDN ou encore la compression et la minification du CSS et JavaScript.

Dans ce billet de blog, je vais montrer comment vous pouvez grandement améliorer le temps de chargement des pages de votre site Web en minifiant et en regroupant vos fichiers JavaScript et CSS grâce à la bibliothèque ASP. NET Optimization – Bundling.

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.

Pour commencer, vous allez créer une nouvelle application ASP.NET WebPages avec WebMatrix en utilisant le modèle de projet Starter Site.

Comme l’illustre l’image ci-dessous, vous constatez que votre application contient par défaut un nombre déjà assez important de fichiers JavaScript et CSS.

Si vous exécutez votre application et que vous analysez les performances de votre page d’index avec un outil comme Yslow, vous obtenez le résultat suivant :

Ajout de la bibliothèque ASP.NET Optimization – Bundling

WebMatrix 2 apporte comme nouveauté phare l’intégration du gestionnaire de packages open source .NET NuGet. Dans la boite à outil de l’EDI, une nouvelle icone NuGet est disponible, permettant d’accéder à l’interface des gestions des packages de votre application. Cliquez sur ce bouton.

L’interface de gestion des packages de NuGet s’affiche. Pour plus de détail sur son utilisation, lire mon article sur l’intégration du gestionnaire d’extensions et de NuGet dans WebMatrix 2.

Dans la zone de recherche, tapez le nom de la bibliothèque « Microsoft.Web.Optimization », sélectionnez le package ASP.NET Optimization – Bundling, et cliquez sur Installer.

La fenêtre contenant les termes de la licence va s’afficher. Cliquez sur j’accepte pour lancer l’installation du package dans votre application. A la fin de l’installation, si vous ouvrez le dossier Bin de votre application, vous verrez la présence d’un nouveau fichier Microsoft.Web.Optimization.dll.

Activation du Bundling

Grâce à NuGet, nous avons intégré sans difficulté la bibliothèque dont nous avons besoins dans notre application. Voyons maintenant comment nous pouvons activer le regroupement et la minification du CSS et JavaScript.

Pour cela, ouvrez le fichier _AppStart.cshtml et inserez la ligne de code suivant :

BundleTable.Bundles.EnableDefaultBundles();

N’oubliez pas d’ajouter une référence à Microsoft.Web.Optimization.

@using Microsoft.Web.Optimization

Tous les fichiers JavaScript contenus dans le répertoire Scripts (les sous dossiers ne sont pas pris en compte) de votre application seront regroupés, compressés et traités comme un seul fichier. Ces fichiers seront regroupés par défaut dans un dossier Scripts. Ils seront désormais référencés en utilisant la ligne de code suivante :

<script src="~/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="/Content/css" rel="stylesheet" type="text/css" />

Après avoir appliqué ces modifications, exécutez à nouveau votre application. Vous allez obtenir le résultat suivant :

En comparant les deux images, vous vous rendez compte que le nombre de requêtes HTTP sur votre page est passé de 30 à 10. Les cinq fichiers JavaScript ont été regroupés en 1 fichier et les 16 feuilles de styles ont été combinés en 1 fichier.

De même, la taille des fichiers JavaScript est passée de 558,9 Ko à 375,1 Ko. C’est déjà pas mal. Mais, on aurait pu faire mieux, car plusieurs fichiers dans le dossier Scripts qui ont été regroupés n’ont pas été utilisés. C’est à ce niveau qu’intervient le Bundle personnalisé.

Bundle personnalisé

Avec cette option, vous avez 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.
Vous pouvez définir vos regroupements personnalisés en procédant comme suit dans le fichier_çAppStart.cshtml.

BundleTable.Bundles.EnableDefaultBundles();
 
    var jsBundle = new Bundle("~/Scripts", typeof(JsMinify));
    
    jsBundle.AddFile("~/Scripts/jquery-1.6.2.min.js");
    jsBundle.AddFile("~/Scripts/jquery-ui-1.8.11.js");
    jsBundle.AddFile("~/Scripts/modernizr-2.0.6-development-only.js");
   
 
    BundleTable.Bundles.Add(jsBundle);
 
    Bundle cssBundle = new Bundle("~/Styles", typeof(CssMinify));
    cssBundle.AddFile("~/content/site.css");
    cssBundle.AddFile("~/content/themes/base/jquery.ui.all.css");
 
    BundleTable.Bundles.Add(cssBundle); 

Vous allez désormais référencer ces regroupements dans votre page comme suit :

<link href="~/Styles" rel="stylesheet" type="text/css" />
<script src="~/Scripts" type="text/javascript"></script>  

En exécutant la page précédente de votre application, vous obtenez le résultat suivant :

Et voilà, la taille de vos fichiers JavaScript passe de 558,9K à 5,7K, soit un taux de compression de près de 98 %.
Vous pouvez également ajouter à votre regroupement tous les fichiers JavaScript d’un répertoire précis en procédant comme suit :

Et voilà, vous pouvez désormais améliorer assez simplement le temps de chargement des pages de votre application JavaScript grâce à la bibliothèque ASP. NET Optimization – Bundling.

Ce billet est le second d’une série sur les techniques d’optimisation du temps de chargement d’une application ASP.NET MVC. Le premier article sur la compression et la minification du CSS et JavaScript peut être consulté sur cette page.

Les requêtes des utilisateurs sur une page d’un site Web qu’il soit statistique ou dynamique engendre couramment le chargement de plusieurs éléments et de nombreuses opérations (chargement des images, CSS, JavaScript, données depuis une en base de données, etc.). Imaginez un intervalle de temps pendant lequel près de 100 requêtes sont effectuées sur votre site, et que durant cette période, le même contenu est retourné par votre application. Tout le long ce moment, votre application reprend 100 fois les mêmes opérations pour retourner un contenu identique.

La mis en cache est un procédé permettant d’améliorer considérablement le temps de chargement d’une page Web et économiser la bande passante, en évitant d’exécuter plusieurs fois certaines opérations (chargement des données, lecture d’une information dans la base de données, etc.) en stockant le contenu de cette page quelque part.

Activer la mise en cache

Le Framework ASP.NE MVC depuis la version 1 dispose d’un mécanisme pour la mise en a cache d’une application, qui repose essentiellement sur la même technique utilisée par ASP.NET. Il a été amélioré à partir de la version 3 pour coller avec les spécificités de la plateforme.

L’activation de la mise en cache se fait via l’attribut [OutputCache] qui peut être ajoutée soit individuellement à une action contrôleur, ou alors à une classe entière d’un contrôleur

Le code ci-dessous permet de mettre en cache pendant 30 secondes la sortie de l’action Index.

[OutputCache(Duration = 30)] //mise en cache pour 30 secondes
public ActionResult Index()
{
    ViewBag.Message = "Cette page a été mise e cache à " + DateTime.Now;

    return View();
}

Pour mettre en cache une classe entière d’un contrôleur, il suffit de décorer la classe avec l’attribut OutputCache comme l’illustre le code ci-dessous :

[OutputCache(Duration = 30)] //mise en cache pour 30 secondes
    public class HomeController : Controller
    {
       
        public ActionResult Index()
        {
            ViewBag.Message = "Cette page a été mise e cache à " + DateTime.Now;

            return View();
        }

        public ActionResult About()
        {
            ViewBag.Message = "Your app description page.";

            return View();
        }
}

Si vous exécutez ce code, vous vous rendrez compte que la date et l’heure affichées ne vont pas varier chaque fois que vous allez actualiser la page, jusqu’à ce que les 30 secondes soient écoulées.

NB: Il faut noter que le temps de sauvegarde des données de la page n’est pas garanti. En cas de manque de ressources mémoires, le cache va commencer à vider automatiquement son contenu.

Personnaliser la mise en cache

En dehors de la propriété Duration qui permet de définir le temps de mise en cache, d’autres propriétés dont il est important de connaitre sont disponibles pour vous permettre de personnaliser la mise en cache des données de votre page selon votre convenance et les spécificités de la page.

Location

La propriété location permet de définir l’emplacement pour enregistrer l’objet mis en cache. Il est possible d’enregistre l’objet mis en cache sur le serveur, le client, les deux ou toutes les autres options de l’enum OutputCacheLocation. Les différentes valeurs qu’elle peut prendre sont :

– Any
– Client
– Downstream
– Server
– None
– ServerAndClient

Par défaut, la valeur Any est utilisée lorsque cette propriété n’est pas spécifiée. L’orientation vers la mise en cache côté client, côté serveur ou les deux doit se faire suivant vos besoins. Si vous souhaitez afficher par exemple des informations personnalisées à l’utilisation comme son heure de connexion, son login, ses statistiques, etc. vous devez utiliser dans ce cas la mise en cache côté client.

Le code ci-dessous permet de mettre en cache la méthode d’action Index uniquement chez le client.

[OutputCache(Duration = 10, Location = OutputCacheLocation.Client)]
 public ActionResult Index()
 {
     ViewBag.Message = "Cette page a été mise en cache à " + DateTime.Now;

     return View();
 }

VaryByParam

Supposons un instant que vous voulez afficher les détails sur un produit à partir de son identifiant. Cela suppose qu’à chaque fois que l’identifiant du produit va changer, les détails affichés doivent également changer. Comment modifier la mise en cache pour que le contenu change automatiquement lorsque l’ID change. C’est à ce stade qu’intervient la propriété VaryByParam. Cette propriété permet de créer différentes versions d’un même contenu, dès que l’un des paramètres du formulaire ou de l’URL change.

Le code ci-dessous illustre comment vous pouvez l’utiliser.

[OutputCache(Duration = 3600, VaryByParam="id")]
        public ViewResult Details(short id)
        {
            Articles article = db.Articles.Find(id);
            return View(article);
        }

En procédant ainsi, plusieurs versions du contenu de la méthode d’action sont mises en cache jusqu’à expiration de la période de mise en cache.

Créer un profil de cache dans le Web.Config

Le fichier de configuration de votre application peut être utilisé pour créer un profil un cache. L’utilisation de cette technique présente plusieurs avantages :

– vous pouvez créer un profil de cache et appliquer celui-ci à plusieurs actions ou contrôleurs.

– vous pouvez modifier le comportement de votre profil de cache dans le Web.config sans avoir besoin de recompiler votre application.

Par exemple, la section de configuration Web « caching » définit un profil de cache nommé MyCacheProfil. Cette section « caching » doit apparaître dans la section « system.web » du fichier Web.Config.

<system.web>
    <caching>
      <outputCacheSettings>
        <outputCacheProfiles>
          <add name="MyCacheProfile"  duration="60" />
        </outputCacheProfiles>
      </outputCacheSettings>
    </caching>
  </system.web>

Le contrôleur suivant illustre comment appliquer le profil MyCacheProfile sur une action contrôleur à l’aide de l’attribut [OutputCache].

[OutputCache(CacheProfile="MyCacheProfile")]
        public ActionResult Index()
        {
            ViewBag.Message = "Cette page a été mise en cache à " + DateTime.Now;

            return View();
        }

Le cache de sortie fournir un moyen simple pour améliorer radicalement les performances de vos applications ASP.Net MVC. Au travers de cet article, vous avez découvert comment vous pouvez utiliser cette technique. Restez connecté à mon blog pour la suite des astuces sur l’optimisation du temps de chargement d’une page Web.

Pour cette édition, Microsoft a décidé de revenir sur son Campus de Redmond pour faire de ce lieu la plus grande foire annuelle des développeurs, professionnels IT et Geek utilisant ses outils et technologies. La conférence Build 2012 aura lieu du 30 octobre au 02 novembre, juste une semaine après la sortie officielle de Windows 8.

Bien que Microsoft n’ait pas encore dévoilé les sessions qui seront présentées lors de l’événement, avec le nombre important d’annonces et nouveaux produits qui ont été présentés ces derniers mois, on peut pleinement imaginer ce qui sera au rendez-vous.

Perso, j’imagine que les sessions porteront essentiellement sur Windows 8, Visual Studio 2012, Office 2013, Windows Phone 8, Windows Server 2012, .NET Framework 4.5, Windows Azure, Internet Explorer 10 et le prochain Office 365.

Au menu, il y aura donc : du développement d’applications Metro avec XAML/C#, VB.NET et C++ ou avec le trio HTML5, CSS et JavaScript ; le développement d’applications Cloud ; le développement d’applications Windows Phone, etc.

Pour information, les versions finales de Windows 8 et de Visual Studio 2012 pourront être téléchargées à compter du 15 aout prochain par les développeurs disposant d’un abonnement MSDN.

Les inscriptions à l’événement seront ouvertes à compter du 08 aout. Bien que la capacité d’accueil du campus de Redmond soit importante, les places disponibles sont souvent très vite arrachées. Donc, ceux qui souhaitent y aller ont intérêt à s’inscrire le plus tôt possible.

Sinon, pour les personnes qui ne pourront pas être de la partie, pas de problème. Ils pourront visionner toutes les keynotes qui seront diffusées en direct. De plus, toutes les sessions seront disponibles (streaming et téléchargement) la journée suivante.

Et voilà, le compte à rebours peut être démarré.

– Microsoft Build 2012