About Me

Sunday, March 16, 2014

TypeScript

Concerning last couple of years JavaScript has gone through an explosive growth and with HTML5 it delivers a rich user environment compared to any other server side scripting models.
But what is wrong with the JavaScript;
even though it is easier to learn basics of JavaScript; writing a application scale JavaScript is hard. And most importantly it is meant to be a scripting language not a programming language, so it lacks proper structuring mechanism which larger application model necessarily look for. 
But people still writing large scale applications using JavaScript with the help of tools like Google’s GWT and scriptsharp (a C# => JavaScript code transformer ).
TypeScript helps to strengthen JavaScript with what is lacks features like classes, module and static typing.

TypeScript is a language for application scale JavaScript development

Ultimately all TypeScript codes will be compiled to a plain JavaScript code. And most importantly the compiled code and the compiler works on Any browser, Any host and Any OS. Simply all JavaScript codes are TypeScript and just copying and pasting will work, optionally TypeScript can contain Static types Classes and Modules where all of those disappear at runtime.
Compiler and all libraries related are Open Source.

Install TypeScript

image
Once you installed there will be a new project type as follows;
image
Once the project created solution explorer will looks like,
image
Simply I’m not going to do any modifications to the code it generated as an example. Lets just go through the app.ts file
class Greeter {
    element: HTMLElement;
    span: HTMLElement;
    timerToken: number;

    constructor(element: HTMLElement) {
        this.element = element;
        this.element.innerHTML += "The time is: ";
        this.span = document.createElement('span');
        this.element.appendChild(this.span);
        this.span.innerText = new Date().toUTCString();
    }

    start() {
        this.timerToken = setInterval(() => this.span.innerHTML = new Date().toUTCString(), 500);
    }

    stop() {
        clearTimeout(this.timerToken);
    }

}

window.onload = () => {
    var el = document.getElementById('content');
    var greeter = new Greeter(el);
    greeter.start();
};

For the moment forget about all the matters with JavaScript, code above is very simple (even though I’m not a JavaScript expert). 

window has “onload” event which is subscribed with an anonymous method contains a new Greeter object with parameterized constructor (taking an HTMLElement as argument)…. Once start method called time should be displayed with 500 milliseconds interval.

Lets just see the output

image

While its running lets peek in to debugger generated code,

image

it has this app.js (Which is JavaScript) mapped to app.ts (which is TypeScript) and with in app.js we can see pure JavaScript code rendered.
var Greeter = (function () {
    function Greeter(element) {
        this.element = element;
        this.element.innerHTML += "The time is: ";
        this.span = document.createElement('span');
        this.element.appendChild(this.span);
        this.span.innerText = new Date().toUTCString();
    }
    Greeter.prototype.start = function () {
        var _this = this;
        this.timerToken = setInterval(function () {
            return _this.span.innerHTML = new Date().toUTCString();
        }, 500);
    };

    Greeter.prototype.stop = function () {
        clearTimeout(this.timerToken);
    };
    return Greeter;
})();

window.onload = function () {
    var el = document.getElementById('content');
    var greeter = new Greeter(el);
    greeter.start();
};//# sourceMappingURL=app.js.map

And most importantly check the index.html, it refers the app.ts as
 <script src="app.js"></script>
 

Sunday, March 9, 2014

LINQ to SQL Improve Query Performance and IEnumerable<T> vs. IQueryable<T>

Most of the business developments involve with the Data tier integration; which has a data layer consist of queries. Entity Framework is one solution to write a data layer quickly. 
In writing a data layer completely using LINQ to SQL, it has to be precisely understood how the query is going to be executed.
I have a Table with 20,000 records and a typical select query statistics as follows.
image
Since my database on the same machine where result shows; it took very little time. but if we check the number of bytes received from the server is: 1410798 Bytes which is about 1.34 MB. So this is normal selection with all data.
Let say I wants to count number of rows, and that is my business requirement. Typical SQL Query would be,
SELECT COUNT(*)
  FROM [CodeFirstDemoAppDB].[dbo].[Students]

Now I’m going to do the same through LINQ, And I’ve used three different way to do so.

   1:  DAL.SchoolContext db = new DAL.SchoolContext();
   2:  // using var 
   3:  var results = db.Students;
   4:  Console.WriteLine(results.Count());
   5:  // using IEnumerable type
   6:  IEnumerable<Model.Student> resultsEnumerable = db.Students;
   7:  Console.WriteLine(resultsEnumerable.Count());
   8:  // using IQueryble type
   9:  IQueryable<Model.Student> resultsQueryble = db.Students;
  10:  Console.WriteLine(resultsQueryble.Count());

Following shows the respective query executed at the DB tracked with SQL profiler.


TypeQuery
using var (which remains DbSet Type)
SELECT 
    [GroupBy1].[A1] AS [C1]
    FROM ( SELECT 
        COUNT(1) AS [A1]
        FROM [dbo].[Students] AS [Extent1]
    )  AS [GroupBy1]
using IEnumerable
SELECT 
    [Extent1].[ID] AS [ID], 
    [Extent1].[FirstMidName] AS [FirstMidName], 
    [Extent1].[LastName] AS [LastName], 
    [Extent1].[EnrollmentDate] AS [EnrollmentDate]
    FROM [dbo].[Students] AS [Extent1]
using IQueryble
SELECT 
    [GroupBy1].[A1] AS [C1]
    FROM ( SELECT 
        COUNT(1) AS [A1]
        FROM [dbo].[Students] AS [Extent1]
    )  AS [GroupBy1]

As we can see here use of IEnumerable type caused query executed at the line;
IEnumerable<Model.Student> resultsEnumerable = db.Students;

and retrieve all the records to the business layer to make count at business layer level while transporting approximately about 1.34MB. For quick information we can check the client statistics for other two types which has same SQL query output;

image

It is about 6 KB information transport through the network.

Conclusion

As a conclusion for business operations, which does not need to bring whole data set to the business layer Beware of your LINQ query and types you use to hold results.

For further learning about LINQ’s deferred execution please refer this article.