Tim Sneath

A Modern Browser

Tim Sneath — Tue, 15 Feb 2011 21:38:07 GMT

This morning, Mozilla shared their feelings on IE9 with a post that claims to answer the question, “Is IE9 a modern browser?” While they grudgingly concede that IE9 is “a step in the right direction”, they seem to be operating under a very narrow definition of what “modern” means, that I don’t think matches the dreams that web developers and end-users actually have.

Let me help them with a definition for what we believe users and developers should expect from a “modern browser”:

Modern browsers are fast. They take full advantage of the underlying platform to render graphics with the GPU, compile and execute JavaScript across multiple CPU cores and ensure that web applications run as close as possible to the same speed as native applications.
Modern browsers enable rich, immersive experiences that could hitherto only be delivered through a plug-in or native application. They can blend video, vector and raster graphics, audio and text seamlessly without sacrificing performance.
Modern browsers implement features when they are ready, providing predictable patterns that developers can rely on rather than suddenly breaking or removing specifications. They don’t check off support based on a half-completed implementation written to pass a synthetic test, but validate against a test suite that confirms interoperability.
Modern browsers do adopt standards at an early stage of readiness so developers can experiment and validate the specification, but clearly delineate unstable prototypes as such.

It seems that others share this view. The discussion on YCombinator starts with this comment:

Maybe I'm just weird, but I consider issues like performance, reliability, and having a stable foundation to build on to be far more important than supporting your own browser's take on some hypothetical future "standard", which is just IE vs. Netscape all over again. On that basis, IE is currently the only one of the big three that is actually going in the right direction.

And Download Squad concludes its analysis of the Mozilla article with the following:

Don't get us wrong, [Firefox] is an excellent browser -- but more stuff doesn't necessarily equate to better stuff.

To our friends at Mozilla, we admire your passion for the open web, and we look forward to continued competition.

An Open Letter from the President of the United States of Google

Tim Sneath — Tue, 11 Jan 2011 22:46:00 GMT

The world’s ability to communicate with one another is a key factor in its rapid evolution and economic growth. The Esperanto language was invented last century as a politically neutral language that would foster peace and international understanding. Since the launch, we’ve seen first-hand the benefits of a constructed language:

A pure form of communication that is unsullied by cultural context;
Broad adoption by as many as 10,000 speakers
Independent (yet mostly compatible) dialects that not only bring additional choice for speakers also foster healthy competition and innovation

We expect even more communication between people in the coming year and are therefore focusing our investments in languages that are created based on constructed language principles. To that end, we are changing the spoken and written language of this nation to make it consistent with the form of speech already supported by the Language Creation Society. Specifically, we are supporting the Esperanto and Klingon languages, and will consider adding support for other high-quality constructed languages in the future. Though English plays an important role in speech today, as our goal is to enable open innovation, its further use as a form of communication in this country will be prohibited and our resources directed towards languages that are untainted by real-world usage.

These changes will occur in the next couple months but we are announcing them now to give citizens using other languages an opportunity to translate the libraries of the world into Esperanto.

Dankon, nedankinde!

Top 10 Tips for the Effective Use of Social Media

Tim Sneath — Mon, 29 Nov 2010 19:19:03 GMT

While my job here at Microsoft consumes much of my waking life, I spend a little of my spare time volunteering with a small charitable organization called HEAL Africa. They do work in the Democratic Republic of Congo healing victims of sexual violence from the ongoing civil war there. It’s a compelling story of how an organization is changing lives in an appalling situation, but I digress from the purpose of this entry.

One area they asked me to think about is how they can use social media effectively – a question that many charities and non-profit organizations wrestle with. And of course, it’s an area of great interest to evangelists like myself: an area that is a daily focus as we attempt to change perceptions of emerging technologies like IE9 and Silverlight.

So I thought I’d share a few thoughts here, both as a forcing function for me to distil a few ideas and hopefully as something that might be of interest to others.

Know what you’re trying to achieve. Too few organizations have a clear sense of the outcomes they hope to realize from engaging in social networks. What are your goals? Many organizations spend a lot of time encouraging supporters to ‘follow’ them on networks like Twitter and Facebook without much sense of why this is important or what they’ll do with these people once mobilized. This has a negative, rather than a positive effect – it diverts attention away from a core mission, and it leaves supporters with a premature feeling that they’ve ‘done their part’. Remember your core mission and be cautious about using followers as a proxy metric of success.
Know your audience. Assuming some measure of success, it’s important to have a clear sense of who you’re communicating with. In a non-profit setting, those who follow you on a social network are likely already your supporters. A familiar trap is organizations who fail to recognize the difference between converting and energizing. In this setting, converting is the act of trying to persuade new people to side with your cause or invest in some way; energizing is the act of deepening an existing relationship or motivating someone to act in some way. The way you engage online should vary depending on whether your audience primarily consists of dedicated volunteers or those who have no prior knowledge of your organization. Fortunately, online channels tend to self-segment – a Facebook page is likely to be dominated with those who need energizing. A blog will often reach a far more diverse audience who aren’t already invested.
Use social and online media to humanize your organization. It’s tempting to take press releases or other news items and blast them out on all available channels. But that’s not the best use of social media – it disconnects you from your audience rather than creating a closer connection. This is your opportunity to put a more human face to your organization: telling the inside story, being open and transparent about how you think through issues and challenges, and providing a perspective that others can relate to. Ensure that you don’t edit out the personality. Tell people about the things you’ve done right, and the things you can learn from.
Be timely. Social media is about a flow of discourse and a conversation, rather than about blasting your message out to an audience. Use channels like Twitter and blogs to provide an up-to-the-minute view of the work you’re doing, offering fresh, first-hand updates on the situation that respond to current trends or news. You can only set the news agenda when you’re part of this flow.
Don’t moderate views that you dislike. To some people this is obvious, to others it’s counter-intuitive. If you are changing perceptions, you’re necessarily going to be bumping into those who don’t share your views. On a blog, it’s tempting to moderate or delete comments that provide an opposing view: it feels like a guest has come into your home and is insulting your choice of décor. Yet for the most part, these are the comments to relish: they demonstrate that you are engaged in an authentic conversation that is generating a reaction. There’s a lot more to say on this topic that I’ll perhaps address in a future post.
Build a public record. Particularly with blogs, podcasts and similar channels, consistency is key. Unless you establish a regular cadence of content, you’ll never establish a regular cadence of visitors. That doesn’t mean you have to post at a certain time each day: you don’t have to be rigid about it, but don’t go dark for weeks on end either. Remember that everything you post has a lifetime that extends for years beyond the original week of posting. Looking at the traffic to my blog, maybe as much as two-thirds of it goes to content I wrote in the preceding months rather than what is on the current home page.
Be a recommendation engine. In social media, the currency traded isn’t the dollar: it’s influence, reputation and audience. Use your own influence and reputation to give other interesting organizations or individuals their own spotlight. Follow and link to those around you who are doing interesting things. Unlike real money, trading online currency is that it isn’t a zero-sum game �� in fact, the more you give, the more you earn. Even your competitors can be your allies in this regard. But whatever you do, be authentic – don’t fall into the trap of trading links for cynical gain. Make your recommendations count.
Strike up a conversation. The single most valuable outcome of social media is to strike up a conversation with your supporters or customers, giving you a much more accurate ability to channel their needs and wants. Don’t just pontificate: ask questions. The goal isn’t to preach, it’s to collaborate. You need to listen more than you talk. Give air for others to contribute – don’t leap in immediately with a reply to any comment that’s made because that stifles a broader discussion. Show you’re listening by responding, but don’t necessarily feel the need to offer a blow-by-blow response to every point that’s made.
Understand the volume level. Once in a while you have an earth-shattering announcement that blows out the barn doors. But not everything “goes to 11”. It’s important to understand the volume level you want to apply to what you share, otherwise it’ll be hard for others to spot when you’re telling them something big. My team often talks about new things we’re doing in terms of the impact it’s going to make – to use another analogy, how much it “moves the needle”. You have to have dynamic range in your communications – if everything is shouted from the rooftops, people will stop listening.
To build traffic, go where your audience is. Don’t spam or steal someone else’s platform to push your cause. But spend time growing your profile and influence through others’ sites. Get involved and comment – become known for insightful responses that add value to the debates folks are having in other forums. When posting comments on another blog, use your real email and web address, but don’t be nakedly self-promoting.

What do you think? What would you add? What are your most effective strategies? Have you seen good counter-examples where the “accepted wisdom” is in fact the wrong way to engage?

PDC10: The Future of C# and Visual Basic

Tim Sneath — Tue, 09 Nov 2010 21:13:50 GMT

At PDC 2000, we rolled out the .NET platform, including a new language called C#. A lot has happened since then! Each release has had a theme – in C# 2 we added generics; in C# 3 it was LINQ. Most recently in C# 4 with VS2010 we introduced deeper dynamic language support and expressed a commitment to feature parity across VB and C#.

Language designers need to observe and integrate major trends into their work. Over the last few years, we’ve seen several major trends: (i) declarative styles – where you say more about the ‘what’ and less about the ‘how’, e.g. DSLs, functional programming; (ii) the resurgence of dynamic languages like Ruby and JavaScript, and how that affects static typed languages; (iii) concurrency.

In the last major editions of the language, there has been significant investment in declarative styles and dynamic programming. But there isn’t heavy language support for concurrency today, even though there is good support in the framework through the likes of the Task Parallel Library.

One reason for the rise in concurrency is the rise in connected applications: it’s almost impossible today to build an application that doesn’t talk to a service, or indeed to build a service that doesn’t talk to another service. This increases latency – for example, it is just not acceptable for a UI to freeze while it waits for a service to return. As a result, we all practice the art of asynchronous programming. It is starting to become the norm, and we’re even starting to see the rise of async-only APIs in languages like JavaScript and Silverlight.

As a result, we’re looking at making concurrency the theme of the next release of our C# and Visual Basic languages.

The Challenges of Asynchronous Programming

In a synchronous call, the act of invoking a method and waiting for the result are fused: you can’t separate the two. With asynchronous programming, that changes. You can call the method and it will return immediately; later, it will deliver the result, so the two operations are separable.

There are a few problems with today’s model: (i) that the function can’t return the result, since the code is asynchronously executing, so it has to use a callback instead; (ii) it can be complex to update the UI without marshaling data back from a background thread; (iii) in a server setting, you don’t really want unconstrained thread creation because of the increased competition to the thread pool.

Anders demonstrated a simple example that shows how complex the asynchronous model quickly becomes. The code fragment below downloads and display movies based on a query of the NetFlix OData feed:

