Bundler Part 2 - ASP.NET Integration

Posted on 2/11/2010 12:32:10 AM by Justin Etheredge

After I posted my last post about my JavaScript bundler utility, I had a few comments from people who made comments that I needed to better integrate it into an ASP.NET or ASP.NET MVC application. I had approached the problem from the standpoint of a build. I wanted an executable that could be pointed at a series of files during a build, or some other automated process, and perform all of the work involved in minifying, combining, and compressing my JavaScript and CSS. I started thinking about it however, and realized that I could probably build something to do this with a small amount of effort.

The approaches that were put forth were excellent, and one of the comments was from a fellow blogger Milan Negovan who made a similar utility recently called Shinkansen which is an integrated ASP.NET control for compressing JavaScript and CSS. It is very impressive, you should go check it out! It appears to use a custom handler and an ASP.NET component in order to combine and minify (or crunch) your JavaScript files and then cache the result and spit out a reference to the handler. It seems to be a very efficient and clever solution!

Another comment was by Jeff Olson who said that he wanted better integration into an application via an executable which could scan a project and do replacements. He was advocating a similar approach to the one that I had already taken, but instead of specifying files manually, the tool needed to scan a project and compress and combine the needed files. While this is an interesting approach if you wanted a completely platform agnostic solution, but I decided that I would implement it in a bit different manner.

The first requirement that I thought was that it had to work in both ASP.NET and ASP.NET MVC. I also didn't want to really have any setup or configuration. I also wanted it to output a physical file that I could simply pass a reference to. This way I could avoid having to do any manual caching and such. I just thought it would be easier to deal with. My only concern here revolves around the security of having a file actually written to disk inside of the website process. Some people could have a problem with this, and there could be issues around file locking, but nothing that couldn't be coded around.

Continue reading the rest of this post...

Combine, Minify, And Compress Your JavaScript

Posted on 2/9/2010 1:09:54 AM by Justin Etheredge

It pretty much goes without saying that if you are building a public facing website these days you are probably using a ridiculous amount of JavaScript. And it is also likely that most of the JavaScript is in the form of libraries that you didn't write and you don't maintain. But even if you aren't maintaining those libraries, you are still responsible for pushing them all down to your users. And so you can get into the situation where you have either hundreds of kilobytes of JavaScript or you just end up with a ton of tiny script files. Both of these can really put a damper on the amount of time that your site initially loads for your user.

Fortunately for us there are several solutions to the problem of slow loading JavaScript. One is to try and load most of your libraries from content delivery networks (CDN) provided by companies like Google and Microsoft. A second is to employ a CDN of your own like Amazon's CloudFront. But no matter what you are doing to speed up your the delivery of your JavaScript, it is absolutely imperative that you do three things:

1. Combine your JavaScript files: Concatenate all of your JavaScript files into a single file so that the browser only has to make one request to download your scripts.
2. Minify your JavaScript files: Perform some optimizations on your JavaScript to remove whitespace, shorten variable names, and in some instances even perform some static analysis to optimize statements or  remove unused code.
3. Compress your JavaScript: Enabled gzip compression so that users that have browsers which support compression will receive a smaller file.

Now this may sound like a lot of work, but thankfully people like my friend Dave Ward have already solved the problem of easily combining and minifying our JavaScript files in a pretty easy way. However, I was looking at one of my favorite JavaScript libraries, SyntaxHighlighter, and I was thinking that it was just an absolutely huge amount of files that you had to import in order to use it. SyntaxHighlighter has hosted versions of its files, and so wouldn't it be cool if I could just pull those hosted versions, along with my other javascript and then combine, minify, and then just push all of that up to my CDN?

Continue reading the rest of this post...

Spiff Up Your ASP.NET MVC Forms With jQuery

Posted on 2/19/2009 10:05:30 PM by Justin Etheredge

Since many people who are being introduced to ASP.NET MVC are being simultaneously introduced to jQuery I felt like I’d give you a quick introduction to a few jQuery plug-ins that will help you make better forms. But most importantly make your forms better without you really having to do too much to them.

