While Mango isn’t a silver bullet to fix performance, it does help a lot.  But there’s only so much that can be done on a platform level.  The developers of Windows Phone applications need to be smart about what they’re doing as well

Scrolling is the highest visibility performance metric to a user.  A poor, stuttering scrolling experience is going to lead to a poor user experience.  That poor user experience is going to yield poor ratings and reviews in the marketplace, and poor perception of your application.  Ultimately, that means no adoption of your application.  There was a lot done in Mango to help address this.  Let’s take a quick look at some of the ways to get our app moving fast.

The thread architecture in the Mango update has changed quite a bit.  It looks a little something like this:

• UI Thread - Handles IO and animations, layout, rendering, data binding
• BG thread - Dispatch, networking, parsing
• Compositor thread - Primitive animations are done here, and composited onto back buffer
• Touch thread - Explicitly for processing the touch events

You’re also going to see, due to a lot of optimizations in memory management in Mango, a 25-40% improvement in your application’s working set.  For free.

A couple tips that you can use to look at performance of your WP7 application:

• EnableDrawRegions - This will change colors of an overlay on redraw so you can visually see when WP7 has to redraw and relay your pages.
• The Pivot control is faster and lighter than the Panorma control; it doesn’t have to load ALL of the content on first load.  If you can use a Pivot experience, you probably should.
• Remember that controls expand at runtime to the sum of their parts.  If you’re not careful, the layout engine is going to get VERY busy.
• Specify exact widths and heights when possible to help the layout engine.  If you tell it what the value of something is, it won’t have to calculate it.
• Try and skip visibility convertors and add that value to your ViewModel if possible; there’s potential for big wins there by not having to run a convertor for all those elements.
• Skip image resizing on the fly.

One of the available tools on the internet to help with some performance problems is LoadingPivotItem.  This replacement for PivotItem adds a nice loading experience to PivotItems, loads the content for the item in the background, builds and processes the visual tree, and then brings it in.

You also get a new ProgressIndicator in Mango which provides an OS progress indicator control.  This will help your users realize that you’re actually doing something so they’re not staring a completely blank page wondering if something has gone wrong.

You should also move infrequently used things to other assemblies so that they’re not loaded on startup.  Some good examples here are settings pages, about pages, that sort of thing.

If you can get your raw startup time fast enough, just kill off your splash screen.  Your application will have a more native OS type experience and the perception of higher performance will be there (since you’re already starting fast anyway).

Lastly, make sure you muck with storage (IsolatedStorage, DB) off of a separate thread so that you don’t block your UI thread.

All of these things should go a long way to really snap up the performance of your application, and give your users what they’re looking for much more quickly.

While the Mango update is a huge update to the Windows Phone 7 platform, the hardware requirement changes are actually very minimal.  The only two changes are to require a gyro sensor, and to allow for an MSM7x30 processor.  Other than that, all of the original minimum requirements stand.

The OS platform itself is where the huge enhancements are going on.

• Silverlight and XNA integration, you no longer need to choose one or the other, you get both.
• HTML5 support is here, via IE9, which is using the same codebase on WP7 as the desktop version of IE9
• MUCH stronger integration with the camera and other sensors on the device.
• The ability to interact directly with sockets.
• Agents are being introduced, using extremely limited resources for background processing to allow the majority of the device’s power to interact with foreground applications.  Agents also run in the same app domain as your application, giving your agent access to the same IsolatedStorage and database, while running in a different process, on a different schedule, with no user interaction.
• Structured storage, based on SQL CE.
• Content sharing via the new data sharing service.  Just exchange a token to authorize other applications to access your application’s data.

Those aside, there are drastic performance improvements coming to Mango that most applications are going to just get for free helping them feel smoother, snappier, and giving an overall better user experience.

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!

The first day of MIX11 focused a lot on emerging web technologies, mostly HTML5 and the abilities that it brings to the table; websockets, canvas, data-* attributes and unobtrusive Javascript/jQuery.  I’ve taken a bit of a dive in to both websockets and data-* attributes already (with the later being a requirement for serious unobtrusive script) so do check those out.

Expanding on that importance of HTML5 and the future of the web, IE9 was a very hot topic.  There was a lot of comparison against The Other Fastest Browser (read: Chrome) and IE9 showing it up in nearly every way.  It seems (so far anyway) that MS has really outdone themselves with IE9, especially in the performance and standards support categories.  IE9 looks to have ridiculously good support for all of the emerging web technologies, and is (by their demos anyway) far and away faster than any other browser right now.  It’ll be really interesting to see how the other browsers respond to this.

More on Day 1 after the break.One last thing that I heard mentioned quite a few times in relation to web development, and keeping things clean (ala “Sane Markup”) was Microsoft’s MVC3 framework and Razor engine.  This framework really helps enforce keeping all of the different points of logic of your web application separated.

Microsoft also brought up several, several times their NuGet repository to bring a lot of open source projects in to Visual Studio and your applications through an integrated interface and a constantly updated repo.

Overall, a lot of good stuff coming in the web technologies department, and there are going to be a lot of changes in how web applications are developed using these technologies, and ultimately in how users expect their web applications to behave, look, and feel.

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.

This year I’ll be attending Microsoft’s MIX 11 conference to help bring some of latest standards-based web development techniques and technologies to my employer, Motricity.

The line up this year looks fantastic, with a lot of great sessions and information planned focusing on HTML5, CSS3 and jQuery, some Microsoft specific technologies including Silverlight, WPF, and Windows Phone 7, as well as mobile development in general.

It’s going to be a busy and exciting couple of days looking in to the future of mobile development!