Minification and Bundle

Hello everybody! Today I am going to talk about Minification and Bundle.

Minification

When you do a request to server, a lot of bytes are transferred between client and server, but there is a way to reduce this transfers optimizing the requests.

This is possible with the use of Minification, Minification delete all useless spaces of the files to reduce file's size.

Normal Javascript File

Minified Javascrpt File

There are a lot of sites that does the minification in your files to get a better performance. Just take a look in internet to find these sites.

Bundle

Did you know, generally the Browsers can just download 6 Javascript or CSS files by time? But, did you know is possible put the files together in a single "package" for the browser download all of them in a single request? You can not mix Javascript files and CSS files in a single "package". 

What makes it possible is the use of Bundle.

It is very simple to configure a Bundle, you just need to open the folder App_Start of your project and then open the class BundleConfig.cs. Look the use of the namespace System.Web.Optimization, needed to optimize the files using Bundle.

Bundle Example

As you can see, the class has a single static method called RegisterBundles with a var of the BundleCollection type called bundles. In this var you will add all your file's "packages".When you call the Add method you need to use a parameter of the Bundle type, you can use ScriptBundle for Javascript files or StyleBundle for CSS files. After you do an instance of a new Bundle you need to use the virtual path of your bundle, like an ID, and after, you need to call the Include method, to include the files that will be in this "package".

We ca'n also look the existence of jquery-{version}.js and jquery.validade*. Jquery-{version} means all files starting with jquery- and having a version in name will be in the Bundle, like jquery-1.8.2.js. The jquery.validate means all files starting with jquery.validate will be in the Bundle.

Bundles are registered in Global.asax.cs file, this class executes every time your application is started.

Global.asax.cs

Look at the end of file, there is a line BundleTable.EnableOptimizations = true;

This line configure the load of the bundles, and tell the application to load minified files. This option is by default equals false, if you want to use this optimization, you need to set the property to true.

The use of bundles in Views, is possible with the helpers @Styles.Render for CSS files and @Scripts.Render() for Javascript files, both needs a parameter with the virtual path of the Bundle.

Bundles in View

Let's take a look in the Bundles loaded by the Browser:

Bundles in Browser

The bundles are loaded in a single request.

What is MVC?

What is ASP.NET MVC?

Do you know what is ASP.NET MVC?

Hi everyone, first of all, I am starting this blog to talk about .NET and things related  for developers and everybody who wants to know more about this universe.

I am going to explain for you what is MVC today, MVC is nothing more than a Design Pattern.

The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller.The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications. The ASP.NET MVC framework is a lightweight, highly testable presentation framework that (as with Web Forms-based applications) is integrated with existing ASP.NET features, such as master pages and membership-based authentication. The MVC framework is defined in the System.Web.Mvc assembly.

Model: Nothing more than a class. Yes, it is just a class, but a class that stores the attributes needed for the application, model has all the business, all the data manipulation. Summing up, model is a class with everything you need to manipulate data.

Simple Mvc Model

View: View is the HTML that users will see, Views uses the Razor Engine, implementing the use of Helpers  (I will write about Helpers soon). You can also use Models to bind the data.

Simple View Code

View in Browser

Controller: Is the middle between Model and View. Receive all the requests from user.

Controller

Let's see a chat with Model, View and Controller:

Controller: Hey Model, user wants to login in LinkedIn, please take these data and validate if is this ok!

Model: This is right, user can login.

Controller: Thanks Model. View, the data are right, I am going to send you user's data, and you, please, load the profile page.

View: Thanks, I am loading.

MVC'S Advantages

• It makes it easier to manage complexity by dividing an application into the model, the view, and the controller.
• It does not use view state or server-based forms. This makes the MVC framework ideal for developers who want full control over the behavior of an application.
• It uses a Front Controller pattern that processes Web application requests through a single controller. This enables you to design an application that supports a rich routing infrastructure.
• It provides better support for test-driven development (TDD).
• It works well for Web applications that are supported by large teams of developers and for Web designers who need a high degree of control over the application behavior.

When do I use  ASP.NET MVC?

There is no rule to know when you should use MVC or Web Forms, Asp.Net  MVC did not come to replace Web Forms, but to be one more option in Web Development.