What I am going to show you here is nothing new, but hopefully it will introduce a few people to the joys of jQuery plugins. The plugins that we are going to take a look at are jquery.blockUI, jquery.form, and jquery.datePicker. We are also going to introduce you to a good bit of standard jQuery.

But first, let’s start off by talking about what each of these plug-ins will do for you. The blockUI plugin will give you that cool effect that overlays the UI with a modal dialog and fades out the background. The form plugin lets you post forms via javascript. The datePicker plugin does exactly what it says, it creates date pickers. The jQuery UI project has a date picker as well, but this is just a simple usable date picker.

Our goal is to end up with a form that has watermarks:

Row Highlighting:

Hovering help messages:

Ajax Submit with Modal Dialog:

 

And a date picker:

First we are going to start off with a simple ASP.NET MVC form:

<div id="messages"></div>   
<% using (Html.BeginForm()){ %>        
    <fieldset>
        <legend>Personal</legend>
        <div class="formitem">
            <label for="FirstName">First Name:</label>
            <%= Html.TextBox("FirstName", Model.FirstName, new { watermark = "First", title = "Please enter your first name." }) %>                
        </div>
        <div class="formitem">
            <label for="LastName">Last Name:</label>
            <%= Html.TextBox("LastName", Model.LastName, new { watermark = "Last", title = "Please enter your last name." }) %>                
        </div>
        <div class="formitem">
            <label for="DateOfBirth">Date of Birth:</label>
            <%= Html.TextBox("DateOfBirth", Model.DateOfBirth, new { Class="date-pick", watermark = "mm/dd/yyyy" }) %>
        </div>
        <div class="formitem">
            <label for="EmailAddress">Email Address:</label>
            <%= Html.TextBox("EmailAddress", Model.EmailAddress, new { watermark = "name@example.com", title = "Please enter your e-mail address." })%>
        </div>
        <div class="formitem">
            <label for="Street">Street:</label>
            <%= Html.TextBox("Street", Model.Street, new { watermark = "Street", title = "Please enter your street address." })%>                
        </div>
        <div class="formitem">
            <label for="City">City:</label>
            <%= Html.TextBox("City", Model.City, new { watermark = "City", title = "Please enter your city." })%>                
        </div>
        <div class="formitem">
            <label for="State">State:</label>
            <%= Html.TextBox("State", Model.State, new { watermark = "State", title = "Please enter your state." })%>                
        </div>
        <div class="formitem">
            <label for="PostalCode">Postal Code:</label>
            <%= Html.TextBox("PostalCode", Model.PostalCode, new { watermark = "Postal Code", title = "Please enter your postal code." })%>                
        </div>
        <div class="submit">                
            <input type="submit" name="Submit" />                
        </div>
    </fieldset>        
<% } %>

Looks good. It is a bit non-standard, but lets not dwell. First lets look at one of the Text Boxes that we are rendering:

Html.TextBox("FirstName", Model.FirstName, new { watermark = "First", title = "Please enter your first name." })

We are passing the name, model property, and then an anonymous type that renders out html attributes. The tag above will render out an input tag like this:

<input type="text" watermark="First" value="" title="Please enter your first name." name="FirstName" id="FirstName" class="watermark" />

So yes, the watermark attribute is non-standard and won’t validate. Sadly, with the html 4 spec there just isn’t a good place to shove data like this on a tag. jQuery has a way to store a piece of data with a tag, and it is the data method. Perhaps in the future I will implement something to make assigning this to each form field easier, but for now you can deal with my non-standard tags. This non-standard tag is how we are going to apply our watermarks to our fields.

What we have here is a pretty vanilla form and now we need to add a bit of flare to it. The first thing we are going to do is include all of our javascript files:

<script src="../../Scripts/jquery-1.3.1.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.form.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.blockUI.js" type="text/javascript"></script>
<script src="../../Scripts/date.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.datePicker.js" type="text/javascript"></script>
<script src="../../Scripts/spiffy.js" type="text/javascript"></script>

