amazedsaint's #tech journal

Self Hosting ASP.NET Web API and Understanding the Routing Conventions

noreply@blogger.com (Anoop Madhusudanan) — Wed, 16 May 2012 07:33:00 +0000

In this post, we’ll have a quick look at ASP.NET Web API Self Hosting and Routing Conventions. ASP.NET Web APIs allow you to easily build RESTful applications on top of the .NET framework. ASP.NET Web API is bundled with ASP.NET MVC 4, but you can also self host Web APIs in your custom .NET application (like a console application or a Windows Forms application or in ASP.NET Web Forms applications).

Let us quickly build a Pet Store API to query pets using ASP.NET Web API, and we’ll be self hosting the same.

Self Hosting

Fire up Visual Studio in Admin mode, and create a new Console application. Then, install the Nuget package AspNetWebApi.SelfHost

Install-Package AspNetWebApi.SelfHost

This will add the required dependencies to your Self host application.

class Program
    {
        static void Main(string[] args)
        {

            //Create a host configuration
            var selfHostConfiguraiton = new HttpSelfHostConfiguration("http://localhost:8080");

            //Setup the routes
            selfHostConfiguraiton.Routes.MapHttpRoute(
                name: "DefaultApiRoute",
                routeTemplate: "api/{controller}/{id}",
                defaults:new { controller = "Pet", id = RouteParameter.Optional }
                );
           
            //Create Server & Wait for new connections
            using (var server = new HttpSelfHostServer(selfHostConfiguraiton))
            {
                server.OpenAsync().Wait();
                Console.WriteLine("Now Hosting at http://localhost:8080/api/{controller}");
                Console.ReadLine();
            }

        }
    }

Adding Controllers

Now, you can add your controllers by inheriting them from the ApiController base class, and the requests will be dispatched to the correct controller based on the routing information we added. So, let us have a PetController class, where you expose few pets.

  

    //-- Actual controller 

    public class PetController : ApiController
    {
        //GET All Pets /api/pet
        public IEnumerable<Pet> Get()
        {
            var rep = new PetRepository();
            return rep.GetAllPets();
        }

        //GET One Pet /api/pet/2
        public Pet Get(int id)
        {
            var rep = new PetRepository();
            return rep.GetAllPets().First(p => p.Id == id);
        }
       
    }

   //-- View Model

   public class Pet
    {
        public string Name { get; set; }
        public string Type { get; set; }
        public int Id { get; set; }
    }


    //-- Simple repository elsewhere for some mock data

    public class PetRepository
    {
        public IEnumerable<Pet> GetAllPets()
        {
            //Ideally get the data from a source
            return new List<Pet>
                    {
                        new Pet(){Name="Jim", Type="Dog", Id=1},
                        new Pet(){Name="Meow", Type="Cat",Id=2},
                        new Pet(){Name="Jam", Type="Dog",Id=3},
                        new Pet(){Name="Tommy", Type="Dog",Id=4},
                        new Pet(){Name="Bigpaw", Type="Cat",Id=5}
                    };
        }

    }

At this point, if you go to the target URL, you’ll find the XML response. Here is a formatted view. Have a look at the URL.

And for accessing one pet, you can provide the Id, which gets mapped to the Get method in controller that accepts Id parameter.

Default Routing Conventions

ASP.NET Web API will try to match the URL with the mapped HTTP routes. Based on the above example you can see that URLs like /api/pet or /api/pet/2 etc are matching the route template we provided – /api/{controller}/{id}

Now, let us see how the Web API resolves the Controller and the correct action. The controller class will be picked by using the value of the {controller} variable in the URL that corresponds to the routing template. To choose the action, the Http Action bill be used. For example, if this is a HTTP GET request, according to the convention, that will be mapped to a method with the name starting with ‘Get’ in the controller.

As an exercise, change the first Get method’s name to a different one to GetAll, and change the name of our second Get method to GetById – and notice that above URLs are still correctly getting mapped. This convention works out of the box for the GET, POST, PUT and Delete HTTP Methods . Instead of following the Naming conventions, you can use the attributes HttpGet, HttpPut, HttpPost and HttpDelete. For example, instead of starting the method names with ‘Get’ as in the above example, you could use the HttpGet attribute as below.

 public class PetController : ApiController
    {
        //GET All Pets /api/pet
        [HttpGet]
        public IEnumerable<Pet> FindAll()
        {
            var rep = new PetRepository();
            return rep.GetAllPets();
        }

        //GET One Pet /api/pet/2
        [HttpGet]
        public Pet FindById(int id)
        {
            var rep = new PetRepository();
            return rep.GetAllPets().First(p => p.Id == id);
        }
       
    }

You might be wondering why the default mapping scheme is limited to the GET, POST, PUT and DELETE actions, but this mapping scheme fits well for RESTful services. Because in REST, all URIs should identify a resource and not actions. Note that this is different than the ASP.NET MVC mapping scheme, where you can specify actions directly. How ever, you can enforce MVC style route selection by specifying the action in the route template, like

routes.MapHttpRoute(
    name: "default",
    routeTemplate: "api/{controller}/{action}/{id}",
    defaults: new { id = RouteParameter.Optional }
);

And this will enable you to choose actions by name in the URL. For example, now you can access the actions in our PetController using the URLs /api/pet/findall and /api/pet/findbyid/2 - Note that we are using the action name in the URL scheme, much like in MVC. This may be useful if you want to build RPC/HTTP APIs.

While this is a quick introduction, you may refer more detailed tutorials on these topics at http://www.asp.net/web-api/overview

The Patent System is so Broken, Be careful if you are a developer!!

noreply@blogger.com (Anoop Madhusudanan) — Tue, 13 Mar 2012 17:32:00 +0000

I was reading Fred’s rants about Yahoo crossing the line by suing Facebook, and got kind of Shocked when I went through the patents Yahoo is using to Sue Facebook. The point is, most of these patents are so generic that you can get sued if you run a web site. Why patents do exist for all trivial common tasks and architecture patterns in the world? A common sense design decision I’m going to take for my next website or my next customer project is already patented!! This is ridiculous.

“Dynamic Page Generator”

For example, have a look at this “Dynamic Page Generator” patent – It can be used to sue any CGI/Server side stack. The patent states

An custom page server is provided with user preferences organized into templates stored in compact data structures and the live data used to fill the templates stored local to the page server which is handing user requests for custom pages. One process is executed on the page server for every request. The process is provided a user template for the user making the request, where the user template is either generated from user preferences or retrieved from a cache of recently used user templates. Each user process is provided access to a large region of shared memory which contains all of the live data needed to fill any user template

So, your website has an architecture similar to this? I’m sure most new age web sites are dynamic – but hey, you can get sued for this (Or correct me if I’m missing anything).

“Personalized Information Retrieval Using Profiles”

Such trivial tasks has got a patent too, for example see this

An automatic method and system for retrieving information based on a user-defined profile (e.g. a personalized newspaper). A user-controlled client establishes communication with a stateless server, the server presenting a list of options to the client between the server and the client. The client provides an identification of the user-defined profile. The server engages a first application program, the first application program retrieving the user-defined profile wherein the user-defined profile identifies information which is of interest to the user.

So, is it that if I implement a Profile based customization for my website, I can be sued by Sun Microsystems (Oops, now by Oracle, may be?)

The larger perspective

To be honest, I think this entire Patent system is a time bomb that’ll explode pretty soon – large companies will use this to bomb small companies. And some one please fix it. Not sure why all these patents are getting approved, who are reviewing them and why these generic concepts are patented to this extent?

Or may be I’m so naïve that I’m missing something here!!

Update: Found that The Verge has another great article on the same topic, read that too.

CanML– Creating simple Markup language using XML + T4 for drawing shapes in HTML5 Canvas in your ASP.NET/C# applications

noreply@blogger.com (Anoop Madhusudanan) — Sat, 18 Feb 2012 10:11:00 +0000

In this post, we’ll explore how to create a simple Xml based markup language for defining shapes for HTML5 Canvas. We’ll achieve this by generating JavaScript code from the Xml definition, and this post is intended to be a pointer towards how you can leverage scaffolding and meta programming to simplify a lot of scenarios. If you don’t have a lot of kids to look after, modify this to create your own version of full fledged CanML (take that name) and let me know

Coming back - We’ll be using my Elastic Object Nuget package and T4 templates for code generation as I explained in my last post [Using AmazedSaint.ElasticObject Nuget Package for code generation], so reading that post will help for sure. I also suggest you to read quickly this Basic Canvas tutorial in MDN

[+] Source code - Download ASP.NET MVC zipped example From Skydrive and keep it handy

What we are going to achieve?

You’ll be able to declare your canvas shapes using XML, for example see how I’m declaring a Heart shape and a Triangle slice. In the heart shape, I’m using absolute co-ordinates, and I’m using variables for triangle slice so that you can draw it anywhere.

<?xml version="1.0" encoding="utf-8" ?>

<shapes>

  <!--Normal Heart Shape, Fixed Coords-->
  <shape name="shapeHeart" type="fill" params="fillColor">
    <fillStyle value="fillColor"/>
    <to params="75,40"/>
    <bcurve params="75,37,70,25,50,25"/>
    <bcurve params="20,25,20,62.5,20,62.5"/>
    <bcurve params="20,80,40,102,75,120"/>
    <bcurve params="110,102,130,80,130,62.5"/>
    <bcurve params="130,62.5,130,25,100,25"/>
    <bcurve params="85,25,75,37,75,40"/>
  </shape>

  <!--Triangle Slice with variables-->
  <shape name="shapeTriangleSlice" type="fill" params="fillColor,firstX,firstY,delta">
    <fillStyle value="fillColor"/>
    <to params="firstX,firstY"/>
    <line params="firstX,firstY+delta"/>
    <line params="firstX+delta,firstY"/>
  </shape>


  <!--Draw both-->
  <shape name="allShapes">
    <shape name="shapeHeart" params="'yellow'"/>
    <shape name="shapeTriangleSlice" params="'red',200,200,100"/>
    <shape name="shapeTriangleSlice" params="'red',200,200,-100"/>
  </shape>
  
</shapes>

And this will be rendered to an HTML5 Canvas as below. This trick is, we are generating the required JavaScript code from the above markup, using the technique I explained in my earlier post – Generating code from simple XML models

What about the Generated JavaScript?

If you are interested to see the JavaScript getting generated from the above Markup, see that below. If you examine the generated code closely along with the xml model we’ve above, you can see that we are following a couple of simple conventions to generate the code from the above markup.

Each <shape/> definition is wrapped as a method, with a canvas parameter (along with other parameters if param element is present)
The type attribute of the Shape
We are having some short cut notations (like to –> moveTo and bcurve-> bezierCurveTo)
If an element has a param attribute, it’ll be rendered as a method (example is moveTo)
If an element has a value attribute, it’ll be rendered as a property (example is

//Method generated 
var shapeHeart = function (canvas, fillColor) 
{
if (canvas.getContext){  
    var ctx = canvas.getContext('2d');  
	ctx.beginPath();
	ctx.fillStyle=fillColor;
	ctx.moveTo(75,40);
	ctx.bezierCurveTo(75,37,70,25,50,25);
	ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
	ctx.bezierCurveTo(20,80,40,102,75,120);
	ctx.bezierCurveTo(110,102,130,80,130,62.5);
	ctx.bezierCurveTo(130,62.5,130,25,100,25);
	ctx.bezierCurveTo(85,25,75,37,75,40);
	ctx.fill();			
}
}
//Method generated 
var shapeTriangleSlice = function (canvas, fillColor,firstX,firstY,delta) 
{
if (canvas.getContext){  
    var ctx = canvas.getContext('2d');  
	ctx.beginPath();
	ctx.fillStyle=fillColor;
	ctx.moveTo(firstX,firstY);
	ctx.lineTo(firstX,firstY+delta);
	ctx.lineTo(firstX+delta,firstY);
	ctx.fill();
			
}
}
//Method generated 
var allShapes = function (canvas) 
{
if (canvas.getContext){  
    var ctx = canvas.getContext('2d');  
	ctx.beginPath();
	shapeHeart(canvas,'yellow');
	shapeTriangleSlice(canvas,'red',200,200,100);
	shapeTriangleSlice(canvas,'red',200,200,-100);			
}
}

Note that all methods are generated with a canvas input parameter. And now, you may call these methods by linking to the generated CanvasShapes.js script file in your html page – See my index.cshtml ASP.NET MVC razor view where I invoke the allShapes method. Just get your actual canvas element, and pass it to draw, as shown below.

@{
    ViewBag.Title = "Home Page";
}

@section headerSection{
    <script src="@Url.Content("~/CanvasShapes/CanvasShapes.js")" type="text/javascript"></script>
     <style type="text/css">  
      canvas { border: 1px solid black; margin-left:auto; margin-right:auto;}  
    </style>  
}

<canvas id="myCanvas" width=800 height=480></canvas>

<script>
    var canvas = document.getElementById("myCanvas");
    allShapes(canvas);
</script>

Tell me about the Actual Generation of JS from XML?

The actual generation is super simple – In fact this was just intended to be an sample use case for using the Elastic Object Nuget package for code generation.

To try this out manually,

Create a new ASP.NET MVC Project in Visual Studio.
Install the AmazedSaint.ElasticObject package as explained in my previous post – This will also add an Xml file and a TT (Text template file) to your project
Rename the Xml file to CanvasModel.xml – and copy the above XML code to the same
Rename the TT file CanvasShapes.tt, and add the below T4 code to the TT File

Here is the simple T4 code we are using for generating the JS Code. Oops, the actual conversion code is not even 25 lines, but this is enough to convey the idea, right? You can beef this up further, by adding some support for gradiants, transitions etc to make this full fledged. Keep the MDN Canvas documentation handy.

<#@ template debug="true" hostspecific="true" language="C#" #>
<#@ Assembly Name="System.Xml.dll" #>
<#@ Assembly Name="System.Xml.Linq.dll" #>
<#@ Assembly Name="System.Core.dll" #>
<#@ Assembly Name="Microsoft.CSharp.dll" #>
<#@ Assembly name="$(SolutionDir)packages\AmazedSaint.ElasticObject.1.2.0\lib\net40\AmazedSaint.Elastic.dll" #>
<#@ Import Namespace="System.Xml" #>
<#@ Import Namespace="System.Xml.Linq" #>
<#@ Import Namespace="AmazedSaint.Elastic" #>
<#@ Import Namespace="System.Collections.Generic" #>
<#@ Import Namespace="System.Collections" #>
<#@ Import Namespace="AmazedSaint.Elastic.Lib" #>
<#@ output extension=".js" #>

<#
var model=FromFile("CanvasModel.xml");
foreach(var c in model["shape"])  //get all classes
	WriteShapeMethod(c);

#>

<#+ 
//Create an elastic object
private dynamic FromFile(string file)
{
   var path= Host.ResolvePath(file);
   return XDocument.Load(path).Root.ToElastic();
}

//Write a shape method
private void WriteShapeMethod(dynamic c)
{ 
#>
//Method generated 
var <#= c.name #> = function (<#=c.HasAttribute("params")
                         ?"canvas, " + c.@params :"canvas"  #>) 
{
if (canvas.getContext){  
    var ctx = canvas.getContext('2d');  
	ctx.beginPath();
<#+	
var tokens = new System.Collections.Generic.Dictionary<string, string>()
			{
				{"bcurve","bezierCurveTo"},
                {"qcurve","quadraticCurveTo"},
                {"line","lineTo"},
                {"to","moveTo"},
                {"arcTo","arcTo"}
			};
	foreach (var member in c[null])
    {
	    string mname = tokens.ContainsKey(member.InternalName) 
               ? tokens[member.InternalName] : member.InternalName;
        if (member.HasAttribute("params"))
        {
           if (member.InternalName=="shape")
		WriteLine("\t" + member.name + "(canvas," + member.@params + ");");
           else
	       WriteLine("\tctx." + mname + "(" + member.@params + ");");
   }
        else if (member.HasAttribute("value"))
	        WriteLine("\tctx." + mname + "=" + member.@value + ";");
        else
	        WriteLine("\tctx." + mname + "();"); 
	}

    if (c.HasAttribute("type"))
	    WriteLine("\tctx." + c.type + "();");
        
#>			
}
}
<#+
}

#>

All right, Happy coding as usual. Enjoy some simple meta coding cookies.

XML Driven C#/T4 Code Generation with ElasticObject Nuget Package For Minimalists ;)

noreply@blogger.com (Anoop Madhusudanan) — Thu, 16 Feb 2012 07:01:00 +0000

Code generation should be simple, and I wanted to do it by using a simple XML file as my model from with in Visual Studio. So, here is a quick wrapper I’ve created for Xml driven code generation for minimalists/minimal scenarios.

Starting Super Simple XML driven code generation – Now with Nuget

Here we go – this is based on my ElasticObject implementation to generate code using Text Templates (TT/T4), by using simple XML files as a model. It is so simple that it won’t support the entire XML schema - But I’ll live with that for now. So, the steps are simple.

Step 1 - Get the ElasticObject Nuget Package

Install AmazedSaint.ElasticObject, run the following command in the Package Manager Console

PM> Install-Package AmazedSaint.ElasticObject

Or you can install this via the Nuget Package manager, it is your choice.

Step 2 – Enjoy

This should add the reference to ElasticObject library, and will add an Xml model file and a T4 template in the Solution Explorer (See the image). The xml file can be your model, and the TT file has a bit of code that wraps the model for generating what ever you need (source code, views, scaffolding etc). You can modify the xml and the TT file. Also, there is a ReadMe-ElasticObject.cs.txt which you can re-name to a CS file and view/run the tests to see the usage of ElasticObject.

What is in the Xml model file and TT generator?

The example model file contains some sample xml, it can be anything (infact, a reasonable subset of xml ;))

