MIX11 saw a pretty heavy focus on Windows Phone 7 (and specifically the coming Mango update) today. While there are tons and tons of changes, a few that were mentioned repeatedly:

• Fast Application Resume
• Background Agents - Audio, Timed, and Idle background threads
• Notification Service, trigger and schedule notifications just like alarms or calendar items
• Background Transfer Service - Queue file transfers
• Huge advancements in integration with the camera and other sensors (GPS, accelerometer, compass, gyro)
• SQL CE is coming (with LINQ)
• Sockets, and access to the connection manager
• Serious performance improvements all the way around
• The ability to deep-link to apps, and pin those links as tiles to your homescreen

It looks like Mango is going to be a very significant to the Windows Phone platform for both end users as well as developers.  More on day 2 after the break.

Beyond the WP7 focus, there was a lot more information about the HTML5 technologies that are coming to browsers.  Specifically, one of the sessions was about the <audio /> and <video /> tags.  The HTML5 spec itself, while supporting audio and video tags, doesn’t have support for any kind of streaming specification, though there are a few various options to control streaming.  The most popular of which seems to be Apple’s HLS.  The spec also doesn’t specify a codec that’s required, so you’ll want to specify your codecs to save some time by helping the browser not have to figure out what you’re trying to send.  If you’re going to be using these elements, you’re also going to want to make sure that your web server is set up properly to handle seeking.

Interestingly enough, with all of the WP7 announcements going on throughout the entire keynote, the tail end of the keynote mentioned Kinect.  Kinect has been, evidently, the fastest selling piece of technology in history.  The tech itself is indeed pretty amazing.  The talk about Kinect was pretty limited, though the big piece of news surrounding it was that the Kinect Windows SDK will be released soon.  That was followed with some awesome demos of what the community has hacked Kinect to do.  Apparently this is all more important than they initially let on, because everyone was given a Kinect!

AKA: The Death Of Polling

Imagine for a moment if you will, a scenario where you have a page on a website that you’d like to update on a regular basis with new content as it becomes available. How would you go about implementing that? Until just recently, you didn’t have a lot of options. You could spin up some Javascript that would do a little setTimeout() magic with some ajax voodoo to call a webservice to get some new data if it’s there. That’s pretty standard, and at least you’re not refreshing the entire page (think meta refresh), right? But, you’re making a lot of consistent, unnecessary calls that may or may not ultimately provide anything valuable. That’s a lot of extra server and network overhead for nothing.

There’s got to be a better way! Enter HTML5!

Part of the HTML5 spec has support for a new technology called websockets.  Just what are websockets?  A websocket is basically a TCP connection for the web, enabling the browser to hold open a connection to a server, and to send and receive messages through that pipe.  What does that mean for us though?

Instead of our setTimeout()/Ajax/webservice cycle, we can simply open a websocket, and wait for our data to show up for us.

Pretending that you’ve installed the Websockets prototype from Microsoft’s HTML5 Labs http://html5labs.interoperabilitybridges.com/prototypes/available-for-download/websockets/html5protos_Download, we can do something like this for a simple echo server:

namespace WebsocketSample {
    using System.ServiceModel;

    public class EchoSvc : WebSocketsService {
        public override void OnMessage(string message) {
            this.SendMessage(message);
        }
    }
}

Pretty trivial there.  Now, how can we use it?

Sprinkle a little markup about, like this:

<input id="input" type="text" /><input id="send" type="button" value="Send" />
<input id="output" type="text" />

And a little Javascript/jQuery action, like so:

var connection = new Websockets("ws://uri/to/EchoSvc");

connection.onopen = function () {
    $('#send').click(function() {
        connection.send($('#input').val());
    });
};

// Log messages from the server
connection.onmessage = function (e) {
    $('#output').val(e.data);
};

And now you have a persistent TCP connection directly from your browser to the server, skipping all of the overhead of the constant polling loop, and multiple server requests.  Muy bueno!

The project that I’m currently working on had a requirement from the User Experience folks to have a button’s text change the first time it was clicked, and then on the second click, the intended action would be performed.  One of the UI design guys on my team suggested adding some new classes that would serve as markers for the text that would be needed.  Something like this:

<input class="switchTo-Buy_Now" type="button">

Technically, yes, that would work.  And then you could bind some jQuery to the click event, parse out the last bit of the class, do some voodoo, and make it go.  But, it’s ugly. 

There’s got to be a better way! Enter HTML 5!

The HTML 5 spec contains support for data-* attributes.  That is, any attribute on any element that starts with data-* is valid HTML 5 syntax, and is used to store data that doesn’t affect the layout, rendering, or function of the elements that it’s attached to.  Finally we can hold any arbitrary data on any element and still have valid syntax!

Further, there’s support for this in jQuery core (as well as vanilla Javascript, but who really cares about that anymore anyway?).

So, we used to have some markup similar to this (which didn’t validate):

<input type="button" class="switchTo-Buy_Now" text="Buy Now!" />

And some jQuery a little something like this:

$("[class$=Buy_Now]").bind('click', function() {
    var class = $(this).attr('class');
    var switchTextId = class.substr(class.lastIndexOf('-')+1, class.length - class.lastIndexOf('-'));
    var switchText = "";
    if (switchTextId == "Buy_Now") {
        switchText = "$4.99";
    }
    // Repeat that a lot.  Or pull it off of some other
    // non-standard attribute.
});

And NOW we have something like this (which is valid to boot!):

<input type="button" class="switchTo" data-switch-text="$4.99" text="Buy Now!" />

and a little jQuery action like this:

$('.buyTo')bind('click', function() {
    var switchText = $(this).data('switch-text');
});

Pretty boss.