Here we have imported jQuery, the plugins that we are going to use, and my own little creation “spiffy.js”. This is where all of our code will go in order to make the magic on the form.

Okay, so you have seen where we are going, and what code that we are starting off with, and so what is left? You may be saying, is all of the rest accomplished entirely in jQuery? And the answer is, “yep”. So now lets look at the “spiffy.js” file and pick through it piece by piece.

jQuery “ready” Method

First we are going to use the jQuery method that you will see in any jQuery site:

$(document).ready(function() {
    //Magic goes here!
});

This allows us to put in javascript that will be executed after the page has been fully loaded. The rest of the javascript that you see here is going to go inside of the above function.

Date Picker

First we are going to look at how to apply the date pickers. In order to do this we are going to first make the first day of the week Sunday (which we tend to do here in America) and we are going to reset the date format to an American format as well.

// date pickers
Date.firstDayOfWeek = 7;
Date.format = 'mm/dd/yyyy';
$('.date-pick').datePicker().val(new Date().asString()).trigger('change');

Then we use the jQuery “$(‘’)” method in order to find the field by class name. Then we simply call the “datePicker” method on the resulting field (or fields) and set a few options. This post is going to be long enough already so I’ll let you look them up.

Watermarks and Row Highlights

Next we are going to set our watermarks and row highlights. If you don’t mind putting code on the page to create the watermarks, then there is already a watermark plugin available. We want to just pull the watermark attribute though and use that in order to create the watermarks. This is going to require a bit of custom jQuery code, but nothing inside of each page:

// watermarks and row highlights     
$("[watermark]").each(function() {
    this.value = $(this).attr("watermark");
    $(this).addClass("watermark");
})
.focus(function() {
    if (this.value === $(this).attr("watermark")) {
        this.value = "";
        $(this).removeClass("watermark");
    }
    // add row highlight
    $(this).parents(".formitem").css("background-color", "#ddd");
})
.blur(function() {
    if (this.value === "") {
        this.value = $(this).attr("watermark");
        $(this).addClass("watermark");
    }
    //remove row highlight
    $(this).parents(".formitem").css("background-color", "");
});

Okay, so it looks big at first, but let’s break it down into a few different parts. First you’ll see the “$(‘’)” method again, followed by the “focus” method and then the “blur” method. If you look at each piece separately then you’ll find it much easier to understand.

First look at the “$(‘’)” method we use to find our elements, but we use the ‘[attribute]’ syntax to look for elements that have a particular attribute. Then we call “each” in order to loop through each field that we have found. We pass a function into the method to run on each element. What it does is set the field’s text to the text of the watermark and then applied the “watermark” class to the field. The “watermark” class is what we use to give the watermark text that “grayed out” look.

Next you’ll see the “focus” method that allows us to tie a method to the “focus” event on each field. Every method in jQuery that doesn’t do any kind of filtering will pass the same set of elements on to the next method which allows us to “chain” methods together and is one of the biggest selling points of jQuery. But anyways, the function that we pass to “focus” isn’t going to get executed right away. Instead, it will get executed whenever we enter one of the fields with a “watermark” attribute.

This function is checking to see if the text in the field is equal to the text of the watermark and if so, it sets the value to an empty string so that we can enter our own text in. It also removes the “watermark” css class so that our text is not grayed out. After that you will see that we are applying a row highlight the parent of the current field that has the class “formitem”. This allows us to highlight the current row that we are editing. Here we are using jQuery to set the color of the row directly, but most likely you would do what i did in the code just before it and set a class name. I did it this way to show how easily jQuery allows you to modify css directly.

And finally we get to the “blur” event which fires when the focus leaves the field. In the function passed to this you’ll see that we are reapplying the watermark if nothing was entered and putting the “watermark” class back. We are also resetting the row color back to nothing. Again, you probably don’t want to do this because if the row had a color already, we’d be resetting it.

Resetting the Watermarks on Postback

The above code has one issue (it is possible it has others) and that is when you submit the form, the watermarks will be sent back to the server unless they are removed before postback. This will require one more little bit of jQuery.