<model>
<class name="MyClass1">
  <property name="MyProperty1" type="string"/>
  <property name="MyProperty2" type="string"/>
</class>
  <class name="MyClass2">
    <property name="MyProperty1" type="string"/>
    <property name="MyProperty2" type="string"/>
  </class>
</model>

So, as you can see, the model can be anything, with in a valid root element. The example just mimics few classes and properties in that. Now, let us have a quick look at the example TT file added by the Nuget package. Don't get afraid, it is some simple T4 syntax - Refresh your T4 Skills from here, Oleg has everything for you to start with the T4 syntax (and much more).

Did I tell you you can use Visual T4 Editor Free edition to reduce the pain when you work with T4 Templates? Get it today from the VS Extensions gallery, otherwise you’ll end up sending hate mails to the guys who created the Visual Studio T4 editor.

In the below code, you could see that we are creating an elastic object from the xml, and then iterating the elements for generating the code – In case you are not familiar with ElasticObject, see my post here – It is just a wrapper dynamic object I created for loosely wrapping stuff like xml. Also, you could see this LIDNUG presentation where Shey is demoing the ElasticObject in between his dynamic talk.

Anyway, here is the T4 code you’ll find in the tt file added by our Nuget package.

<#@ template debug="false" hostspecific="true" language="C#" #>
<#@ Assembly Name="System.Xml.dll" #>
<#@ Assembly Name="System.Xml.Linq.dll" #>
<#@ Assembly Name="System.Core.dll" #>
<#@ Assembly Name="Microsoft.CSharp.dll" #>
<#@ Assembly name="$(SolutionDir)packages\AmazedSaint.ElasticObject.1.0.0\lib\net40\AmazedSaint.Elastic.dll" #>
<#@ Import Namespace="System.Xml" #>
<#@ Import Namespace="System.Xml.Linq" #>
<#@ Import Namespace="AmazedSaint.Elastic" #>
<#@ Import Namespace="AmazedSaint.Elastic.Lib" #>
<#@ output extension=".cs" #>

<#
var model=FromFile("ElasticDemoModel.xml");

foreach(var c in model["class"])  //get all classes
	WriteClass(c);

#>

<#+ 
//Create an elastic object
private dynamic FromFile(string file)
{
   var path= Host.ResolvePath(file);
   return XDocument.Load(path).Root.ToElastic();
}

//Write a class
private void WriteClass(dynamic c)
{ 
#>
//Class generated 
class <#= c.name #> 
{
<#+
	foreach(var p in c["property"])
	   WriteProperty(p);  
#>			
}
<#+
}


//Write a Property
private void WriteProperty(dynamic p)
{
#>
public <#= p.type #> <#= p.name #>  {get;set;}
<#+   
}
#>

And you guessed it, the generated file is here.

//Class generated 
class MyClass1 
{
public string MyProperty1  {get;set;}
public string MyProperty2  {get;set;}			
}
//Class generated 
class MyClass2 
{
public string MyProperty1  {get;set;}
public string MyProperty2  {get;set;}			
}

Note that this requires C# dynamic support, and hence targets the .NET 4.0 runtime – So if you want to have code generation in other platforms with out dynamic support, add a .NET 4.0 project, keep your models and TT/T4s there, and add/link the generated files to other projects. This example just shows C# code generation from the model, but you can imagine what all things you can do

Update: See an example implementation – CanML – Creating a simple markup language for drawing shapes to HTML5 Canvas

Few more of my previous posts, if you’ve more interest.

Kibloc – Real time, distance based object tracking and counting using Kinect

noreply@blogger.com (Anoop Madhusudanan) — Sun, 29 Jan 2012 17:26:00 +0000

This weekend hack is a small Kinect application - Kibloc is a physical object counter/tracker using Kinect.

Update As Of Feb 1 2012: This article is explaining Version 1.0 Beta 2 APIs. How ever, now the Official 1.0 Kinect SDK For Windows is available, and there are changes from the Beta 2 API.

Kinect for Windows SDK (Download) is pretty intuitive (I’m using Version 1.0 Beta 2 for this, so if you want to test this you should use Beta 2 APIs which is still available as a separate download and NOT the Version 1.0 APIs), and you may use the same to develop pretty cool applications using Microsoft Kinect. In this post, we’ll be focusing on implementing a quick real time blob counter using Kinect depth data, for counting and tracking objects in front of the sensor. This is a basic demo, but as you can imagine, this has got a couple of pretty hot real life use cases. As a heads up, the source code is at http://kibloc.codeplex.com/ and keep it handy when you read along. Ensure you’ve the NuGet Packages in packages.config

Here is the video that demonstrates real time, distance based blob tracking.

In the video, the image drawing for the blob highlight is a bit slow, this is because I’m drawing it on top of the color image as discussed below. For actual games/calculations, you don’t need the drawing on top of the color image/bitmap.

So, let us develop this. The steps involved are pretty simple.

Initializing Kinect
Get the depth image, and slice the depth frame to draw pixels with in the range to form a gray scale image
Pass this image to the blob detection algorithm
Find the convex hull/edges/quadrilateral
Draw the same on the color image from the video frame

Introduction to Kinect API

Kinect API allows you to work with the Kinect camera’s image/video stream, almost similar to a web cam. Apart from the RGB Video camera, Kinect has got a depth sensor as well., which gives you information about the distance of an object in front of the device - and you can leverage the Video data and Depth data together to detect objects using Kinect. Kinect also exposes built in support for Skeletal tracking. The classes for working with Video, Depth and Skeletal Tracking resides in the namespace Microsoft.Research.Kinect.Nui. You can access the Kinects connected to the device via the Runtime.Kinects enumeration, and can access the Depth, Video and Skeletal tracking data by handling the DepthFrameReady, VideoFrameReady and SkeletalFrameReady events of a connected Kinect object. In the below example you could see that we are accessing the Depth data from Kinect.

Additionally, you can also use the Audio features of Kinect, leveraging classes available under the namespace Microsoft.Research.Kinect.Audio.

That is it for an interesting, and I suggest you should go through the SDK Quick starts and samples here at Coding 4 Fun if you need to learn more about how to work with the SDK in detail. The API is intuitive and super easy, but I suggest you may go through these videos to kick start.

Initializing Kinect

The first step is to initialize Kinect, so here is the self explanatory code.

           
// If you don't make sure the Kinect is plugged in and working before trying to use it, the app will crash
if (Runtime.Kinects.Count > 0)
{
    runtime = Runtime.Kinects[0];
    runtime.Initialize(RuntimeOptions.UseColor | RuntimeOptions.UseDepth);
    runtime.DepthFrameReady += (s, e) =>
        {
           // Use depth data
        };

    runtime.VideoFrameReady += (s, e) =>
        {
            //Use video data
        };

    runtime.DepthStream.Open(ImageStreamType.Depth, 2, ImageResolution.Resolution320x240, ImageType.Depth);
    runtime.VideoStream.Open(ImageStreamType.Video, 2, ImageResolution.Resolution640x480, ImageType.Color);
}
else
    MessageBox.Show("Oops, please check if your Kinect is connected?");

Basically, you may see that we are initializing the Kinect run time by passing the flags UseColor and UseDepth, so that we can consume the DepthStream and VideoStream later. The event handlers are attached to DepthFrameReady and VideoFrameReady events as shown above.

Get the depth image for a range

Kinect depth data is just an array of bytes, where each pixel is represented with two bytes (16 bits). Each pixel in the depth data provides distance of a pixel from the sensor, instead of color information as in a normal bitmap pixel. You can either specify Kinect to provide you the raw depth data (ImageType.Depth) or to provide you depth data along with player index (ImageType.DepthAndPlayerIndex) when you initialize the DepthStream (see the above code). You can read this iProgrammer article if you are interested to learn more about the Depth data, in detail.

