Monday, November 26, 2012

Bundling and Minification with VS 2012

In my previous post I have explained how to do bundling and minification in general way. But in this post I'm going to tell how to do bundling and minification using VS 2012. And also this will continue the demo from the previous post.
Add Web Essentials 2012 for the VS 2012 using Extensions and Updates.
In the MVC project select the three script files and right click. Select, Create JavaScript Bundle File as below. And give an appropriate name for the bundle.
This will create a bundle file. If change any of the dilanA.js, dilanB.js or dilanC.js then the bundle file will get updated.
In the default view of the DemoController refer the JavaScript file as below. That's it in VS 2012 for bundling and minification.

Advantage of the map File

The js.map file contains the source maps for each JavaScript file. But when we debug the code it's difficult to debug the minified the code. But currently some browsers are supporting for the map file debugging. In Google Chrome go to Settings and check the Enable Source Maps. Though you bundle and minified the JavaScript files, you can easily debug the JavaScript Source files. Not the minified JavaScript file.


Sunday, November 25, 2012

Bundling and Minification

Bundling and minification was introduced with ASP.net 4.5, which makes to improve the performance of the application. So this feature is useful in the production time than in the development time.
  • Bundling reduces the number of individual HTTP requests to the server. For example by combining multiple CSS files or JavaScript files into one single CSS file or JavaScript file.
  • Minification reduces the file download size of CSS or JavaScript by removing white spaces, comments, variable lengths and other unnecessary characters.
Create an ASP.net MVC project. In this post we'll consider about the JavaScript bundling. For that copy the jquery-1.7.1.js file in the Scripts folder and paste that file three times and rename those. For example dilanA.js,  dilanB.js and dilanC.js.
Add a new controller called DemoController and add the default action and the view. In the view add references for the above three JavaScript files.
Run the project and go to the Index page of the DefaultController. Using Google Chrome observe the network usage.
There are three requests for each JavaScript file and lot of time has consumed for each request. Now we have to bundle and minify the above three JavaScript files.
Bundling and minification is enabled or disabled by setting the value of debug attribute in the Web.config file.
To enable that, set the debug value to false.
You can override Web.config setting with the EnableOptimizations property on the BundleTable class. Add following code in the BundleConfig.cs file in the App-Start folder.
Add the following code into the RegisterBundles method in the BundleConfig.cs file.
Also in the default view of the DemoController, add the following code.
Now browse again the default view of the DemoController and check the network usage. Only one single request for all the three JavaScript files. And lesser time than previous request. Also the size of the requested file has minified, if we compare that to the total size of the all the three files.
Also we can use async attribute in HTML 5 for these bundling and minification. For that make the DOCTYPE tag in to HTML 5 standard. After that add the bundling and minification code like below.

Monday, November 19, 2012

JavaScript Development with TypeScript

TypeScript is a language for application-scale JavaScript development. It gives you type checking, explicit interfaces and easier module exports. The main advantages of the generated JavaScript file of the TypeScript are;

  • Any browser
  • Any host
  • Any OS
According to Somasegar "TypeScript is a super set of JavaScript that combines type checking and static analysis, explicit interfaces, and best practices into a single language and compiler. TypeScript  enables great tooling experiences for JavaScript development."

You can use TypeScript Play ground to check how this works on. But this post describes how to work on TypeScript using Visual Studio. First install the plugin for the VS 2012.

Create a TypeScript project.
Add a TypeScript file called customer.ts. Related customer.js file also in there.
Add the customer.js file reference to the default.htm file.
In the customer.ts file create a class called customer. Add two variables firstName as string and age as number.
Current typescript version is 0.8.1. So it's not generating the JavaScript while typing the TypeScript file. So you have to build the project. Then you can view the generated JavaScript.
Then add a constructor for the customer. firstName and the age properties can be set in the constructor. But last name has declared with public key. That means the customer class contains a property called lastName and it'll automatically set the values passed to constructor. The mobileNo is a nullable type of argument.
We can add a method called getFullName. Now we should check how to call the properties and the methods in the customer class. Declare a customer object and in the window.onmousemove event call a function.
You can see the output as follows.
TypeScript supports for the inheritance. If we extends a class, in the sub class we must call the super class's constructor. 
Also Typescript support for the interfaces. If we implements an interface we must implement the methods in that interface.
We can modularising the TypeScript classes. 
In order to avoid the long namespace we can use the import statements. 
Also the TypeScript have features like Refactor - Rename, Go to definition, Go to declaration, Find All references. Those are really useful features that are not in JavaScript.
As you can see TypeScript brings you useful features in to JavaScript and ultimately syntax friendly way of development.

Tuesday, November 13, 2012

JqueryMobile ThemeRoller

JqueryMobile ThemeRoller is an easiest way to change the ASP.net MVC mobile application themes within few minutes.

Create an ASP.net MVC mobile web application.
Browse the default application using a mobile simulator.


You can see there are new simulators that I have added to the VS 2012. To add simulators refer the Scott Hanselman's blog.

Go to JqueryMobile ThemeRoller and design a theme.
Then download the theme as a zip file.
Unzip the file and give an appropriate name for the themes folder. Copy that folder and paste it in to Content\themes folder using the project explorer.

Then navigate to _Layout.cshtml. You can use short cut keys Ctrl+,

Then add the style-sheet file name in to the _Layout.cshtml. Then reload the simulator. The new theme has applied.

You can design various themes and apply very easily for you projects using JqueryMobile ThemeRoller.


Enable SPA in VS 2012


SPA template has been deliberately removed from the last beta and the RC releases of Visual Studio 2012. But now it's back on track.
http://www.asp.net/vnext/overview/fall-2012-update