//remove watermark when form is submitted
$("input:image, input:button, input:submit").click(function() {
    $(this.form.elements).select("[watermark]").each(function() {
        if (this.value === $(this).attr("watermark")) {
            this.value = "";
        }
    });
});

In this javascript we find all of the inputs of type image, button, and submit and add a method to the click event. The method that we attach first looks for all form elements for the clicked element and then filters it down to only elements that have “watermark” attributes and then loops over each comparing the current text to the watermark text. If they are equal then the value of the element is cleared out. It might look a bit complex, but with the chaining abilities of jQuery it all becomes so easy!

Help Messages

Next we are going to look at those fancy help messages that will pop up next to our fields when we enter them.

// tooltips                
$(":text[title]").focus(function() {
    var field = $(this);
    field.after("<p id='tooltip'>" + this.title + "</p>");
    var position = field.offset();
    $("#tooltip")
        .css("top", (position.top + 10) + "px")
        .css("left", (position.left + field.width() + 10) + "px")
        .fadeIn("slow");
})
.blur(function() {
    $("#tooltip").remove();
});

The first thing we do here is find all input elements of type “text” with a “title” attribute and attach a method to the focus event so that it fires when the field is entered. The first thing we do is get the current field using $(this) and then calling the “after” method on it in order to add an element into the page after the current field. The element inserted will be a paragraph tag with a “tooltip” id and the text of the “title” attribute. Then we position the tooltip relative to the current field. After that all we have to do is add a method to the “blur” event to remove the tooltip upon exit.

Ajax Postback With Modal Dialog

And finally…man this post is getting out of hand. But now that we are starting to get used to jQuery we can move a bit quicker through this one. Here we are creating an object using JSON notation. So you can see that we are assigning the variable “options” a set of curly braces with some crap in it! Basically it is an object with two properties, one called “beforeSubmit” and one called “success”. Each of these properties are methods that contain code to execute when these two events happen. Then we have a property called “dataType” that we are just assigning a string of ‘json’.

Now you may be wondering where all of this is coming from, and it is simply a data structure that the “form” plugin knows about and can use to configure itself. As you can see, after we create this object we then pass it into the “ajaxForm” plugin method after we find the form on the page.

var options = {
    beforeSubmit: function(formData) {
        $.blockUI();
        formData.push({ name: 'ajax_submit', value: '1' });
    },
    success: function(result) {
        $.unblockUI();
        if (result.length == 0) {
            $("#messages").empty().append("Thanks!");
        }
        else {
            var list = $("#messages").empty()
                .append($("<ul class=\"errors\">"));
            jQuery.each(result, function(index, item) {
                list.append($("<li>").append(item));
            });
        }
    },
    dataType: 'json'
};
$("form").ajaxForm(options);

So in the “beforeSubmit” method the first thing we do is call the “block” plugin that causes a modal dialog to display during postback. Then we call “formData.push” which submits the form back to the server while setting the “ajax_submit” post variable so that ASP.NET MVC can tell that this is an ajax postback.

In the “success” method we first “unblock” the ui and check the result length to see if we got anything back in our result array. If the length is 0 then we just append “Thanks!” into our “messages” div. If we do get a list of messages back then we clear the “messages” div and append an unordered list with a class of “errors”. Then we loop through item in our array of messages and append list items for each. Since we told the "form” plugin that we were expecting a “json” datatype we knew that we could just pass back a json array and it would interpret it automatically.

Just to get it working I simply added this code inside of the controller method:

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Index(FormCollection formData)
{
    if (Request.IsAjaxRequest())
    {
        return Json(new string[] { "Test Text!", "Test Text 2!" });    
    }
    else
    {
        return View(new Person());
    }
}

So if we detect that it is an ajax postback then an “ActionResult” of type JsonResult is returned. I have the array hardcoded with two messages for test purposes, but you get the idea. The array is serialized into json by the “Json” method on the controller class.

Summary