Basically, what we do in the below method is to walk through the PlanarImage (raw byte array) for Depth data, and create a bitmap with 4 bytes per pixel (Red, Blue, Green and Alpha) – where Red, Blue and Green values will be the same value to form a gray scale image. The value is any number between 0 to 255, based on the distance of a pixel.

    /// <summary>
    /// Credits due: 
    /// Portions of code below from
    /// (1) http://www.codeproject.com/Articles/317974/KinectDepthSmoothing though I'm not really smoothing here :)
    /// (2) http://stackoverflow.com/questions/94456/load-a-wpf-bitmapimage-from-a-system-drawing-bitmap
    /// 
    /// -- Anoop
    /// </summary>

   public static BitmapSource SliceDepthImage(this ImageFrame image, int min=20, int max=1000)
        {
            int width = image.Image.Width;
            int height = image.Image.Height;

            var depthFrame = image.Image.Bits;
            // We multiply the product of width and height by 4 because each byte
            // will represent a different color channel per pixel in the final iamge.
            var colorFrame = new byte[height * width * 4];

            // Process each row in parallel
            Parallel.For(0, 240, depthRowIndex =>
            {
                //  Within each row, we then iterate over each 2 indexs to be combined into a single depth value
                for (int depthColumnIndex = 0; depthColumnIndex < 640; depthColumnIndex += 2)
                {
                    var depthIndex = depthColumnIndex + (depthRowIndex * 640);

                    // Because the colorFrame we are creating has twice as many bytes representing
                    // a pixel in the final image, we set the index to be twice of the depth index.
                    var index = depthIndex * 2;

                    // Calculate the distance represented by the two depth bytes
                    var distance = CalculateDistanceFromDepth(depthFrame[depthIndex], depthFrame[depthIndex + 1]);

                    // Map the distance to an intesity that can be represented in RGB
                    var intensity = CalculateIntensityFromDistance(distance);

                    if (distance > min && distance < max)
                    {
                        // Apply the intensity to the color channels
                        colorFrame[index + 0] = intensity; //blue
                        colorFrame[index + 1] = intensity; //green
                        colorFrame[index + 2] = intensity; //red
                        colorFrame[index + 3] = 255; //alpha
                    }
                }
            });

Once the depth image is created, we pass it over to the Blob detector to detect the blobs and high light the same.

Blob Detection and Highlighting

For blob detection, I’m using the Excellent AForge library. The BlobCounter class takes the above image, and calculate the edges/rectangles of the blobs in the image. Here is an expansion of our earlier DepthFrameReady and ImageFrameReady events, you can see that we are creating a sliced depth image based on the slider values, and creating a depth frame image bitmap and a color frame image bitmap, and passes both of them to the blob detector. We are also specifying what type of high lighting to be used by the detector, based on the combo box the user has selected.

 runtime.DepthFrameReady += (s, e) =>
        {
            if (colorFrame == null) return;

            if (sliderMin.Value > sliderMax.Value)
                sliderMin.Value = sliderMax.Value;

            detector.Highlighting = (HighlightType) cmbHighlight.SelectedIndex;
                        
            txtInfo.Text = detector.BlobCount + " items detected..";
            txtDistance.Text = "Detecting objects in the range " + sliderMin.Value + " and " + sliderMax.Value + " mm";

            //Depth frame bitmap
            var depthFrame=e.ImageFrame.SliceDepthImage((int)sliderMin.Value,(int)sliderMax.Value);
            var depthBmp =depthFrame.ToBitmap();

            //Color frame bitmap
            var colorBmp = colorFrame.ToBitmapSource().ToBitmap();

            //Detect blobs using depthBmp, draw high lights to colorBmp
            var outBmp=detector.ProcessImage(depthBmp,colorBmp);

            //Draw the output high lighted color image
            this.ImageColor.Source = outBmp.ToBitmapSource();

            depthBmp.Dispose();
            colorBmp.Dispose();
            outBmp.Dispose();
                        
        };

    runtime.VideoFrameReady += (s, e) =>
        {
            //colorFrame is a global variable 
            colorFrame = e.ImageFrame;
        };

The following ProcessImage method in our BlobDetector class basically uses the AForge library to do the detection based on depth image.

After detection, we are drawing the high lights back to the color image which results in the image above. This code is mostly based on the AForge blob detection sample.

        // Set image to display by the control
        public Bitmap ProcessImage(Bitmap depthImage, Bitmap colorImage)
        {
            leftEdges.Clear();
            rightEdges.Clear();
            topEdges.Clear();
            bottomEdges.Clear();
            hulls.Clear();
            quadrilaterals.Clear();

            this.image = AForge.Imaging.Image.Clone(depthImage, PixelFormat.Format24bppRgb);
            imageWidth = this.image.Width;
            imageHeight = this.image.Height;

            blobCounter.ProcessImage(this.image);
            blobs = blobCounter.GetObjectsInformation();

            //Let us resize the color image to the size of depth image
            ResizeNearestNeighbor filter = new ResizeNearestNeighbor(depthImage.Width, depthImage.Height);
            var outImage = filter.Apply(colorImage);

            //Let use flip the color image to match the depth image
            outImage.RotateFlip(RotateFlipType.RotateNoneFlipX);


            BlobCount = blobs.Count();

            GrahamConvexHull grahamScan = new GrahamConvexHull();

            foreach (Blob blob in blobs)
            {
                List<IntPoint> leftEdge = new List<IntPoint>();
                List<IntPoint> rightEdge = new List<IntPoint>();
                List<IntPoint> topEdge = new List<IntPoint>();
                List<IntPoint> bottomEdge = new List<IntPoint>();

                // collect edge points
                blobCounter.GetBlobsLeftAndRightEdges(blob, out leftEdge, out rightEdge);
                blobCounter.GetBlobsTopAndBottomEdges(blob, out topEdge, out bottomEdge);

                leftEdges.Add(blob.ID, leftEdge);
                rightEdges.Add(blob.ID, rightEdge);
                topEdges.Add(blob.ID, topEdge);
                bottomEdges.Add(blob.ID, bottomEdge);

                // find convex hull
                List<IntPoint> edgePoints = new List<IntPoint>();
                edgePoints.AddRange(leftEdge);
                edgePoints.AddRange(rightEdge);

                List<IntPoint> hull = grahamScan.FindHull(edgePoints);
                hulls.Add(blob.ID, hull);

                List<IntPoint> quadrilateral = null;

                // find quadrilateral
                if (hull.Count < 4)
                {
                    quadrilateral = new List<IntPoint>(hull);
                }
                else
                {
                    quadrilateral = PointsCloud.FindQuadrilateralCorners(hull);
                }
                quadrilaterals.Add(blob.ID, quadrilateral);

                // shift all points for vizualization
                IntPoint shift = new IntPoint(1, 1);

                PointsCloud.Shift(leftEdge, shift);
                PointsCloud.Shift(rightEdge, shift);
                PointsCloud.Shift(topEdge, shift);
                PointsCloud.Shift(bottomEdge, shift);
                PointsCloud.Shift(hull, shift);
                PointsCloud.Shift(quadrilateral, shift);
            }

            //Method to draw the high lights, just see the full source code
            DrawHighLights(outImage);

            return outImage;


        }

Conclusion

In this post, we explored how to create a blob detector and object counter using Kinect. As of now, Kinect’s built in tracking feature is limited just to Skeletal tracking, but you can use libraries like AForge.net and openCV to leverage Kinect for more out of the box scenarios. Thanks to my kiddo for lending me her dolls for the demo . Also, follow me in twitter. And here are few more posts on a similar taste.

5 Awesome Learning Resources For Programmers (To help you and your kids to grow the geek neurons)

noreply@blogger.com (Anoop Madhusudanan) — Tue, 03 Jan 2012 17:35:00 +0000

Happy New Year, this is my first post in 2012. I’ll be sharing few awesome learning resources I’ve bookmarked, and will be pointing out some specific computer/programming related courses I've found interesting from these resources.

Also, thought about saving this blog post for my kids as well - instead of investing in these Child education schemes (though they are too small as of today, 2 years and 60 days respectively ). Anyway, personally my new year resolution is to see as much videos from this course collections (assuming I can find some free time in between my regular job && changing my babies diapers).

1 – Khan Academy

As I mentioned some time back, you and your kids are missing some thing huge if you havn’t heard about Khan Academy. It is an awesome learning resource, especially if you want to re-visit your basics in Math, Science etc.

With a library of over 2,600 videos covering everything from arithmetic to physics, finance, and history and 268 practice exercises, they're on a mission to help you learn what you want, when you want, at your own pace

Not just Math and Science, I assume you’ll be interested to know more about Black Holes, Why Cepheids Pulsate, and how to find Detectable Civilizations in our Galaxy 1. So, bookmark http://www.khanacademy.org/. Respect to Salman Khan, consider donating them a bit if you find these materials useful.

2 – MIT Open Courseware and Videos

Just in case you are not aware, MIT has a huge collection of open courses, bookmark http://ocw.mit.edu/index.htm. Specifically, take a look at the Audio/Video Courses section and Electrical Engineering and Computer Science course.

And go through this Introduction to computer science course to get the feel. Few more interesting courses (if you are a programmer) include

Obviously, there are other subject specific courses too, like this Mathematics (Calculus, Algebra, Probability etc) related videos.

3 – Stanford Engineering Courses

Stanford Engineering everywhere has also got some cool courses. For example, this Free course on iPhone Application development is available via iTunes

From the computer science perspective, checkout these introduction to Computer Science. Click the Lectures tab, and most lectures are available via Youtube, iTunes and even as WMV.

And don’t miss these Artificial Intelligence courses

4 – Stanford Free Online Courses

Xavier recently shared a bunch of new free online courses that Stanford will be starting soon. These courses are starting by this February 2012, why not sign up.

Computer Science

Game Theory http://www.game-theory-class.org/
Design and Analysis of Algorithms I http://www.algo-class.org/
Cryptography http://www.crypto-class.org/
Software Engineering for Software as a Service http://www.saas-class.org/
Natural Language Processing http://www.nlp-class.org/
Computer Science 101 http://www.cs101-class.org/
Human-Computer Interaction http://www.hci-class.org/
Probabilistic Graphical Models http://www.pgm-class.org/

Entrepreneurship

Lean Launchpad http://www.launchpad-class.org/
Technology Entrepreneurship http://www.venture-class.org/

5 – University of California

Berkeley, University of California (http://berkeley.edu/about/) has got a webcast zone where a number of courses are featured.

Here are few play lists (I havn’t gone through all of them, but still).

Computer Science related play lists
Mathematics related play lists

And most of them are available via Youtube, iTunes etc.

These are few resources I explored and book marked for future reference, and I’m pretty sure there are lot more out there that I’ve skipped/missed. For instance, this awesome list of Computer Science papers that I came across the other day. Please share, and enjoy. Happy Coding!!

What! C# could do that!! @ironshay demoing my ElasticObject implementation in @LIDNUG presentation

noreply@blogger.com (Anoop Madhusudanan) — Tue, 22 Nov 2011 13:20:00 +0000

This is cool, Just found that @ironshay has featured my ElasticObject in his @LIDNUG web cast, to show C# dynamic features.

Elastic Object is a C# dynamic object implementation I’ve done some time back, which is

An easier, fluid way to work with data formats – like XML and JSON. Presently, we’ve some support for XML.
Cleaner code though it is duck typed
A hierarchical way to maintain loosely typed data.

ElasticObject post and source code here, and pretty cool presentation from Ironshay (embedded below).

KsigDo Task Pad – Real-Time UI View Model syncing across users with ASP.NET, SignalR, Knockout MVVM and EF

noreply@blogger.com (Anoop Madhusudanan) — Mon, 21 Nov 2011 11:33:00 +0000

Introduction

KsigDo = Knockout + SignalR To-do app. Source code is here in Codeplex, keep it handy.

Real time data syncing across user views *was* hard, especially in web applications. Most of the time, the second user needs to refresh the screen, to see the changes made by first user, or we need to implement some long polling that fetches the data and does the update manually.

Now, with SignalR and Knockout, ASP.NET developers can take advantage of view model syncing across users, that’ll simplify these scenarios in a big way, with minimal code. This post discusses how to implement a real time to-do pad, which will sync data across users accessing the application. This means, users can make changes to their tasks (add/remove/update etc), and other users will see the changes instantly. The focus is on the technique, I’m not trying to build a fabulous user experience here.

I know we are tired with To-do examples, but now let us build a To-do application that can sync tasks between you and your wife (or your team mates) in real time, with full CRUD support, and persistence. And yes, we’ll keep the code minimal, and maintainable using a proper View Model (Oh, is that possible in JavaScript?).

So, see this video, and here you can see the changes you apply to the tasks in one screen (adding, deleting, updating etc) you can see that the data is getting synced across multiple users.

We’ll be using KnockoutJs for maintaining a View Model, and will be syncing the View Model across users using SignalR. If you are not familiar with Knockout and SignalR, we’ll have a quick look at both of them on the way.

First Things First

To start with, let us create a new ASP.NET MVC 3.0 application. Create an empty project, I’ve ASP.NET MVC 3 tools update installed. Once you’ve the ASP.NET MVC project created, bring up the Nuget console (View->Other Windows-> Package Manager console), and install the Nuget packages for Knockout and SignalR.

install-package knockoutjs

And SignalR

install-package signalr

Also, do install Entity Framework latest version if you don't have the same, so that we can use the Code first features

Install-Package EntityFramework

If you are already familiar with Knockout and SignalR, you may skip the next two titles and go directly to 'Building KsigDo' section.

Knockout

Knockout Js is an awesome Javascript library that allows you to follow the MVVM convention, to bind your User controls to a JavaScript view model. This is pretty cool, because it allows you to build rich UIs pretty easily, with very minimal code. Here is a quick example that shows how you can bind your HTML elements to a Javascript view model.

Here is a very simple view model.

// This is a simple *viewmodel*
var viewModel = {
    firstName: ko.observable("Bert"),
    lastName: ko.observable("Bertington")
};

// Activates knockout.js
ko.applyBindings(viewModel);

The attributes are of type ko.observable(..), and if you want to convert the viewModel to an object (where you can send over the wire), you can easily do that using ko.toJS(viewModel). Now, let us bind the above view model to a view. The binding happens in the data-bind attribute, you may see that we are binding the value of the textbox to the firstname and last name variables. When you call ko.applyBindings, Knockout will do the required wiring so that the view model properties are synced with the target control's property values.

<!-- This is a *view* -->

<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>

KnockoutJs is pretty easy to learn, the best way to start is by going through the interactive tutorial hosted by Knockout guys here at http://learn.knockoutjs.com/.

Update: Found that Shawn has wrote a comprehensive post on Knockout, Read that as well

SignalR

SignalR is the “greatest thing since sliced bread” that happened for Microsoft developers recently. (To know why, you can read by post “HTML5 is on a killer spree, may kill HTTP next at least partially”. Anyway, SignalR is an Async signaling library for ASP.NET to help build real-time, multi-user interactive web applications. If you heard about Node, Backbone, Nowjs etc recently, you know what I’m talking about. If not, you’ll know pretty soon though.

The easiest starting point to understand SignalR is, by having a look at the Hub Quickstart example. Have a look at that example and come back.

You can inherit your Hub at the server side from SignalR.Hubs.Hub – and SignalR will generate the necessary light weight Javascript proxies at the client side so that you can make calls to your hub over the wire, even with support for typed parameters. Not just that. SignalR also provides dynamic “Clients” and “Caller” objects in your hub, so that you can invoke a client side method written in Javascript directly via your code in the server side. Pretty smart. And SignalR hides the entire implementation under its nice little APIs.

Building The KsigDo App

Now, let us go ahead and build our KsigDo app. Let us put together the bits step by step.

Task Model For Persistance Using Entity Framework Code First

In you ASP.NET MVC application, go to the Models folder, and add a new code first model file. Our model is very minimal, and as you can see, we have a taskId and a title for a task, and few validation rules defined, like title's length. Also, the completed property decides whether the task is a completed one or not.

If you are not familiar with Entity Framework Code First, here is a good read in Scott’s blog, and here are few more resources

 public class KsigDoContext : DbContext
    {
        public DbSet<Task> Tasks { get; set; }

    }

  public class Task
    {
        [Key]
        public int taskId { get; set; }

        [Required] [MaxLength(140)] [MinLength(10)]
        public string title { get; set; }

        public bool completed { get; set; }
        public DateTime lastUpdated { get; set; }

    }

The DbContext and DbSet classes used above are provided as part of the EF4 Code-First library. Also, we are using the attributes like Key, Required etc for data annotations, for basic validation support.

TaskHub For Basic Operations

Create a new folder named 'Hubs' in your ASP.NET MVC project, and add a new TaskHub.cs file (No, we are not using Controllers now). And yes, you can place your Hubs any where. Here is our TaskHub, inherited from SignalR.Hubs.Hub class. You may see that we are using this Hub to perform most of the CRUD operations in our Task Model.

 public class Tasks : Hub
    {
        /// <summary>
        /// Create a new task
        /// </summary>
        public bool Add(Task newTask)
        {
            try
            {
                using (var context = new KsigDoContext())
                {
                    var task = context.Tasks.Create();
                    task.title = newTask.title;
                    task.completed = newTask.completed;
                    task.lastUpdated = DateTime.Now;
                    context.Tasks.Add(task);
                    context.SaveChanges();
                    Clients.taskAdded(task);
                    return true;
                }
            }
            catch (Exception ex)
            {
                Caller.reportError("Unable to create task. Make sure title length is between 10 and 140");
                return false;
            }

        }

        /// <summary>
        /// Update a task using
        /// </summary>
        public bool Update(Task updatedTask)
        {
            using (var context = new KsigDoContext())
            {
                var oldTask = context.Tasks.FirstOrDefault(t => t.taskId == updatedTask.taskId);
                try
                {
                    if (oldTask == null)
                        return false;
                    else
                    {
                        oldTask.title = updatedTask.title;
                        oldTask.completed = updatedTask.completed;
                        oldTask.lastUpdated = DateTime.Now;
                        context.SaveChanges();
                        Clients.taskUpdated(oldTask);
                        return true;
                    }
                }
                catch (Exception ex)
                {
                    Caller.reportError("Unable to update task. Make sure title length is between 10 and 140");
                    return false;
                }
            }

        }


        /// <summary>
        /// Delete the task
        /// </summary>
        public bool Remove(int taskId)
        {
            try
            {
                using (var context = new KsigDoContext())
                {
                    var task = context.Tasks.FirstOrDefault(t => t.taskId == taskId);
                    context.Tasks.Remove(task);
                    context.SaveChanges();
                    Clients.taskRemoved(task.taskId);
                    return true;
                }
            }
            catch (Exception ex)
            {
                Caller.reportError("Error : " + ex.Message);
                return false;
            }
        }

        /// <summary>
        /// To get all the tasks up on init
        /// </summary>
        public void GetAll()
        {
            using (var context = new KsigDoContext())
            {
                var res = context.Tasks.ToArray();
                Caller.taskAll(res);
            }

        }
    }

The Clients and Caller properties are provided by SignalR as part of the Hub class definition. Surprise, these are dynamic objects that you can use conceptually to invoke a client side method written in JavaScript. SignalR does the plumbing using long polling or web sockets or what ever, and we don’t care. Also, as I mentioned earlier, SignalR will generate a client side proxy hub to invoke methods in our above written TaskHub, and we’ll soon see how to use this. For example, when a client invokes GetAll method in the above Hub during initialization, that client invoking the GetAll method (Caller) will get a callback to it’s taskAll JavaScript method, with all the existing tasks.

In the same way, assuming that our Client hub has Javascript methods like taskUpdated, taskAdded, taskRemoved etc – we are invoking those methods using the ‘Clients’ dynamic object, so that when ever an update, add or delete is happening, this information is broad casted all the clients connected right now.

The Main View

Now, let us go ahead and create our client side. Add a 'Home' controller, and an 'Index' action. Create a new 'Index' view. Also, just make sure you’ve the necessary Javascript Script wirings to import Knockout and SignalR libraries (See the code).

Our Index page has got a couple of view models, and a bit of HTML (view). For view models, we’ve a taskViewModel, and a taskListViewModel, as shown below. You may note that our taskViewModel is having almost the same properties as we have in our actual Task model, so that SignalR can manage the serialization/mapping pretty easily when ever we call the methods in our TaskHub.

You can see that in taskListViewModel, we are accessing the $connection.tasks proxy which provides a proxy object to access methods in our TaskHub. Also, we are attaching methods like tasksAll, taskUpdated etc to the $connection.tasks via the this.hub pointer, and these methods are ‘invoked’ from the TaskHub class as we’ve seen earlier to virtually ‘push’ data to the clients.

           $(function () {

             //---- View Models

             //Task View Model
            function taskViewModel(id, title, completed, ownerViewModel) {
                this.taskId = id;
                this.title = ko.observable(title);
                this.completed = ko.observable(completed);
                this.remove = function () { ownerViewModel.removeTask(this.taskId) }
                this.notification = function (b) { notify = b }

                var self = this;

                this.title.subscribe(function (newValue) {
                    ownerViewModel.updateTask(ko.toJS(self));
                });

                this.completed.subscribe(function (newValue) {
                    ownerViewModel.updateTask(ko.toJS(self));
                });

            }

            //Task List View Model
            function taskListViewModel() {

                //Handlers for our Hub callbacks

                this.hub = $.connection.tasks;
                this.tasks = ko.observableArray([]);
                this.newTaskText = ko.observable();

                var tasks = this.tasks;
                var self = this;
                var notify = true;

                //Initializes the view model
                this.init = function () {
                    this.hub.getAll();
                }

                //Handlers for our Hub callbacks
                //Invoked from our TaskHub.cs

                this.hub.taskAll = function (allTasks) {

                    var mappedTasks = $.map(allTasks, function (item) {
                        return new taskViewModel(item.taskId, item.title,
                                 item.completed, self)
                    });

                    tasks(mappedTasks);
                }

                this.hub.taskUpdated = function (t) {
                    var task = ko.utils.arrayFilter(tasks(), function (value) { return value.taskId == t.taskId; })[0];
                    notify = false;
                    task.title(t.title);
                    task.completed(t.completed);
                    notify = true;
                };

                this.hub.reportError = function (error) {
                    $("#error").text(error);
                    $("#error").fadeIn(1000, function () {
                        $("#error").fadeOut(3000);
                    });
                }

                this.hub.taskAdded = function (t) {
                    tasks.push(new taskViewModel(t.taskId, t.title, t.completed, self));
                };

                this.hub.taskRemoved = function (id) {
                    var task = ko.utils.arrayFilter(tasks(), function (value) { return value.taskId == id; })[0];
                    tasks.remove(task);
                };

                //View Model 'Commands'

                //To create a task
                this.addTask = function () {
                    var t = { "title": this.newTaskText(), "completed": false };
                    this.hub.add(t).done(function () {
                        console.log('Success!')
                    }).fail(function (e) {
                        console.warn(e);
                    });

                    this.newTaskText("");
                }

                //To remove a task
                this.removeTask = function (id) {
                    this.hub.remove(id);
                }

                //To update this task
                this.updateTask = function (task) {
                    if (notify)
                        this.hub.update(task);
                }

                //Gets the incomplete tasks
                this.incompleteTasks = ko.dependentObservable(function () {
                    return ko.utils.arrayFilter(this.tasks(), function (task) { return !task.completed() });
                }, this);

            }

            var vm = new taskListViewModel();
            ko.applyBindings(vm);
            // Start the connection
            $.connection.hub.start(function () { vm.init(); });

        });

When ever a taskViewModel is created, the instance of taskListViewModel will be passed as it’s ownerViewModel, so that we can invoke the updateTask method of taskListViewModel when ever the current task’s properties are changing. In taskListViewModel, we also have methods like addTask, removeTask etc, which are bound directly to our “View”.

We are creating a new instance of taskListViewModel, and then calling Knockout to do the job of applying bindings with the view. Have a look at the “View” part.

<div id="error" class="validation-summary-errors">
</div>

<h2> Add Task</h2>

<form data-bind="submit: addTask">
   <input data-bind="value: newTaskText" class="ui-corner-all" placeholder="What needs to be done?" />
   <input class="ui-button" type="submit" value="Add Task" />
</form>

<h2>Our Tasks</h2>

You have <b data-bind="text: incompleteTasks().length">&nbsp;</b> incomplete task(s)

<ul data-bind="template: { name: 'taskTemplate', foreach: tasks }, visible: tasks().length > 0">
</ul>

<script type="text/html" id="taskTemplate">
<!--Data Template-->
    <li  style="list-style-image: url('/images/task.png')">
        <input type="checkbox" data-bind="checked: completed" />
        <input class="ui-corner-all" data-bind="value: title, enable: !completed()" />
        <input class="ui-button" type="button" href="#" data-bind="click: remove" value="x"></input>
    </li>
</script>

<span data-bind="visible: incompleteTasks().length == 0">All tasks are complete</span>

If you look below the Add Task header, you’ll see that we are binding the textbox’s value to the ‘newTaskText’ property of our taskListViewModel, and the form submit to the addTask method in the taskListViewModel. The <ul> is bound to the tasks property of the view model. If you see, tasks property of taskListViewModel is a koObservableArray, which is almost like an ObservableCollection that notifies the bound controls when ever items are inserted/removed in the array.

Adding and Removing items

Have a look at the addTaskMethod in the taskListViewModel, you’ll see that we are creating a new task, and then invoking the ‘add’ method of the ‘hub’, which internally calls the TaskHub’s Add method in the server. In the TaskHub’s Add method, you’ll see that we are broadcasting the added task to all the clients by invoking the taskAdded method in the client side back – and there we are updating the ‘items’ observable array, so that Knockout will internally manage the rendering of a new <li> under the <ul> based on the data template ‘tasktemplate’ (see the above view code where we have the tasktemplate.

Delete also works in the same way, you can see the ‘x’ button is bound to the remove method of each individual taskViewModel, which internally calls the taskListViewModel’s removeTask method to invoke the Remove method in TaskHub using the hub proxy, and from there, the taskRemoved will be invoked on all the clients, where we actually remove the item from the items collection.

Updating an Item:

Once an item is bound to the template, please note that we are subscribing to the change events of a task in taskViewModel. When ever a property changes, we call the updateTask method in the ownerViewModel, which again calls hub’s update method which sends the task to our TaskHub’s update method – thanks to the wiring from SignalR. There, we try to save the item, and if everything goes well, the updated item will be broadcasted from the TaskHub to all clients, by invoking the taskUpdated Javascript method we attached to the hub, where we actually does the updates the properties of the item in all clients.

Conclusion

Surprise, we are done. Very minimal code, very little effort, Great results. Thank you ASP.NET, SignalR, Entity Framework and Knockout. And that is why I love .NET . Happy Coding, but follow me in twitter @amazedsaint and subscribe to this blog.

You may also like these articles on a similar taste.

HTML5 is on a killer spree, Web Sockets May partially “kill” HTTP as well

noreply@blogger.com (Anoop Madhusudanan) — Sun, 13 Nov 2011 17:04:00 +0000

We’ve already seen HTML5 killing few technologies on the presentation side – Adobe Just killed Flash for Mobile, and Microsoft ‘Positioned’ Silverlight as a tool for LOB apps and Phone apps instead of a cross platform presentation layer.

As most organizations are now focusing on HTML5 as part of their next gen strategy for what ever reasons (mainly cross platform), it is pretty obvious that there is going to be wide spread adoption from all major user agents – and more importantly, a lot more tooling and frameworks will evolve for developing HTML5 applications (You might have already explored previews like Expression Blend for HTML5 if you are in the Microsoft World, along with improved support for HTML5 in VS). The evolution of HTML5 will definitely bring in a radical shift in the way we develop web applications as we have already seen – and a nice little part of the parcel is Web sockets - which allows you to implement full duplex TCP based communication between the user agent (browser) and the server.

The problem with HTTP and existing server stacks

Here is a short description of HTTP from W3C

The Hypertext Transfer Protocol (HTTP) is an application-level protocol for distributed, collaborative, hypermedia information systems. It is a generic, stateless, protocol which can be used for many tasks beyond its use for hypertext, such as name servers and distributed object management systems, through extension of its request methods, error codes and headers [47]. A feature of HTTP is the typing and negotiation of data representation, allowing systems to be built independently of the data being transferred.

HTTP works in a request/response way – The client should always initiate a request to obtain the data, and in other words, the server can never push data real time to client. A common work around is to use HTTP long polling, where the client makes a request, and the server holds the request till some data is available, and pass it back to the client. I believe from Http 1.1 onwards, persistent connections are the default behavior of the HTTP connection anyway – though the response/request HTTP model don’t allow the server to do real-time pushes.

Web Sockets

HTML5 draft specification includes Websockets - http://dev.w3.org/html5/websockets/

WebSocket is a technology providing for bi-directional, full-duplex communications channels, over a single Transmission Control Protocol (TCP) socket. It is designed to be implemented in web browsers and web servers but it can be used by any client or server application. The WebSocket API is being standardized by the W3C and the WebSocket protocol is being standardized by the IETF.

This is very interesting, because it opens up lot of possibilities. For example, I did a quick prototype for desktop windows streaming over web sockets here. Most importantly, with Web Sockets, web applications can be real time and can even have custom RPC implementations.

With web sockets, which are fully duplex, you have some thing state full, which will allow you to build web applications which can satisfy real time requirements. This means better user experience, better speed, and overall better productivity. We’ll see a new range of web applications emerging, including more sophisticated games and better real collaboration tools. We’ll definitely see more matured and domain specific light weight RPC frameworks for servers and clients (As of now, I think frameworks like NowJs/Socket.IO on top of Node and SignalR on to of IIS already has this in their implementation/roadmap in a general way - to wrap web sockets and has a fall back strategy on HTTP long polling if the client is not supporting web sockets yet).

According the Web Socket API spec, when a web socket connection is made,

The headers to send appropriate cookies must be a Cookie header whose value is the cookie-string computed from the user's cookie store and the URL url; for these purposes this is not a "non-HTTP" API.

Anyway, most of the current server stacks and related programming models, including LAMP, IIS/ASP.NET etc is modeled around the normal request/response HTTP stack -and once the focus on Web sockets increases, they need to optimize themselves to handle concurrent connections simultaneously with out affecting the performance. A new age web server may be almost like a re-labeled IRC server which can handle a number of real time connections simultaneously (On contrary, you may also argue that HTML5 web sockets may make IRC servers obsolete as well).

Web Socket API specifications are not yet finalized. And as of now, based on http://caniuse.com – the following client side platforms are supporting Web Sockets specs. Between, I use http://caniuse.com often to see the platform adoption of HTML5 APIs and Semantics.

I think, to some extent, this means a radical shift in the way we write web applications which need real time features. More importantly, you can bend the web in a better way – because you’ve access to a transport layer protocol (TCP) on top of which you can build your own custom/domain centric protocols, instead of getting constrained with the application level HTTP protocol. Also, I am pretty sure that most of the client side agents other than web browsers will also start supporting web sockets in no time.

A Quick word on Server Side Events

As you read this far, it might be interesting to note that HTML5 specifications has another API named server side events (SSE), which allows you to Push data from server to client via an HTTP channel.

This specification defines an API for opening an HTTP connection for receiving push notifications from a server in the form of DOM events. The API is designed such that it can be extended to work with other push notification schemes such as Push SMS.

Anyway, Web Sockets are getting more attraction because it provides more control as it is on top of TCP, and more importantly, it is bidirectional. And what ever you can do with SSE can be implemented using Web Sockets, with a bit of custom code.

Here are few links to follow.

Checkout this example of Web Sockets - This is a quick example that shows how I’m streaming WPF windows over web sockets to a browser, to draw it in a canvas
The Web Socket API – From W3C
A nice post from Michael and Related Discussion – About Long polling vs Streaming approaches.
NowJs/Socket.IO on top of Node and Signal If you are .NET developer
Here is one of my previous posts on getting Node working on IIS on Windows

Happy Coding, but beware, HTML5 is just near your door. Chances are that, pretty soon, almost half of the things you do today with classic HTTP stack will be replaced with wrapper implementations like NowJs or SignalR.

Implementing Chain of Responsibility Design Pattern in C# using Managed Extensibility Framework (MEF)

noreply@blogger.com (Anoop Madhusudanan) — Sun, 13 Nov 2011 08:11:00 +0000

This post is about implementing Chain Of Responsibility design pattern, and few possible extensions to the same. If you are new to design patterns, I suggest you should start with Practically Applying Design Patterns – Thought Process

Coming back to Chain of Responsibility - If you have a scenario where you need to chain multiple handlers to handle an incoming request or command, you better use Chain Of Responsibility.

A typical example is your girlfriend requesting you something – If she is requesting/commanding you something like “Do you want to come with me for my best friend’s Bachelorette party?”, you will handle it directly. But if she is requesting/commanding you some thing like “Buy me a Porsche”, you say “Sorry Honey, I don’t have the money. Better you ask your dad for this, I’ll call him for you” –i.e, you pass the request to the next handler, in this case your girl friend’s Father. To sum up, in the above example, your girl friend is the client who is making the request, and you and your future father-in-law are handlers/approvers who handle/approve her requests. If you cannot handle it, you pass that responsibility to the next handler/approver in the chain.

A Minimal Example

To consider a more formal example, assume a scenario where you’ve a banking system, and you want to implement some kind of Loan approval. The customer may request a loan, and if it is below a specific amount, the cashier may approve it directly. If it is above the specified amount, he might pass the request to his manager for approval.

So you may use Chain Of Responsibility implementation to hand over the request/command to the correct approver. For an example, consider this implementation of the above Bank account scenario. Our business rule is something like, a cashier can approve the request if the amount is lesser than 1000 $$, other wise the approval should be passed to the manager. The manager can approve the request if the amount is lesser than 10,000 $$.

We have the following components.

LoanRequest – A concrete request
IRequestHandler – Abstract request handler implementation
- Concrete handlers like Cashier and Manager implements this
- Has a reference to the successor to pass the request
Program – The main driver

To the code

using System;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace DesignPatternsCof
{

 
    //Request
    class LoanRequest
    {
        public string Customer { get; set; }
        public decimal Amount { get; set; }
    }

    //Abstract Request Handler
    interface IRequestHandler
    {
        string Name { get; set; }
        void HandleRequest(LoanRequest req);
        IRequestHandler Successor { get; set; }
    }

    //Just an extension method for the passing the request
    static class RequestHandlerExtension
    {
        public static void TrySuccessor(this IRequestHandler current, LoanRequest req)
        {

            if (current.Successor != null) 
            {
                Console.WriteLine("{0} Can't approve - Passing request to {1}", current.Name, current.Successor.Name);
                current.Successor.HandleRequest(req);
            }
            else
            {
                Console.WriteLine("Amount invaid, no approval given");                
            }
        }
    }

    //Concrete Request Handler - Cachier
    //Cachier can approve requests upto 1000$$
    class Cashier : IRequestHandler
    {
        public string Name { get; set; }
        
        public void HandleRequest(LoanRequest req)
        {
            Console.WriteLine("\n----\n{0} $$ Loan Requested by {1}",
                  req.Amount, req.Customer);

           if (req.Amount<1000)
               Console.WriteLine("{0} $$ Loan approved for {1} - Approved by {2}",
                    req.Amount,req.Customer, this.Name);
           else
               this.TrySuccessor(req);
        }

        public IRequestHandler Successor { get; set; }       
    }

    //Concrete Request Handler - Manager
    //Manager can approve requests upto 10000$
    class Manager : IRequestHandler
    {
        public string Name { get; set; }
        public void HandleRequest(LoanRequest req)
        {
            if (req.Amount < 10000)
                Console.WriteLine("{0} $$ Loan approved for {1} - Approved by {2}",
                         req.Amount, req.Customer, this.Name);
            else
               this.TrySuccessor(req);

        }
        public IRequestHandler Successor { get; set; }  
    }

   

    //Main driver
    class Program
    {
        static void Main(string[] args)
        {
            //Customers
            var request1 = new LoanRequest() { Amount = 800, Customer = "Jimmy"};
            var request2 = new LoanRequest() { Amount = 5000, Customer = "Ben"};
            var request3 = new LoanRequest() {Amount = 200000, Customer = "Harry"};

            //Approvers, chained together
            var manager = new Manager() {Name = "Tom, Manager"};
            var cashier = new Cashier(){ Name = "Job, Cachier", Successor = manager};

            //All customers request cashier first to approve
            cashier.HandleRequest(request1);
            cashier.HandleRequest(request2);
            cashier.HandleRequest(request3);

            Console.ReadLine();
        }


    }
}

And this is what you’ll see upon execution.

So, you may observe that Loan Requests from different customers are passed to the cashier in the above example, and the cashier in his approve method passes the request to his successor (i.e, the manager) if the amount is higher than what he can approve. The implementation is pretty minimal, as you can see.

We actually have an Abstract request handler implementation IReqeustHandler and two concrete request handlers, Cashier and Manager. Each request handler may hold a reference to the successor. You may see that we are setting the Successor of Cashier as Manager, so if the amount requested his beyond a limit, the cashier may pass it to the manager for his approval.

Dynamically Injecting Approvers

Now, let us take a step back, and think how to implement this in such a way that the approval pipeline is extensible? As of now, our pipeline has two approvers, cashier and manager, and the manager can approve loans up to 10,000. Tomorrow, the Bank may decide that the General Manager can approve loans above 10,000 – and what you are going to do? Make the changes, Recompile the entire application, move it to QA, initiate a full recursion testing, and deploying everything to production? You may leverage a bit of extensibility here, and let us have a look at leveraging MEF (Managed Extensibility Framework) for the same.

I recommend you to go through my introductory posts on MEF if you are not familiar with MEF concepts.

Let us go for a generic implementation, to load and compose the handlers leveraging MEF. Let us generalize the above implementation a bit, and introduce few more general purpose contracts and classes.

IRequest – This contract should be implemented by all requests.
IRequestHandler – Same as earlier. Abstract request handler implementation
ExportHandlerAttribute – A custom attribute to export MEF parts
IRequestHandlerMetadata – Used internally for storing the successor information as a type
RequestHandlerGateway – Does the composition, and passes the request to successors in a chained fashion.

To the code

    //Abstract Request 
    public interface IRequest { }


    //Abstract Request Handler
    public interface IRequestHandler
    {
        bool HandleRequest(IRequest req);
        IRequestHandler Successor { get; set; }
    }

    //A custom MEF Export attribute
    [MetadataAttribute]
    [AttributeUsage(AttributeTargets.Class, AllowMultiple = false)]  
    public class ExportHandlerAttribute : ExportAttribute 
    {
        public Type SuccessorOf { get; set; }

        public ExportHandlerAttribute()
            : base(typeof(IRequestHandler))
        {
        }

        public ExportHandlerAttribute(Type successorOf)
            : base(typeof(IRequestHandler))
        {
            this.SuccessorOf = successorOf;
        }
    }

    //The metadata to tie a handler to next successor
    public interface IRequestHandlerMetadata
    {
        Type SuccessorOf { get; }
    }

    //A gateway which stiches together the handlers, to accept a request to chain through the handlers
    //Note that this does the composition using MEF
    public class RequestHandlerGateway
    {
        [ImportMany(typeof(IRequestHandler))]
        public IEnumerable<Lazy<IRequestHandler,IRequestHandlerMetadata>> Handlers { get; set; }

        private IRequestHandler first = null;

        public RequestHandlerGateway()
        {
            ComposeHandlers();

            //Let us find and keep the first handler
            //i.e, the handler which is not a sucessor of any other handlers            
            first = Handlers.First
                    (handler => handler.Metadata.SuccessorOf == null).Value;
        }

        //Compose the handlers
        void ComposeHandlers()
        {
            //A catalog that can aggregate other catalogs
            var aggrCatalog = new AggregateCatalog();
            //An assembly catalog to load information about part from this assembly
            var asmCatalog = new AssemblyCatalog(Assembly.GetExecutingAssembly());

            aggrCatalog.Catalogs.Add(asmCatalog);

            //Create a container
            var container = new CompositionContainer(aggrCatalog);
            //Composing the parts
            container.ComposeParts(this);
        }

        //Try to handle the request, pass to successor if required
        bool TryHandle(IRequestHandler handler, IRequest req)
        {
            var s =
                Handlers.FirstOrDefault(
                    h => h.Metadata.SuccessorOf == handler.GetType());

            if (handler.HandleRequest(req)) 
                return true;
            else if (s != null)
            {
                handler.Successor = s.Value;
                return TryHandle(handler.Successor, req);
            }
            else
                return false;
        }

        //Main gateway method for invoking the same from the driver
        public bool HandleRequest(IRequest request)
        {
            return TryHandle(first,request);
        }
    }

Cool. So we have the basic stuff there, keep that handy. Now, to have a Chain Of responsibility implementation, you can simply create the concrete parts and export the same. We’ve the following concrete parts.

LoanRequest – A concrete request
Cashier, Manager, and GeneralManager – Concrete request handlers

You may note that now we can chain the handlers using the Meta data. For example, when you export the manager, you can easily specify that Manager is the successor of Cashier, to approve the request. Similarly, you can specify General Manager as the successor of the Manager. The advantage is, you can simply deploy these components in a loosely coupled manager, and pick them up using the DirectoryCatalog of MEF during re composition.

    //Concrete Request
    public class LoanRequest : IRequest
    {
        public string Customer { get; set; }
        public decimal Amount { get; set; }
    }


    //Concrete Request Handler - Cachier
    //Cachier can approve requests upto 1000$$
    [ExportHandler]
    public class Cashier : IRequestHandler
    {
      
        public bool HandleRequest(IRequest r)
        {
            var req = (LoanRequest)r;
            if (req.Amount < 1000)
            {
                Console.WriteLine("{0} $$ Loan approved for {1} - Approved by {2}",
                                  req.Amount, req.Customer, this.GetType().Name);
                return true;
            }

            return false;

        }

        public IRequestHandler Successor { get; set; }
    }

    //Concrete Request Handler - Manager
    //Manager can approve requests upto 10000$
    [ExportHandler(SuccessorOf = typeof(Cashier))]
    public class Manager : IRequestHandler
    {
     
        public bool HandleRequest(IRequest r)
        {
            var req = (LoanRequest)r;
            if (req.Amount < 10000)
            {
                Console.WriteLine("{0} $$ Loan approved for {1} - Approved by {2}",
                                  req.Amount, req.Customer, this.GetType().Name);
                return true;
            }

            return false;
        }

        public IRequestHandler Successor { get; set; }
    }


    //Concrete Request Handler - Manager
    //Manager can approve requests upto 10000$
    [ExportHandler(SuccessorOf = typeof(Manager))]
    public class GeneralManager : IRequestHandler
    {

        public bool HandleRequest(IRequest r)
        {
            var req = (LoanRequest)r;
            if (req.Amount < 100000)
            {
                Console.WriteLine("{0} $$ Loan approved for {1} - Approved by {2}",
                                  req.Amount, req.Customer, this.GetType().Name);
                return true;
            }

            return false;
        }

        public IRequestHandler Successor { get; set; }
    }


    //Main driver
    class Program
    {
        static void Main(string[] args)
        {
            //Customers
            Console.WriteLine("Enter Loan Amount:");
            var amount = decimal.Parse(Console.ReadLine());

            var req = new LoanRequest() {Amount = amount, Customer = "Ben"};
            var gateway = new RequestHandlerGateway();
            if (!gateway.HandleRequest(req))
                Console.WriteLine("Oops, too high. Rejected");
            Console.ReadLine();
        }


    }

And this is what you’ll get. You can see that the request gets dispatched to the correct handler.

There we go, happy coding with proper decoupling.

The CQRS dilemma and related random thoughts

noreply@blogger.com (Anoop Madhusudanan) — Wed, 02 Nov 2011 16:46:00 +0000

I was very skeptical about CQRS (Command Query Responsibility Segregation) some time back, how ever after working on a CQRS implementation for the past few months for a customer in the telecom domain, I see better light. For some reason, there is a wide spread perception that CQRS is only for complex domains, how ever I think any true business system can benefit from CQRS principles. Here are few quick thoughts, mostly rants.

What is CQRS?

The basic idea of CQRS is pretty simple, this is from the CQRS summary post by Greg Young

Starting with CQRS, CQRS is simply the creation of two objects where there was previously only one. The separation occurs based upon whether the methods are a command or a query (the same definition that is used by Meyer in Command and Query Separation, a command is any method that mutates state and a query is any method that returns a value).

When most people talk about CQRS they are really speaking about applying the CQRS pattern to the object that represents the service boundary of the application.

As simple as that. I suggest you to read/bookmark the below posts.

Code samples to start with (.NET stuff)

Greg’s “simplest possible thing”

So, most of the discussion happening these days is about the application possibilities and implementation details around CQRS, and these are just few random thoughts around the same, and these are not any pointers for anyone.

For a moment, let us forget what exactly is CQRS, let us see how your system or business normally works. The users or stake holders or external system interact with your system in two ways – basically they’ll ask the system to do something (commands), and they also need to view/visualize the state of the system in different ways (queries). In most businesses, the system will be queried not just for the current state, but also for historical changes – i.e, you need to track the history of changes (as in an audit log) and need special logic to capture intelligence about events happened in the past. Say, to answer like "how many users are removing product x from their cart after adding product y".

You could argue any system that is just CRUD is a database, and yes we can put any decoration on top of it to build some editing features. But any meaningful Business Context involves capturing intent from user, to validate the intent at times, handle it, and provide some meaningful read models to query.

So, I think CQRS allows modeling the domain in a more natural way. You can pick commands directly from the use cases (if well written), and you can focus on what the domain does or what the domain should do when a state change happens, and use this information to construct how different stake holders view the system. In our scenario, we had multiple dimensions/read model snapshots.

Do I need CQRS?

It is all about the ROI, isn't it? Theoretically, you could argue any BC that models a set of business scenarios can be benefited leveraging the CQRS principles, because that means your system will be able to answer a lot of business related questions implicitly. Do you need that or not? That's a business call.

Here is my top three reasons based on my limited exposure towards CQRS based models.

The users or stake holders or external system interact with your system in two ways and if you are specifically focused on capturing the user intent– basically in any system, they’ll ask the system to do something (commands), and they also need to view/visualize the state of the system in different ways (queries).
In case your system will be queried not just for the current state, but also for historical changes – i.e, you need to track the history of changes (as in an audit log in a stereotypical system) and need special logic to capture intelligence about events happened in the past. Say, as I mentioned, to answer like "how many users are removing product x from their cart after adding product y".
Your management/customer thinks it'll add value to them on the long run, i.e, the system will help them have an edge over the competition. Oh yea, you have to sell this to them.

There is going to be a spike in the CapEx, may be because building Task Based/Inductive UIs are more costly than spread sheet like grids/CRUD focused forms where the user has to bring up the entire form to change the status from open to closed or what ever. Other than that, I think the cost is totally dependent on the design and related details, and the way you implement CQRS along with other DDD patterns.

CQRS and Event Sourcing

CQRS can be a simple separation of commands and queries, but I think the real value is if you tie CQRS with Event sourcing - it allows you to capture the system as how it came to the current state, rather than what it is right now. So, you are adding a new dimension to the system, i.e, the time. And you can take snapshots of the system at different times, and then compare it, that is valuable business intelligence. I think we don't need to see the read model as just a static snapshot of the system at a given time - it can even be derived from the state of the system at two different times.

And you can build read models based on multiple dimensions - to answer questions related to the system's behavior as well. For example, a stereotypical system can't answer even simple questions like "how many users are removing product x from their cart after adding product y" with out explicit design to capture the scenario. In a CQRS system this is implicit.

You can plugin a new dimension that constructs a read model to answer the query. About the cost - I think the key is in bringing in the mindset and selling this idea to the stake holders - even if the initial investment is a bit high, that will significantly improve their ROI and place them ahead of the competition.

How ever, the problem is, the world may be too corrupted with people like us, who were trying hard to persist a single state snapshot of the system in a mismatching ER model and then trying to keep it up to date and worrying about all related issues, to further mess it up with audit logs and all other mining crap when business starts asking critical questions.

CQRS and REST

Scripting and Code Analysis using Roslyn – And a first look at Roslyn CTP

noreply@blogger.com (Anoop Madhusudanan) — Sat, 22 Oct 2011 10:12:00 +0000

Microsoft recently released Roslyn CTP, which previews the upcoming features of C# and VB.NET. Roslyn CTP is a pretty exciting release, and it opens up lot of possibilities for C# and VB.NET programmers. Roslyn provides language services and APIs on top of .NET’s compiler services, and this will enable .NET developers to do a lot more things – including using C# and VB.NET as scripting languages, use compiler as a service in your own applications for code related tasks, develop better language and IDE extensions etc.

Also, Roslyn provides a lot of possibilities for developers to write code analysis and manipulation tools around Visual Studio IDE, and provides APIs that’ll enable you to develop Visual Studio enhancements pretty quickly. The Roslyn APIs will have full fidelity with C# and VB for syntax, semantic binding, code emission, etc – and you’ll see soon a lot of language bending around C# and VB.NET, and possibly new DSLs and lot of meta programming ideas.

Roslyn has mainly four API Layers.

Scripting APIs
- Provides a run time execution context for C# and VB.NET, Now you can use C#/VB.NET in your own applications as a scripting language
Compiler APIs
- For accessing the Syntax and Semantic model of your code.
Workspace APIs
- Provides an object model to aggregate the code model across projects in a solution. Mainly for code analysis and refactoring around IDEs like Visual Studio, though the APIs are not dependent on Visual Studio.
Services APIs
- Provides a layer on top of Visual Studio SDK (VSSDK) for features like Intellisense, code formatting etc.

In this post, we’ll have a sneak peak towards the Scripting APIs and Compiler APIs.

Scripting APIs

Some time back, I posted about how to use Mono C# Compiler as a Service in your .NET applications to leverage C# as a scripting language. Thanks to Roslyn, now we’ll be having a first class Scripting API soon to .NET.

The Roslyn.Scripting.* namespace provides types for implementing your own scripting sessions, using C# and VB.NET. You can create a new Scripting session using Session.Create(..) method. The Session.Create method can also accept a Host object, and the methods of the Host object will be directly available to the runtime context.

To execute some code, you can create an instance of a ScriptEngine by providing the required assembly references and name space import information, and invoke the Execute method of the Scripting Engine. To demonstrate how this works, let us create a simple ScriptingHost which wraps a scripting session. For demonstration, we’ll also create a ScriptedDog class, and the purpose of this example is that we can Create dogs and train them through the scripting environment. Once you install Roslyn, create a new Console application, and here is the code that demonstrates a simple scripting environment.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Reflection;
using System.Reflection.Emit;
using System.Text;
using Roslyn.Compilers;
using Roslyn.Compilers.CSharp;
using Roslyn.Scripting;
using Roslyn.Scripting.CSharp;

namespace ScriptingRoslyn
{
    //Our Dog class so that we can train dogs later
    public class OurDog
    {
        private string _name = string.Empty;
        public OurDog(string name)
        {
            _name = name;
        }

        public string Name
        {
            get { return _name; }
        }

        public void Byte(OurDog other)
        {
            Console.WriteLine("{0} is byting the tail of {1}", _name, other.Name);
        }

        public void Walk()
        {
            Console.WriteLine("{0} is Walking", _name);
        }

        public void Eat()
        {
            Console.WriteLine("{0} is Eating", _name);
        }
    }


    //Let us create a Host object, where we'll wrap our session and engine
    //The methods in the host class are available directly to the environment
    public class ScriptingHost
    {
        private ScriptEngine engine;
        private Session session;

        //Methods in the Host object can be called directly from the 
        //environment
        public OurDog CreateDog(string name)
        {
            return new OurDog(name);
        }

        public ScriptingHost()
        {
            //Create a session
            session = Session.Create(this);

            //Create the engine, just pass the assemblies and namespaces
            engine = new ScriptEngine(new Assembly[]
                                {
                                    typeof(Console).Assembly,
                                    typeof(ScriptingHost).Assembly,
                                    typeof(IEnumerable<>).Assembly,
                                    typeof(IQueryable).Assembly
                                },
                                new string[] 
                                { 
                                    "System", "System.Linq", 
                                    "System.Collections",
                                    "System.Collections.Generic"
                                }
                            );

        }

        //Pass the code to the engine, nothing much here
        public object Execute(string code)
        {
            return engine.Execute(code, session);
        }

        public T Execute<T>(string code)
        {
            return engine.Execute<T>(code, session);
        }

    }

    //Main driver

    class Program
    {
        static void Main(string[] args)
        {
            var host = new ScriptingHost();
            Console.WriteLine("Hello Dog Trainer!! Type your code.\n\n");


            string codeLine = string.Empty;
            Console.Write(">");
            while ((codeLine = Console.ReadLine()) != "Exit();")
            {
                try
                {
                    //Execute the code
                    var res = host.Execute(codeLine);

                    //Write the result back to console
                    if (res != null)
                        Console.WriteLine(" = " + res.ToString());
                }
                catch (Exception e)
                {
                    Console.WriteLine(" !! " + e.Message);
                }

                Console.Write(">");
            }
        }
    }
}

I assume the code is self explanatory, we are creating a Host class where we wrap the session and execute the code using the ScriptEngine in that session. A very simple REPL example - So, now let us go and train the dogs.

You can find that we are invoking the CreateDog method with in our Host class to create the dogs, and then we are training them – Though I’m not sure if we really need to train them to bite each other. Anyway, I hope the idea is clear.

Compiler APIs

Compiler APIs has object models for accessing the syntax and semantic models of your code. Using compiler APIs, you can obtain and manipulate Syntax trees. The common Syntax APIs are found in the Roslyn.Compilers and the Roslyn.Compilers.Common namespace, while the language specific Syntax APIs are found in Roslyn.Compilers.CSharp and Roslyn.Compilers.VisualBasic.

‘Syntax’ is the grammatical structure whereas ‘Semantics’ refers to the meaning of the vocabulary symbols arranged with that structure. If you consider English, "Dogs Are Cats" is grammatically correct, but semantically it is nonsense.

Building Syntax Trees and Accessing Semantic Model

Roslyn provides APIs for building syntax trees, and also for semantic analysis. So let us write some code that'll parse a method and creates syntax tree. It also shows how to get the method symbol from the semantic model of our syntax tree

            //Parse some code
            SyntaxTree tree = SyntaxTree.ParseCompilationUnit
                    (@"class Bar { 
                        void Foo() { Console.WriteLine(""foo""); }
                          }");

            //Find the first method declaration inside the first class declaration
            MethodDeclarationSyntax methodDecl = tree.Root
                .DescendentNodes()
                .OfType<ClassDeclarationSyntax>()
                .First().ChildNodes().OfType<MethodDeclarationSyntax>().First();

            //Create a compilation unit
            Compilation compilation = Compilation.Create("SimpleMethod").AddSyntaxTrees(tree);


            //Get the associated semantic model of our syntax tree
            var model = compilation.GetSemanticModel(tree);

            //Find the symbol of our Foo method
            Symbol methodSymbol = model.GetDeclaredSymbol(methodDecl);


            //Get the name of the method symbol
            Console.WriteLine(methodSymbol.Name);

In the above example, you can easily figure out how we are parsing the code to a SyntaxTree, Getting the semantic model associated with that syntax tree, and then looking up for information in the Semantic model. In this case, we are getting the method symbol corresponds to the first method declaration with in the first class declaration in the syntax tree. I.e, DescendentNodes() .OfType<ClassDeclarationSyntax>() .First() of the root node gives us the first class declaration node - and ChildNodes().OfType<MethodDeclarationSyntax>().First() gives us the first method declaration node with in that class declaration. To keep the point short, traversing the syntax tree using the object model is pretty easy.

The symbols we obtain from the semantic model can be used for a wide range of scenarios, including code analysis.

A bit more about Syntax Trees

Instead of parsing the entire code to a syntax tree, you can also parse code and for child Syntax Nodes nodes – For example, you can parse a statement to a StatementSyntax.

StatementSyntax statement=Syntax.ParseStatement("for (int i = 0; i < 10; i++) { }");

Syntax trees hold the entire source information in full fidelity - which means it contains every peice of the source information. Also, they can be round tripped to form the actual source code back from the syntax tree or the node. Syntax trees and nodes are immutable and thread safe.

How ever, it is possible to replace a node entirely in the current syntax tree by using the ReplaceNode function to create a tree with the old node replaced with the new node. For now, that is it. Enjoy coding, and follow me in twitter

HelloTiles – A Simple C# Xaml Application for WinRT/Windows8 to demonstrate Metro Tile Updates

noreply@blogger.com (Anoop Madhusudanan) — Sun, 18 Sep 2011 20:37:00 +0000

To get the taste of Windows8 and WinRT, Let us develop a quick C# + Xaml application that sends notifications to the Metro UI Tiles. Before jumping in, make sure you read about

So, let us create a quick app. Here we go.

About Tiles

As you might have already seen in the Demos, Windows 8 start screen features Tiles, as start points of the application. Your applications can send notifications to tiles, so that they are displayed in the start screen, above the tile. The types for Tile manipulations are in the namespace Windows.UI.Notifications

Basically, we are interested in three classes.

TileNotification
- Defines an update to a tile, including its visuals, identification tag, and expiration time.
TileUpdateManager
- Creates TileUpdater objects used to change and update Start menu tiles. This class also provides access to the XML content of the system-provided tile templates so that you can customize that content for use in updating your tiles.
TileUpdater
- Changes the appearance or content of the specific tile that the updater is bound to.

About Our HelloTiles Application

The Samples pack that comes with Windows 8 SDK has a Javascript/HTML sample for basic and advanced tile manipulation, so I thought about putting together a quick C#/XAML application along the same lines. So, you can see our tile, just under the “Weather” tile, with notification “tiles are cool”.

So, to start with, we’ll create a simple C#/XAML application for Windows RT, with a very simple Textbox and Button, and when the user enter some notification and click Send, the tile will be updated in the Start screen. This is just a demo scenario, and you know how to do better in an actual application –i.e, you can send a notification when something interesting happens in your application. Tiles are just one way to notify the user, but for now, let us keep things simple and create a quick notifier application, some what like this.

Creating The Project and Punching in some code

Time for some action. Let us fire up Visual Studio 2011, and create a new C#/XAML Metro application. Name it HelloTiles.

The project will get created, and you’ll find the App.xaml and MainPage.xaml files in the Project explorer. This should not surprise you if you have worked with Silverlight/WPF projects earlier. How ever, as I mentioned in my earlier article remember that the Xaml libraries are now directly part of WinRT and no longer run on top of the CLR, so most of the Xaml controls and types are now moved under Windows.UI* namespaces.

Along with the Xaml files, you’ll also find a Package.appxmanifest file. Open that and change the “Initial Rotation” to Landscape. Also, specify a suitable image for the wide logo so that the notification display will work correctly (by default it is not there, add a new image of the specified dimension to the images, and pick it against the wide logo field).

Now, let us write some code.

1 – The UI Code

The UI code is very minimal, let us open MainPage.xaml and replace the Xaml code there with this. Basically, we have a very simple stack panel, and a text box and a button.

  <UserControl x:Class="HelloTiles.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="768" d:DesignWidth="1366">
    
    <StackPanel HorizontalAlignment="Center"  VerticalAlignment="Center" x:Name="LayoutRoot" >
        <TextBlock Text="Tile Notifier" FontSize="100" VerticalAlignment="Center"/>
        <StackPanel Orientation="Vertical" Margin="20" >
            <TextBox Text="Message to send" Name="txtMain" Width="500" VerticalAlignment="Center" Margin="2"/>
        <Button Content="Send Notification" Click="Button_Click" HorizontalAlignment="Center"/>
        </StackPanel>
    </StackPanel>
        
</UserControl>

2 – Code behind for sending notifications

Now, let us send the notification to the tile when ever the user clicks the button. See that we already have a Button_Click event handler as part of the XAML, so now let us add some meat behind. Open Manpage.xaml.cs, and add the button handler, and the ClearTileNotification and SendTileNotification methods there. I had a look at the Javascript example, and almost did a quick line by line translation. Remember, we are accessing WinRT types and methods from here as well as from Javascript, so it was very easy.

 using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Windows.Foundation;
using Windows.UI.Notifications;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Data;

namespace HelloTiles
{
    partial class MainPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            ClearTileNotification();
            SendTileTextNotification(this.txtMain.Text,30);
        }

        void ClearTileNotification()
        {
            // the same TileUpdateManager can be used to clear the tile since 
            // tile notifications are being sent to the application's default tile
            TileUpdateManager.CreateTileUpdaterForApplication().Clear();            
        }

        void SendTileTextNotification(string text, int secondsExpire)
        {
            // Get a filled in version of the template by using getTemplateContent
            var tileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWideText03);

            // You will need to look at the template documentation to know how many text fields a particular template has       

            // get the text attributes for this template and fill them in
            var tileAttributes = tileXml.GetElementsByTagName(&quot;text&quot;);
            tileAttributes[0].AppendChild(tileXml.CreateTextNode(text));

            // create the notification from the XML
            var tileNotification = new TileNotification(tileXml);

            // send the notification to the app's default tile
            TileUpdateManager.CreateTileUpdaterForApplication().Update(tileNotification);
        }
    }
}

The app is pretty simple, what we are doing is,

Getting the Tile Template type by calling GetTemplateContent as an Xml document
Modify the text in the Xml
Create a tile notification using that Xml
Sending that to the Tile.

As I mentioned in the above step, make sure you are setting a valid logo for the Wide logo, and changing the initial rotation to Landscape. For available tile formats, you can refer the Tile schema if you are interested to see the available tile templates and how they look like.

Run the application, enter something in the textbox, and click the button. Now, hit your Win key and go to the Start screen, you should see the notification there. Ensure that your tile is in landscape mode, you can right click a tile to modify it’s properties or to un-install the application. Happy Coding!!

Developing for WinRT and Windows8 – Basic Concepts

noreply@blogger.com (Anoop Madhusudanan) — Sun, 18 Sep 2011 18:53:00 +0000

I gave a bullet point overview about Build conference here in my last past. If you havn’t yet got Windows 8 Dev Preview up and running, go grab it here. There are several ways to get up and running with Windows 8.

In my case, I downloaded the ISO image of Developer preview with tools (the 4+ GB One), Extracted it to a USB drive and made the USB drive bootable, Booted from that and then installed Windows 8 on a Local HD Partition in my home machine. Now, it is dual bootable, Windows 8 and Windows 7, and all is well.

Let us get in to the business. Windows 8 comes with WinRT, a new object oriented native/unmanaged API for developing ‘Metro’ applications for Windows. WinRT APIs are expected to replace the Win32 APIs. WinRT projects types using meta data, and is fully object oriented, so you can access WinRT directly from managed languages like C#. Here are a couple of interesting reads about WinRT.

InfoQ Article on WinRT
WinRT Demystified from Miguel.

WinRT is going to the ‘the runtime’ for Windows, across multiple devices like PCs, Tablets etc. You can develop Windows Metro style applications on top of WinRT in

1 - C#/VB.NET and Xaml

Xaml libraries with WinRT are now re-written in C++, and don’t have any .NET dependencies
WinRT XAML is a subset of the earlier XAML libraries that was available with .NET, and doesn’t support some features like DataTriggers etc as of now
Presently, you can access only a subset of the .NET BCL/Runtime from your C#/VB.NET + XAML WinRT application.

This doesn’t even support .NET Client Profile, it is just .NET core profile with access to a minimum set of .NET namespaces, combined with XAML namespaces now in Windows.UI.
The entire CLR will be loaded at the time of execution, but you’ll be able to access only a subset of that. As simple as that. This is to ensure that you are running in a sandboxed environment, and CLR comes into play as a thin layer only for binding your calls to WinRT at run time. As WinRT is object oriented and has managed data, you are any way developing directly against WinRT

2 - C++ and XAML

If you are developing in C++ and XAML, your code will be compiled directly to an unmanaged library.
I assume this provides the maximum performance advantage, as your code is directly compiled to native code.

3 - Javascript + HTML5

From Javascript, you can call WinRT methods directly and in that sense it is native. The UI is rendered in HTML5. If your application is a Javascript + HTML5 application, it will be run in a ‘shell’ which uses the same rendering engine in IE10.

You may continue to develop .NET/C#/Silverlight applications for classic desktop scenarios, but if you need to develop Metro applications, then you have to develop against WinRT.

Other than the XAML UI services, Win RT also Provides APIs for

Communication – Sockets, Streams and all
Devices – Geolocation, Sensors, Near Field Communication etc
Media – Playback, Capture, Effects
Other OS Services – Application services, Threading, Memory Management, Authentication etc.

//Build/–Windows 8 Thoughts

noreply@blogger.com (Anoop Madhusudanan) — Tue, 13 Sep 2011 19:31:00 +0000

Game on. After going through the Day 1 keynote for the Build event, I should say I’m pretty much convinced that Microsoft has got the equation correct. They corrected the Tablet part of the equation, and got the entire Cloud <-> Tablet stack in place, with proper platforms and a nice set of developer tools. And with out doubt, Windows 8 devices are going to be a definite competitor for iPad/iOS, and Microsoft has officially entered the post PC era.

Here are few quick observations, mainly on the developer side.

About Metro UI

Metro applications are now officially the first class applications that can fully leverages the touch features of Windows 8.
The new start screen looks very refreshing, with dynamic tiles.

For Developers

Develop application in HTML5<->JS<->WinRT or XAML<->.NET<->WinRT

You can develop native Windows applications either using Javascript and HTML or using .NET and XAML. This also means, ability to access native WinRT APIs straight from Java script.
This is particularly interesting because Javascript development model suits a lot of cloud based applications, and now JS developers can develop first class Windows 8 applications.

Visual Studio vNext, .NET 4.5
IE10 Engine powers the JS/HTML5 Apps
A lot of asynchronous programming everywhere

Expression Blend 5 now supports editing HTML5, much like you use it for editing XAML.
To a great extent, your XAML assets can be reused across multiple devices – desktops, slates and phone.
Windows 8 Store

Transparent approval proces
Developers can publish applications right from Visual Studio.

New APIs and Extension Points

Charms

Apps can share charms, to inter-operate. For example, an “Insert Picture” dialog box can show you results from other applications that can handle the image/picture data type.

Direct Compute API

Enables you to leverage the power of GPU in your applications

Sensor Fusion API

A Single API for all your sensors like Accelerometer, magnetometer and gyroscope

Windows Live integration

The whole suite of Windows Live services are neatly integrated to Windows 8.
All these Windows Live applications (Mail, Calendar, Photos) are now developed in Javascript/HTML5 and is native.
You can connect multiple devices via Windows Live

Support for Wide Variety of Hardware

The hardware support for Windows 8 seems really awesome. The demos features Windows 8 running on a variety of hardware devices
New and improved features include

Multi monitor support with start button on all screens
Hyper V Support for client
USB 3 Support
Hardware acceleration for all applications
Malware detection in boot strapper
A boot mode called “Cold Boot“ which is super fast

You can download Windows 8 Developer Release and related development tools from http://msdn.microsoft.com/en-us/windows/home/ by 8 PM PST. Enjoy, happy coding!!

Creating a quick Todo listing app on Windows using IIS7, Node.js and Mongodb

noreply@blogger.com (Anoop Madhusudanan) — Thu, 01 Sep 2011 12:16:00 +0000

As I mentioned in my last post, more and more organizations are leaning towards Web Oriented Architecture (WOA) which are highly scalable. If you were exploring cool, scalable options to build highly performing web applications, you know what Node.js is for.

After following the recent post from Scott Hanselman, I was up and running quickly with Node.js. In this post, I’ll explain step by step how I’ve setup Node.js and Mongodb to create a simple Todo listing application.

Setting up Node.js

This is what I’ve done.

1 – Goto http://nodejs.org/, scroll down and download node.exe for Windows, and place it in your c:\node folder

2 – Goto IIS Node project in Git at https://github.com/tjanczuk/iisnode, download the correct ‘retail’ link of IIS Node zip file (I downloaded the already built retail package, otherwise you can download and build from the source).

3 – Extract the zip file some where, and run the install.bat or install_iisexpress.bat depending on your IIS Version. If you don’t have IIS installed, try installing IIS 7.5 express here from MS download center.

4 – Make sure you have IIS URL rewrite module installed, so that some node.js samples with URL rewriting will work correctly. Install URL Rewrite module if you don’t have it, and restart IIS.

Verifying that all is well

Once Step 3 is over, this will configure the required modules and virtual directories, and you should be able to access the node virtual directory at http://localhost/node – which points to the www folder where you extracted the iisnode zip file.

Now, go to the end point http://localhost/node/helloworld/hello.js and see if everything works well. You can also open the hello.js file in the corresponding www\helloworld\ folder to have a look at the node hello world code.

var http = require('http');

http.createServer(function (req, res) {
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end('Hello, world! [helloworld sample]');
}).listen(process.env.PORT);

So as we’ve Node.js up and running, let us create a quick Todo listing application using Node.js and Mongodb by modifying this helloworld application.

Setting up Mongodb

Mongodb is a scalable, high performance, document database that goes well with node.js. See http://mongodb.org for more. In Mongodb, records are stored as JSON style documents, and documents are stored in collections. For now, consider that a collection is the NoSQL equivalent of a table, and a document is the NoSQL equivalent of a record.

1- First of all, you may need to install Mongodb. Goto http://www.mongodb.org/downloads, download the correct zip package, and extract it.

2- Create a folder ‘data’ in the path where you extracted Mongodb zip file. See the data folder.

3- Now, you should start mongod process. So, open command prompt, CD the folder where you extracted Mongodb, and start Mongod with data as the db folder using the command mongod –dbpath data

4- You should see the mongod process running, as shown below.

5- Now, let us insert few records to the todo collection of the database. For that, fire up mongo.exe client from the folder where you extracted the mongo db zip file, and insert few documents to the todo collection as shown below. Please note that

So, we have Mongodb running now, with a collection named todo with few documents in it.

Setting up Mongodb Module for Node.js

Normally, setting up packages/modules for Node.js is quite easy, it can be done using the Node package manager http://npmjs.org – How ever, I don’t think an NPM port is available for Windows right now. So, let us configure the Mongodb driver for Node.js manually.

1 – Goto https://github.com/christkv/node-mongodb-native and get the zip package. I downloaded v0.9.3 package, and extract it.

2 – Goto the www\helloworld folder where you examined hello.js earlier. Now, create a folder node_modules under the helloworld folder and create the mongodb folder under this, and copy the contents of the package to the mongodb folder as shown below. It seems that the folder name under node_modules should match the package name defined in index.js.

Now let us write some code

Once you are through with installing Node.js, Mongodb and Mongodb module for Node.js, it is time to write some code. Fire up the hello.js file in the helloworld folder, and write some code to fetch the todo collection from Mongodb and return it as HTML.

GLOBAL.DEBUG = true;

//Load modules
var http = require('http');
var mongo = require('mongodb');
var sys = require("sys");
var test = require("assert");

var Db = require('mongodb').Db, Connection = require('mongodb').Connection,
  Server = require('mongodb').Server,
  BSON = require('mongodb').BSONNative;

//Default server and port
var host = process.env['MONGO_NODE_DRIVER_HOST'] != null ? 
			process.env['MONGO_NODE_DRIVER_HOST'] : 'localhost';
var port = process.env['MONGO_NODE_DRIVER_PORT'] != null ? 
			process.env['MONGO_NODE_DRIVER_PORT'] : Connection.DEFAULT_PORT;

sys.puts("Connecting to " + host + ":" + port);


http.createServer(function (req, res) {

//Client connected
	res.writeHead(200, {'Content-Type': 'text/html'});    	
	res.write('<html><head><title>Todo List</title></head>');
	res.write('<body>');
	res.write('<h1>Todo list</h1>');
        var db = new Db('test', new Server(host, port, {}), {native_parser:false});
	db.open(function(err, db) {
	db.collection('todo', function(err, collection) {
	collection.find(function (err, cursor){
		res.write('<ul>');
		cursor.each( function (err, item) {                                   
				if (item == null) {
						res.write('</ul>');
						res.end('</body></html>');
						 db.close();
						}
				else 
				 res.write('<li>' + item.title + '</li>');
		});
	});
	});

	});	
}).listen(process.env.PORT);

You may find that we are opening the database, and iterating through the collection and creating a list out of that and spitting out the html. This should work as long as you followed the steps I briefed above.

And yes, you just opened the Pandora’s box – start playing with various Node.js modules and samples on your Windows box. Follow some Node.js tutorials, and experiment further. It is important to note that the Node.js port for Windows is not yet perfect from a production point of view, but now Windows developers have a good way to start exploring options related to node.js and related modules.

And follow me in twitter @ http://twitter.com/amazedsaint for further updates, Keep in touch. Happy Coding!!

Web Oriented Architecture is here to Stay, and Why Microsoft’s new WCF Stack is interesting.

noreply@blogger.com (Anoop Madhusudanan) — Wed, 31 Aug 2011 17:15:00 +0000

For the last few months, I was working closely with few customers across domains including telecom, e-learning, health care etc.. There are few recurring themes I’ve observed across the line, and I think some of them are realistic indicators regarding the adoption of WOA in the mainstream.

Decision Drivers

Organizations are understanding the necessity of making their business logic and data available to multiple end points. REST is evolving more and more as a default choice for building a public service layer, around your existing data and intelligence. So, here are few common concerns for CIOs.

Generalizing Investments - How to maximize the ROI by ensuring that your features and functionalities are accessible to a variety of devices.
Ensuring Governance - How to ensure a common governance scheme that encompasses all your ‘delta’ investments
Ensuring Reusability - How to ensure reusability across your business investments.

And almost all of the above concerns boil down to a strategy where you have a Web Oriented Architecture layer, and a Common Service Layer as part of that which can expose your business over Http to a range of devices. I recommend you to read this article “REST Is A Style, WOA is the Architecture”

The faster you move your investments on top of the value chain and expose your data and business to a wider range of devices, the better is your chance to survive in business. To quote from this article “Consumerization of IT”

The consumerization of IT is real. A recent IDC survey sponsored by Unisys showed that 40% of devices used to access business applications are personally owned, up 10 percentage points from 2010.

Building your WOA Stack

Now, from an architecture and development stand point, this decomposes to techniques, tools and technologies that’ll enable you to build a useful “WOA full” stack. When you start, most of the so called “REST” APIs disintegrate to mere HTTP APIs, but at least that is a start. Slowly, you can bring in purity for your design by

Bringing in a generic WOA container that’ll enable you to deploy, monitor and manage your REST Services with zero configuration
Bring in Composition, Hypermedia – so that you enrich your data also with links that represents actions that are possible on the data.
Bring in subscriptions and notifications – For example, a service accepting a URL from a subscriber to trigger notification.
Bring in load balancing – A per call design will enable you to bring in easy load balancing
Bring in caching – If you have a Relational Database, a high performance caching layer like Redis on top of your Database will enable high scalability for your services.

The benefits you leverage out of a proper WOA stack is really straight forward to observe.

It exposes your data and logic available to a range of devices including smart phones, tablets, IPTVs, customized browser and desktop apps , social media plugins etc.
Data composed with proper hypermedia brings a high degree of abstraction, and will allow the clients to be truly decoupled (from data and operations on top of the data)
Provides high degree of scalability because WOA is very light weight.
Clients consuming your services are first class consumers – you don’t need proxies that require concrete data contracts.

The new WCF Stack from Microsoft

WCF vNext Web Apis is a promising offering from Microsoft, but the key is evolving curry frameworks and tooling on top of the new Web APIs to support address common WOA concerns. WOA is more or less a set of best practices than a well defined methodology, so I’m not sure to what extent this can be abstracted.

Anyway, the new WCF APIs allows more control for sure, which includes first class support for HTTP and custom media types and formats, and I’ve seen few recent posts from Glenn Block on Hypermedia and Forms which is definitely another interesting read about the concept itself.

How ever, I would like to see more provisioning extensions in the new WCF Framework – like a common container where you can deploy and manage services, scale it etc. It might be interesting to see how the new WCF Web API Stack will compare with similar light weight implementations like Node.js. Also, Microsoft is making a significant effort to bring Node.js to Windows server stack (IIS/Azure). I’ll follow up about that in next couple of posts.

Revisiting C# - Published New Free Ebook

noreply@blogger.com (Anoop Madhusudanan) — Sun, 24 Apr 2011 15:05:00 +0000

I just collated some of my posts on C#, and published an Ebook – Revisiting C#. Have a look at the same here.

This book is intended to be a value adding reading material for beginner to intermediate C# programmers. It may also be used for accelerating the learning about new and upcoming features in C#, and also to get an introduction about new libraries in .NET. You may find random articles and alternate perspectives related to various aspects of C# - ranging from delegates, lambdas, fluent interfaces, dynamic features etc. with practical examples.

Revisting C# V1.0

5 Cool Hacks And Prototypes For .NET devs – Node.js in Azure, Kinect as Windows 7 controller, WCF web sockets, WPF over Web and more

noreply@blogger.com (Anoop Madhusudanan) — Mon, 11 Apr 2011 08:53:00 +0000

Who won’t love adventurous, out of the box hacks and prototypes? The joy of being a developer is to experiment with hot new ideas, and to do things others haven't done yet. For a developer, a hack is a source of joy - just as a poet who finds his real joy in unleashing his creativity, than in selling the same to others.

In modern computing terminology, a "hack" is a solution to a problem, doing a task, or fixing a system (whether hardware or software) that is inefficient, inelegant, or even unfathomable, but which nevertheless (more or less) works.

Here are few super cool hacks I explored and found in the last couple of weeks.

Node.Js Running on top of Azure

Paul has experimented with Node.Js and Azure, and wrote a couple of posts on running Node.Js on Windows Azure. And I got interested because Node.js is among the new cool kids in the town, and looks pretty interesting .

Node.Js is an Evented I/O for V8 JavaScript.

An example of a web server written in Node which responds with "Hello World" for every request.
var http = require('http');
http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Hello World\n');
}).listen(8124, "127.0.0.1");
console.log('Server running at http://127.0.0.1:8124/');

