Thursday, November 28, 2013

ASP.NET SPA Recommendation

Please check the latest blog on this

If you are an ASP.NET MVC developer and considering SPA into your application, I recommend using Durandal. Unlike other SPA frameworks Durandal is built on top of several popular frameworks such as Knockout, JQuery and hence the learning curve can be less and can be adopted quickly.

Durandal heavily depends on KnockoutJS for databinding. KnockoutJS is backed by Microsoft. Hence it seems to be an easy choice. Please note that I am not recommending to go with Durandal as you are a Microsoft developer, but this should be one of your criteria.

Microsoft has a very good tooling support for Knockout and also Durandal. This tooling will help you to quickly adopt Durandal. (Recently VS 2013 started tooling for AngularJS). In addition Microsoft’s new TypeScript can make the Durandal development easy.

I have spent lot of time comparing other SPA technologies such as Angular, Backbone. After that I felt that Durandal is a good fit for my requirement. During my analysis it came again and again that Durandal is recommend for ASP.NET developers.


Monday, November 25, 2013

Modularize with RequireJS

What is modularization? Modularization breaks large code base into smaller blocks of manageable code, thereby improving maintainability, reusability and extensibility. Modularization when done properly decouples the functionality and reduces the dependencies.

Why modularization? Imagine a large application with huge amount of code, without encapsulation, with conflicting global scope, with huge dependencies, with tight coupling and developed with JavaScript. Now imagine you need to support this huge code base. Won’t it be easier if the code is properly managed with loose coupling and reduced dependencies?

Modularization sounds great and has been a tenet in all traditional programming languages such as C#, VB, Java. Developers in these languages code modularized code without even thinking about it. Unfortunately this is a big deal in JavaScript as the current version of JavaScript does not provide a clean way of modularizing the JavaScript code. So what to do now?

Thanks to the RequireJS, writing modular code is JavaScript is easier and you can do it now.

In this blog I will walk you through how to easily modularize your javascript code using one of the most popular and commonly used JavaScript library, RequireJS. RequireJS has several other advantages in addition to modularization, but in this blog I will only focus on modularization and walk you through converting a small javascript code into a modular javascript code using RequireJS.

Here is a small javascript code which calculates the discount for a product in an ecommerce application

function getPrice() {
    console.log("Getting price")
    return 120;
}

function calculateDiscount(price)
{
    console.log("Calculating discount")
    var discount = 10;
    return price * (100 - discount) / 100;
}

var actualPrice = getPrice();
var price = calculateDiscount(actualPrice);
alert(price);

The above code can be huge if have thousands of products and several discount promotions. Typically in server side code using C# we classify this code into classes as mentioned below.
  • Product object which returns the price of a product
  • Discount object which calculates the discounted price based on the promotion
  • Main or caller class which calls into this calculation 

RequireJS provides the similar approach in JavaScript. We can define Product, Discount and Main modules in Javascript and partition this code. Here is the modularized code using RequireJS

product.js
define([], function () {
    return {
        getPrice : function () {
            console.log("Getting price")
            return 200;
        }
    }
});

discount.js
define([], function () {
    return {
        calculateDiscount : function(price) {
            console.log("Calculating discount")
            var discount = 10;
            return price * (100 - discount) / 100;
        }
    }
});

main.js
require([product', discount'], function (product, discount) {
    var actualPrice = product.getPrice();
    var price = discount.calculateDiscount(actualPrice);
    alert(price);
});

As you see the product.js and discount.js scripts are enclosed with define attribute, but the main.js is enclosed with require attribute. The primary difference between these two are, require attribute defines and runs the code within. Hence you need require if you want to execute immediately. This is similar to the document.onload event.

On your page you just need to include the main.js and all the other javascript files will be automatically loaded by RequireJS. Here is the syntax for the script include tag.

<script data-main="scripts/main" src="scripts/require.js"></script>

RequireJS makes modularization easy and doable with today’s technologies. 

Thursday, November 7, 2013

TypeScript Debugging

Any programming language is not complete without good debugging capability. Remember the hours you spent trying to identify where the problem is. Debugging is particularly hard in JavaScript world as the tools are still emerging.

For transcompilers likes TypeScript debugging will be much harder without proper tools. The typescript you wrote will be converted to javascript and you may have to debug the javascript and not the typescript you wrote. Imagine how hard it will be to debug the code you haven’t written. Fortunately typescript provides a very good debugging tool which helps you to debug the code as you wrote in typescript and not to worry about the generated javascript.

TypeScript provides this debugging capability with the help of source maps. Source map is file used by browsers to map the javascript code with its original source code. Whenever you save the typescript file a source map file is automatically generated by the Visual Studio.


The actual debugging is similar to debugging the C# or VB code. Just put a break point and run the application using Internet Explorer. By default Internet Explorer recognizes the source maps.


When the debug point was hit the Visual Studio helps you step through the code as shown below


The debugger helps you exam variables, look at call stack and provide other features you typically use while debugging.

TypeScript provides very good tooling which helps easy adoptability. Debugging is one of those great tools.

Please go to my TypeScript blog series for other blogs in TypeScript.