Phew. That was a long freaking post. We saw how to add watermarks, row highlights, date pickers, hovering tooltips, and ajax submitting to our web form. The whole point here is to learn something, and I hope you did. I know that there are probably a dozen things that could be done in a better way, and if you see any of them please let me know in the comments. If you want to look at the source, you can find it below.

Click here to get the source.

Fun With HTML Script Tags

Posted on 2/16/2009 10:02:11 PM by Justin Etheredge

I was trying to get some work done this evening on a test ASP.NET MVC website and I made what many (or all) would consider to be a rookie mistake. I created a simple form on a page and included JQuery’s javascript files in the page using a tag like this:

<script src="../../Scripts/jquery-1.3.1.min.js" type="text/javascript" />

And when I rendered the page, I ended up with nothing but a white form. Figuring that I had put something funky in the html, I rendered it in Internet Explorer. I got the same white background with no html rendering. My first thought was that something was causing cassini to crash during the request, but I wasn’t getting any errors.

So I switched over to running in IIS (which required an install since I had just switched to Windows 7), but I was still getting the exact same result. I was so confused because even when I included multiple javascript files, I could always see the javascript from the first script tag, but nothing at all after that! Argh! I checked settings, IIS logs, file attributes, permissions, everything… and you know what the problem was? I self-closed the freakin’ tag. Yeah, both Firefox and Internet Explorer totally choke on self closed script tags without saying anything. As soon as I changed the tag to this:

<script src="../../Scripts/jquery-1.3.1.min.js" type="text/javascript"></script>

It started working immediately. In fact, if I had bothered to open it up in Opera, it would have rendered just fine. Interestingly enough, Firefox is okay with self-closing script tags as long as the last script tag is not self closed. Interesting parsing behavior.

So anyways, I know I have come across this error before, and since I once again wasted a ridiculous amount of time on this; I wanted to get this up on my blog. Now I will remember it for the future and hopefully help someone else out in the process. Just don’t make fun of me too bad.

Windows Azure - Breaking It Down

Posted on 1/14/2009 8:03:00 PM by Justin Etheredge

Despite the title of this post, there will be no rapping or dancing of any sort going on here. Only talk of Windows Azure, which is quite possibly the most confusing product rollout that Microsoft has attempted since Vista. With Vista it was a plethora of versions... do I need Home, Home Premium, Business, Ultimate, Super Deluxe Extra Gooey edition???? I just don't know! Well, with Windows Azure the problem seems to be the opposite. It seems that they are trying to cram a ton of stuff under a single umbrella. In a way reminiscent of the direction that they originally went with .NET, and then later backed up on quite a bit. Did you know that Windows Server 2003 was going to originally be named Windows .NET Server?

Anyways, I have spent some time over the last few days really digging into Windows Azure and trying to figure out exactly what all of the stuff is in that massive slide that kept showing up at PDC. You can see what I am referring to about half way down this page. I don't want to reprint it here since I may incur the wrath of my mighty overlords.

First I am going to clear up what I think was the single biggest mistake they made when they created that image, and maybe I am an idiot for thinking this, but I had assumed that they were trying to show the five pieces of Windows Azure at the bottom. But they aren't really. What they are showing is five services that can be used in conjunction with Windows Azure. Windows Azure is really big because it is much more badass than the rest. :-) Of the five pieces that are sitting above Azure, we are going to completely ignore "Microsoft Sharepoint Services" and "Microsoft Dynamics CRM Services" because I don't really have anything to say about them. The three parts that we will look at are "Live Services", ".NET Services", and "SQL Services", but these aren't part of Windows Azure. They are part of the "Azure Services Platform", and that is what confused me. I can't imagine why that would be confusing!

Windows Azure is a separate service that is closely related with many of the other services list, but even Windows Azure is broken down into a few parts! Clearly Microsoft has invested ridiculous amounts of money, people, and whatever else Microsoft has (gold bullion?) into this.

Part 1: Windows Azure

Windows Azure is a hosted platform for writing applications that can scale easily. Inside of Windows Azure there are two very distinct different services that are running. The first is "Hosted Services" and the second is the "Storage Services". I say that these are distinct because they are almost entirely unrelated. Sure you interact with them inside of the same control panel, but their interactions and versioning are handled in very different ways.