Have a look at the post from Paul here. Also watch out for this Session from Steve Marx on running Node.Js, Python, PHP etc in Azure http://channel9.msdn.com/Events/MIX/MIX11/SVC04

Using Kinect to control Windows 7 Apps And More Kinect hacks

Evoluce has released a video that shows leveraging Kinect for controlling the Windows 7 UI using Kinect. The hack is pretty awesome, it simulates almost all mouse movements, and to some extent, multi touch and features like that.

Sounds interesting? You may also checkout http://kinecthacks.net/tools-and-resources/ to see a great list of tools and resources to start doing your own Kinect hacks. They’ve a cool list of various Kinect hacks. Also, recently there are few more interesting Kinect hacks in response to Gmail Motion Prank .

You may Watch the videos of those Kinect based hacks in response to Gmail Motion prank http://goo.gl/EtYcN by ICT and http://goo.gl/8JC2zy by Ramaprasanna here

Accessing WPF windows over a Web browser using Websockets and Canvas

Let me shamelessly plugin this hack here. Over the weekend, I just put together a hack for pumping WPF windows over Websockets and rendering it using HTML5 canvas – also with basic mouse input support. For each user connecting to the server, a new window instance is created, and screen will be pumped over web sockets to the browser as base64 encoded images. These images are painted on an HTML5 canvas. Have a look at the same here