Movie[] QueryMovies(int year, int first, int count) {

  var client = new WebClient();

  var url = String.Format(query, year, first, count);

  var data = client.DownloadString(new Uri(url));

  var movies =

    from entry in XDocument.Parse(data).Descendants(xa + "entry")

    let properties = entry.Element(xm + "properties")

    select new Movie {

      Title = (string)entry.Element(xa + "title"),

      Url = (string)properties.Element(xd + "Url"),

      BoxArtUrl = (string)properties.Element(xd + "BoxArt").Element(xd + "LargeUrl")

};

    return movies.ToArray();

But this code is synchronous – the UI will hang while waiting for the call to return. Let’s follow through the steps needed to fix this:

We can replace the DownloadString() method with DownloadStringAsync();
Then we need to separate out the remaining code in the method to a handler for the DownloadStringCompleted event;
But how do we then return the result to the calling method? The QueryMovies method will already completed by this point. We can’t – instead, we need to make this method async as well, adding an Action<> delegate as a parameter.

Now we have to go back to the method that called QueryMovies and retrieve the result asynchronously . And this is where it really starts to get unpleasant, because QueryMovies is being called in a while loop, as follows:

void LoadMovies(int year) {

  resultsPanel.Children.Clear();

  statusText.Text = "";

  var pageSize = 10;

  var imageCount = 0;

  while (true) {

    var movies = QueryMovies(year, imageCount, pageSize);

    if (movies.Length == 0) break;

    DisplayMovies(movies);

    imageCount += movies.Length;

  statusText.Text = string.Format("{0} Titles", imageCount);

How do we pass a delegate to a while loop? It’s delegates all the way down. Instead we have to replace the while loop and reorder the code, as shown below:

...

  action = movies => {

    if (movies.Length > 0) {

      DisplayMovies(movies);

      imageCount += movies.Length;

      QueryMovies(year, imageCount, pageSize, action);

  else {

    statusText.Text = string.Format("{0} Titles", imageCount);

...

As shown in the code above, you can do it – but it’s unwieldy, and the flow of the code gets lost. And this is before we’ve dealt with error handling! Clearly we can do better.

New Async Features

The Visual Studio Async CTP, announced at PDC, introduces some new extensions to VB and C# to support a simpler, more declarative approach to asynchronous development.

The Task Parallel Library introduced a Task<T> type, which is used to represent an ongoing operation: a value that is currently being computed and will be delivered at some time in the future. We can use this as the return type along with a new async keyword to let the compiler know how it will be used, as follows:

async Task<Movie[]> QueryMoviesAsync(int year, int first, int count) {

We now can add some asynchronous work to the class. The CTP introduces a number of Task<T>-centric extension methods that will eventually be added into the core framework, which enable us to compose and call other asynchronous methods seamlessly. For example, the call to DownloadString() in our original method can be replaced by a call to DownloadStringTaskAsync(), which returns Task<string> instead of just string. (This is something you can offer for your APIs too, of course.)

And we can now use the await operator, as follows:

  var data = await client.DownloadStringTaskAsync(new Uri(url));

The compiler rewrites your code (as it does for iterators), to use a continuation and then return, executing the rest of the code when the result becomes available.

Now the LoadMovies() method is really simple. Starting with the original code above, we can again mark the header with the async keyword and then we can call the new async version of QueryMovies using the same await operator:

  var movies = await QueryMoviesAsync(year, imageCount, pageSize);

That’s all you have to do! As you can see, the new syntax preserves the logical syntax of the code. Exception handling requires no additional work: we don’t need to worry about callbacks, for instance.

It’s relatively easy to cancel an asynchronously executing task: you use the .NET 4 cancellation types, specifically CancellationToken and CancellationTokenSource, to indicate a request to cancel the task. The token can be passed into the DownloadStringTaskAsync() method. Everything here is just as before.

Background and Foreground Threads

It’s important to note that the example shown above does not use a background thread – the async calls are happening on the UI thread. They aren’t computationally expensive; they are just blocking on a network call.

What if there is something that is computationally expensive that you do want to run on a background thread? You can simply use a lambda within an await context, for example:

async void ComputeStuffAsync() {

  double result = 0;

  await TaskEx.Run(() => {

    for (int i=1; i < 500000000; i++) {

      result += Math.Sqrt(i);

});

  MessageBox.Show("The result is " + result, "Background Task",

    MessageBoxButton.OK, MessageBoxImage.Information);

In summary, what the new asynchronous support offers is an abstraction layer that unifies computational, network and I/O asynchrony. For more information on the features, you can read a whitepaper on the MSDN site. There are also a number of good samples in the CTP, including the example demonstrated above.

PDC10: Introducing HTML5 Vector Graphics

Tim Sneath — Wed, 03 Nov 2010 04:22:46 GMT

The HTML5 family of specifications provide two different models for vector graphics: canvas and SVG. Why have both? What is the difference between them, and how do you use them?

It’s important to start by understanding the difference between retained mode and an immediate mode graphics models:

In a retained mode API, the structure of a graphical scene or object is stored in memory as a graph. The runtime itself is responsible for drawing the scene or elements of the scene as appropriate.
In an immediate mode API, it is the application that is responsible for drawing the scene and you can’t manipulate an object in the scene once it has been drawn. Each has their benefits, depending on the style of application being created, as we’ll see.

More information on retained and immediate mode models can be found on MSDN.

SVG is a retained-mode graphics model. To build a scene graph in SVG, you write declarative markup to create an in-memory tree structure that lives in the HTML DOM. You can manipulate the scene graph through code or through CSS. SVG markup can be generated from a variety of tools, including Adobe Illustrator and Microsoft Visio.

Canvas is the immediate-mode graphics model. Because it doesn’t store the graph in memory, it takes less memory overhead to use, and can be faster for intensive use. Unlike SVG, it is programmatic in nature – there is only one parent <canvas> element, and code is used to populate it. While you draw primitive objects on a canvas, the only thing that is stored is the generated bitmap surface. In general, canvas is a lower-level API than SVG because of these constraints.

A quick tabular comparison of the two technologies:

Canvas	SVG
Pixel-based (almost like a “dynamic PNG”)	Shape-based (no concept of a pixel)
Single HTML element	Multiple graphical elements which become part of the HTML DOM
Modified through script only	Modified through script and CSS
Event model / user interaction is simplified (x,y)	Event model / user interaction is abstracted (rect, path)
Performance is better with smaller surface and/or larger number of objects	Performance is better with a larger surface and/or smaller number of objects

Given these characteristics, what is the best technology to use for a specific scenario? SVG is perfect for high-fidelity documents and graphics for viewing and printing, and for interactive charts and maps. On the other hand, canvas is perfect for mathematically-intensive operations and complex scenes. However, there are a lot of cross-over scenarios where there’s no clear winner at this point in time, and as browsers evolve and improve, it seems that the performance characteristics of both technologies are starting to converge. Both technologies are clearly valuable!

[Session CD53 | presented by Patrick Dengler]

PDC10: Kung Fu Silverlight – Architectural Patterns and Practices with MVVM and RIA Services

Tim Sneath — Tue, 02 Nov 2010 19:34:00 GMT

MVVM (Model/View/ViewModel) is an architectural pattern that is well-suited for Silverlight and WPF development. It is a variation of the MVC pattern that originated from the development of Expression Blend.

At its heart, MVVM imposes three kinds of classes that separate out ideas of presentation (Views), logic (ViewModels) and data (Models). Some of the advantages of structuring a project this way: (i) it facilitates code separation, which helps testability and helps you focus your classes on a specific role; (ii) it supports well the data binding architecture of Silverlight and WPF; (iii) it enables designers and developers to collaborate on a project with minimal overhead. (iv) it is a consistent, maintainable, well-understood pattern; (v) it scales well from small to large applications.

Models, Views, and ViewModels

Let’s take a look at each of the components of MVVM in a little more detail:

The Model is the domain object or entity: it’s a class of properties that has the responsibility of storing your data (for example, a Person object that stores a name and address).
The View represents a screen, a page or even a control on the page. It provides a user-friendly presentation of the data, including themes, styles, declarative bindings, events, display of validation errors.
The ViewModel glues the View to the Model. It can interact through data bindings to talk to the view – presenting data, retrieving or saving data, talking to services, or handling any actions that might happen on the UI.

As shown in the diagram above, the ViewModel is the DataContext for the View, and that is how it gets data and commands. In general you should try and move as much code as possible out of the View and into the ViewModel – this makes it easier to unit test the code through the use of mock objects. The Model is fairly straightforward: the main step you need to take is to implement the INotifyPropertyChanged interface to provide a notification that the data has changed. Lastly, there are various techniques for binding the View to the ViewModel: in this session you’ll see them being bound with a ViewModelLocator.

Commands and Behaviors

What happens after you want to display data? For example, what if you want to perform some action based on a UI interaction? This is where commands and behaviors come in.

A command is something you can fire based on a user action that starts an event in the ViewModel. It uses a binding syntax to do that. Any control that derives from ButtonBase will let you bind a command directly to it. In the ViewModel you can create your own instance of ICommand (a good recipe for this is RelayCommand from the MVVM Light toolkit) to handle the event.

For other actions where a command isn’t possible (for example, a ListBox item selection), you can use a behavior. Some good pre-built options include EventToCommand (again from MVVM Light) or InvokeCommandAction (from Blend 4’s Interactivity DLL).

Services and Separation

As we’ve seen the primary role of the ViewModel is to perform tasks: GetBook, SaveToStorage, NavigateTo etc. However, as this becomes more complex, the ViewModel starts to include code to call web services, access third-party libraries, etc. It starts to make sense to create a separate service class that separates out this helper code and makes it available across multiple ViewModels.

So services provide related tasks to the caller, and are passed through the constructor using dependency injection (passing the class into the constructor as an interface). This abstraction makes the service very testable and easy to write, and keeps a clear delineation between the task and its physical execution on the disk or network.

Design-time Data

This is a topic that is sometimes neglected. A lot of the code in your application won’t run at design-time, because the designer can’t be waiting for a web service to return before it shows anything on screen. Design-time data ensures that you can see a fully-populated view of the UI when you’re developing or designing the application. Without some data, it’s almost impossible to style an application, or for that matter, to ensure that the bindings are right.

One way to provide design-time data is to use sample data (Expression Blend makes this relatively easy); another approach is to use design-time services. A proposed approach to this is to use a ServiceProvider, which is one line of code that automatically switches between design-time and run-time service code as appropriate.

Child Windows and Messages

The big question to answer with a child window: should you create a separate ViewModel, or use the parent’s ViewModel? Like most architectural questions, the answer is “it depends”. In some cases, the child window is deeply related to the parent child and is essentially an extension of the parent; in other cases, it’s really an unrelated screen. Depending on how you’re using the child window, either approach may be the appropriate.

One note: a child window doesn’t inherit the DataContext from its parent, so you either need to pass the ViewModel through the constructor or have the child window find the ViewModel it needs.

How should the child window be displayed? You can do this in many ways – often a delegated service is an appropriate choice. As a suitable pattern, we can use messaging to handle this.

Messages are events that provide a loosely-coupled model between the ViewModel and the child window. The process is usually triggered by a user action, which initiates a command to the ViewModel. If there is some business logic that needs to be run to determine whether to display the child window or not, that should be in the ViewModel. Then a message is used to send the request to display the window – either to a service or directly to the view. Some popular choices for the message pattern include the EventAggregator from PRISM and the Messenger class from MVVM Light.

WCF RIA Services and MVVM

RIA Services is very helpful in these kinds of applications: it takes care of managing change tracking for entities, provides methods for saving and reading data, generates entities and models, handles data validation.

With RIA Services, you create your Domain Services as you normally do; you can use the Entities as your models (they already implement INotifyPropertyChanged), and you get a DomainContext object that acts as a gateway to your services and provides change tracking.

For more on Silverlight, check out Silverlight TV and the upcoming Silverlight Firestarter event on December 2nd. Laurent Bugnion’s MVVM Light Toolkit is available here.

[Session CD50 | presented by John Papa]

PDC10: Unlocking the JavaScript Opportunity with IE9

Tim Sneath — Mon, 01 Nov 2010 20:46:46 GMT

Websites are exploding in the quantity of interactivity they contain: over the last few years, they have become fully-fledged applications with functionality and complexity at a level that was previously limited to desktop applications.

Scripting Engine Design Challenges

Prior to IE9, the JavaScript engine was built from an original design optimized for many different uses beyond IE (for example, Windows Scripting Host). As a result, it was designed as a component that could be dropped into different applications, with COM used to marshal data between the engine and its host application. COM-based marshaling added an overhead of 10-20% to the overall page load time, due to all the required boxing and unboxing.

Today’s engine needs to be optimized for a different set of scenarios: the browser is now by far the most prevalent usage scenario for our JavaScript engine, and these days there’s no question about which scripting language is dominant, so the browser has a far reduced need for extensibility.

On top of the architectural changes, we enable compilation to native machine instructions to provide a performance boost at execution time, particularly with large codebases. (See also the session on IE9 performance by Jason Weber for further details on this.)

Chakra

Chakra offers a hybrid approach, with both interpreter and designer built into the design. By having the interpreter running on the UI thread, we can stay responsive; but we still get the benefits of compilation through a background thread. It’s not a simple task, however – challenges we had to solve included keeping a tight memory footprint and optimizing compilation for real-world patterns.

The diagram below shows an architectural view of Chakra:

We don’t compile all code, instead, we keep a compilation queue; we speculatively compile some quantity of code, but use heuristics to prioritize the queue based on most frequently called functions, the size of the function etc.

We’ve spent time validating the design of Chakra against real-world websites. For page load times, we’re seeing an average of 14-15% improvement performance improvement – not just for the engine but across the entire stack.

IE9 introduces a new type system for JavaScript. Dynamic languages in particular need an efficient type system – types are created at runtime and multiple objects often have the same set of property. By providing a type evolution model that shares types, we can be much more efficient in these scenarios.

One important property-based technique introduced in IE9 is inline caching. Since property access is the most widely used operation and the same key of a key-value pair is often accessed multiple times on a call site, we simply cache the value for each call site.

The old JavaScript engine used to only work with 8-byte representations of numbers, even if they required less precision. Chakra introduces tagged integer support – with 31-bit numbers (a flag is used for the 32nd bit as an indicator); we go to a full 8-byte representation automatically if the number grows to require more then 31 bits of precision.

In a similar vein to tagged integer support, Chakra avoids conversion to UTF-16 where possible, retaining strings in UTF-8. This results in a gain of about 300-400K in working set and 3-4% load size wins for complex apps.

One piece of research which was particularly helpful in planning was done by Microsoft Research. The JSMeter project was conducted to measure real-world usage of JavaScript on top sites. One specific insight related to the percentage of code that sites load that is actually executed. For most large sites (including Amazon, Bing, CNN, eBay, Facebook etc.) only 40% of the code fetched is executed. Learning from this, Chakra uses a deferred parser, which reduces working set and increasing load times. (Note that you can also use the HTML <script defer> attribute to manually hint to the scripting engine that it needn’t execute a certain block of code during page loading.)

New ECMAScript 5 Features

The relatively recent release of ECMAScript 5 introduces a number of new keywords and language features. For backward-compatibility reasons, these features are only enabled in IE9 when IE9 Standards Mode is enabled (by default for external sites unless an older compatibility mode has been selected).

There is a very detailed blog post on the ES5 features added to Internet Explorer 9 on the IE engineering blog (also see this update).

You can see a fun test of browser support for various DOM capabilities on the IE Test Drive site.

[Session CD08 | presented by Gaurav Seth]

PDC10: Inside Internet Explorer Performance

Tim Sneath — Mon, 01 Nov 2010 19:14:27 GMT

Browser performance is a multi-dimensional topic: there are eleven different subsystems that taken together can affect the overall performance of a browser:

Different browsers may organize their internal implementation differently, but all these elements are important in their impact of the overall performance of a site.

An interesting lesson we can draw from the data we’ve measured in our research: site performance is not strongly correlated with the number of elements, CSS rules and amount of JavaScript code. Many people assume that JavaScript is the most significant indicator for browser performance, but the sample shows that it accounts for less than one-quarter of the overall client page load time.

So the key lesson is that browser performance requires all the subsystems involved in page display to be optimized, rather than just the script subsystem. In IE9, we have rewritten a number of the eleven subsystems for maximum performance, and we’re going to cover a couple of these in greater detail.

JavaScript

Starting with JavaScript, IE9 introduces the new Chakra engine.

JavaScript engines can be placed on a continuum from a pure interpreter to a pure compiler. But picking one or the other end of the spectrum introduces compromises. IE9 is the first browser to do both: to build a full interpreter and a full compiler that are truly integrated. Because the compilation happens in parallel with the rendering, with every compiled function becoming available as soon as it is ready, the compiled code is available quickly to the page, while the interpreter can be used in the meantime.

This architecture makes sense because of the growth of multi-core client machines running Windows. Our data shows that the mean average number of cores on a Windows Vista or Windows 7 machine (i.e. machines that support the system requirements for IE9) is 2.46. In IE8, the ecosystem was not yet ready for this change, and so the interpreter there only takes advantage of a single core.

Another aspect of the change is the way the JavaScript engine integration has changed from IE8. In the past, COM was used as the bridge between the various language engines and the browser. This offered a lot of extensibility, but at an overhead for the primary language of the web. In IE9, we’ve built JavaScript directly into the browser as a first-class citizen, enabling the compiler and the browser engines to communicate directly via shared memory. We still support other language engines via the traditional COM mechanism.

One last interesting piece of data – we crawled the API usage of the top 7,200 websites worldwide, and discovered that the Pareto principle applies pretty accurately. Over 80% of the APIs in JavaScript are unused on 90% of the top sites. And surprisingly, indexOf() is the most commonly called function (not getElementById() as most people assume). This kind of data helped us optimize Chakra for real-world usage rather than synthetic benchmarks.

Hardware-accelerated Graphics

Every Windows computer has a GPU these days, and on Windows Vista or above, over 80% of machines have a graphics score of greater than 3.0. The GPU has become a highly-specialized computational engine optimized for graphics. Ten years ago, the CPU and GPU were roughly comparable in terms of the number of floating point operations per second each processor could deliver; today, the fastest GPUs in the world have a 10x advantage over the fastest CPUs in the world, delivering over a teraflop of computing power.

IE9 fully unlocks the GPU, using DirectX technologies like Direct2D and DirectWrite to accelerate everything in the browser: images, text, video, SVG, canvas, and CSS3. This has a dramatic impact on the performance of Internet Explorer 9 for visually-intensive websites, both compared to IE8 and indeed competitive browsers, as the following CPU usage graph shows while profiling one animation step in the Flying Images demo:

Other browsers are starting to add hardware acceleration – but no other browser available today adds hardware acceleration for more than a couple of technologies – for example, text, video, SVG remain CPU-bound on most other browsers.

[Session CD09 | presented by Jason Weber]

PDC10: Mysteries of Windows Memory Management Revealed: Part Two

Tim Sneath — Sat, 30 Oct 2010 03:31:35 GMT

In the last session, focusing on virtual memory, it was noted that there was almost no connection between virtual and physical memory. The only connection is that the system commit limit is the sum of physical memory and the size of the paging file(s). This session focuses on the physical memory aspects of the memory management architecture in Windows.

Physical Memory and Working Set

The working set is the physical memory that Windows gives to your process, given to you when you demand it by touching the virtual address space. A process starts with an empty working set – as it references pages that aren’t in the working set, it incurs a page fault. Many such page faults are resolved simply from memory (for example, if you load an image that is already in the file cache).

Each process has a working set default minimum and maximum. Windows doesn’t pay any attention to the maximum working set; Windows uses the minimum to commit that amount of memory, as well as to lock memory.

At some point, the memory manager decides the process is large enough; it then gives up pages to make room for new pages. If your process is ballooning, the memory manager will tend to favor it because it is obviously memory-hungry; but at some stage, it will start to pull pages out of the working set that are least recently used before it will allocate new memory to that process.

Unlike other OS, it is a local page replacement policy, meaning that it will pull the pages from the requesting process.

The working set consists of shareable and private pages; there are performance counters that measure this. Shareable working set is effectively counted as “private” if it is not shared. Note that the working set does not include trimmed memory that is still cached.

Windows Task Manager only offers the private working set figure; Process Explorer gives you a more detailed view. Remember – it’s only when you touch the memory that is committed that it becomes part of the private working set. Comparing testlimit with –m, –r and –d switches demonstrates the differences here.

Physical Memory Page Lists

The system keeps unassigned physical pages on one of several page lists in the Page Frame Number (PFN) database, each maintained as FIFO list:

free (available for allocation but has dirty data in it);
modified (previously belonging to a process but needing to be written to a backing store before it can be reused;
standby (still associated with a process but not included in the working set);
zero (zeroed out memory safe for allocation),
ROM (read-only memory)
bad (pages that failed internal consistency checks).

Note that meminfo gives you a way to investigate these page lists: Alex Ionescu provides further helpful commentary on the tool on his blog.)

When Windows starts, all memory is in the free page list. As a process demands memory, it is faulted in from the zero page list (however, the free page list can be used if the memory is to be used for a mapped file, since the data will be overwritten before the process sees it). If a page is pulled from a process, it may be moved to the modified or the standby page, depending on whether it contains private data that needs to be flushed or not. When a process exists, its pages are moved to the free page list.

There are two threads that are specifically responsible for moving threads from one list to another. Firstly, the zero page thread runs at the lowest priority and is responsible for zeroing out free pages before moving them to the zeroed page list. Secondly the modified page writer is responsible for moving pages from the modified page list to the standby page list, first writing out any data.

What happens if the zero and free pages are exhausted? The memory manager starts using the standby page list; if that is exhausted, then the modified page list can be used (once the modified page writer has flushed the content and moved it to the standby page list). If all these pages are exhausted, the last resource is to remove memory from the working set.

With this information, we can more helpfully interpret the data provided by Task Manager.

The Available field (right) shows all the pages in the zero, free and standby lists.
The Cached field shows all the pages in the standby and modified page lists as well as the system (kernel) working set.
The Free field shows just those pages in the free and zero page lists.

Rammap is another useful tool, showing the most detailed breakdown of what’s going on in RAM at the time it takes the snapshot. It breaks down all the memory in the system by type and page list. For processes, it shows the private working set for each process as well as memory for that process on the standby or modify page list as well as kernel memory in the page table.

As you can see, having a low “free memory” value in Windows is normal – and a good thing. In fact, a technology like SuperFetch has the goal of reducing free memory (moving pages from the free to the standby list as it caches files into memory).

SuperFetch is used to proactively repopulate RAM with what it believes is the most useful data: it takes into account the frequency of page usage, and the usage of the page in the context of other pages in memory. Interestingly, the choices it makes are also influenced by a time-based heuristic – it understands that users launch different applications at the weekend than during the weekday, and at the evening than the daytime. SuperFetch is disabled in Windows 7 if the operating system is booted from an SSD drive, because the primary benefit is to reduce random read seeks on a platter-based hard drive.

It’s worth noting that there are actually eight standby page lists in practice on Windows Vista and above; this is used to ensure that the least important standby pages are scavenged first. (Rammap can show you how much memory has been repurposed from each of the standby priority lists.)

A common question: do you have enough RAM in your system? There’s actually no sure-fire way to tell if you have enough memory. If available memory is low for a considerable length of time, then you probably could use more. You can check Process Monitor to see if there are an excessive number of reads from the paging file (there’s no performance counter for paging file reads).

Mark closed with some examples of how certain memory usage can be hard to or inspect or detect: a shared memory leak, large quantities of reserved but uncommitted memory, locked memory, driver locked pages and AWE pages.

[Session CD02 | presented by Mark Russinovich]

PDC10: Mysteries of Windows Memory Management Revealed: Part One

Tim Sneath — Fri, 29 Oct 2010 00:16:34 GMT

Fundamentals of Memory Management

Windows has both physical and virtual memory. Memory is managed in pages, with processes demanding it as necessary. Memory pages are 4KB in size (both for physical and virtual memory); but you can also allocate memory in large (2-4MB, depending on architecture) pages for efficiency. In general, there are very few things in common between physical and virtual memory, as we’ll see.

On 32-bit (x86) architectures, the total addressable memory is 4GB (2³²bytes), divided equally into user space and system space. Pages in system space can only be accessed from kernel mode; user-mode processes (application code) can only access data that is appropriately marked in user mode. There is one single 2GB system space that is mapped into the address space for all processes; each process also has its own 2GB user space. (You can adjust the split to 3GB user / 1GB system on PAE-enabled systems, but the 4GB overall address space limit remains.)

With a 64-bit architecture, the total address space is theoretically 2⁶⁴ = 16EB, but for a variety of software and hardware architectural reasons, 64-bit Windows only supports 2⁴⁴ = 16TB today, split equally between user and system space. Mark: “I think I’m pretty safe in saying that we’ll never need more than 16TB, but people smarter than me have been proven wrong with statements like that, so I’m not sure if I should make that claim or not!”

Virtual Memory

Within a process, virtual memory is broken into three categories: (i) private virtual memory – that which is not shared – e.g. the process heap; (ii) shareable – memory mapped files or space that you’ve explicitly chosen to share; (iii) free – memory with an as yet undefined use. Private and shareable memory can also be flagged in two ways: reserved (a thread has plans to use this range but it isn’t available yet), and committed (available to use). Why should you reserve memory? It allows an application to lazily commit contiguous memory. For example, a stack: the system only needs to commit a small amount in advance, and can grow as appropriate by committing previously-reserved memory.

Task Manager only lets you see the private bytes (“commit size”); indeed, most virtual memory problems are due to a process leaking private committed memory, since it backs the various heaps in the system. But this doesn’t offer a full view of the address space – it doesn’t account for shareable memory that isn’t shared (e.g. a DLL only loaded by this process). Fragmentation can also be an issue, causing the address space to be exhausted prematurely. Process Explorer lets you split out the overall virtual memory used by a process from the private bytes; another useful tool is VMMap (with a new v3.0 released for PDC10), which provides a really deep level of inspection into the virtual memory used by a given process.

In the example above, the committed memory is about 54MB, but only a tiny amount is private. The middle section shows how the memory is allocated – images (DLLs and executables), mapped files, shared sections, heaps (unmanaged and managed), the stack region, private data (memory that is private and doesn’t fall into one of the other categories, e.g. if you call VirtualAlloc()), and page tables. If you click on one of these rows, you’ll filter the details section at the bottom of the window.

Fragmentation can be an issue, as mentioned earlier. Mark demonstrated creating a large number of threads with testlimit –t. The number of threads he was able to create on a 32-bit machine was limited to ~2900 even though in theory he should have been able to create more, because the address space was so fragmented that there were no more contiguous spaces of 1MB or more (1MB being the default size).

Mapped Files

Mark then demonstrated how mapped files are used heavily by Explorer. Files are mapped regularly so that it can get access to the resources and metadata from within them. You can trace file mappings with Process Monitor – so if you don’t understand why a file is mapped, you can see how the DLL got loaded by capturing a snapshot filtered to “Load Image” operations and examining the stack at the point the image was loaded.

You can also use VMMap to compare the difference between two snapshots of a process. In the given example of loading a file into Notepad, the committed memory grew from the 54MB above to over 100MB – with most of it coming from image loading.

New in VMMap 3.0 is tracing, which enables you to launch a process with profiling and track virtual and heap activity over a period of time.

System Commit Limit and Paging Files

Certain kinds of process committed memory are charged against the system commit limit. System committed memory is that which is backed either by the paging file or physical memory. Not all memory in the address space is system committed memory – for example, the notepad.exe image or its DLLs are backed by disk, so if the system tossed out of memory and Notepad wanted to access it again, it could simply retrieve it from notepad.exe on disk.

When Windows needs to reallocate private memory, it has to store it in the paging file (otherwise it would be missing when it needed to retrieve it). When that limit is reached, you’ve run out of virtual memory. You can increase the system commit limit by adding RAM or increasing the paging file size: if paging files are configured to expand, that means that the system commit limit may not actually be the maximum limit.

So how is the paging file size determined? By default, it is automatically managed by Windows based on the RAM available: on systems with >1GB RAM, the minimum is equal to the size of the RAM and the maximum is 3x RAM or 4GB (whichever is larger). You can manually adjust this, however.

What’s ironic about this algorithm is that in the dialog, the recommended value is often a completely different number (on my 8GB machine, it’s 1.4x RAM), which as Mark notes fails to inspire confidence in the algorithm.

You can view system commit charge and limit from Task Manager or Process Explorer; you can test exhausting the system commit limit by running testlimit –m. (Be careful – this will stress your machine to its limit!)

So how should you size your paging file? Many people will give you advice based in multiples of the RAM, but that isn’t good advice. You should look at the system commit peak for the most extreme workload and if you want to apply a multiplication factor (1.5x, 2x), apply it to that value instead. Note that it’s important to ensure that the paging file is big enough to hold a kernel crash dump. Although you can turn off the paging file altogether, it is useful – the system can page out unused, modified private pages, providing more RAM for real workloads.

[Session CD01 | presented by Mark Russinovich]

PDC10: Session Time!

Tim Sneath — Thu, 28 Oct 2010 21:27:49 GMT

Now that the keynote is over, my formal duties for the event are mostly complete. Lots going on still, and I hope to meet a number of you in person – but I thought I’d take a little downtime and watch a few sessions. Rather than just greedily hoarding all the knowledge I learned for myself (incidentally, did you know that Apple require you to sign a non-disclosure agreement to attend their breakout sessions?), I’d prefer to share my notes with you. So over the next few posts you’ll hopefully get some useful distillations of several client-related sessions from the event.

It goes without saying – if you don’t like my choices, you can watch it all live yourself online at http://player.microsoftpdc.com/session. Let’s see how this goes!

Demo Failure: The Answer to the Puzzle

Tim Sneath — Thu, 28 Oct 2010 15:11:11 GMT

Yesterday I shared the story of the Steve Ballmer keynote demo that was breaking and the urgent call I got to help figure it out.

I left you hanging as to the solution; a few of you posted interesting ideas of what might have gone wrong. But Richard Cooper was the first to figure it out – congratulations!

The answer can be found in the defaultnew-msh.js file. Here’s the relevant function:

(function(){

  if(typeof window.external.msIsSiteMode!="undefined"){

    function d(){

      var o=new Date;

      if(o.getHours()==8||o.getHours()==9||o.getHours()==10||

                 o.getHours()==11||o.getHours()==12||o.getHours()==13){

        window.external.msSiteModeClearJumpList();

        window.external.msSiteModeCreateJumpList("MyPlate Reminder");

        window.external.msSiteModeAddJumpListItem("Track Your Breakfast",

                             "/myplate/","/media/images/ico/bell.ico");

        window.external.msSiteModeSetIconOverlay("/media/images/ico/bell.ico",

                "Reminders");

        window.external.msSiteModeShowJumplist()

      if(o.getHours()== 14||o.getHours()==15||o.getHours()==16||

            o.getHours()==17||o.getHours()==18||o.getHours()==19){

        window.external.msSiteModeClearJumpList();

        window.external.msSiteModeCreateJumpList("MyPlate Reminder");

        window.external.msSiteModeAddJumpListItem("Track Your Lunch",

                             "/myplate/","/media/images/ico/bell.ico");

        window.external.msSiteModeSetIconOverlay("/media/images/ico/bell.ico",

                "Reminders");

        window.external.msSiteModeShowJumplist()

      if(o.getHours()==20||o.getHours()==21||o.getHours()==22||

             o.getHours()==23){

        window.external.msSiteModeClearJumpList();

        window.external.msSiteModeCreateJumpList("MyPlate Reminder");

        window.external.msSiteModeAddJumpListItem("Track Your Dinner",

                             "/myplate/","/media/images/ico/bell.ico");

        window.external.msSiteModeSetIconOverlay("/media/images/ico/bell.ico",

                "Reminders");

        window.external.msSiteModeShowJumplist()

      window.setTimeout(function(){

d()

      ,3E5)

d()

})();

Now you can hopefully see that the notifications are set up based on the time: the site authors had designed around certain time windows when users would be tracking breakfast / lunch / dinner. But (by design) there’s no notification between midnight and 8am.

I was tempted to tell the demo team that the demo would magically start working in about half an hour or so, but I decided that was a bit unfair to their blood pressure. They set the clock forward an hour, and the demo ran flawlessly.

It's a good example of how demos can be unpredictable - despite your best efforts to rehearse and prepare, there are so many variables in the system for a keynote demo that you can expect something unexpected.

I’m sat in the PDC keynote room this morning for the final run-through – we finished rehearsing last night at 1am and we started this morning at 5am. Behind the scenes, there’s a whole conference room full of equipment: video streaming equipment to broadcast the event around the world, a bank of about forty demo machines (primary and backup for each demo), video and lighting control, a slide editing suite and site production services.

There are a whole host of challenges that are only exposed in this scenario: as an example, we need to remote a USB cable from a Windows Phone to a PC backstage (and provide a second one as an emergency backup); we need to provide consistent and reliable networking for myriad devices even when the wifi and cellular networks are saturated; we need to be able to switch between all forty machines from a single demo podium. Last night, we saw a Windows 7 error message that I’d never seen before – we’d exceeded the USB specification by chaining five hubs together in a certain configuration. Given all this, you can probably imagine why demos can fail: ironically, there comes a point where redundancy introduces so much complexity that it actually increases the risk of failure.

Crossing fingers for a demo failure-free morning! Be sure to tune in, won’t you? We’re broadcasting live over the internet.

Demo Failure: A Puzzle with an Amusing Ending

Tim Sneath — Wed, 27 Oct 2010 19:58:09 GMT

Tomorrow is the start of the PDC, and while I have a quiet moment before the final keynote rehearsals start, I thought I’d share this little story with you.

I got an urgent email very early yesterday morning as I was just waking up from a colleague who was about to go on stage to do a demo in a Steve Ballmer keynote. The demo showed how IE9 enables web apps to feel more like Windows desktop apps, using features like pinned site mode, jump lists, notification icons and so on. The issue was that the notification icons just weren’t popping up on cue. They’d worked perfectly well the night before during rehearsals, but all of a sudden they weren’t appearing.

Everyone was racking their brains to try and figure out what was going wrong. Had someone tinkered with the demo machine? Had the website changed? I’ve been there before, and you can probably imagine how stressful it is to hit a demo issue so close to a CEO keynote.

From the relaxed atmosphere of my bedroom, I decided to go have a quick look at the code to see why it was failing. I was amused to discover the source of the issue. Rather than jump straight to the answer, I’ll give you the chance to figure it out for yourself – see how long it takes you, and go ahead and post in the comments section when you’ve figured it out.

The site in question is LiveStrong – co-founded by the Lance Armstrong Foundation. (Hit F12 when you’ve opened the link below to open the IE Developer Tools.)

Presenting IE6 with the Lifetime Achievement Award

Tim Sneath — Fri, 22 Oct 2010 17:34:27 GMT

I want to take you on a journey. A journey to a land that is at once both familiar and strange.

Step into my time machine and let me take you back to the last decade. Sit down and buckle up!

We’re eight months into the new millennium. George W. Bush has recently started his first term of office, Enron has recently been named “America’s Most Innovative Company” by Fortune magazine, the first Lord of the Rings movie is still in production and the most famous wardrobe malfunction since Lady Godiva is still three years away. This is the era of Internet Explorer 6.

I thought it might be amusing to take a look at the web that IE6 was built for, with thanks to the Wayback Archive, Bing and a few other resources.

Here is the news from CNN the week that IE launched:

Yahoo is promoting Free 56K Internet Access:

Wikipedia has reached the giddying heights of 6,000 articles:

Apple have just launched some cool new iMac models and a G4-based workstation:

What about web browsers? Firefox is just some dude’s blog:

OK – so what’s the alternative to Internet Explorer then? Glad you ask – let me introduce you to Netscape 6:

The system requirements for IE6 were pretty demanding: you needed Windows 98 or greater. If you were running a six year old operating system, you had to upgrade first. (Sounds familiar?)

But it was worth it – after all, Internet Explorer 6 won PC Magazine’s “editor’s choice” award, with the reviewer praising it for “offer[ing]few quirks and many superb features”.

Back to the present. Times have moved on a long way since IE6 was the belle of the ball. It’s dying quickly – in the US and many developed countries, it has 5% or less market share. Some have already held a funeral for it – we sent flowers, naturally.

We are as keen to see the world move on from IE6 as everyone else: but while it’s not necessarily a popular message to convey, we don’t think it’s up to us – it’s our customers’ choice when they choose to move, even if it makes our lives harder. Over the nine years of IE6’s existence, going back to the days before web standards were as well established as they are now, developers (particularly in enterprise environments) took a dependency on IE6 that takes time to migrate away from. Backwards compatibility and long support lifecycles are a reality for enterprise development, as we all know.

In closing, IE6 is a poor choice of browser for the internet of 2010. But it’s fun to look back at the world it was engineered for, and perhaps it explains a little why IE6 doesn’t support HTML5.

More on the history of Internet Explorer can be found here.

Silverlight Hallowe’en Card

Tim Sneath — Wed, 20 Oct 2010 00:25:24 GMT

Love this Hallowe’en card creator from Archetype:

Built using Silverlight, it enables you to carve your own pumpkin, add suitably demonic or gremlin-like sound effects using Silverlight’s built-in microphone integration support, and then share the final result with a friend. This is really cool – and a good example of the kind of experience that remains the preserve of plug-ins for now at least, even with the strong HTML5 support now emerging in modern browsers.

After a very messy weekend with some friends carving the real deal, my kids are going to have a lot of fun with this – try it out!

Pushing the Boundaries of HTML5 Gaming: Jitterbugs

Tim Sneath — Mon, 11 Oct 2010 15:50:30 GMT

For many developers, the acid test of whether HTML5 is ready for primetime is gaming. Few other scenarios push a technology as far: with demands for low-latency input, intensive rendering of animated graphical content, layered audio, full-screen display, and a consistent framerate despite inconsistent workloads.

Given the support for full hardware acceleration in IE9, we were eager to see how far we could push the platform. Until now, there has not been an impressive selection of HTML5 games, or rather, the games that are there around are limited in their level of interactivity. For instance, the most highly rated games on Chrome Experiments at the time of writing are implementations of Solitaire and Tetris, games that were well within the capabilities of Windows 3.1.

We felt the web deserved better, and so we commissioned one of the world’s leading rich internet application designers, Cynergy, to see what they could put together in a few short weeks with Internet Explorer 9 beta. The game they put together, Jitterbugs, is in my opinion the most intensive HTML5 game available so far, and it certainly shows off why we need hardware acceleration in our browsers if they are to serve us well as a foundation for client application development.

Jitterbugs is (by any definition), an extensive example of HTML5 usage, with in particular both Canvas 2D and audio features used to great effect within the game. Indeed, the primary element of the DOM tree is a large (1100x800) canvas on which the game surface is rendered. There’s very little HTML itself in the program – it’s primarily used for preloading audio assets and creating the frame for the game, with JavaScript used to handle the canvas rendering and interactions, as you’d expect.

In the game, the objective is to use your mouse (or a touchscreen if you have one at your disposal) to circle two or more identically-colored bugs, which are “jittering” around the screen at a fairly slow pace. The faster you net the bugs, the more points you score. If you complete an entire screen, you get a nice win animation before the next level, where there are more bugs than previously. Over a few levels, the intensity builds up – you need to start scoring combos by netting the same colored bug repeatedly, which slows down the jittering and makes it easier to capture more of them. At the end, you can tweet your final grand score as a challenge to others!

Inside the Code

Turning to the JavaScript for a moment, Jitterbugs is very well-structured and surprisingly short – the entire game is less than 2,500 lines of code, spread across four files (audio.js, controller.js, gameLogic.js and band.js), which I’ll briefly describe.

audio.js contains functions that are used to transition between individual layers of sound as well as reset the audio. When you first begin a level, the sound is silent, and then as you start to net bugs the various instruments begin to play, gradually the bassist and other instruments join in, and by the time you get to the end, the entire band is swinging.

The audio files themselves are loaded in HTML, for instance:

<audio id="s0layer1" preload="preload">

  <source src="audio/s0layer1.mp3" type="audio/mp3" />

</audio>

<audio id="s0layer2" preload="preload">

  <source src="audio/s0layer2.mp3" type="audio/mp3" />

</audio>

<audio id="s0layer3" preload="preload">

  <source src="audio/s0layer3.mp3" type="audio/mp3" />

</audio>

Note the use of the preload attribute, which hints to the browser that the files can be loaded asynchronously as resource availability permits.

controller.js is responsible for the flow of the game: it handles drawing things like the preloader screen, animating the “stage” (e.g. the windmill and tower signs in the odd-numbered levels) and setting up event listeners for the mouse events. It also contains the game loop itself, which looks like this:

function gameLoop() {

  canvasRoot.width = STAGE_WIDTH;

  updateBkg();

  updateStage();

  updateGameboard();

  updateResults();

  updateBugs();

  updateGameUX();

  updateBand();

  updateFrame();

  updateAudio();

The game loop is triggered with a call to setInterval, a JavaScript method which calls the function every 20ms:

masterLoop = setInterval(gameLoop,20);

This ensures the UI itself is drawn at a constant 50fps rate (assuming the browser has finished drawing the previous frame and handling any associated events by the time the interval has completed.

gameLogic.js contains most of the core game itself, in terms of displaying the various sprites and managing interactions between them (e.g. lassoing the bugs). The interesting piece to note here is how the images are drawn on the screen with a given rotation. Here’s a simplified portion of the code: for drawing the bugs on-screen:

for (var i = 0; i < introBugs.length; i++) {

  temp = introBugs[i];

  temp.x += temp.vx;

  temp.y += temp.vy;

  temp.vy += Math.random();

  temp.vx += Math.random();

  ctxRoot.save();

  ctxRoot.translate(temp.x, temp.y);

  ctxRoot.rotate(Math.atan2(temp.vy, temp.vx));

  ctxRoot.drawImage(bugImages[temp.imgIndex], -.5*temp.width,

    -.5*temp.height, temp.width, temp.height);

  ctxRoot.restore();

The important thing to note is that it’s the canvas being rotated, rather than the graphical elements themselves. The process is analogous to drawing a stick figure at an angle on a piece of paper, where you’d likely rotate the paper and then draw the figure upright at that angle before returning the piece of paper to its original position. In the same way, here we save the position of the context with (ctxRoot.save), translate and rotate the context (ctxRoot.translate / ctxRoot.rotate), draw the image (ctxRoot.drawImage), and then restore the context to its saved position (ctxRoot.restore).

This is a little counter-intuitive: as Rick, the developer notes, there are no good tutorials currently out there that explain this, how to do it, or even why it works. Rotating the drawing context isn’t an obvious solution, particularly to developers who come from a Flash or Silverlight world.

Lastly, band.js contains the functions that draw and animate the band that appear at the bottom of the screen. It wasn’t until I looked through the code for the first time that I realized that the band had two different outfits, which alternate with each level along with the background imagery and music. Each band member is composed out of a number of limbs – left and right arms, a body, and the instrument itself, which are drawn on the canvas in the same manner as the bugs, listed above.

Fun Trivia

This project didn’t always seem to be going in the right direction. Having submitted a great concept for an ambient touch-based musical experiment, Rick sent me a mail a couple of weeks in to say that he’d got a new idea for the project of building a game that involved lassoing bugs while some birds sang a song in French. There were a few sleepless nights on both sides because this sounded too surreal to be appealing to a broad audience. Fortunately, this is one of those cases where if you have a good designer you should just trust them rather than trying to manage by committee – I’m tremendously pleased by the final result, even if I had no idea how it would turn out four weeks prior to the beta launch.
Cynergy worked with two award winning musicians to create the fantastic music for the game. They had a great write up about it at TBD (the local news site for Washington DC, where Cynergy are based). To our collective amusement, the "girl" singing the songs is actually one of the two male artists (Kokayi) whose voice was modified in the studio by the other artist (DJ Eurok).
The game was originally designed with SVG, because we hadn’t at that time released a version of IE9 that supported the Canvas 2D APIs. Over a period of time, the code got gradually rewritten until it was entirely using Canvas. (I’ll feature another project in a little while that is SVG-centric, to redress the balance.)

Outcomes

We’re really happy with the project – I think it’s a really fun game that pushes HTML5 far further than I imagined it could go. When I first showed it to some of the Program Managers responsible for Canvas and other parts of the rendering engine, they were genuinely astonished that HTML5 and what they’d built could handle this kind of intensive experience. And without full hardware acceleration, this game just doesn’t work well at all – try it in another browser to see that in practice. It’s not because Jitterbugs does anything to optimize for IE itself – it’s just because this kind of experience needs to harness the full underlying power of the PC.

The other point of interest is that this was the first HTML5 project for Rick Barraza, the designer / developer responsible for this game. As he commented in an interview with the marketing team:

“I had already dismissed HTML5 as still not being good enough. If it wasn’t for a commission by my company to spend a couple weeks and deep dive into the Platform Preview, I probably wouldn’t have tried it. I think a lot of interactive media people like myself may be in that same boat right now. I had seen other people’s work with Canvas in other browsers, and I figured IE9 would be more of the same thing. But I’ll openly admit that I was premature in that. Once the Platform Previews came out that supported Canvas and also, more importantly, showed off the true power of full hardware acceleration, everything changed for me. I was finally able to dive deeply into HTML5 and start creating things that were on par with what I do in the other interactive media languages I work with. It was really impressive and now I’m very glad that I’ve had this chance to upgrade my skill set so quickly. My toolbox just got bigger.”

This is great news if you care about having a powerful, mainstream HTML5 platform. May your toolbox also get bigger!

Never Mind the Bullets: The “Making Of” Video…

Tim Sneath — Thu, 07 Oct 2010 17:51:31 GMT

This is really nicely done – a behind-the-scenes video for the Never Mind the Bullets project I featured a couple of days ago…

Making Of: Never Mind the Bullets from Steaw Web Design on Vimeo.

The Best Job in the Company…

Tim Sneath — Thu, 07 Oct 2010 00:33:41 GMT

I’m serious.

I genuinely think this is the single most exciting open position in Microsoft today.

After the release of Internet Explorer 9 beta, nobody should be questioning our commitment to delivering a hardware-accelerated HTML5 platform that can form the foundation for the next generation of web applications.

Microsoft is sometimes accused of being slow to move; but when we do set a course and direction, we can be faster and more focused than perhaps any other company of our size.

We’re about to hire our next IE9 / HTML5 Technical Evangelist, who can be the public face of Microsoft in the web community. This is a senior position, based out of our corporate headquarters in Redmond, WA.

This is not an ordinary job, and it requires an extraordinary individual. Someone who is a developer at heart, but who has a whole host of other skills beyond technical depth: dynamism, an entrepreneurial nature, creative talent, strategic awareness. Someone who is a natural ambassador and communicator. Someone who has presence. Someone who is dedicated to changing the world and ready to give their all to something that endures and touches tens of millions of people.

Are you the one?

Real-World Implementations of Pinned Sites with IE9

Tim Sneath — Mon, 04 Oct 2010 23:49:03 GMT

Beyond the work we’ve done to support HTML5 and other standards in Internet Explorer 9, the engineering and design teams also spent a lot of time thinking about how to enable sites to blend in more naturally with the rest of the applications on your system. Today the boundary between a site and an application is too pronounced: for example, why should you have to build a fully-fledged application just to get an icon on the start menu? It would be great if developers had fewer limitations and more choices, and users had a more consistent experience.

In IE9 we introduced a feature called Pinned Sites that makes it easy for a user to add a site to their taskbar or start menu, just by dragging the tab (or the icon to the side of the address bar) to the intended location. The site will reopen in its own window, with the browse frame and navigational controls integrating the site’s icon and primary color.

While the basic Pinned Sites feature works without any changes required on the site, you can optionally add to the taskbar integration by adding jumplists, custom thumbnail preview buttons, icon overlays and extended site metadata. Just two weeks after the launch of IE9 beta, many of the most popular sites on the Internet have implemented support for this feature. Some good examples of adoption with sites you might use on a daily basis are CNN, Facebook and Twitter, and I thought I’d take a moment to pick this apart a little to show you what one of these (Facebook) has done.

For the purposes of this discussion, I’m looking at Facebook. If you check out the <head> section of the markup for the home page of Facebook, you’ll see something like the following (edited for readability and line-length):

<meta name="application-name" content="Facebook"/>

<meta name="msapplication-tooltip" content="Start the Facebook App"/>

<meta name="msapplication-starturl" content="/"/>

<meta name="msapplication-window" content="width=800;height=600"/>

<meta name="msapplication-task"

 content="name=News;action-uri=/home.php?sk=nf;icon-uri=/images/news.ico"/>

<meta name="msapplication-task"

 content="name=Messages;action-uri=/home.php?sk=inbox;icon-uri=/images/messages.ico"/>

<meta name="msapplication-task"

 content="name=Events;action-uri=/home.php?sk=events;icon-uri=/images/events.ico"/>

<meta name="msapplication-task"

 content="name=Friends;action-uri=/home.php?sk=ru;icon-uri=/images/friends.ico"/>

<link rel="shortcut icon" href="http://static.ak.fbcdn.net/facebook.ico" />

Taking a quick glance through the various fields included here, application-name simply provides a shortened title of the site that is suitable for use in a menu. This comes straight out of the HTML5 specification (Section 4.2.5.1, “Standard metadata names”), and also provides the <meta>-based pattern for the additional metadata that a site can supply.

Beyond the application-name field, Internet Explorer 9 also acts on a number of other defined fields; since these are not part of the specification today, we added a vendor prefix to the application-foo convention in the same way that is commonly adopted for CSS today. The tooltip and window fields are relatively self-explanatory; the starturl field simply represents the initial page that should be opened (by default the current page, but often you’ll want to override this to the root).

The msapplication-task field provides support for up to five tasks, which in IE9 are exposed as jumplist entries. You can set the name, the link that it points to and the location of a custom icon if you want to show something other than the favicon (which is selected in the final line of markup). In theory, this field could be used for other purposes (e.g. on a mobile device it could be used to pre-populate a context menu): there’s nothing intrinsically tied to a jumplist here.

There are other optional fields you can set, incidentally – full documentation is available at MSDN.

So that takes care of the statically-declared content on the site. One other nice addition is the way that Facebook takes advantage of the overlay icon to surface notifications (e.g. new friend request or new wall post). As you can see in the screenshot to the right, there is a red asterisk bubble overlaid on the Facebook icon, indicating new activity has taken place that I might want to review.

You can set this icon using the msSiteModeSetIconOverlay()function, which takes one parameter containing the URI for the icon itself and optionally a second parameter with a tooltip.

Buried in the JavaScript code on the site, there is a snippet of code which looks very roughly like this:

if(window.external && external.msIsSiteMode())

(function() {

  var wext=window.external;

  var icon='/images/icons/notif.ico';

  var news={messages:0, notifications:0, requests:0};

  var updateIcon = function(f,e){

    news[e.type]=e.count;

    if(news.requests + news.messages + news.notifications > 0)

      wext.msSiteModeSetIconOverlay(icon);

    else

      wext.msSiteModeClearIconOverlay();

};

  wext.msSiteModeClearIconOverlay();

  Notifications.subscribe(['messages-updated',

    'requests-updated','notifications-updated'], updateIcon);

})();

Here you see how the icon overlay is set where there are more than 0 items to show, but this code is only parsed if msIsSiteMode() returns true – that is, when the site is running in pinned mode. The window object is a safe place to hang browser shell logic, and is used already for similar purposes that relate to the frame rather than the content (e.g. setting favorites or manipulating tabs).

So we’ve taken an in-depth look at Facebook, but there’s already a plentiful list of other sites that also implement deep support for Pinned Sites. Some other well-known examples beyond the three I’ve already mentioned include: MySpace, Amazon, Zillow, Cracked, break.com, MSN, WordPress, LinkedIn, USA Today, IMDB, WSJ, Flixster, Photobucket, Neowin, and discovery.com. We’re also seeing other frameworks adopt support, for example Umbraco (one of the most popular .NET-based CMS solutions) has an extension to add Pinned Sites support to the admin console.

HTML5: A Specification or a Platform?

Tim Sneath — Mon, 04 Oct 2010 05:56:24 GMT

An interesting discussion broke out in the comments to the blog post on Never Mind the Bullets during the weekend over my allegedly loose usage of the term HTML5 to describe the site.

Here’s the problem: while strictly HTML5 refers to a draft specification published by the W3C, HTML5 is increasingly being used (particularly in the media) as a generic term to describe the web platform that is built on an emerging generation of web standards. In this context, the term is used as a catch-all for a whole suite of specifications. As a fairly typical example, this InfoWorld article quotes a vast array of luminaries in an attempt to suggest that HTML5 is an emerging competitor to plug-ins like Flash or Silverlight.

Yet the HTML5 specification itself is taken up with very different concerns than many people assume – a large portion of the specification concerns itself with tightening the parsing and manipulation of HTML documents; a considerable proportion of the new additions to the specification have to do with form elements and improved semantic markup. While video and audio are included in the core specification, the specification doesn’t define many other technologies that are often considered part of the emerging web. These are instead described in external specifications (of varying levels of completion): for example, SVG 1.1, Canvas 2D API, WOFF File Format, WAI-ARIA, and so on. CSS is itself a whole family of specifications.

Complicating matters still further, some draft features that are not part of the W3C specification are included in a parallel HTML5 proposal from the WHATWG, a separate community led by a subset of browser vendors (Tim Anderson has a good primer for those who are interested).

So we have an overload of terminology: while at times it’s reasonable and appropriate to distinguish between each of these technologies, it creates problems. A purist will argue that the use of the term HTML5 to represent everything from H.264 video to SVG is wildly inaccurate, and it’s a fair point. On the other hand, we need some term to refer to this family of technologies for ease of reference, and expecting common parlance to explicitly reference a list of distinct specifications is even more unlikely than trying to get everyone to refer to GNU/Linux rather than the usually shortened form. As I mentioned earlier, it’s unlikely that Wiley are going to publish “HTML5, CSS3, SVG 1.1, Canvas 2D API, ARIA, WOFF, and Indexed DB for Dummies”!

What is the answer? While I don’t like the conflation of two different meanings, I also don’t realistically see any solution on the horizon. It’s important to be able to describe the modern web client platform succinctly, but it’s also important that we’re precise with our terminology. Maybe the core HTML5 specification should be described as “HTML5 Core”: at least that would provide for the use of the term in both a specific and a general sense.

Lastly, although I called it out in the comments, I’ll do it again here. If you’re looking for a good primer on the HTML5 specification, I recommend Bruce Lawson and Remy Sharp’s Introducing HTML5 book as a very readable discussion of the new features. While it contains coverage of a few features from the WHATWG proposal that are unlikely to ever be part of the W3C HTML5 specification, it’s both pragmatic and (in my view) fair-minded.

Thoughts? How do you usually differentiate between these two uses of the term HTML5?

Inside an HTML5 Interactive Experience: Never Mind the Bullets

Tim Sneath — Fri, 01 Oct 2010 20:25:00 GMT

I wrote in my previous post about the approach we took to the IE9 beta launch: partnering with design agencies and interesting customers to build what we believe are some of the most comprehensive HTML5 reference sites on the web today. Over the course of a couple of blog posts, I wanted to delve into a few of my favorite examples and talk about what I think makes them special, as well as highlight how the designers and developers took advantage of some of the new capabilities of HTML5.

The first experience I want to highlight is Never Mind the Bullets, an interactive comic book set in the Wild West. It comes from Steaw Web Design, a small Paris-based web studio who I met for the first time back in May. Steaw had done some early prototypes with using parallax-style effects with layered images and were keen to see whether they could create a complete experience using that technique. They pulled it off very nicely indeed with the final project, which also takes advantage of the WOFF font format for the comic-style typography and SVG for graphical effects.

You read the comic left to right by simply panning the mouse cursor across to the right side. Each panel of the story is composed out of a series of several transparent or alpha-blended PNG images that are overlaid onto a JPEG background. For example, in the panel above there are separate images for the cowboy, the steam from the train, the traincar, and the passengers. The speech bubbles are created out of an SVG shape with real text rendered using a WOFF display font that is loaded through the @font-face CSS attribute (with fallback solutions for browsers that don’t yet support WOFF).

All these elements are simply positioned using inline styles within a <div> element that represents the panel itself, as shown in this example (edited for brevity and formatting):

<div class="Panel" style="width: 723px; height: 700px;">

  <div class="Layers In">

    <img class="Layer" style="left:-95px;  top:-75px" src="soif-5.jpg"

         cp:y="50" cp:x="50" />

    <img class="Layer" style="left:-127px; top:-75px" src="soif-4.png"

         cp:y="70" cp:x="100" />

    <img class="Layer" style="left:-190px; top:-75px" src="soif-3.png"

         cp:y="100" cp:x="200" />

    <img class="Layer" style="left:-444px; top:-75px" src="soif-2.png"

         cp:y="100" cp:x="600" />

   </div>

   <div class="Layers Out">

    <p class="Balloon" cp:text="Little" cp:balloon="Tell"

       style="left: 74px; top: 35px; width: 280px; position: absolute">

     He's come to the west; the land of opportunity.

    </p>

    <div class="Layer" cp:y="100" cp:x="550"

         style="left: -575px; top: -100px; width: 900px; height: 900px">

     <p class="Balloon" cp:text="Medium" cp:balloon="Speak" cp:arrow="BottomLeft"

         style="left: 530px; top: 200px; width: 280px; position: absolute">

      I need a drink.

     </p>

    </div>

   </div>

  </div>

The magic of the comic comes from its interactivity, and here Steaw used a clever technique. Each panel element (the cowboy, the traincar etc.) is extended with several custom attributes (prefixed with “cp:”) that contain metadata on how it should be rendered and the depth of field for the parallax effect.

For rendering purposes, the browser itself ignores these custom attributes since they don’t have any defined semantics. But in the $.fn.parallax() function (found in parallax.js), these attributes are read out and used to generate a displacement value that is applied using a callback on the mousemove event, as can be seen below (again, slightly edited):

self.each(function() {

  var $this = $(this);

  $this.mousemove(function(event) {

    var pos = $this.offset();

    var mouseX = event.clientX - pos.left;

    var mouseY = event.clientY - pos.top;

    var containerDemiWidth = $this.width() / 2;

    var containerDemiHeight = $this.height() / 2;

    var centerX = containerDemiWidth;

    var centerY = containerDemiHeight;

    var displacementX = Math.min(1, Math.max(-1, (mouseX - centerX) /

      (containerDemiWidth - settings.xMargin)));

    var displacementY = Math.min(1, Math.max(-1, (mouseY - centerY) /

      (containerDemiHeight - settings.yMargin)));

    $this.children(".Layers").children(".Layer").each(function() {

      var $layer = $(this);

      var rect = $layer.data("rect");

      var xFactor = $layer.attr(settings.xFactor);

      var yFactor = $layer.attr(settings.yFactor);

      var x = Math.round(centerX - displacementX * (-xFactor) /

                         100.0 * (rect.centerX - centerX));

      var y = Math.round(centerY - displacementY * (-yFactor) /

                         100.0 * (rect.centerY - centerY));

      $layer.animationMoveTo(x, y);

});

});

});

The resultant effect is very polished and fluid. Open it in Internet Explorer 9, hit F12 to bring up the developer tools and browse around the code – they make heavy use of jQuery but the whole site is a surprisingly small amount of code.

The piece de resistance is that you can customize your own comic strip with the link at the top. Because they’ve used SVG and text for the speech bubbles, it was relatively easy for them to implement this feature, and you can share your own comic strip with others via email, Facebook or Twitter.

Never Mind the Bullets is receiving a good reaction from the community so far:

It was shortlisted for the FWA Site of the Day award;
Smashing Magazine featured it in their newsletter;
The Next Web called it “pretty damn cool”;
Even John Gruber (not known for his love of Apple competitors) linked to it on Daring Fireball.

Check it out (even if you’re not using Internet Explorer 9) – I’m interested in your thoughts!

HTML5 Grows Up: The Genesis of Beauty of the Web

Tim Sneath — Thu, 30 Sep 2010 19:27:11 GMT

About four months before the beta launch of Internet Explorer 9, we sat down to start planning how we would share the work we’d done with developers and our customers at large. We really wanted to show how sites could take advantage of the hardware-accelerated HTML5 engine in the browser. But looking around the web, it was almost impossible to find anyone who had taken heavy advantage of HTML5 with a real-world site, in particular with graphical content. Sure, there were some technical demos: we built the IE Test Drive site, for example, and Google had their Chrome Experiments. But considering that HTML5 is supposedly the hottest thing in town, it was pretty surprising how actual usage amongst real developers and designers was limited to physics and UI prototypes like this one.

We therefore decided to partner with a few different organizations to create some more fully-fledged showcases of the kind of sites you could build without plug-ins when all users are running a modern, hardware-accelerated browser like Internet Explorer 9. We figured it would be good to have both real-world sites with recognizable brand names, as well as some more artistic works where we invited a design agency to just let their talents run wild without constraint. Giorgio Sardo and I spent an exhausting few weeks flying around the world meeting with agencies and doing early briefings to a few key customers, and finally we had a pipeline of interesting projects.

It was a wild couple of months from that point to the launch. The partners we worked with experienced both the joys and the challenges of using what is still a fledging platform for building complex, graphically-rich, media-centric sites. For most of the design agencies involved, this was a dream brief: many of them are used to dealing with the RFP process, compromising their artistic vision to meet with the needs of a never-ending committee at the client, and building for the lowest-common denominator. We took completely the opposite approach with many of these projects – giving the designers carte blanche to implement the crazy idea that they’ve always wanted to create, using the hottest technology in the market and a product that few others had access to. The only constraint was time: with had less than eight weeks to build something from concept to production.

For the press, we put on a small launch event at a venue in the heart of the design community in San Francisco; the focus of much of the event was the partner pavilion area where we put the focus on the sites themselves: after all, the browser really is just the theater, not the play itself. But of course, the real launch was online – the moment we announced the release of the beta and launched the Beauty of the Web site to feature some of this work.

From the start, we were anxious to ensure that we didn’t block other browsers from accessing the HTML5 experiences. As is documented exhaustively on the IE blog (and commended by companies like Adobe), our philosophy is to enable developers to write the same markup for all browsers, using the W3C specification as our guide to create and test for interoperability. Of course, since not every browser supports technologies such as WOFF typography yet, and hardware-acceleration is only partially implemented or off-by-default on most other browsers, there is certainly still work to be done for these kinds of intensive HTML5 experiences to run consistently across the web.

In the next couple of blog posts, I’ll pick a few of my favorite sites and talk about how they took advantage of HTML5 and what makes them beacon experiences for the future of web development.

Rebooting the Client Platform Blog

Tim Sneath — Wed, 29 Sep 2010 22:31:13 GMT

It’s been a while – almost exactly a year – since I last wrote an entry for the blog. To tell the truth, I reached a point last summer where I felt as if I’d run out of steam: that I’d run out of new or interesting things to say and I needed to take an informal sabbatical year from blogging.

I actually began this blog seven years ago, back in July 2003, when the exciting topics of discussion were SQL Server “Yukon”, Windows XP, C# 2.0 and even COBOL extensions for .NET. It’s been a long ride since then – an international relocation, several promotions and new roles, a plaque filled with “Ship it” awards, and more than enough anecdotes and material for my memoirs one day. A couple of months ago, I celebrated my ten year anniversary with Microsoft, which in a tech company is pretty much “gold watch” tenure!

The last year has actually been one of the busiest years for Microsoft client technologies, between Windows 7, Silverlight 4, Internet Explorer 9 and Windows Phone 7. As well as writing code, running developer labs, creating developer training kits, speaking at conferences, blogging, and helping run conferences like PDC and MIX, my team have increasingly been reinventing themselves as internet TV stars, with shows like Silverlight TV and Inside Windows Phone providing authoritative content and applied lessons on how to take advantage of our newest technologies. It’s an exhausting but exhilarating ride.

Anyway, my sabbatical year has ended, and I’m excited about rebooting this blog and providing some hopefully insightful thoughts around how we plan, build and evangelize Microsoft client technologies. Over the coming blog posts, I’ll talk about HTML5 and Internet Explorer 9, what’s new with Windows, how WPF and Silverlight intersect, and cover some of the most interesting applications and content that people are creating.

It’s nice to be back – thanks for sticking around!

Live from LA, It’s the FREE Windows 7 Developer Bootcamp!

Tim Sneath — Wed, 23 Sep 2009 20:55:20 GMT

The PDC is the pinnacle of the Microsoft events calendar as far as I’m concerned: it’s the flagship event for developers, offering the most comprehensive, future-looking, technically deep, densely-packed set of sessions from Microsoft speakers you can find anywhere. This year is no exception: we’ve got a great line up and speculation is mounting about some of the new technologies we’ll be introducing. Lots of surprises await and I guarantee that you’ll miss out on some really cool stuff if you’re not there in person. Registration is going faster than we expected and the event is starting to fill up quickly.

The PDC comes off the back of one of the most important product releases for Microsoft in years: of course, I’m talking about Windows 7. We’ve held back on announcing most of the deep Windows breakout sessions so far (stay tuned), but today we’re announcing something rather special: a Windows 7 bootcamp presented by key leaders from around the product engineering team and others who have been deeply involved in the product development process. This will be the single most densely-packed day we can put together on the subject of Windows development: we’ll take a bottom-up approach to our newest operating system, covering everything from kernel changes to new DirectX 11 features like compute shaders and the hardware-accelerated 2D and text rendering engines that will eventually supplant the venerable GDI libraries.

Confirmed speakers include:

Landy Wang, a Distinguished Engineer in the kernel team who is responsible for the memory manager;
Arun Kishan, a Principal Architect for the process management components, also in the kernel team;
Mark Russinovich, Technical Fellow, the man behind SysInternals and co-author of the wonderful Windows Internals title;
Yochay Kiriaty, the author of the official Windows Developer blog and the Windows 7 training kit;
Jaime Rodriguez, one of the foremost authorities on Windows Presentation Foundation.

The bootcamp is the day before the PDC itself starts and takes place in the Los Angeles Convention Center.

And the best part is – it’s absolutely free! Normally we’d charge several hundred dollars for a pre-conference event like this, but the Windows team has agreed to sponsor this event to ensure that nobody misses out because of the tough economic climate. You can attend the bootcamp free even if you haven’t signed up for the rest of the PDC (although we’d love you to join us for the rest of the event).

We’ve got limited space, so don’t delay in signing up. See you there!

A Developer’s Guide to Preparing for Windows 7

Tim Sneath — Thu, 07 May 2009 04:13:43 GMT

As everyone must know by now, the Windows 7 Release Candidate is broadly released and available for download from the Windows site. The RC build is essentially our dress rehearsal: we’ve hit feature complete, stabilized the release, followed the active bug glide path down to zero, and the build is essentially at a point where we’re looking for any last remaining “showstopper” bugs that might be lurking. To switch metaphors, it’s our last chance to verify that all systems are go before we hit the big red ‘launch’ button and start manufacturing tens of millions of copies of the software for broad distribution.

What does this mean for you, my esteemed developer readership? Now is the time when you really want to be putting the product through its paces: checking your own applications for any compatibility issues that might generate support calls, taking advantage of our test harnesses to ensure that your applications run well on Windows 7, and starting to take advantage of the new APIs in Windows 7 that can make your application feel like a native citizen of this new operating environment and enable new features that your customers will appreciate.

Let’s split that apart into a little more detail.

Compatibility
Application compatibility is always something that’s on our mind when we’re building a new release of Windows. With many tens of thousands of applications that rely on both documented and undocumented behavior from the myriad APIs that we’ve introduced over the last couple of decades, it’s never easy to innovate while ensuring that nothing breaks. Raymond Chen’s blog is littered with examples of where we’ve had to go to extreme lengths to ensure that we even work around applications that relied on buggy behavior.

In some cases, there’s a deliberate trade-off that has to be made between two important tenets. For example, in Windows Vista, we introduced User Account Control to increase security for end users even though we knew that it would pose a challenge to certain applications that assumed full administrative rights. We spent a lot of time attempting to mitigate that risk, adding ‘shims’ for certain applications that we knew in advance required privileged rights to run successfully, and introducing features like file and registry virtualization to provide a fallback solution for other applications.

The good news is that with Windows 7, we kept the bar very high indeed for breaking changes. If an application runs on Windows Vista today, there’s a very strong likelihood that the application will run unchanged on Windows 7; this has been borne out by early adopter tests running on the beta and release candidate to date.

Nevertheless, there are four key steps we’d love every application author to take in the next few months to still further diminish the risk of any application issues:

Download (and read!) the Windows 7 Application Quality Cookbook. This is the ultimate guide to changes in Windows 7, offering 80+ pages of detailed guidance on the various different edge cases that might cause an issue with your application. (A quick perusal of the document will allay any fears of widespread change – unless the likes of ‘removal of Microsoft Agent’ is of major concern to you.) Using this document as a checklist, you’ll be able to very rapidly identify anything that you should take care of.
Install and use the Windows Application Compatibility Toolkit (ACT) 5.5 and Application Verifier 4.0. These tools are valuable both for compatibility and quality, and are particularly helpful to renovate an older application that you never moved up to Windows Vista. The former provides automated tools for developers to check for issues like UAC incompatibility and setup problems, as well as administrative tools that can be used to apply and view other shims that may be in place. The latter tool is a runtime verification tool for applications that can be used to identify issues in the way native code calls into the Win32 API – in some ways, it’s the closest equivalent to FxCop for C++ code.
Get your application certified for Windows 7. Applying for a logo for your application has historically been a somewhat painstaking process – it’s involved spending money on submitting the application for manual testing. Now it’s much simpler: we’ve provided an automated toolkit that tests the application for known compatibility issues, targeting application issues that we’ve seen in the wild and providing clear guidance on how to fix your application. And there’s no cost either, beyond signing up for a certificate for WinQual registration. Whether or not you actually care about using the Windows 7 logo for marketing purposes, this is a worthwhile step to validate that your application runs smoothly on Windows 7 and that your customers will get a good experience.
Lastly, we’d obviously greatly appreciate it if you’d be kind enough to update the “system requirements” page on your web site to call out your support for Windows 7!

Taking Advantage of Windows 7
Assuming your application runs on Windows 7, the optional next step is to take advantage of one or more of the myriad new features in Windows 7 that can give your users a better experience, while of course still supporting Windows XP or Vista where appropriate. To call out a few specific examples:

Multi-touch: enabling your application to take advantage of new devices like the HP TouchSmart desktop and notebook that support gestures to zoom, manipulate and control a user interface.
Taskbar: adding support for new taskbar features in Windows 7 such as jump lists, progress bars, icon overlays and custom thumbnails.
Libraries: taking advantage of the new common file dialogs in Windows 7 that support the library model of virtualized views over multiple physical folders.
Sensors and Location: new APIs that enable suitably-equipped machines to report ambient light, user proximity, accelerometers and even geographic location.
Direct2D, DirectWrite and Ribbon: replacement libraries for 2D and text rendering as well as the Windows 7 ribbon control that is an evolution of the ribbon in Office 2007.

I could go on, but but perhaps I’ll save a more comprehensive list of new developer features for another blog post!

There are two main kits you’ll want to download and install on your developer workstation to take advantage of Windows 7:

The primary resource remains the Windows SDK (available both as an ISO image and for web-based installation) – this provides headers and libraries, tools, documentation and samples for building for Windows 7 (as well as older releases). We’ve recently updated this to support the RC; although we’ll ship an updated version for the final release of Windows 7, this release is more than suitable for use for production development. You’ll find API reference documentation for all the features listed above, along with some new tools (such as a ribbon XML markup compiler). Most developers have a subset of the Windows SDK already installed as part of Visual Studio, but you’ll need to install this later build if you want to target new APIs in Windows 7.
If you’re a .NET managed code developer, then you might be a little nervous of using the new Win32 COM-based interfaces and rather low-level samples included in the SDK. We’ve made great strides in Windows 7 to ensure that these interfaces are easier to consume from managed code, but nevertheless this can be somewhat daunting if you’re not acquainted with the COM interop libraries in .NET. The good news is that we’ve invested in building some great interop assemblies and helper classes to provide a seamless experience for .NET developing against Windows 7, and you can find the first fruits of this project in the Windows API Code Pack for .NET, available today from the MSDN Code Gallery. The current version includes support for many of the features listed above, with more coming both in future releases of the code pack and in a forthcoming release of the .NET Framework.

It’s an exciting time to be a Windows developer: as we enter the home stretch for this release, I’m enjoying seeing examples of applications that build on the platform from the largest software development companies down to individual ‘cottage’ developers. What are you up to?