Hosted Services:

You have a concept of a "Web Role" and a "Worker Role". You can think of a "Web Role" as an ASP.NET application, and a "Worker Role" as a Windows service. All that these services do is fire up .NET code in Microsoft's datacenters and allow for you to spin up an arbitrary number of each role in order to do your bidding. Microsoft seamlessly handles the rolling out, load balancing, etc... But this part of Windows Azure is really all about code, there is no way for you to store any kind of state. This is how they let you scale, because if you need more instances, just fire them up! If you have no state, then your roles shouldn't care where they are running. The problem is that without state, your application is probably pretty useless. This is where the "Storage Services" come in handy.

Storage Services:

This is another confusing part of the whole Azure stuff. We have a storage service inside of Azure, but then we also have "SQL Services" which isn't part of Azure, but it is a part of the "Azure Services Platform".... whaaaaa??? So yeah, there are two storage solutions. One is part of Azure, and that is Azure storage. The second one has little to do with Azure, and it is called "SQL Services". Azure storage is a very simple storage solution. You have three storage options "Queues", "Tables", and "Blobs". Queues are just that, a Queue. If you don't know what that is then you probably ended up at this page by accident. You can plop items on a queue and then pick items off. Tables are a very simple row storage mechanism. You can do some simple queries over the data, but you are very limited. The tables aren't relational so you can't have a foreign key to another table. There is a Linq provider, but it only supports "where", "select", and "take". Notice that there is no "skip", so you really can just retrieve items and you can't do any storage side paging. The tables also only support a small subset of data types. One of them is not "decimal". Yeah, no decimals. Ouch. Blobs are for storing things like images, files, etc... They can even be made public so that you can access them through urls just like you would any other web resource.

As you can see, it is the combination of the hosted services and storage services that allow you to actually do something with Windows Azure. As I said earlier, the blobs are useful for storing website assets, and the tables are useful for storing whatever data you need to drive your websites/service/etc... You may be wondering about the queues though, what kind of use do they have? Well, remember that we had both "Worker" and "Web" roles. The queues are the perfect place for a site or service to place work on the queue for a backend process such as a Worker role to deal with. Then the worker role can put another message on a queue, or update a piece of data in a table when it is done processing the work item. It allows for very distributable asynch processing of work. The kind of thing that you would normally use something like MSMQ for.

These two pieces are what actually comprise Windows Azure. There is one additional piece, and that is the web portal, but that is simply where you perform the administration and deployment of your applications. I'll give you a few quick screenshots so that you can see what I am talking about:

Here is the main project page that shows the different projects I have created:

 

Here you see that my "Hosted Service" project (the top one) and my "Storage Service" project are two entirely different things inside of the admin panel. If I go inside of the hosted project you can see that we have a "Staging" environment and a "Production" environment. We can initially deploy our application into the Staging Environment where it is allocated and started. Then we have a special url that can be used to hit this staging deployment to test it. Then when we are ready to roll it into production, you just click the blue button you see in the screenshot below and the load-balancer is points the production url to the staging deployment, and voila, you are deployed!

 

I'm not going to go into any further detail about this (maybe in a future post), but I just wanted to give you an idea of how you got your applications into the "cloud".

Part 2: Live Services

Live Services are another gargantuan offering that has even swallowed up a few services that already existed before this branding was announced. To sum it up in Microsoft's own words:

Live Services are a set of building blocks for handling user data and application resources.

Sounds pretty simple, until you see this guy. Holy crap. So this poster is actually about the "Live Framework" which is built on top of "Live Services" and provides a uniform way to access all of the "Live Services". Okay, so what are all of these services that you speak of? Well, I'm glad you asked. A few of them are "Live Alerts", "Live Contacts", "FeedSync" (Which Live Mesh is built on top of), "Messenger", "Virtual Earth", etc... there are actually quite a few more of them. Some of these are services that users can interact with directly, but virtually all of them are going to be interacted with through the "Live Framework".