You may see that the mouse input on top of the canvas is pumped back to the server, to simulate mouse events, and the results are refreshed in the browser. Have a look at the post and source code here.

Html5 Prototypes from Microsoft Web Labs And WCF Websockets

Microsoft Html5 Web Labs has a couple of interesting prototypes around HTML5 Draft Specifications.

IndexedDB

IndexedDB is a draft Web specification for the storage of large amounts of structured data in the browser. View details.

The IndexedDB API is currently being standardized by the W3C Web Applications Working Group. IndexedDB can be used for browser implemented functions like bookmarks, and as a client-side cache for web applications such as email.

WebSockets

WebSockets simplifies bi-directional, full-duplex communications channels, over a single TCP socket. View details.

WebSockets is a technology designed to simplify much of the complexity around bi-directional, full-duplex communications channels, over a single Transmission Control Protocol (TCP) socket. It can be implemented in web browsers, web servers as well as used by any client or server application. The WebSockets API is currently being standardized by the W3C Web Applications Working Group and the protocol is being standardized by IETF Hypertext Bidirectional (HyBi) Working Group.

Saving Energy with .NET Micro Framework

This is a very interesting project using .NET Micro Framework and Netdunio to control water heater temperature based on weekly usage patterns. The article is there at Coding4Fun blog

