This developer's chronicles

Web development using Scrum, C#, AngularJS and the like

Category: MVC

Bundling and Minification in ASP.NET MVC

Bundling and Minification are two tools available since  ASP.NET 4 that will make your application load faster as they reduce the number of files to be downloaded (bundling) as well as removing all white spaces / comments and shortening the variable names (when possible) so that file sizes get smaller.

This is specially important as when a page is loaded most browsers will limit the amount of resources that are retrieved down to 6 (so it retrieves maximum 6 files simultaneously) so by reducing the number of files to be downloaded we can guarantee a faster load time (and we all love that, don’t we?)

Let’s see what a page load looks like in chrome when no bundling or minification occurs:

bundling and minification ASP.NET MVC

As expected chrome will only download a maximum of 6 resources at the time  and anything else is put into a queue and it will be downloaded once one of the 6 files is completed. in the above example we can see how some .js files had to wait for previous files to be finished downloading.

And to make it worse, as the number of files grow in your application this will cost your visitors valuable time waiting for all files to be downloaded (even worse they may not even come back!).

How can I speed up my website load?

One of the first steps to optimize your website is to set up bundling and minification, fortunately this is really easy in .NET.

Before we continue there are a couple of files that will have to be modified, as follow:

  • Web.config: this is the file where most of the configuration is done for a web site/application
  • Bundle.config: Found in the App_Start folder (web applications)

The first thing you’ll need to do is enable bundle and minification, this can be done by setting the value of the compilation element to true in your web.config file

Alternatively you can specify the Bundle.EnableOptimizations property to true inside the Bundle.Config file (which takes precedence over web.config file):

Once bundling and minification has been set up we now need to tell the ASP.NET framework which files we want bundled and minified, very similar to the above code but now adding the to-be bundled/minified files:

The above will bundle the specified 12 files into one and will minimize it was well (awesome !)

Lastly we’ll need to add a reference to it on the page (master page / layout) where we want those scripts to be rendered:

Now let’s run the application and open up the developer tools (F12) to check out the new bundles:

bundling and minification enabled ASP.NET MVC

Neat !, now we have it bundled, one a closer inspection (clicking on the bundled file) we can see what a minified file looks like:

ASP.NET minified javascript file

It is important to note that you would only want to do this on your production site, as you don’t want to debug your code on a minified file, ewww

 

Continuous Delivery with Visual Studio Online in Azure

Today at the Week 2 Day 3 of our bootcamp we had Microsoft developer Evangelist Andrew Coates talk about building cloud solutions with Azure.

Some of the big takeaways from the talk were:

  • Developers need to be lazy: don’t reinvent the wheel, instead add value to your company by coding only what you can code (for instance don’t spend too much time working on form validation as you can have a libraries or someone’s code to do that, instead spend it coding stuff that only you know, such as solutions to your business needs etc)
  • Microsoft Azure offers this huge range of solutions / services that span across Infrastructure as a Service IaaS, Platform as a Service PaaS or Software as a Service SaaS (not only Microsoft but companies such as Amazon too) so you can concentrate on the important stuff and let them worry about keeping everything else up to date.
  • You can scale up/down or scale out according to your needs (this can be automatically triggered if certain conditions are met, such as the processing power of a machine X reaches certain threshold etc).
  • You can have Continuous Delivery done by combining an Azure website with Visual Studio online so that anytime you check-in your code Visual Studio will create an automatic build for you and if it passes (including running unit tests if available) will deploy it to your Azure environment (UAT, Staging, production, etc)

We also had a practice lab where we could put all that theory into practice, the screencast of a continuous delivery with Visual Studio Online in Azure can be watched below:

 

Thanks for reading / watching

Harold

When should I use ViewBag, ViewData or TempData to pass additional data to my MVC Views?

When passing additional data from an ASP.NET MVC Controller to a View there are several options that are available, you can pass one, two or basically any combination of the below:

  • ViewBag
  • ViewData
  • TempData

So which one do you use?. Well, before answering that question let’s have a quick look at what each one of them are and how you can benefit from them.

ViewBag

ViewBag is a dynamic object, which means that you can add to it anything that you please (strongly typed objects, primitive values, etc). This sounds really cool !

ViewData

ViewData is a ViewDataDictionary, kind of a dictionary of objects that can be accessed via a key (string). As ViewData also hold objects it is considered very similar to the ViewBag but it differs from it in that you need to do typecasting in order to get the original object back (and you’ll obviously need to check for null references before accessing its properties).

The following example will help clarify the above. Let’s say you want to pass some data from a Controller to its View and you decide to take advantage of ViewBag and ViewData to achieve this:

 

And now let’s get the data back from the View:

See the difference ? you can use either of them but make sure that with ViewData you do typecasting and check for nulls.

 

TempData

As with the ViewData, TempData is also a Dictionary (a TempDataDictionary to be precise) so you could add an object to it an access it via its key (correct!, doing typecasting and always checking for null references), the difference with ViewData is that TempData keeps its data for the duration of the HTTP request so its  useful when passing data between requests (for instances when a redirection occurs)

 

The following example shows how we store an object inside TempData and then retrieve it after a redirection has taken place

 

Hope this helps someone out there, if you have any questions or feedback please fill out the below form and I’ll get back to you pretty quickly !

 

cheers

Harold