Part 3: .NET Services

.NET Services are formerly known as BizTalk services, or at least part of it was. BizTalk services appear to have disappeared in a way reminiscent of Soviet era style cleansing. Can you say "persona non grata"? I remember hearing about BizTalk services at Mix 08 and the presenter actually said that he didn't know why they were called "BizTalk" services since they had nothing to do with BizTalk. Well, I guess Microsoft listened, and they have now been renamed. .NET Services provide three different pieces of functionality, and are the completely developer focused side of their service offering. The three pieces are "Access Control Service", ".NET Service Bus", and "Workflow Service".

The "Access Control Service" allows application developers to move authentication and authorization out of their application and into a hosted service. This allows users to authenticate into an application from anywhere using a set of well known services. This service also provides the authorization mechanism needed to interact with the rest of the .NET services.

The "Service Bus" is surprisingly not really all that much of a service bus. :-) If you were expecting something like MassTransit or NServiceBus then you will probably be disappointed. Think of "Service Bus" as more of a hosted replacement for MSMQ. It has a very simple pub/sub model that allows you to pass messages across the internet. I'm not saying that it is bad (in fact I have never used it), it is just made to be simple and to only provide basic messaging support. If you need an async hosted messaging system though, and don't mind writing some of the more complex features yourself then this may be an excellent option.

The last piece is "Workflow Service" which is a service that allows you to host workflows written in with Windows Workflow Foundation. It can be connected with remotely through http or it can use messages off of the .NET Service bus. Other than that I don't really know much about it, so I'll leave it to you to explore. It sounds like it might be neat to perform more advanced .NET Service bus interactions and routing using the Workflow Service. You could have the Workflow Service pick up messages at endpoints, process them, and then deliver them to other endpoints that are delivered to recipients. The idea though of having a hosted platform for distributed - long running processes is pretty enticing though.

Part 4: SQL Services

SQL Services are probably the only self-explanatory part of the entire Azure Services offering. It is SQL Server in the cloud! Mmmmmm.... cloud. SQL Services are an interesting beast. Just like the Azure data storge, they only support a small subset of types. SQL Services looks to support decimal, so it is all good in my book. The interesting part about SQL Services is how it is setup. It supports joins, so you'd think that it was relational, but it is not. In fact, it doesn't even have schemas! At the top most level there is a concept of an "Authority". In an authority there are "Containers". Inside of these containers there are "Entities". From this you may wrongly expect that Authority = Database, Container = Table, Entity = Row, but in reality the mapping is quite different. Authority is more or less like a SQL Server Instance and then a Container is like a Database. But an Entity is a table and a row? Yep, kinda.

The "Containers" could be thought of as a table, but since there are no schemas we can just put whatever kind of entity we want into them. So containers could hold both "Order" entities and "LineItem" entities. But why would we want to do this? Well, because remember earlier how I said that we could do joins, well they are only within a container. You may be screaming right now about this, but remember that SQL Services are meant to be distributed and scalable, if you have data in two containers, which may reside in two different services or data centers then how do you know how expensive joins will be? Microsoft hints in their docs that cross container queries may be possible in the future, but I'm guessing that they will have to do some kind of data syncing in order to enable this feature.

In the end SQL Services provide you with a bit more flexible data storage engine than what Azure provides out of the box. In the future Microsoft has plans to make SQL Services even more rich and bring it closer and closer to what we expect out of a full fledge relational database. I'm pretty excited to see where Microsoft takes SQL Services and it is certainly something that I will look more into in the future.

Wrap-Up

The Windows Azure services platform can be quite daunting to approach, but once you figure out that you can just tackle it one piece at a time it becomes much easier to manage. I for one have started to dig into Azure Data Storage and Hosting and will hopefully have a few more posts on this in the near future. Microsoft has clearly invested a huge amount of resources into this so I would imagine that you are going to be hearing quite a bit about it in the future. Also, if anyone out there is interested in potentially leveraging the Azure platform and doesn't know where to start, contact me because I am always interested in consulting work!