The application is built on the open source 'netduino.helpers' library which provides a set of hardware drivers written in C# targeting the netduino family of .Net Micro Framework micro-controllers.

NetDunio is an open source electric platform using Microsoft .NET Micro Framework, and if you want to hack on that, go get the resources and tools here. http://www.netduino.com/downloads/ resources.

NetDunio getting started guide (pdf)
.NET Micro Framework (online help)

Happy Coding!!

Wpf Over Websockets (WoW) – How to Pump WPF windows & animations to browsers over HTML5 Websockets And Canvas

noreply@blogger.com (Anoop Madhusudanan) — Sat, 09 Apr 2011 10:39:00 +0000

Over the weekend, I just put together a hack for pumping WPF windows over Websockets and rendering it using HTML5 canvas – also with basic mouse input support. For each user connecting to the server, a new window instance is created, and screen will be pumped over web sockets to the browser as base64 encoded images. These images are painted on an HTML5 canvas. The entire source code is here at codeplex – http://wow.codeplex.com

What does this mean?

Once HTML5 specification is final - it is almost certain that it’ll be the most widely adopted platform for delivering applications to end users. With Websockets in HTML5, we are going beyond the unidirectional, stateless http to a full duplex, high speed connection infrastructure between the server and the client. This will definitely bring up lot of interesting possibilities, including exciting and feature rich user experiences. WPF is already a widely adopted, feature rich desktop application development platform, and this hack is a quick POC to bring the WPF experience over the web to the end user using HTML5 web sockets and canvas.

