Operation Mobile

Posts about JavaScript

ASP.NET MVC Mobile Performance Tip – Bundle and Minify

February 22 2012

A few months ago I wrote a blog post about how you could improve the performance of your ASP.NET MVC apps using a third party library to compress and combine your CSS and JavaScript resources.

The latest release of ASP.NET (v4.5) comes with its’ own bundling and minification tools.

And the great news is they’re very easy to use.

For example if your layout file contained three CSS and four JavaScript resources

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/html5reset-1.6.1.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/photoswipe.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/respond.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/klass.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/code.photoswipe-2.1.6.min.js")" type="text/javascript"></script>
</head>
<body>
    @RenderBody()
</body>
</html>

You can bundle and minify CSS and Javascript resources for your ASP.NET mobile apps by using standard HTML like this

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <link href="/Content/css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/js" type="text/javascript"></script>
</head>
<body>
    @RenderBody()
</body>
</html>

or like this using HTML helpers

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <link href="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Content/css")" rel="stylesheet" type="text/css" />
    <script src="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Scripts/js")"></script>
</head>
<body>
    @RenderBody()
</body>
</html>

Note: Scott Gu reckons the helper will probably be called Html.Bundle in the future.

Using HTML helpers gives you the advantage of adding a unqiue hash based upon the contents of the directory structure on the server for the script resource e.g.

Bundling and Minification Hash Files

ASP.NET will then cache the output for a year which means it will be served from the cache.

Should any files in a resource directory change the generated hash will also change and user will get an updated version of the file.

So how does ASP.NET MVC 4.5 bundling and minification perform?

This is Chrome resource graph for loading the page without any bundling or minification

Without bundling or minification

and here’s the resource graph for a ASP.NET MVC app using the new bundling or minification tools.

With bundling or minification

The images say it all!

Example of using the jQuery Mobile scrollstart and scrollstop events

January 17 2012

In this post we’ll see how easy it is to bind to the jQuery Mobile scrollstart and scrollstop events.

The JavsScript below shows how to bind to the scrollstart and scrollstop events.

$('div[data-role="page"]').live('pageinit', function (event, ui) {
    var eventsElement = $('#events');
    $(window).bind('scrollstart', function () {
        console.log('start');
        $('.ui-body-c').css('background', 'green');
        eventsElement.append('<li><a href="">Start</a></li>');
        eventsElement.listview('refresh');
    });

    $(window).bind('scrollstop', function () {
       console.log('stop');
       $('.ui-body-c').css('background', 'red');
       eventsElement.append('<li><a href="">Stop</a></li>');
       eventsElement.listview('refresh');
    });
});

When the user starts scrolling the background turns green and when the user stops scrolling the background turns red.

Whenever a scroll event is triggered an item is added to the list.

You see can see a demo of the scrollstart and scrollstop events in action here.

JavaScript best practice: Always specify a radix when using parseInt

January 10 2012

Whenever you use the parseInt function make sure you always specify the radial, even though it’s optional… otherwise you could end up with some unexpected results.

For example the JavaScript code below parses two numbers without specifying a radial and adds them together

$('#Calculate').click(function() {
    var firstNumber = parseInt($('#firstNumber').val());
    var secondNumber = parseInt($('#secondNumber').val());
    $('#total').val(firstNumber + secondNumber);
});

When the user enters ’043′ as the first number and ’1′ and the second number

What happens when you don't use parseInt

the calculated result is 36 and NOT 44. You can test this yourself using this jsFiddle.

This happens because the input began with “0” and so the radix of eight (octal) was used.

The solution is to specify a radix, which in our case is ten (decimal).

$('#Calculate').click(function() {
    var firstNumber = parseInt($('#firstNumber').val(),10);
    var secondNumber = parseInt($('#secondNumber').val(),10);
    $('#total').val(firstNumber + secondNumber);
});

For this reason the best practice is to always specify a radix when using parseInt.