You can see that I’m accessing my WPF application over multiple browsers in the below video. Just to clarify, it is rendered in the browser purely using HTML5 canvas – No Silverlight or Flash

Rendering the screen in the browser

HTML5 draft specification includes Websockets - http://dev.w3.org/html5/websockets/

WebSocket is a technology providing for bi-directional, full-duplex communications channels, over a single Transmission Control Protocol (TCP) socket. It is designed to be implemented in web browsers and web servers but it can be used by any client or server application. The WebSocket API is being standardized by the W3C and the WebSocket protocol is being standardized by the IETF.

Here is a pretty minimized implementation of the page that opens a web socket, retrieve the image data, and draws the same on a canvas

var socket = new WebSocket("ws://localhost:8181/main");
socket.onopen = function () {

}

socket.onmessage = function (msg) {
	var canvas = document.getElementById("canvas");
	var ctx = canvas.getContext("2d");
	var img = new Image;
	img.onload = function () {
		ctx.clearRect(0, 0, canvas.width, canvas.height)
		ctx.drawImage(img, 0, 0); // Or at whatever offset you like
	};
	img.src = "data:image/gif;base64," + msg.data; ;
}

The server

I was planning to implement a quick socket server based on draft specifications – but I found that there are already a couple of .NET based implementations out there. One among them is Nugget - http://nugget.codeplex.com/ – I’m having a thin layer on top of Nugget for creating a window instance when ever a client socket connects to the server.

	var srv = new WebSocketServer(port, origin, "ws://" + server + ":" + port);
	srv.RegisterHandler<ElementSocket<T>>("/" + name);
	srv.Start();
	return srv;

Most of the logic required for creating window instances, and pumping them back to the connected client socket goes in my ElementSocket implementation.

Capturing User Inputs

Presently, the support for input devices (mouse, keyboard) etc is minimal. Only Mousebutton down and Mouse button up events are supported. To do this, we are capturing the mouse inputs using JQuery, and then pumping it back to the server.

            $("#canvas").mousedown(function (e) {
                var point = getXY(e);
                socket.send("mousedown;" + point.X + ";" + point.Y);
            });

            $("#canvas").mouseup(function (e) {
                var point = getXY(e);
                socket.send("mouseup;" + point.X + ";" + point.Y);
            });

On the server side, the incoming messages are used to simulate the events on the WPF window instance that corresponds to the socket, like

                var pnt=this.TranslatePoint(new Point(x, y), this);
                var res=VisualTreeHelper.HitTest(this, pnt);
            
                if (res != null && res.VisualHit != null && res.VisualHit is UIElement)
                {
                    SimulateEvent(res, action);
                }

Challenges

There are a number of challenges – Ideally we should push only the region copies once it is modified. As of now, I’m pushing the entire screen image (bad) as that’s pretty easy (This is a weekend hack, remember). Now, another challenge is proper user input simulation on the instance windows – I still need to find a good way to trigger user inputs to the specific windows, with out affecting the actual input devices. For example, when one user moves the mouse, the move message should be triggered to the corresponding server side window instance, with out affecting the actual mouse cursor. May need to have a look at the WM_ messages, not sure to what extend it can be applied on WPF top level windows.

Microsoft TechEd India 2011 – An event to remember

noreply@blogger.com (Anoop Madhusudanan) — Sat, 26 Mar 2011 14:12:00 +0000

Tech Ed India 2011 was a great experience. Tech Ed events are always awesome. The level of energy you experience in Tech Ed is amazing – You’ll meet lot of great people, exchange a number of ideas, share your concerns, find solutions, seek ways to improve, learn together, share the passion, and much more. For me, Tech Ed is always a source of inspiration.

Note: I’ve Created An Archive of #TechEdIn tweets here : http://archivist.visitmix.com/amazedsaint/12

Meeting Experts via The Roundtables and Providing direct feedback

As I’m part of the MVP community, one great opportunity in Tech Ed is to meet the experts via the Roundtable conferences. I was part of some high energy conversations with Jason Zanders , Yousef Khalidi, Rajiv Kumar (MS IDC Hyderabad) etc. Some of the information you get via these conversations are under NDA ;), but one serious concern I shared with Jason is the strategy of Microsoft when it comes to Tablets and IPTVs. I also suggested Yousef that it’ll be great if Microsoft can evolve the Azure storage to match NoSQL use cases.

Also, during the conversations with Jason and Yusuf, I realized how seriously Microsoft takes the input from the community.

Conversations & Idea Networking

In Tech Ed, you’ll network with a lot of people. The MVP community in India is very open and vibrant - so that you can network with experts and MVPs in various Microsoft related technology areas, and can have intense idea exchanges, debates and discussions. I met a number of great guys, and had a handful of very interesting conversations - with guys like Abhijit, Abhishek, Lohit, Suprotim, Vijay, Ravikanth, Dhananjay, Hima, Krishna, Harish, Ram, Shravan, Alpesh etc – Just to name a few. I had detailed conversations on plug in support for IE9, leveraging the web sockets and HTML5 for something very interesting (secret), Code contracts in C#, BDD etc to name a few – with various guys.

Keynotes and Presentations

One visible part of Tech Ed event is the Keynotes and presentations on various areas – I mentioned it last because I thought I should highlight the less known aspects of Tech Ed first. This Tech Ed had a lot of great sessions, from distinguished speakers and community rock stars. Especially, I liked the Keynote from Jason on Day 3, and also sessions from (the ones I attended) Vinod Kumar, Yousef etc.

Overall, it was great fun, learning and networking - I enjoyed every bit of it. Thanks to all of you for making the event that much interesting!!

The Case of Switch-Case in C#

noreply@blogger.com (Anoop Madhusudanan) — Sat, 05 Mar 2011 19:00:00 +0000

A quick rant on using switch-cases in C#. In Javascript, most developers prefer creating a lean object that can be re-used, instead of a stubborn switch case. For example, instead of this Switch Case implementation,

switch (foo) {
	case 'case1':
		alert('case1 code');
		break;
	case 'case2':
		alert('case2 code');
		break;
	default:
		alert('hm, default code');
		break;
}

a number of developers may consider this one as more elegant - because it is re-usable and more testable.

var mySwitch= {
'case1' : function() {
	alert('case1 code');
},
'case2' : function() {
	alert('case2 code');
},
'default' : function() {
	alert('default code');
}
};


if (mySwitch[foo]) {
	mySwitch[foo]();
} else {
	mySwitch['default']();
}

I was thinking about implementing something along similiar lines in C#, to re-factor few fat switch cases using a Dictionary. Obviously, this is context specific - one approach won't fit all the scenarios. Here is a quick example to clarify the point.


    public class SwitchCase : Dictionary<string,Action>
    {
        public void Eval(string key)
        {
            if (this.ContainsKey(key))
              this[key]();
            else
             this["default"](); 
        }
    }


    //Now, somewhere else

            var mySwitch = new SwitchCase
            {
                { "case1",  ()=>Console.WriteLine("Case1 is executed") },
                { "case2",  ()=>Console.WriteLine("Case2 is executed") },
                { "case3",  ()=>Console.WriteLine("Case3 is executed") },
                { "case4",  ()=>Console.WriteLine("Case4 is executed") },
                { "default",()=>Console.WriteLine("Default is executed") },
            };

            mySwitch.Eval(c);

This provides loose coupling, and you can even modify the logic for each case easily using a setter or so. Happy Coding!!

MVVM And Linq In Javascript for .NET Programmers

noreply@blogger.com (Anoop Madhusudanan) — Tue, 01 Mar 2011 08:44:00 +0000

If you are not using a well structured javascript library like JQuery, and still manage to do web development, you are .. hm.. probably interested in contributing too much to the garbage that is already there in the web (I am being nice here :)).

Anyway, this post is about few more cool Javascript libraries other than JQuery, that may generate a lot of interest for .NET Programmers (I am talking with Vin lately a lot about this). In this post, I’ll cover two nice little JavaScript libraries, that’ll bring Model View View Model and LINQ to JavaScript.

1 – Knockcout.js

Knockcout is a cool Javascript library that’ll bring the MVVM concepts to the Javascript. If you are already familiar with MVVM, you are good to use Knockout once you learn the little syntax differences. Here is a quick example that shows how to bind a text variable and a command.

<div>
    You've clicked <span data-bind="text: numberOfClicks"></span> times
    <button data-bind="click: clickCommand">Click me</button>
</div>
 
<script type="text/javascript">
    var viewModel = {
        numberOfClicks : ko.observable(0), 
        clickCommand : function() {
            var previousCount = this.numberOfClicks();
            this.numberOfClicks(previousCount + 1);
        }
    };
</script>

In the viewModel, we’ve a numberOfClicks variable, and also a clickCommand. You’ll see that we are binding the clickCommand to the button. When ever the button is clicked, the numberOfClicks variable is incremented. If you are wondering why we are using ko.observable to assign value to our numberOfClicks property, it is because

you need to declare your model properties as observables, because these are special JavaScript objects that can notify subscribers about changes, and can automatically detect dependencies.

Also, note that to get/set values to our numberOfClicks property, we are relying on methods (), to ensure cross browser compatibility. For this reason, all observable objects are functions. Also, note the data-bind attribute we use for binding the view model variables to the UI elements. Apart from these little differences, it is pretty easy to sail through knockout, and you can easily master MVVM in Javascript

Knockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model. Any time you have sections of UI that update dynamically (e.g., changing depending on the user’s actions or when an external data source changes), KO can help you implement it more simply and maintainably.

Have a look at http://knockoutjs.com/

2 – Linq.js

If you love Linq, you’ll love Linq.js – it is an almost complete implementation of Linq for Javascript. You can use Enumerable.From(…) to convert an Array to an enumerable, to query them. Here is a quick example.

var array = [100, 200, 30, 40, 500, 40, 200];
var ex1 = Enumerable.From(array).Distinct().ToArray(); // [100, 200, 30, 40, 500]

Linq.js also has a JQuery extension, which is very handy.

Features include

implementation of all .NET 4.0 methods and many extra methods (inspiration from Rx, Achiral, Haskell, Ruby, etc...)

complete lazy evaluation

full IntelliSense support for VisualStudio

two versions - linq.js and jquery.linq.js (jQuery plugin)

support Windows Script Host

binding for Reactive Extensions for JavaScript(RxJS) and IntelliSense Generator -> see documentation

NuGet install support(linq.js, linq.js-jQuery, linq.js-Bindings)

Get it from http://linqjs.codeplex.com/

Happy coding, Enjoy.

Chrome PageGuide Extension to View related pages & tweets, Linked pages & tweets etc

noreply@blogger.com (Anoop Madhusudanan) — Fri, 25 Feb 2011 06:57:00 +0000

I’m an ardent user of Google Chrome, and often wanted to have a plug-in that can show me related pages when I read a page, show pages and tweets linked to the current page etc. So, I wrote one myself and released a new extension for Google Chrome – named PageGuide.

You may install PageGuide from the Chrome Web Store

With Page Guide Extension, you can

Get recommendations and view Related Pages when you are reading a page
View pages Linked to the current page you've open
Vew tweets from @usernames you've in this web page
Tweets linking to the current page

Get instant recommendations when you read something, or use it to find out other pages linked to your blog page.

You can open the plugin window by clicking the PageGuide button that will appear below any web page, and hide it by clicking the title.

It is mainly around JQuery, and I’ll share the source code soon.

Find Your “Worth As a Developer Score” (WDS) – A Self Rating Map for .NET Developers

noreply@blogger.com (Anoop Madhusudanan) — Sat, 19 Feb 2011 07:33:00 +0000

I thought about putting together a simple self rating mechanism for developers - mainly .NET developers. “Worth As A Developer Score” is a rating system out of 1000, that’ll help you rate yourself across a set of competencies in multiple areas. It is modeled around the following aspects.

Familiarity in basic concepts, common frameworks, tools and programming languages
Cross skill quotient and ability to work between platforms (with in .NET framework).

Here is how to find your Worth As a Developer (WDS) Score. Nice Acronym, huh? Consider the chart below. You are allowed to replace a framework/tool/Lib in the below map with a similar framework/tool/lib that is not there in the map (For eg, you can replace NInject with AutoFac or EF with Subsonic) – But make sure that the number of items in a quadrant remain unchanged.

Now, calculating your WDS Score is pretty simple

For each item in the ‘Basics’ quadrant (SOLID, TDD etc) - rate yourself out of 40 (0 least, 40 best). There are ten items there, so the maximum score you can have is 400.
Now for *all* items in *all* the other quadrants other than the ‘Basic’ quadrant – rate yourself out of 10 (0 least, 10 best). There are a total of 60 Items across the remaining quadrants, so the maximum score you can have is 600.

Add up both the scores (what you got out of 400 + what you got out of 600), and this is your WDS score as a .NET developer out of 1000. Simple, huh? :)