Dean Hachamovitch, Scott Guthrie, Doug Purdy and Bill Buxton: MIX10

ANNOUNCER: Ladies and gentlemen, please welcome Dean Hachamovitch. (Applause.)

DEAN HACHAMOVITCH: Good morning. I am honored to represent the Internet Explorer team today to talk about the browser and HTML5 applications. When we started looking deeply at HTML5, we saw that it enabled a whole new class of applications. These applications will stress the browser runtime and hardware as today’s sites just don’t. We quickly realized that doing HTML5 right, our intent, was more about designing around what HTML5 applications will need rather than a particular set of features. Done right, HTML5 applications will feel more like real apps than Web pages. And our approach to HTML5 is to make standard Web patterns that developers already know and use just run faster and better by taking advantage of PC hardware through Windows. We planned IE 9 from the ground up to enable professional-grade HTML5 on modern hardware.

Because HTML5 apps will be so important, we want to talk about five things today: Performance. HTML5 will need great script performance. Standards, developers want the same HTML, the same script, the same markup to work. GPU-powered HTML5 because HTML5 applications will be graphically rich and interactive. We’ll talk about the IE 9 platform preview and community because we will build the next Web together. And number five, well, we’ll see it when we get there.

Now, we can have these conversations today because of several great things that have happened over the last year. A year ago at MIX, we released Internet Explorer 8 and in the last year, it has become the most-used browser on the Web. Windows 7 released, and the creativity and innovation in the hardware ecosystem has been absolutely tremendous.

Now, last and definitely not least is the decline in IE 6 usage. Now, there was a funeral last week in Denver. (Cheers, applause.) There was a funeral last week in Denver. The IE 9 team couldn’t make it, we sent flowers. Seriously. And you know, we’re puzzled. We’re on our third major version since Internet Explorer 6. The world has changed in so many ways since August of 2001 when IE 6 first released. You know, I think of Facebook and YouTube, I’m sure you have your own examples of how the world has changed for you.

Now, we have recommended upgrading from IE 6 to IE7 and now to IE 8 for years. We will continue to support Internet Explorer 6 with security updates, that’s just one of the responsibilities of Windows. We are excited to get users off IE 6 to Windows 7 and IE 8 and then on to IE 9. And I thank you for being part of this movement.

All right, let’s talk about performance. HTML5 applications need great performance. Now, at the Professional Developers Conference in November, we talked about how different sites use the browser differently. And looking at this chart, you can see that the percentage of time that different sites spend running JavaScript varies greatly, and that’s the gray boxes down at the bottom.

What’s important here is to look at the entire system when thinking about browser performance. These large orange boxes, blocks at the top, represent a great opportunity for the operating system and hardware to pitch in and make the browser faster.

Let’s talk about JavaScript in particular. WebKits.org publishes a benchmark called SunSpider. Let’s see how IE 9’s new JavaScript engine compares. So, IE 9’s new script engine, you may have heard of it by its internal code name, “Chakra,” is faster than many browsers. One thing to keep in mind is that we’ve done very little SunSpider-specific work at this time. We will continue to improve IE 9 script performance.

It’s interesting to note that the gap between IE 9 and some of the other browsers to its right is about an eye blink, it’s about 300 milliseconds, and it took 70 seconds to identify the 300-millisecond difference.

Now, the real question now is how do we make JavaScript even faster? Because these SunSpider scores are all converging. Our approach is to use modern PC hardware to its fullest. Now, “Chakra” is different from other JavaScript engines. It compiles the JavaScript in the background on a separate core of your CPU in parallel with the IE process. So, your dual- or quad-core machine is put to good use running the Web faster, without having to make any changes to your pages or code.

Now, let’s talk about how the Web’s changed over the years. In the beginning, the Web has lots and lots of HTML and little pieces of script here and there, and an interpreter was good enough for that. Over the years, different browsers have added JITters and different kinds of JITters, may different kinds of JITters. The problem is so much time and energy goes into managing the time and scope that the JITter operates in. Basically, users wait. Users have to wait if the JITter JITs too much because the JITter is sitting there compiling the code, and you don’t get to run it. And the user has to wait if the JITter JITs too little because then the JITter did a little bit and the user is stuck running a slower interpreter. Compiling in the background puts hardware to use here without having to recode the site. And the key here is to bring the best technology to the most important language you use, JavaScript.

All right, let’s transition over to IE 9 and standards. Developers want to use the same HTML, the same script, and the same markup across browsers. That’s the goal of standards and interoperability. No need for different code paths for different browsers, and that’s a key goal for HTML5. We love HTML5 so much, we want it to actually work. In IE 9, it will. We want the same HTML, the same script, the same markup to just work across browsers. And so in IE 9, we will do for the rest of the Web platform what we did for CSSQ 1 in IE 8.

Now, at the same time, we want to be responsible about the standards that are still emerging, the standards that are in committee, and the standards that are partially implemented, often in different ways, across browsers. And so to make decisions on this front, we started from data.

So we set out to support every standard we saw in real-world data. IE 9 will also support several standards that are not represented in this data, and we’re going to do that to complete the scenarios that HTML5 applications will need.

Now, let me explain this chart. We wrote a tool and it navigated 7,000 sites and it reported all the script activity that happened in these top 7,000 sites. The number one API used, index of, 94 percent of these sites. Get elements by ID, which I’m sure all of you use, number 13, 80 percent. We found that script changed CSS opacity on elements a lot of the time.

Now, the most broadly used API that’s not in IE 8 that you’ll see on this chart is add event listener, number 17, with 55 percent usage across these sites.

Now, because we started from data, what developers like you really used was our starting point for what to support.

All right, so, now let’s take a look at some of these, at some examples in action. All right, so I’m going to come over here and you’ve got a few browsers lined up on your screen. And I’m going to start over here, this is Firefox and here’s some of the markup in the page, as an example, and you’ll see that when I hover the mouse, I’ll get a pop-up kind of tip menu, and there are rounded corners, and there’s some opacity in that. And that same markup is working over here in Chrome. When I come over here to IE 9, you’ll see that the exact same markup will produce rounded corners, opacity, and uses add event listener. (Applause.)

Let me show another example, opacity. I’m just going to go ahead and show this here. You’re just going to have to believe me that it works in the other browsers, OK? So here’s a nice image and I’ll fade out, and you’ll see that it will fade out, and then it will fade in. And that same markup will work across browsers.

Let me run a CSS test. So, here’s a site on the Web that offers a CSS 3 selectors test. And what you’ll see is that IE 9 runs 578 out of their 578 tests correctly. This is an important thing for the kinds of development that you do every day, you just want that same markup, HTML, CSS script to just work.

All right, let me run one more example here and it involves borders and radius. All right, so you’ll see that I can see the markup that’s in the page and they’re all pointed at the same HTML. And the first thing that I’m going to do is animate the border width in all of them. And that works pretty well. I’m going to cycle the border style, you’ll see dotted, dotted, good. Dotted, dotted, a little different. Dotted, and a little bit more different. OK?

Now I’m going to animate the border radius and we’ll see even more differences. Now, this has got to be tremendously frustrating for developers. You’re trying to use the same markup and you can’t. Then you take that same markup and you try to massage it a little bit and then you’re hoping for the same results and you don’t actually get it. That is super frustrating. Now, at the same time, some people use Acid3 as a shorthand for standard support. Acid3 is kind of interesting, it exercises about 100 tails of about a dozen different technologies. Some of them are under construction, others less so. Why don’t we bring up Acid3 and just run it in IE 9.

Now, the thing to keep in mind here is that we will continue to make progress on the Acid3 test. The score will continue to go up as we make more of the markup that developers actually use work.

Now, having looked at the Acid3 test, let’s go back over here and take a look at these borders again. We are working with Web standards bodies and other browser vendors to minimize this same markup, different results that you have to work through every day. The practical, professional way to scale up here involves test suites. Test suites means that developers can raise expectations. You can expect more from browsers, you can expect more from standards. This is the same pattern that we use in IE 8 with the CSS 2.1 standard. And today, we announced the contribution of over 100 test cases to W3C in order to help eliminate this kind of problem that you face every day.

All right, let’s talk about GPU-powered HTML5. HTML5 applications will push the limits of graphical richness and interactivity. IE 9 will run HTML5 applications better by taking advantage of PC hardware through Windows. We call this GPU-powered HTML5. And to help me show this, I want to invite someone who knows a little bit about Windows to come out and demo. Please welcome Steven Sinofsky, president of the Windows Division at Microsoft. (Applause.)

STEVEN SINOFSKY: Well, good morning everybody. It’s great to be here to have a chance to share some of the developments in Internet Explorer 9. And so what we want to show today a little bit is how we built Internet Explorer 9 from the ground up on top of the Windows platform, in particular on top of the graphics aspects of the Windows platform. You know, this has been a long time in coming, and with Windows Vista and then with Windows 7, we made the transition to use a much richer graphics API and a much richer ecosystem around graphics. And so IE 9’s built from the ground up to take advantage of that.

So what we’re going to do is we’re going to show a few demos of how this improved graphics really just makes the Web perform better, less waiting, and also uses the same script and the same markup across all of these demos.

So what we have running is Dean is going to use Chrome and Firefox, and I’m going to use the developer preview for Internet Explorer 9, and so you’ll be able to see that side by side up there.

So the first one we’re going to just show you is a little bit of some basic graphics. And so we’re going to —

DEAN HACHAMOVITCH: I just wanted to make sure everyone knows, because this is Vegas, and sometimes games are rigged, that these are identical machines, identically configured pieces of hardware backstage. You will also note that there’s a CPU meter up here in the upper right corner, for those of you who like CPU meters — I’m sorry for interrupting.

STEVEN SINOFSKY: No, feel free. You always wanted to interrupt your boss on stage. (Laughter.) Now he’s not going to talk at all for the rest of this.

OK, these identical machines. So, let’s first look at some — we just call it rotating logos. And so these rotating logos are just a graphical element. And what these do is they’re just rotating around. And what I can do is I’m going to move my mouse up and down really quick and zoom it around. Why don’t you do that too, Dean?

DEAN HACHAMOVITCH: I’m trying here, Steven.

STEVEN SINOFSKY: Actually, I’m going to go ahead and I’m just going to increase. Also up on the upper left, you can see a frame counter, and you can see 164 frames per second, and 100 images. Dean is at three or two frames per second and 36 images. Why don’t you keep increasing because I’m going to go keep going up and up and up.

DEAN HACHAMOVITCH: I’m going to try another browser.

STEVEN SINOFSKY: And so you can see this is just built on top of DirectX and it’s the same markup, the same code, the same script.

DEAN HACHAMOVITCH: OK.

STEVEN SINOFSKY: So just increase, and I’m at 38 with a 256 image.

DEAN HACHAMOVITCH: OK. Wow. OK.

STEVEN SINOFSKY: So that gives you an idea of just how — oh, I can also zoom in for fun too. And I’ll stop now because you’re getting busy.

So there you see, same markup, same code running within the developer preview and in some other browsers as well. And again, built from the ground up to take advantage of that.

DEAN HACHAMOVITCH: OK, now, HTML5 supports some new graphics formats. Now, these are interactive and programmable. They’re just like HTML. In fact, here’s some sample markup on the screen. And this looks a lot like HTML, there are angle brackets, you can program it with script and respond to events. Why don’t we take a look at what this markup looks like in a browser.

STEVEN SINOFSKY: OK, so I’m going to click on this one here. (Laughter, applause.) Actually, Dean, do you remember him? I actually think you worked on him for a while.

DEAN HACHAMOVITCH: I think I worked for you when I did.

STEVEN SINOFSKY: Remember, we talked about being quiet a minute ago.

DEAN HACHAMOVITCH: Right.

STEVEN SINOFSKY: Here we are actually showing off our old pal, Clippy, who’s actually being rendered in SVG. And so what I’m going to do in the developer preview for Internet Explorer 9, we have our new developer tools. And so of course these have been enhanced to take advantage of some of the new HTML5 constructs. And so I’m going to bring up the dev tools, and one of the neat things you can do is I’m going to click on this pointer, and then I’m going to click on an element of the SVG, and I’m immediately going to scroll to the proper place in the code, and I can go here and do things like — maybe Clippy was out on the town last night — he was really out on the town. So, you can see, you’re able to both use plain text to render these graphics, and then to use the debug tools to work within those graphics as well. Again, this is the kind of thing, same markup, same code, same script across browsers.

DEAN HACHAMOVITCH: OK, why don’t we try another example of SVG. Let’s go over to falling balls.

STEVEN SINOFSKY: And what’s interesting here, if you look at each one of these balls, you can kind of see through them. You can see where they overlap, the colors add up because they’ve got opacity, they’re somewhat transparent.

Now, each of these balls is an SVG item and there’s actually a physics engine running in JavaScript, and when we click “drop the balls” there will be a lot of calculations in physics to make them bounce and go around. Should we give this a try?

DEAN HACHAMOVITCH: Sure. So, we’ll just go ahead on three.

STEVEN SINOFSKY: One, two, three. (Pause.)

DEAN HACHAMOVITCH: Yours are kind of going out of the box.

STEVEN SINOFSKY: Yeah, what’s up with that?

DEAN HACHAMOVITCH: Well, this is an interesting example of something we need to work through with HTML5 applications. We all know what the CSS should do, and we all kind of know what the SVG should do, but when they interact together, right now those standards don’t always agree on the same defaults. This is an example of where the test and working with other browser vendors and the Web standards body is really important.

STEVEN SINOFSKY: So why don’t we show a little bit more. So, one of the neat things about DirectX is we’ve been showing it for graphics, but one of the things that it does really well is also render text. In fact, there’s a separate subsystem in DirectX called Direct Write that takes advantage of modern hardware to do really cool subjectal alignment and also to show ClearType really, really well. So, why don’t we take a look at how that works.

DEAN HACHAMOVITCH: OK. Do you want to head over to the International Court of Justice?

STEVEN SINOFSKY: Not particularly, but here we are in this nice U.N. org chart. And so we’re going to scroll in, fill the screen with a word. And just for fun, so you can see already if you look carefully, you can see that the rounded corners are a little different, and that’s using a sub-pixel alert. So, let’s take a look, though, zooming in and you can see the curves. And you can see the real difference in the curves, and there’s jaggedies on one side, and really smooth, gray scale on the other. And so that is really a neat way to take advantage of the graphics. And, again, because we built Internet Explorer 9’s rendering engine from the ground up to work on this hardware that really has been around since Windows Vista and is very widely available on all the machines now.

DEAN HACHAMOVITCH: So let’s get out of that. OK.

STEVEN SINOFSKY: Why don’t we play a game.

DEAN HACHAMOVITCH: OK, I’m up for games. Ready. Alrighty, let’s play a game.

STEVEN SINOFSKY: Now, this is written entirely in SVG and JavaScript, and it’s kind of a fun — kind of a 1979 game.

DEAN HACHAMOVITCH: Oh, reminds me of working at Godfather’s in high school.

STEVEN SINOFSKY: How long do you want to play for?

DEAN HACHAMOVITCH: I’m going to put up my shields because I’m about to get blown up.

STEVEN SINOFSKY: I’ll put up my shields. I did prepare these demos, by the way, so —

DEAN HACHAMOVITCH: OK, I’m going to try to fire. (Laughter.) Wee!

STEVEN SINOFSKY: No, I’m supposed to do the “wee!” that was me. OK. So, this is a game, it’s all written in SVG and it’s the same code, same markup, same script running across both of these browsers, and it shows how HTML5 can help you to relive the 1970s video games.

DEAN HACHAMOVITCH: This looks kind of easy for the machines. Do you want to go into “nebula” mode?

STEVEN SINOFSKY: Nebula mode. Sauce for the goose. OK. So, here we are, this is showing a bunch of DX graphics running around really fast, well really fast, and the game still works and you can go ahead and play. In fact, you can do all sorts of — you know, move around and everything. And I’m actually going to even zoom in and show you — why don’t you go ahead and zoom in, here I am zooming in. How about zooming out? Here’s the mobile version. (Laughter.)

OK, well, you see so what we’ve done there is take advantage of the graphics within the game to just update it. And these are, again, same code, same scripts, same markup and HTML5, just moving around the screen. So, you know, I hope everybody has a chance to understand and see that you’ll be able to experience this with the developer preview, but all the code that you write, because the rendering engine for IE 9 is built from the ground up to take advantage of this hardware, built on the DX foundation, it will really just make the Web better and faster for everybody with no changes to your code. And so with that, I want to thank you for the chance to share some of the HTML5 work, you know, we’re all in.

DEAN HACHAMOVITCH: Thanks.

STEVEN SINOFSKY: Thanks. (Applause.)

DEAN HACHAMOVITCH: OK, so you just saw how all graphics in IE 9 are hardware accelerated. Rotating logos was actually a bunch of PNGs. We are also — you also saw hardware-accelerated SVG.

Now, just as with DOM and CSS, we are contributing tests to W3C because we really want HTML5 to work. Again, the same markup, the same script, the same CSS, just working across browsers.

All right, so this is a good time to talk about number four, the platform preview and community. Now, the platform preview is what we’ve been running today. It’s the lightweight frame around the IE platform. And today, we’re making the platform preview available for download. That includes many samples, for example the things that we showed up here, and we are committed to update this preview approximately every eight weeks. This is one part of a much larger change.

Now, another part involves having the right channels open for developer feedback on the platform in IE 9.

Let’s step back for a moment and look at all the changes together because there really are a lot. You’ve seen the engineering work around the same markup just working in action. You see many standards on this slide, and there are more to come. You also see and can read about the engagement with standards groups and all the work that we’re doing on the open test suite. You’ll read on the IE blog about new community feedback program, and the platform preview build gives the developer community earlier hands-on experience with the platform.

Now, let’s get back to that platform preview for a moment. As I said, it’s a lightweight frame around the IE platform. It’s the highlighted part here, plus the dev tools that Steven showed. And it’s how we exercise the platform as we’re building it. The preview is not all of IE 9. There’s no back button, there’s no phishing protection, but it does have dev tools. So, let’s see them in action again.

All right, so here I have the platform preview up, and here I’ve brought up the developer tools. And you’ll see that there’s a tab now for networks. And I can go ahead and start capturing all the traffic. And as I go and refresh this page, you’ll see this area will fill up with lots of great information and timing in order to help me understand why is the page take — like, what did I do? And you can see all this great information. Just as in IE 8, you can see investigate script, CSS and HTML, and Steven showed that works with SVG and the other standards we’re supporting.

And you can also see that in the preview, it’s tightly integrated with reporting issues and all the community feedback mechanisms that I talked about. All right, so that was number four, and now we’re up to number five.

HTML5 video. I want to show one more thing. Go ahead. (Applause.) I want to talk about one more thing. It’s coming in an update to the platform preview. And so I’m going to show you an update to platform preview. Wait for the machine to get ready, here we go. And this is pointed at YouTube, and I’m going to go run it and you’ll see YouTube, and you’ll see an HTML5 logo, and you’ll see a video.

Now, just to make the point, I’ll right click and you’ll see no evidence of a plug-in, and I could probably view the source, I don’t think I’ll do that right now. And for fun, let me refresh again in case anyone missed the HTML5 logo up front, there it is. HTML5 video. OK. Let me put that away for a moment. (Applause.)

Let’s make this a little bit harder. So, here’s a nice netbook, about $400 and it’s running Windows 7. And it’s interesting because it’s got hardware for video decoding built into it. And so what I’m going to do, again, you’ll notice there’s a CPU meter up here. I’m going to bring up an HTML5 video in Chrome. There we go. And this is HD-encoded HTML5 video, 720p, and you’ll see a couple of things. You’ll see that the CPU, both cores, are totally green. They are going all out to decode this HD-encoded 720p video.

And you’ll see that there’s a lot of frame dropping, which is unfortunate if you’re actually trying to enjoy the video. Let me put that away and let the CPU settle down and let me bring that up in IE 9. And you’ll see the same video, the same markup, all the same thing. HD-encoded video, playing — you’ll see that the CPU still has lots more capacity, so I can go into Outlook and delete some mail and none of the frames are dropping. And so it’s the same markup and it’s just working.

There’s actually one difference I want to point out, and that’s in the scroll bar. If you look over here on the right, you’ll see the scroll bar shows that there’s some more stuff in the document. You’ll see over here, there’s another. (Applause.) So that’s kind of cool. I’m not really sure when I’d watch two of these at the same time quite like this, but maybe I’m giving away a little bit too much of the next demo.

I want to show one last thing. I want to show one last demo to tie together what we’ve seen so far today. We talked about faster script, because HTML5 applications will need much faster JavaScript. We talked about the same markup, the came CSS, the same HTML just working across browsers. Opacity, borders, it should just work.

And then we talked about graphically rich HTML5 applications. So, the example I want to show you is a video carousel. You know, this might be how we choose movies online one day instead of a bunch of still images.

So I’ll come back over here to this machine and I’m going to bring up a video carousel in Chrome. And you see a bunch of videos, and you see that they have borders and they’ve got some opacity in the borders, you can kind of see through them, and this is nice. This is a bunch of HTML5 videos playing in a carousel. And you can see what the CPU is doing and I’ll just put that away for a moment.

Now let’s look at the carousel in IE 9. And it’s a little different because you see the opacity thing is working. So, here’s how it all comes together in this video. You’ve got HTML5 videos, four of them. They are compositing on the same surface, right? So you can see through them. They’re all using Web standard markup for borders and opacity. They’re all using Web standard events and scripts to move on the page and to respond to the mouse. All of that markup is getting the benefit of PC hardware through Windows. Your markup doesn’t need to change, it just gets faster on Windows with hardware acceleration. Developers, raise your expectations. (Applause.)

OK. So, this is a good time, there are no more demos, really. This is a good time to offer a summary of what we’ve discussed this morning. We have “Chakra,” a whole new JavaScript engine. The same markup just works. We built HTML5 in deeply, for example, look at the developer tool support of SVG. Your markup works faster with GPU acceleration and many cores. There’s more and earlier hands-on experience with a platform and rigorous objective tests coming out of the work we do with standards organizations. And there’s more to come, starting with HTML5 video.

So what’s next? Help us move people from IE 6 to IE 8. Develop for IE 8 and your sites will work in IE 9. Get the platform preview today, try the test drive. We want your feedback. Thank you. (Applause.)

ANNOUNCER: Ladies and gentlemen, please welcome Scott Guthrie. (Music, applause.)

SCOTT GUTHRIE: So Dean just covered some of the great improvements that are coming to our browser with IE 9. I’m now going to spend some time talking about some of the work we’re doing with our server and tools to make Web development even better.

Next month, we’re going to be launching VS 2010 as well as .NET 4. These are major releases, include a ton of new capabilities for Web development. And I thought I’d just spend a few moments walking through a few of the new features you can take advantage of.

One of the core focus areas that we’ve invested heavily in with VS 2010 is improving your overall code editing experience. Here’s just a couple of examples. VS 2010 now provides full multimonitor support. (Applause.) Now, technically, with previous versions of VS, if you had two screens, you could run VS on both screens. You just launch one version of VS on one screen, add another copy to the second screen, then you’d have it. But with VS 2010, you can now launch a single version of VS and copy Windows across any number of screens. That’s true for both code editing, designers, property grids, and everything else.

The VB and C# IntelliSense with VS 2010 is much improved. We’re adding a bunch of new features that make finding classes and methods much easier. We’re also adding a couple of nice features that help reduce the number of keystrokes you need when you want to type — complete a method.

VS 2010 also improves your ability to navigate and find code quickly within the IDE. You can also then quickly visualize exactly how the code’s being used, what the dependencies are between it, and how to refactor it.

We’re also including much richer profiling and debugging support to make it easier to find problems and optimize your code.

We’re making some significant improvements with ASP.NET 4 to the space of Web forms. In particular, ASP.NET controls now emit clean markup. This means no inline styles, this means you have complete control over your client IDs. It means we’re using appropriate semantic use of markup, and it means you can easily use CSS to style everything. (Applause.)

Use state is smaller and much easier to manage now in ASP.NET 4, reducing your page sizes, making it much faster to load pages. And it’s now possible with Web forms to use nice, clean semantic URLs out of the box. This enables much better SCO optimization, it also just improves your overall URL aesthetics on your Web site. ASP.NET 4.0 also now includes a bunch of new Web forms controls. These include charting controls, data controls and much more.

If you didn’t laugh, you missed it. In addition to Web forms, we’re also obviously supporting the new ASP.NET MVC programming model. Last week, we shipped the final release of ASP.NET 2.0 — MVC 2.0 for VS 2008 as well as .NET 3.5, includes a bunch of great improvements, and you can download that immediately as a separate Web download.

With VS 2010, ASP.NET MVC 2 is now built into the box and includes a ton of new improvements. Much-improved client and server validation support, making it easier to build input forms that drive directly validation off your models, a whole bunch of UI and scaffolding helpers to enable you to build UI quicker, a bunch of support that allows you to kind of more modually organize your projects and Web site, much improved VS tooling support and a lot more, and there are great breakout talks here at the conference to learn more about that.

We’re also improving AJAX development in a significant way with VS 2010. We have much- improved JavaScript Intellisense, you can see here a fairly complicated JavaScript lock with a lot of chained methods, note that IntelliSense now fully works within that. Not only is IntelliSense more accurate, it’s also much more responsive. This chart shows some of the timing improvements you get between VS 2008 and VS 2010 for all the popular JavaScript libraries. Note some of the significant improvements across the board that you get within them. You should be able to load a file that uses any of these libraries and basically get instantaneous IntelliSense now within the IDE.

We’re also investing heavily in making Web deployment easier. You can now store multiple configuration settings for your applications and target them based on your one-time configuration deployment. (Applause.)

For example, you can see debug, release and staging. What’s even better is you can now in a one-click way both within the IDE as well as from a command line or from a build server easily deploy your applications onto servers, and this deploys everything, your content, your code, your configuration, and we’re also including database deployment as well as part of this. So, easy to basically package up and deploy your apps to an enterprise environment across a bunch of Web servers, or in a hosted environment as well.

So I’ve talked about just a handful of the features that are coming with VS 2010 and .NET 4.0. There’s many, many more features both in the Web space and especially also in the client space and data space. Rather than me just talk about them, I’d like to invite Scott Hanselman on stage to actually show a demo of some of the features I’ve talked about and a few more and give you a chance to see it in action. So, thanks, Scott. (Applause.)

SCOTT HANSELMAN: Thank you, sir. All right, so I’m going to show you an e-commerce site that we built with Visual Studio 2010 and ASP.NET MVC 2. I’m just going to fire this site up here. This is a very special site that sells one thing and one thing well: Polos. These are the kind of polos for the kind of people that wear polos, like this guy. (Laughter.) And this guy. (Laughter.)

Now, this is a code base that I’ve inherited, there’s a lot going on here. There’s a lot of features in Visual Studio 2010 that will help me kind of find my code and get a sense of what’s going on quickly. I often find myself switching back and forth between code and markup a lot. And of course now with multimonitor support, I can pick that tab up, pull him right outside, bring him over here. (Applause.) And I can also use all the great control-scroll features, and this is going to help me justify that sixth monitor to my wife. (Laughter.)

I’m going to jump inside the product controller here. In previous versions of VS, if I wanted to find something like something on maybe HTTP caching, I had to know the complete name of what I wanted. Here I type HTTP, there’s a whole lot of choices. This is more than I really need to see. Now I can type in just “cache” and see that we’re searching within classes, and I can find that the HTTP cache policy is what I want. (Applause.) All right that makes me feel good.

You see HTTP cache policy is what I need. Notice that, of course, that with .NET, the classes are capitalized, Pascal casing. So, I can type H-T-P — so now that I’m familiar with what’s going on inside the library, I can get to things even faster than before.

So I’ll switch out of that. That Pascal casing technique and the ease of moving around your application is more than just an improvement in IntelliSense, there’s also navigate to. I hit control-comma and I can come in and navigate to and I can type something like “shopping” since this is a shopping site, and this is more than just using control-F to find your way around a project, especially a large project, searching by text isn’t going to cut it. Here, we’re searching by symbols, we’re finding files like my ASHX. I’m finding JavaScript, I’m finding graphics, and I see that I’ve also got the shopping cart controller and the shopping cart item. I can type in “cart item” there’s my shopping cart item which I can then — shopping cart item. And I can go right there.

We can see in shopping cart item that something’s not right here, someone has made all these properties private. This is potentially a search and replace operation. I could do this or I could maybe do some kind of a refactoring, but what I really want to do is hold down ALT and do a box select and then just start typing. (Applause, cheers.) Yeah.

And then right there with the power of Visual Studio 2010, I immediately make all my privates public. (Laughter.)

So then I’ll hit control-comma again and I’m going to navigate over to the shopping cart controller. We’ll take a look at my “get shopping cart” method. I know that this is one of the methods inside my application that’s fairly complicated. There’s a lot going on here. To see what’s happening, I can actually right click and use one of the many visualizers that’s built into Visual Studio. Like here I’ll generate a sequence diagram. I can select things and I’ll hit OK. This is going to bring up an analyzer and give me a nice generated sequence diagram showing exactly what’s happening. And notice when I scroll down that the swim lane hiders don’t get lost. I can scroll over. I see that there’s a loop going on here, and then again, control-scroll. I can save this, check it into source control and share it with the rest of the team or I could be antisocial and just delete it.

Let’s take a look at our application and try to get an understanding about how “get shopping cart” is going to fit into this.

We’ll fire up our app. This is running in the local host, and look at the categories. And here we’ve got a — pet shirts. This is for the dog. Notice in the URL we’ve got those clean semantic URLs. This is a feature of ASP.NET 4 called routing, and we’re using it here in ASP.NET MVC 2. Now, I know I need to get one of these red polos for my dog, so I’m going to hit “add to cart.” So we haven’t implemented the shopping cart yet, so this is going to be a problem. I’m going to just pop out of here and I need to fix that.

As I’m still familiarizing myself with this code base, and it’s quite large, I realize that we’re using areas. And areas is a feature of ASP.NET MVC 2 that’s allowing us to organize the account, admin, search sections of our site, just like organizing folders in Outlook. So, sections of the site are organized in areas and they don’t interfere with other sections.

Here I’m going to grab the shopping cart, and it looks like there is no shopping cart. So, this is the problem. I need to go and implement some kind of a shopping cart to display what’s going on. And in order to do that, I’m going to add that functionality using a new jQuery plug-in that Scott Gu. is going to talk about in a few minutes. And I’ll use code snippets to make it a little easier for me.

First, I’ll fire up here and make a UL to hold the shopping cart and then an LI for each cart item, and then you’ll notice that we’ve got an HTML5 attribute here called data ID. And then this interesting curly brace syntax. Let me add a little bit more code. I’ve got a plus and a minus for doing my plus and minus quantity with the carts, and I’ve got more data-binding expressions. This is all on the client side. This is in markup. So, these data binding expressions are not happening on the server. These aren’t ASP.NET data binding expressions. They’re using a jQuery templating engine.

Notice here, we’ve got an “if” statement. So, I’ve got a little bit of user interface logic there to say if the stock is less than five, show this div. Again, that logic is happening on the client side using only JavaScript.

Then I’m going to take this, I’m going to zoom out, I’m going to grab that LI, I’m going to drag it up here, I’m going to put it inside this script type text X jQuery template. This is where the template is going to live. We’ll save that. I’m going to switch over to shoppingcart.JS and then in here, in the document ready function, I’ll write some jQuery. I’m going to use the JavaScript IntelliSense that’s going to make life a lot easier for me.

So here I get all the details about how that works. I’ll start typing “host.” I’m getting information and documentation on how to use this method. We’re going to go and post off to the shopping cart controller doing an AJAX call. We’re going to call that shopping cart method, and that method is going to return some data. So, we’ll have a — notice how the tool tip updated itself. We’ll have an anonymous function to catch that data.

And then within that anonymous function, we’re going to then use jQuery and we’re going to bring up a selector to grab ahold of that cart template. We’ll take that cart template and then we’ll render the data to the template so the JSON data is coming across from the server side, it’s being held in memory on the client side in the browser, and then using JavaScript, we’re going to simply render that. And then those data-binding expressions are going to get evaluated. And then we’ll take the result of that rendering and we’ll append it to that UL, which represented the shopping cart, which I’ll then talk to again via a jQuery selector.

Then when that’s done, I’ll go and I’ll update the total price and I’ll update the cart item count. All of this on the client side using IntelliSense, jQuery, jQuery selectors inside of Visual Studio 2010.

Let me fire this up and see if it works. I’ll come over here, we’ll grab the red one. It looks like it’s low stock. I’m going to get as many as I can before they completely sell out. All that using the jQuery templating engine that we’ll hear about in a few minutes. In the past, this was very, very difficult to bring JSON across, we would be using DOM manipulation techniques, and now we can use templates inside of Visual Studio.

Now that this has been done, I’m going to use Web deployment and send this off to staging so that people can take a look at it. I’m going to right-click on the project and say package and publish settings. And I’ll come into the properties for my project. I’m going to select the staging configuration. Remember just as Scott Gu. had said, we’ve got Web configs for debug, release and staging, and I can have other environments as well.

And then here I’ve selected include all database configured in the packaged and publish SQL tab. If I click on that tab for the staging configuration, we’ve made some specific requirements that we want to bring the store data source and pull that data from an existing database, including both the schema and the data. This way, I’m going to populate staging with the data from development, and then send it to the store staging separate database. This is all going to happen as part of that publish process.

I’ll switch my build to staging. I’ve got my publish on staging, and then I’ll just click the publish Web. We’ll do a build and publish off to staging — publish started. Publish succeeded. Now I’m going to fire up the site. We’ll take a look, notice that we’re not on local host anymore. We’ve deployed the site from scratch and I’m going to go and buy a couple more red ones just to get that handled. Pain-free deployment, easy configuration, one-click publish, all in Visual Studio 2010. (Applause.)

So you’ve seen ASP.NET 4 with ASP.NET MVC 2, you’ve seen jQuery, you’ve seen the jQuery templating engine, you’ve seen jQuery IntelliSense, selectors, support at every level, whether it be multimonitor or IntelliSense, no matter what the client is or what the server is, with Visual Studio 2010, you get the most complete developer experience trying to make it easier for you to find and you to use your code. Thank you very much. (Applause.)

SCOTT GUTHRIE: So as you saw in Scott’s demo there, he used jQuery pretty extensively. You saw a lot of the great tooling support that we have for it now. We’ve been big fans of jQuery for several years now. About 18 months ago we started shipping jQuery as part of the ASP.NET MVC project and also, again, offering Microsoft product support so that you can get official Microsoft product support when using jQuery on our servers.

Since then, we’ve been working pretty hard to provide even more support for jQuery. Last year, we started offering jQuery through the Microsoft AJAX CBM that you can take advantage of our caching servers around the world in order to get jQuery even faster within your application. As you saw also, we made a pretty big investment in VS 2010, both improving IntelliSense, but also including jQuery as well and all new Web forms as well as MVC projects.

I’m excited today to talk about kind of the next level, the next step of our investments in terms of making jQuery even better and to be able to talk about the fact that we’re now going to start making code contributions to the jQuery project as well as providing QA and testing resources to make it better. And that templating library that Scott just showed off is an example of kind of an experimental jQuery plug-in that we’re contributing to the community and been working with the jQuery community on to get feedback and hopefully make better. And we think this is good for not only developers using Microsoft Web products, but hopefully better for the broader Web community as well. So, we’re pretty excited about this.

What I’d like to do is invite John Resig, who is the creator and founder of jQuery, on stage to talk a little bit about jQuery and some of the work we’re doing together. (Applause.)

JOHN RESIG: Thank you, Scott, and thank you everyone for having me here today. So, really excited to be working with Microsoft on improving jQuery. jQuery has been around for a while now, we released it back in January of 2006. It’s a pure JavaScript library, a completely open source. We worked very closely with the Software Freedom Conservancy, a nonprofit, to host the jQuery project, and all this code is released and out there in the open, and we’re really happy that Microsoft has really taken the opportunity to embrace it and work with us to create an excellent library.

We’re really excited especially since jQuery is growing quite strongly according to BuiltWith.com, we see jQuery has about a 30 percent market share among all Web sites on the Internet, so we’re really quite excited.

So Microsoft has been working with us, as Scott mentioned, over the past couple years now. And we talked and we saw a couple areas of mutual interest such as templating, doing dynamic script loading with dependency management, and also ways of doing data binding.

So we decided to start experimenting and working with them on an experimental templating plug-in, as Scott demo’d, and this is something that we’ve been working on and collaborating on in the open with the rest of the jQuery community. It’s all been documented and discussed on the jQuery forums, and we also have been developing the traditional jQuery development process.

So, again, we’re really excited to have Microsoft on board, having them contribute a code batch to the project, and we’re really looking forward to continuing to work with them, thank you. (Applause.)

SCOTT GUTHRIE: So we talk a lot about features and technology. I want to shift gears slightly now and talk about some of the work we’re doing to make it easier to get started with the Microsoft Web platform.

Last year at MIX, we introduced a new download that we called a Web Platform Installer, and this is a small download that you can install on any version of Windows and makes installing and getting a production server or development machine really easy to get up and running and fully configured. And over the last 12 months — so you can get all of the projects and downloads that we ship, whether they’re extensions or core products like IS, ASP.NET and Visual Studio, and over the last 12 months, we’ve had over 10 million downloads of it, and sort of — I’ve seen it’s dramatically reduced the time to get up and running and started.

Last year at MIX, we also introduced the Web application gallery. The gallery contains free and open source applications that you can run on top of our stack. This includes not just .NET applications like .NET new and Bronco and ScRu2 and wiki, it also includes popular PHP apps like Word Press and Droople. And later at this conference, we’re going to be talking about a new open source that we’re sponsoring called the Orchard Project, which is a lightweight CMS and blogging engine built on top of ASP.NET MVC 2 all delivered under open source, and there are some great talks tomorrow that you can learn about that.

The great thing about the application installer in general is that it uses the Web Platform Installer to install the application. And that means that it packages up all the dependencies that an application has on a server and can automatically pull down those dependencies, install them, and configure them for you. And so if you have an application through the Web application gallery that uses IAF and ASP.NET and SQL, we’ll pull down those products automatically, can configure them, we can even provision through database schemas, so it makes it really easy to get started and built up a site.

In addition to helping people from a technology perspective, we also now have two programs that you can take advantage of which makes it easy to launch businesses and build up a successful product base on top of our platform. Specifically, we have a Web site spark program that we launched a few months ago. This is available to any Web developer who builds Web sites on behalf of others. So, whether you’re an individual or belong to a company with less than 10 employees, you can join the Web site spark program. This gives you access to Visual Studio, Expression Studio, a couple copies of Windows Server and SQL Server that you can use for production deployment at no cost for three years. And there’s no obligation at the end of the three years to buy anything, but basically wanted to give you an opportunity to build up a business using the products, and then if you still like them at the end of three years, you can purchase them.

We also have the BizSpark program, which is available for startups, and also makes it super easy to get started without having to pay anything upfront, and without having to incur any cost obligations while you’re trying to grow your business. And again both of the programs are no obligation, at the end of three years you don’t have to buy anything. If you haven’t checked them out, I highly recommend you take a look at them.

To kind of talk a little bit about some of the success that they’ve had with the BizSpark program, I’d like to invite Michael from Curse.com onstage to talk about how they’re taking advantage of it to grow their business. Thanks, Michael. (Applause.)

MICHAEL COMPERDA: Hi. So, people that walk outside of our office often stare at our sign, raise an eyebrow and ask me, what is Curse? Curse is all about online gaming. If you’ve played an MMORPG, you probably know who we are. If you haven’t played these types of games before, we think you will soon.

So, about a year ago, Microsoft invited us to join the BizSpark Program. This program has given us access to free server licenses and development tools that have really helped grow our business. So, one of the challenges we face as a company is meeting the demands of a business with exponential growth. Each month, Curse attracts nearly 8 million unique users, and delivers a quarter of a billion page views. As a Web company, this is a great problem to have, right, but it is a problem.

So, our traffic on Curse.com is driven by gamers. They’re looking for ways to improve their online experience, and they can do this on Curse.com. Before BizSpark, we used the LAMP stack. We had a ton of servers, and I do mean a ton. We added more and more servers to our server farm, and we had no way of meeting the demand of our customers.

So, how did we solve this problem? We migrated to the Microsoft Web Platform, and here are some of the results. You can see the daily unique visitors to Curse.com during a series of World of Warcraft patches. You know, you often hear about companies that invest millions and millions of dollars in Super Bowl ads, and the next day their site goes offline because they can’t meet the traffic. Well, four to five times a year, World of Warcraft patches create a similar sort of occurrence on Curse.com. We have to scale up at an insane level. And using the Microsoft Web Platform, we’ve absolutely been able to do this. We cut our server hardware by a third. We now have a third of the server hardware, and we’re able to handle three times the traffic with no problem. So, it’s just been a phenomenal experience.

We fully anticipate exponential growth in the online gaming market, and because we have such a great Web platform, we’re totally confident to be able to scale out. And I hope you’ll come see us at Curse.com.

Thank you. (Applause.)

SCOTT GUTHRIE: So, we’ve talked about a lot of technology, a lot of programs today.

In terms of next steps, things I recommend, if you haven’t been to Microsoft.com/Web before, I recommend checking it out. You can download the Web platform installer as well as visit the Windows Web Application Gallery to download applications, and make it really easy to get started, provision servers, as well as development machines.

I recommend getting ready for VS2010 and .NET 4. We’ll be launching it, actually, here in Vegas next month. And you can download the release candidate of both of those products today, as well as attend a bunch of great sessions this week to learn more about the features.

And if you haven’t checked out the BizSpark, and WebsiteSpark programs, I recommend taking a look. We’ve provided, hopefully, an easy way to get started, save money, and grow a successful business.

So, I want to thank everyone for coming this week. We have Doug Purdy next, who is going to be talking about services-based Web development, and hope you have a great week. And thanks a bunch. (Applause.)

ANNOUNCER: Ladies and gentlemen, please welcome Doug Purdy.

DOUG PURDY: Good morning. (Applause.) Good morning. I’m going to talk to you about services powering experiences. In order to do that, I would like to ask a very quick question, how many of you use Twitter? (Show of hands.) Lots of hands are going up. Many of you around there. I love my Twitter. Everyone I know loves Twitter, particularly here at Microsoft. And one of the interesting things about Twitter is, Twitter gives you a great Web site where you can go interact with all the people doing tweets, and that ecosystem, that social network that’s there.

But the next interesting thing about it is, they also have a rich ecosystem of experiences like this, or rich experiences like this, or a host of rich experiences that are available on a variety of different operating systems and a variety of different devices. And what we’re really seeing is a profound change from just Web sites to Web APIs. This shift from a Web site that you experience the Web property with to an API that allows you to have a Web site experience on top of that with your Web browser, but the browser is part of a larger halo of devices and experiences that sit outside, and allow you to interact with that Web API in rich and new ways to take advantage of the underlying platform that is available to you.

And we call that services powering experiences. And so, take a step back and really think of what you’ve seen over the last two days. You have seen this in almost every single demo that you have seen here. You have seen the rich experiences on the Windows Phone 7. You have seen browsers all talking to Web APIs. And if you take a step back and you think about it, we are really undergoing a profound change in the way that we think about what an application is and what a Web property is on the Web.

Now, if you embrace this world-view, and you understand this world-view there are three critical questions that should pop into your mind. These are critical questions that we think deeply about. The first question is, how do you enable many experiences. It seems as if a new device or a new runtime, or a new language comes up on the Web almost every single day. How do you determine which language, which device you’re going to support.

Secondly, how do you make your Web API scalable and reliable? How do you ensure that if your API is successful and you have many developers and users that are hitting it, that it’s actually going to be able to withstand that load?

And the third question is how do you make money? We know how to make money on Web sites. There’s this thing called advertisement. But, when you embrace this new world view of having a Web API, how do you charge for that as a developer, how can you make money off that underlying API and the functionality and data set that is provided? So, what we’re going to do is pose these questions and then answer them in turn. So, let’s look at the first one.

How do you enable all those different experiences, all those different devices? Well, it’s a Web API, it’s a Web world, so open free standards, standards like HGP, standards like ATOM. But, as we’ve been working in this Web API world, there are three things that we think a lot about that we have needed to build on top of HGP and ATOM pub. And it’s something that as we work with customers, and we build out our own Web APIs that have become very apparent to us.

And the first thing is the desire to have very rich queries. Almost every single time when we look at a Web API we see that people want to query data in a free-form way. They’d like to be able to issue arbitrary expressions against a Web API and get results back.

The third thing we often see with Web APIs is that people want to program directly against that API inside of the browser. Although most Web APIs only expose their data as XML. And so what we see is a lot of people coming up with encodings from ATOM and ATOM pub directly into JSON. But, everyone does them a bit differently. And the third thing we often see is the desire for you to have rich metadata. So, understand what a service does and get a good programming experience, particularly in strongly typed languages.

And looking at those three items, we’ve come up with a series of conventions, three conventions, plus some additional things, on top of ATOM and ATOM Pub, that we call the open data protocol. The open data protocol is a set of conventions, and its’ very simple or you, if you understand ATOM and ATOM Pub to understand the things that we have available inside of OData, that’s what we call it for short, in order to show OData off in a first-class way, I’m going to invite up on the stage Jonathan Carter and we’re going to show you a real-world example.

So, what Jonathan is going to do is show us a real live example, we’re going to use this throughout the rest of the talk as the sign of a bunch of different applications and services that we’ll be rolling out. So, Jonathan, what do you have?

JONATHAN CARTER: Doug, I’m pretty excited to announce that literally just now back stage Netflix has announced a new API on top of its data catalog using the open data protocol. Now, what’s interesting about this is if a developer needs to create an application using movies, television seasons, actors, genres, they don’t have to create that wheel and that data themselves, they can consume it using the open data protocol.

DOUG PURDY: Jonathan, if you’ll click on that link. If you go to http://OData.Netflix.com you can follow along. So, if you have a laptop you can follow along with exactly what Jonathan is doing. This API is live today. And so Jonathan clicked on the link and what you see is an ATOM service document. Nothing new here. This is just a set of collections that Netflix is exposing in their APIs. So, Jonathan see catalog titles, can we go ahead and drill into that. And what we see here is it’s going to go do a get and return to you all the catalog titles that are available in the Netflix catalog.

So, what you’ll see is a bunch of additional information in there. You have a link where you can actually play the movie if it’s available. You can see the ratings. You can see how long the movie actually runs for. So, there’s a number of things that are just available to you. So, this is great data that you can stat to use in your applications today.

Now, Jonathan one of the things I talked about was query, the ability to want to execute arbitrary expressions, and you show how we can do that.

JONATHAN CARTER: Yes. The one thing that OData adds is the convention of a filter query option. So, what we could do is go up into the URL, and simply specify that we want to do a filter. Now, we can target any property, whether it be scour or navigations. So, in this case, I’ll just simply say, give me all titles that are rated higher than 4.5.

DOUG PURDY: And what this is doing, is it’s an arbitrary expression. We run it and execute it up on the server, and then return the results for you.

Now, Jonathan, I know you were deeply involved in the building out of the Netflix API. How much code did it take in order to enable this?

JONATHAN CARTER: Doug, there was no code.

DOUG PURDY: That’s great. Thank you.

So, what we have is, the .NET runtime that we have for OData understands how to take that expression, those conventions, and automatically execute those against your model and your underlying database.

And so, Jonathan, what I would love to be able to do is find out what the count of this is as well?

JONATHAN CARTER: OK. So, all we can do there is simply use another convention in OData called $accounts.

DOUG PURDY: And what this does is, it allows you to find out the number of results that are in the results set, and so we’ve got an entire expression language that is fully available directly inside the URL that you could use without writing any code, and that developers can use without adding any code, that issue arbitrary expressions against your Web APIs.

So, Jonathan, here’s a great window of creativity, can we go back to the service document, and let’s go a little crazy and show what we can really do with a query here.

JONATHAN CARTER: Yes. In addition to looking at this as just catalog titles, we see we have a lot of other entity sets that we can take advantage of. So, for instance, I’m a big fan of Japanese film. So, what would be interesting is if you could go in this from languages and say, Doug, you know what, I want to get the language that’s equal to Japanese, and within that any catalog title that is associated with that language.

Now, I also want to be able to watch the movie instantly. So, what I can do is do a filter saying only give me back titles that are instantly available right now in the Japanese language.

DOUG PURDY: Great. And this is just the tip of the iceberg in terms of expressions. And, again, Jonathan had to write no code whatsoever, and we find Japanese films that are instantly available in the Netflix catalog, and you can click the link to start watching those today.

So, Jonathan, one of the really cool things about this  I just noticed it returned (garbled), that’s pretty apropos for the location.

JONATHAN CARTER: It is, yes.

DOUG PURDY: So, the other thing that I talked about in terms of things that people often want on top of Web APIs is the ability to get a nice JSON coding. So, how simple is it in order to get JSON out of this Web API?

JONATHAN CARTER: Well, once again, Doug, we have another query option in OData where you can simply specify that we want the format to be JSONs.

DOUG PURDY: Right. For those of you that are REST heads, we do support content (garbled), so you can do accept type and it will return the right thing, but this is a nice convention that you can leverage directly inside an HTML page.

And in order to show that, Jonathan, could we just bring up Notepad, my favorite development tool.

JONATHAN CARTER: The real man’s development tool.

DOUG PURDY: The real man’s development tool. And so what we see here is, we have a very simple HTML page. It’s going to use some of the JavaScript and JQuery stuff that you just saw a few moments ago. And all Jonathan is going to do is go in and copy and paste that URL in. I believe that’s what you’re going to do.

JONATHAN CARTER: That is what I’m going to do.

DOUG PURDY: And copy and paste that in. You need to add a callback function, if we can do that, for those of you that are familiar with what we’re doing. We need to do JSON-P because we’re doing a cross-domain call.

JONATHAN CARTER: That’s right.

DOUG PURDY: Go ahead and hit save, and let’s show  did you hit save?

JONATHAN CARTER: I did.

DOUG PURDY: OK, fantastic. Look at that. So, what you see there is almost no lines of code in order to go talk directly. There we go. (Applause.) The beauty of this is, you can just execute arbitrary expressions against that dataset and start to bind it with almost no work whatsoever. So, if you can dream of a query, you can start to execute that directly against the Netflix API.

So, the third thing I talked about in terms of things that people often need inside of Web APIs is rich metadata.

And so, Jonathan, can we go back and look at the XML?

And so, when we do that, we’re going to drill in and show you some of the information that’s in the movie. And as Jonathan zooms in, you’ll notice something very interesting, particularly about release year. And what you see is, you see it says 1999, great year, loved it. And what you see there is also an attribute that tells us what the type is. And that’s inside the instance document. So, if you’re a client, you can go in and understand what type that is, and not just assume it’s a string.

Furthermore, OData has a mechanism by which you can ask the service all the data that it returns, or the type of data that it returns. In order to do that, Jonathan is going to utilize an option called $metadata. And when he does that, what you see is a document that gets returned that tells you every single type that is going to be returned by that service. So, you see here, this is the catalog title, you see synopsis is a string, you see runtime is Int32, and you see date modified is a dateTime. Now, where this becomes really great is, I can take this information and a tool like Visual Studio 2010, and create a wonderful programming experience directly against that.

So, Jonathan, let’s go ahead and open up VS2010. And what we see here is a very simple project. It’s a Silverlight project. Jonathan has just set up a data grid.

Can we please go in and add a reference to that service. So, this is the standard add service reference dialog. What we’ve done is, we’ve added OData support directly into this. So, you can go and point to any OData service, and we will generate for you, based on that $metadata, strongly typed C# or VB classes, or anything with a code DOM, rather, and what you can do is start to program against that directly.

So, Jonathan has added the reference, but there’s another thing that we can show here that’s pretty interesting. Jonathan if you will show off the diagram view that we have. So, we have an OData visualizer extension that you can download today that allows you to go up and look at any service in a graphical way and understand how an OData service is structured, the relationships, the scaler values, et cetera. So, this means you don’t have to go process that XML, you don’t have to go look at your C# classes that got generated, you can look at this in a graphical way.

And so, what Jonathan is going to do now is, we’re going to write some code against it. And how we’re going to do that is, Jonathan is just going to go into the page load function, and he’s going to create an instance of the generator proxy that we have, and specify the URL, the Netflix catalog that we were just using. And once he’s done that, he’s going to issue a query. And the way he’s going to issue a query is using the mechanism inside of the .NET Framework that we all know and love in order to write queries, which is LINQ.

And the beauty of what we’ve done with our OData library is, we have a translator that will take our LINQ expression and rewrite that expression to that same interoperable URL syntax you just saw. And what that does is, it gives you a fantastic programming environment, LINQ, inside of .NET, against all those services that implement that expression language directly in an interoperable way.

And so, what Jonathan is going to do now is, he’s going to utilize something that we have called the data service collection. And this is a very simple way in order to take care of asynchronous calls, two-way data binding, and marshaling it back to the UI thread. And all Jonathan is doing here is, he’s just specifying that collection, and then he’s telling the collection to load async with that query itself. You need an “a” in front of it.

JONATHAN CARTER: I do.

DOUG PURDY: Great. Let’s go hit an F5, and this should work and show us magic.

JONATHAN CARTER: It’s complaining because we’re using across domain queries.

DOUG PURDY: Got it. And so what we see there is, Jonathan, your favorite film, or actually your favorite TV show.

JONATHAN CARTER: Isn’t 

DOUG PURDY: I thought you were a Vampire, Vampire Diaries.

JONATHAN CARTER: No, that’s too mainstream.

DOUG PURDY: Got it.

So, what you see there is, you’re seeing three different things. You’ve seen us show query, arbitrary expressions inside of the Web API, consistent JSON encoding of the ATOM documents, and, three, rich metadata that you can leverage in development tools like Visual Studio.

The next thing that I talked about was, you really want to be able to support all those different devices. You’d like to be able to say, hey, look, I want to support all those different mainstream devices with my Web APIs. But, boy, I sure as heck don’t want to write a bunch of proxies and client SDKs in order to talk to those things.

So, what we’ve been doing is investing in client libraries that understand OData on a variety of different platforms, not just Microsoft. And so, what Jonathan is going to show off here, if we can switch to the camera, is a Palm Pre device. And we are going to show OData, our OData as a client, running on the Palm Pre.

So, Jonathan, could you please select the Netflix catalog. So, Jonathan will click that. And when he does it, we were having some issues with the network, but it does work. You can see this is the exact same ATOM service document you saw a moment ago.

Jonathan click on catalog titles, please, and we’ll see whether or not it actually comes back. I think we’re sharing the same network with everyone else. And what this is going to do is issue a get query, go and retrieve the results, and then show them in the Palm Pre device.

The key takeaway I want to have here is, this is not just a .NET thing. This is fully available, and we have clients that run a variety of different devices that we are providing in a first-class way. And, in fact, Jonathan, what we’ll do is, we’ll switch back over to slides because we’re having a network issue. One of the things that I’m very, very happy to announce today is that we have support for the iPhone directly for OData. So, what you can do now is, you’re seeing a screenshot of this. This is in Xcode. In fact, this is on my very own Macintosh. And, this is a iPhone client that is talking directly to the Netflix API. This is available today that you can download and start to program against the Netflix API directly inside of Objective C, and any OData service that’s provided out there for you. (Applause.) Great. We’ll take applause for that.

So I want to talk to you about how serious and committed we are to the open data protocol. We are so serious about it that you’ll see two very important products on the screen right now. SharePoint, in SharePoint 2010 every single list, every single list exposes an OData feed. That means those arbitrary expressions that you just saw you could issue directly against SharePoint. And many of you, I know this is a Web conference, but many of you deal with lots of SharePoint installations, and what this means is you could build very rich device experiences on top of SharePoint utilizing the protocol.

The second thing is, we are building support for OData into Excel. In 2010 you can utilize a plug in we call Power Pivot for Excel to go in and talk to any OData service. And that means you can pivot on the data, build charts, build diagrams, and really interact with that data in a rich way. Further, there are more, and more, and more Microsoft products that are either implementing, providing OData feeds, or consuming OData feeds, some of which we have on the screen.

Of course, we support, as I said, many different client APIs in order to be able to talk to this Open Data protocol. We support the JavaScript API, which you’ve seen twice. We have a PHP client, we have a Java Client. We have the iPhone client that we have. In addition, we have the .NET client. And tonight  today I am very happy to announce that we have made the decision to release the .NET OData client under the Apache 2 license. And that is available for you today.

We truly want to have as many clients on as many devices, in as many languages, and in many runtimes as we can possibly get on top of ATOM pub and these three conventions that we call OData. And we are partnering extensively with many people in the community, with many of our customers in order to expose more and more data utilizing this mechanism. Many of us strongly believe that OData is the mechanism by which we can get open data for the open Web, and we are extremely excited about the opportunities that we have with it.

And you can go today to www.odata.org, the site is live. You can get all those clients that I just talked about, and you can also see all of the different implementations that we have available and there’s a great SDK that people can start to use in order to get a good understanding of what OData is. And we’re really looking forward to working with the community and our customers on assuring that we get very broad adoption of these set of conventions on top of ATOM pub.

So, the next thing that you want to turn to when you think about this Web API world, is you want to be able to write your own Web APIs. We just talked about a protocol, a set of conventions that you can have on top of ATOM pub that will provide even greater richness for all these different devices. But, how do you go build your Web API. How is it that you can simply stand up a Web API that you know will be reliable, and will be scalable.

And so we have a very, very great set of solutions in order for you to go build that, and in fact, this is the way the Netflix API was built that you’re just seeing. The Netflix API is built on top of Windows Azure, and built on top of SQL Azure. So, for those of you hitting www.OData.Netflix.com, you’re hitting a Windows Azure Web site backed by SQL Azure.

So, what we’d like to do here is show you how simple and easy it is in order to be able to write the same kind of Web API and move it directly up to the cloud.

So, Jonathan, let’s switch over, we have Visual Studio here, and what Jonathan has is our scenario that we’re going to show in just a few moments is we want to continue on this movie theme. And what we’re going to do is we’re going to stand up a Web API that allows us to specify whether or not we own a given movie. The Netflix API is read-only. You can get all the information from the catalog, but we’re going to build a service that allows us to specify whether or not a movie is owned or not inside an application.

Jonathan has an existing database. We have an existing model. Jonathan, can we go in and show how easy it is to build a no-data service. So, Jonathan is going to add a new item, and what he’s going to select is a WCF data service. And what that will do is create for you a nice little template, and all you need to do, because we’ve already specified our model, and we already had our database, is to go in and put the parameter in, in the generics, and in this case we’re just specifying the context that we had generated from the diagram, and then he’s going to set some configuration rules. And this is just a simple matter of Jonathan going in and setting some config, which he’s going to say, please allow all the different aspects of the model to be exposed, and allow anyone to access it.

And you’ll notice, Jonathan, I believe you removed more lines of code than you actually wrote. So, let’s go ahead and hit F5. So, we have just built an OData service. We had an existing database, we built a model very quickly, we literally imported that in and created an EDM, and you’re seeing the exact same service document, the same exact functionality by I think Jonathan literally wrote one line of code in order to enable that.

Now, this is running locally right now on SQL Server, as well as Windows Server. It’s running on this dev box. So, what we want to do is do this same exact thing that Netflix did. We want to take that, that we have local, and we’re going to move it directly up to the cloud. How easy is it for us to do that, Jonathan?

Well, because SQL Azure uses the same, all we’d have to do to convert from SQL Server to SQL Azure is swap the connection string to point at our SQL Azure database, which I’ve already deployed. So, in this case we could do that with a simple Web config change.

So, the other thing Jonathan is going to do right now is he’s going to go in and he’s going to add a Web project, and what this is going to do is specify all the different configuration options you need in order to move this clod. The key point that I want to get across here is that, one, it was simple to build that Web API, and two it is the matter of configuration. In order to move that up to the cloud, in order to take advantage of the reliability and the scalability and the inherent benefit of moving to a cloud-based infrastructure. So, what Jonathan has done is he’s done a very simple configuration. If he right clicks here, we can go ahead and do a direct publish, and take it up and deploy it into Azure. But in the interest of time Jonathan has already deployed this previously. He’s going to go up to the Azure portal, and you’re going to see that exact same service running with zero lines of code changed.

So, he’s going to go up. You can see this running on cloud.app.net, and he’s going to say Movie Library, and you can hit this service as Services.live, it is the same lines of code that Jonathan just wrote a few moments ago, one line of code.

So, the next thing we want to show is we are very committed, very committed to make it even simpler to build these cloud-based Web APIs. So, Jonathan, could you do me a big favor and kill Visual Studio. We’re going shut down Visual Studio and we’re just going to utilize a Web browser. We are going to build that exact same Web API, exact same Web API inside the Web browser. In order to do that, Jonathan, I’d love for us to navigate to the SQL database, if we could, and we will go in, this is the SQL Azure portal. We will select that Movie Library, and you’ll notice there’s a new button for those of you who are familiar with SQL Azure. It says, manage database. And if Jonathan selects that, you’re going to get an early look into a project we call “Houston.”

What “Houston” is, it is a Web-based mechanism to build databases, to develop databases directly inside the browser. Well, there’s some applause there. (Applause.)

We’re very, very excited about this. This means, if you have a browser and you have Silverlight you’re in the database development business. And so what Jonathan is showing here is he’s going in and examining the table that we already have, and we could show all the data that is available to you directly inside that, not opening up another tool, not deploying another tool at all.

So, we now know how to create a database up there. But, the second thing that you saw us do just a few moments ago was create that WCF data service. Well, what we also have to show you today is an early look on something that we’re going to put up on SQL Labs here very shortly, and what this is, it is an automatic OData service for any SQL Azure database. And this is the easiest way for you to take data inside of SQL Azure and get it exposed into that OData ecosystem.

And all you need to do is check a check box. In fact, Jonathan and I joked that this is checkbox-driven development, and we expect there to be a whole plethora of books available on how to do this here shortly.

So, what you see us doing here is, Jonathan, check the checkbox, specify that database that we were just looking at inside Houston, check the checkbox, and now you’ll see a link there that we can get, and we’ll go directly to it, and you can see that exact same Web API fully available to you and we didn’t write a line of code.

So, we are absolutely ecstatic about the opportunity to really up level the experience, to allow you to build these kinds of Web APIs directly inside the browser. The key thing is to open this data up, and we want to give you the tools, run times, and languages in order to be able to do that.

So, the next question that we posed, the question is, now that we can build our scalable, reliable Web API, how is it that we can go about evangelizing that Web API and making money off that Web API. And this is something that we’ve been thinking a lot about, and something we’re so excited to talk to you about today.

We have a project that we call Microsoft code name “Dallas.” Now, this was announced at PDC. The key thing I want to get across today is, if you think about this new world of the Web APIs, the importance of “Dallas” becomes so clear. The ability for you to have an information marketplace where you, as a developer, can go up and find Web APIs, find datasets that are interesting to you, and mash them up inside your rich experiences. There is a real opportunity for us to unleash all sorts of data, and use it in new and fantastic ways.

In addition, “Dallas” gives you a fantastic way, if you have a Web API, or if you have a dataset, to take it to “Dallas,” not do any code at all, but bring your data, and bring your business model, and make money off it. And we are absolutely excited about the opportunity that we have with “Dallas,” and that we can partner with you on as well.

And so, what I would like to do is show you the “Dallas” catalog, and then we are going to show an application that we have built utilizing all the different services that we have seen thus far in this keynote.

So, Jonathan, let’s go in and go up and take a look at the “Dallas” portal, if we could, please. This is live today. If you go up to www.sqlazureservices.com, you can follow along with us. Jonathan, if you’ll click on catalog, what I would love to be able to do is take a quick tour.

So, there was a number of new datasets since PDC that we have up there. In fact, we have 25 brand new datasets from government agencies to one-man shops, or one-person shops that are just exposing data to large dataset providers are available inside “Dallas.”

And we want to find two different datasets, because we’re going to utilize it in an application. And following along on the movie theme, what I want to do is, I want to go find some UPC information.

So, Jonathan, I know that we have partnered with Greg in order to get UPC data up there, which we see here. And we’re going to take that UPC data, and we’re going to use it in an application. Could you please hit subscribe? And doing that, we’ll go ahead and say, we’re going to accept the terms of use. And now we can start to drill in, and take a look at that data.

So, what you see here is the “Dallas” exploration page. And let’s go ahead and type in one of your favorite movies. Jonathan is an interesting guy. I’ve worked a lot with Don Box, and he knows GUIDs like they’re coming out of his head. Jonathan is the only guy that I know that knows UPC codes. So, this is a UPC code for one of his favorite movies, which is Ink. Speaking of which, the DVD for Ink is not around here.

JONATHAN CARTER: Yes. If somebody could bring it up on stage, in my backpack.

DOUG PURDY: Great. We’re going to need that later. And so, can we go ahead and hit the ATOM tab, please. And what this is going to show is, all of the data being returned from “Dallas” is utilizing those set of conventions that you saw previously with OData. And so if you look here, you see decimal, you see string, you see all that type information that’s available to you. And we’re going to make use of that in just a few moments.

Can we go back, please, to the “Dallas” catalog. The next kind of data that I would like to get out of this, is I would like to be able to get a set of movie times. Thank you very much. And what we’re going to do is, we’re going to go into the NAVTEQ data. And NAVTEQ is really interesting, they’ve got a set of data, where we can go up and based on location, and based on movie name, go find local movies that are available today, movies that are showing. And we want to make use of that data as well.

And if we drilled in and explored that dataset, we could absolutely go in and do the same sorts of things we were doing before. But, what we’ve done is, we have built an application utilizing Windows Phone 7. As we’ve shown previously, if you have a Silverlight application, you can now take that library and leverage it directly into Windows Phone 7 Series, if we could switch over the camera please What we’ve done is, we’ve built an application called Movie Finder. And what this does is, it mashes up those three  I’m sorry, rather four services that you’ve seen. The Netflix service, the service we just created utilizing checkbox-driven development, as well as the two datasets directly from “Dallas.”

So, Jonathan, let’s go ahead and show folks how this works.

JONATHAN CARTER: All right. So, we’ll click search by UPC. What we’ll do is hold up the box, and I’ll hit scan here, take a picture of that, and now it’s going to identify whether it can read the UPC code off it.

DOUG PURDY: So, what this is doing is, it’s leveraging the power of the device, and leveraging that dataset that is available for you directly inside “Dallas.” And then it goes and looks up that inside of Netflix, and brings that information, here is the synopsis directly from the Netflix API.

Jonathan, can we scroll over and show people. You can also see here that all this related information was brought to you by those relationships that are inherent inside the OData feed.

So, Jonathan, let’s show the next thing where we’ve done the integration. What Jonathan has here is, there’s a button that he’s going to go ahead and click. If you’ll click it on the lower right-hand side, what that does is, it does a post to the Web API you just saw us build. The checkbox-driven API, that calls it directly.

And the last thing that we want to show off is, we’d like to be able to do a search, and we’re going to do a search directly against the Netflix API, and Jonathan is going to search for a movie that is currently showing in theaters. It also happens to be in the Netflix catalog, which is pretty interesting. That does a search, he’s going to find “Alice in Wonderland.” He’s going to select that. And what’s going to happen is, he’s going to do another call up to “Dallas,” and determine that that movie actually has show times that are around.

So, we’re leveraging the power of the device. We’re leveraging the power of the “Dallas” dataset. And you’re seeing a four-way mash-up directly inside a Windows Phone application. (Applause.) So, we are so excited about the opportunity for you as developers in order to be able to utilize that dataset.

But, taking a step back, one of the most interesting things is, how do you go get access to something like “Dallas” in order to evangelize your APIs, your datasets directly? Can we switch back to the slides, please. This is so important for you to have the capability to be able to get yourself listed on that marketplace, and in order for you to be able to specify your own terms of use, to be able to specify your own business model, and to do that inside “Dallas.” And we are so excited about this.

Information, to paraphrase Stewart Brand, wants to be free, and information also wants to be expensive. And “Dallas” is a marketplace that fully embraces that. If you are a governmental agency, if you are a city, “Dallas” is a place where you can come bring your data, and make it freely available to all developers. If you’re a one-person shop that just has data that’s sitting inside an office someplace, or in some corner, “Dallas” is a place where you can quickly onboard that data, bring your terms of use, and bring your business model, and make money off that. You’re just one person. In fact, we’re going to see an example in just a second of someone who is doing exactly that.

And if you’re a large data provider, if you are a large API provider, you can come to “Dallas,” set your terms of use, you can set your pricing, and take advantage of the discoverability, the reliability, and the scalability, because “Dallas” is built on that same Windows Azure platform that the Netflix API is. And we are so excited about this, and we’ve been spending a lot of time with lots of customers who are just as excited about it as we are. And we’ve got a brief video we’re going to show you now.

(Video segment.)

DOUG PURDY: Microsoft “Dallas,” the information marketplace for open data: We’re very, very excited about this.

So, what have we seen? So, we have seen that the Web is undergoing a profound shift, the shift from Web sites to Web APIs. This shift allows us to power all these different experiences, whether it be on the Windows Phone 7, it be on Windows, the Mac OS, the Palm Web OS for any browser. And this is a shift that you really need to internalize and think deeply about. We certainly are. We think the world is changing in some profound ways, and we’re very excited about the opportunities that we have here.

So, I began the talk by talking about three different questions, which we posed and answered. The first was: How do I enable all those different experiences in a rich way, leveraging queries, leveraging metadata, leveraging the browser as a first class programming environment? The solution for that is the Open Data Protocol. The Open Data Protocol makes it easy to both consume, as well as stand up Web APIs and get broad reach across the board.

The second question I posed was how do I make my API scalable, how do I make it reliable, and the solution is Windows Azure and SQL Azure.

And the third question I posed was how do I make money, how do I evangelize and bring my dataset and my Web API to a new audience, and take my business model with it, and the solution for that is “Dallas.”

And this is just the beginning. We are very excited about the services powering experiences world. There are things like synchronization that we think deeply about, things like caching, things like management, things like operations, things like security. And so we’re really looking forward to continuing the conversation with both you and the community as we move to a services powering experiences world.

With that, I’d like to invite up on the stage Bill Buxton, one of my favorite speakers, who’s going to be leading us through the rest of the event. Thank you. (Applause.)

BILL BUXTON: So, here we are, doing what comes naturally.

So, I wanted to – I’m going to do something I didn’t plan on doing. Here’s the deal. I’ve just got to tell you why I love this community, and why I love this industry. So, here’s what happened. The last two days, today and yesterday, we’ve had all this stuff about these great tools, all this stuff about mobile and so on and so forth, and it’s all really neat, but it’s just a technology, it’s not the people part of it.

So, I’ve got to tell you, here’s something that happened, I’ve got to tell you this little story. I’ve got to start with this guy named Benjamin Livermore. And you’ve never heard of him, but in 1857 he was the first person to make a mobile device that you could do text entry on. It was called a typograph. And Benjamin used to walk around, hand in his pocket with this little thing, and a six-button cord and keyboard, and he could text and write and take notes on that. So, he was texting to himself, wireless wasn’t quite there yet – well, it was wireless but just didn’t talk to anything, and he would take notes.

And so we were in a meeting yesterday with some folks, having seen all the great tools for Mobile 7 and so on, and they said, so, Bill, what do you think is missing? And I was sort of saying, well, you know, I’m kind of missing the fact that you know with touch screens you kind of have to look when you’re entering text, and it would be kind of neat if you could actually like a 12-year old school girl when you’re answering a question in math be texting to your friend and sort of saying, you know, “what are you going to do tonight” kind of thing.

And so I just threw out this nonsensical idea that, well, why not use Morse Code. Now, the first thing, to some of you under 30, Morse Code is something the used to – OK, it’s up here. (Laughter.) So, you just have it’s a touch typewriter. It just happens to only have one key, and you just do dots and dashes, right? So, I just threw this out.

So, at 12:30 last night in my – I was reading my mail before, and lo and behold this guy David, who heard me say this, he sends me this stinking app and here it is. It’s a Win 7 Series phone mobile app built on the tools you could download yesterday morning that actually lets you Twitter or Tweet with Morse Code. So, I figured this is pretty cool. (Laughter, applause.) This is what I love about this business, this stuff and this people. It’s just crazy. It means the stuff actually works, but actually here’s what it really says, one of my favorite things, Scott. Scott Guthrie, you are so five minutes ago. (Laughter.) Forget this QWERTY keyboard stuff: 1857.

So, in some sense that brings us back to the notion of what this is about. We’re talking really loud about technology, but of course that’s not what we do; that’s the enabler.

And so I’m going to – surprise, surprise – talk a bit about design. So, we’ve got these great tools, and we’ve got great talent, it’s obvious from what we’re seeing, and the question is we’ve worked so hard to build those tools and to develop our own personal talent and how to use them. Then how do we make sure we make the best use of them?

It’s not how do we build things in the greatest way; how do we build the greatest things, most worthy things in a great way, right, get to the right design and the design right.

And so I wanted today to – this topic, you know, we talk about natural user interfaces and stuff like that, but I don’t want to say that, so I say – if you don’t know about “Annie Get your Gun or Annie Oakley, she rode with Buffalo Bill and she was the hootenest, shootenist female sharpshooter around at the time, but doing what comes naturally is her theme song from “Annie Get your Gun,” and that’s where this all comes from. If we come back to this notion about personal skills, high performance, that’s what Annie did, is how do we build tools that let us capture that human capacity.

So, I’m going to push the big natural green button to take us into – because here we are in Vegas, right, what a fantastic place to talk about natural user interfaces, right? How more natural can you get? I mean, it’s so natural here, man, it’s supernatural. It’s just unbelievable. So, I look at the surroundings we’re in, and so let’s talk about it’s – I just love the paradox, OK? So, here we go.

All over you’ve heard people talking now, because they must be real because it’s got a Wikipedia page, about this NUI, this natural user interface.

And so the question that starts coming is sort of like this is like, as this slide shows, is natural user interface, the NUI, the new black? Is it the black of the day and tomorrow something else is going to be the new black?

So, just coming out of the shadows of this blackness is this thing called Natural UI. And so the question is, can we put some skin on the bones that make this mean something, in a sense that when we’re designing and approaching our systems, that we can actually have something we can bring from an attitudinal sense to what we’re doing.

And I don’t know if you know this, my background is in music. And from that, when I started off as a professional musician, frustrated with the instruments I had, and started to build digital instruments. The first multi-touch device that we did in 1984 was actually we were making a drum, a percussion instrument for a synthesizer.

But here’s the thing, ultimately if you think about it, musicians are the profession that has the longest history of expressing powerful and creative ideas through a technological intermediary. It’s a really interesting way to think about it when you start thinking, well, maybe therefore just a huge history about instrument design, it’s called the Lutier in French, the lute builder, that brings us to it.

So, you’d look at this violin, and here’s what’s really fascinating. People say, oh, you can’t build a mouse for more than $15, people won’t pay for it. But the bow of this violin costs over $10,000. The bow of any professional violinist, the first violinist in a symphony orchestra cost at least $10,000. If they’re contrabass, it’s even more than that. And that’s the mouse; the instrument could cost up to a million dollars. And these are people who don’t make any money; they’re musicians, they’re not computer scientists or developers. So, as a percentage of income, that’s a fortune.

But the value is there because it’s worth learning, it’s worth the investment, and it’s all about the return on investment.

So, we look at this instrument, and you sort of say, I’ll just say there’s three levels of complexity. There’s normal specification, there’s military spec, and then there’s rock and roll musician spec. And that last one is the one, because not only does it stand up, work all the time as it needs, it’s worthy of the skills that the users invested and it reflects them beautifully.

So….be a lute builder, and approach your designs that way.

Now, I’m going to give you some notions about what this means in terms of natural user interface, and I am now going to stick my neck totally out.

So, this is something called the WX7. This is my computer interface. And I had a little bit to do with this, but it came out around 1987, and it’s an electronic saxophone.

Now, I happen to do my degree in music, and that was my instrument, the sax. I have a Selmer Mark VI tenor sax, and if you know what that means, eat your heart out. And I got it for $230 at Selmer Sax.

This thing has the same fingering as the saxophone, so for me this is a natural user interface.

But on the other hand – (plays instrument) – it doesn’t sound like a saxophone.

So, you start to say, well, that’s not natural to have a flute sound come out of a saxophone, but if you think about it, that’s not quite true, because it’s natural for me because this is what I play, I don’t play flute. Actually I do a little bit, but not very well.

But on the other hand, what I really don’t play – (plays instrument) – I don’t play saxophone air guitar. (Plays instrument).

The point is – (applause) – no, no, no. Now you understand why it’s left to the music industry. (Laughter.)

OK, the deal is this, that this, if you know how to play, the better you play, the better that interface is, but it’s useless for doing your income tax.

And that’s the point, it doesn’t have schizo-Vizio, it doesn’t have schizo-application-a. It does what it does and it does it really well, and the whole thing about the design is it reflects the skill of the user, the hours and hours and hours of what the player should have invested practicing.

Now, we talk about natural and this natural user interface, it’s really interesting, because you sort of say, well, what the heck does natural mean? And that’s actually a hard question it seems to begin with.

So, this is a picture of my oldest son Adam as a baby, and you sit there and you say, well, OK, let’s start at the beginning and what’s natural. Well, they come out of the womb and you can pee, you can poop, you can scream, you can kind of perceive, you can giggle a little bit and gurgle, and you can drink, and that’s about it.

Now, if that’s all you have to work with, what you’re born with at that level, we’re going to be hard-pressed to build user interfaces. I mean, if it’s a natural UI that has to conform to that, what you’re born with, we’ve already – we’re way out of that place.

But there’s one other thing that’s really natural, and it’s not a sense or a motor action; rather it’s the ability to acquire skills. It’s the ability, it’s the innate compulsion to acquire skill as we live in the world, and intelligence is actually the whole, by Piaget, definition to this whole notion of the acquisition of skills and how to adapt them and assimilate to a changing environment as you develop.

And so when we talk about natural user interface, it basically says it is interfaces that respect the skills that have been acquired by the user.

So, I want to illustrate this a little bit by using this metaphor of a mirror, and the notion is that if I’m looking at any design, any application, and I want to get the sense of what is the quality, how would I evaluate this application, this device? I have a really simple litmus test, and it’s basically to say, pretend the technology application is a mirror, how well does it reflect me, the intended user, the target user? And you start to say, well, that’s kind of too wishy-washy, artsy-fartsy way to state things. So, let’s get a little bit more specific and tie it to what I’ve said so far.

So, let’s come back to this notion about skill. So, the first thing I is how well does it reflect my four basic skills. So, first of all, how does it reflect my motor sensory skills? So, one the one hand, you look and you see, you’re totally distorted. It’s a bad design, because your motor sensory skills are how I see, how I touch, how I move, right, how I sound, how I hear. And then it comes back in as we approve the design so that things start to reflect that I have two hands, I have 10 fingers or four fingers on each hand and a thumb, that I have a voice, I have ears, I have legs.

I’ve told the story that if you found a PC two thousand years in the future, and all traces of humankind had been lost, what would a good physical anthropologist infer about human beings today? And they’d say you have no legs, you have no mouth, you have an eye with about – that can do fully saturated colors, you have an ear that can do 200-hertz bandwidth and take clicks, and you have one claw with 80 fingers. (Laughter.) And that would be as reasonable based on the data as it is wrong, and the question is, how well does it reflect.

Now, that’s just the motor sensory part of us which is visible. So, let’s come back to the next stage and say, how well does the system reflect my cognitive skills, how I think, how I learn, how I problem-solve, how I remember. And we start off in this world of things that are totally distorted, and then gradually we start to get systems where the fidelity increases and it starts to be an accurate reflection of me.

So, now we’ve got two out of four, and then we start to see this other part, look, how well does the system reflect my social skills, things like proximity, where I am.

So, for example, this says something about me being shy or something. I’m not, but think back to proximity, when is it appropriate to speak, what am I allowed to say. Why do you all know that I’m a speaker and you’re not? Because I’m here by location.

Those are all our social skills; bring those in, bring those to high fidelity. It’s another way to think about social computing and social networking, and it’s got to do with not about the technology but how do people function, what are their existing skills, what new skills could we bring about.

And finally, there’s this slightly less intangible one, but emotional skills, how well does the system reflect, what’s appropriate in terms of emotional response.

You know, if I came out here hysterical and screaming, although some of you might say I am hysterical, but the thing is that how does it reflect that, what’s appropriate, and a game is different than perhaps an accounting package of what you would want to do in terms of the emotional curve that you want to come during the application.

But in some sense this is basic fundamentals, but it brings back the notion that the most important technology is not the hardware, not the software, it’s the human being. And the neatest thing about it is while all this physical technology, the hardware and software, are changing under us all the time, that’s OK because they’re the secondary technologies. The primary one is actually pretty consistent. So, the time invested to understand that part, the four skills, is the important part, and it will last for your whole career, and then you can be as cavalier as possible to change and bring the most appropriate technologies that are available at the time. It’s a good way to think about things.

Now, if we talk about these skills, I want to give you a few examples about how important this is. So, I put up this image of somebody playing an air guitar. Well, I sort of let the cat out of the bag, OK, I told you the instrument, but is this person playing flamenco or classical guitar or renaissance guitar or is he playing heavy metal? You know exactly by the size of the gesture that this is not JS Bach, right?

And then if you contrast it with this and you look at the nature of the gesture here, and as people listen to Vivaldi or something like that or harpsichord music, they’re going to be like this, and these are the kind of actions, right? And if you’re doing that in a bar where Iron Maiden is playing, you’re probably going to get punched out, because it’s inappropriate.

And we’re just talking about listening to music, and what’s the gesture with music. So, it’s not about what’s the appropriate gesture for music; what’s the appropriate gesture for music of this particular idiom in this particular context for this particular person in this particular place and point in time. And so we have to go way beyond the first granularity.

So, here’s another example. We’ve said, OK, we’ve got the right gesture, it’s all about the games, and so we have a person coming out with Natal playing the game. So, watch what happens here. It’s fantastic.

So, what if you play exactly the same game on an airplane? (Laughter.) This is my son again when we shot this picture. Right? It’s not natural. The naturalness doesn’t come from Natal, it comes from Natal in the right place. And it’s not about the technology.

Simple things that reflect here in terms of we’ve got shirts here. Why? Why are women’s shirts backwards and wrong? (Laughter.) And they are, they are, absolutely. This is not a matter — because women, when buttons came out, buttons were expensive, and the only women who could afford them didn’t dress themselves, they had a dresser. So, they were made for the convenience of the dresser, not the wearer. Men dressed themselves. Women’s are wrong if they’re doing them up themselves.

These are all things about human factors, the fine, fine levels of granularity about how things work.

But Flaubert here, “Le bon Dieu est dans le detail,” God is in the details. The detail of the finest granularity is where things lie.

So, I want to wrap up with something that’s pretty cool. This is a guy, Wilfred the Hairy. Now, Wilfred the Hairy died in 897, and he – I’m bringing this up, because it’s important for you to know the history, he was the first person to do a multi-touch paint demo. Now, you don’t know this, but as he was dying, he got his hands on a shield, with his hands on his blood, he was the founder of Catalonia, and he did this, right, and the blood of his hands on the yellow and gold of the shield became the flag of the Catalans, and that was multi-touch.

And I swear I would never do this demo, because it’s so cheesy, but because it had a historical context I had to do it.

Now, of course, I’m kidding, but what I’d like to do is say, so, maybe we can improve on it, because it’s not 897.

So, having done that, I want to introduce a really fantastic artist named Nick Kamuda (ph). And you probably saw him this morning when coming out. So, Nick’s going to come out, and we’re going to show you some stuff.

So, we’ll be quick, but I just want to finish up with sort of an AbA structure, going from the instrument back to artists.

There’s an approach at Microsoft Research called Project Gustaf, and they’ve been developing a paint program with brushes that just in my space I’ve never seen anything like it. Nick knocked this particular painting up off, yesterday he was working on it, but this is painted completely from scratch.

Notice he’s got a palette, and while he’s painting, he dips, he mixes and stirs paint. What’s critical about this thing is that they’re using physical modeling to actually model the physics and so on of the materials and the brush, right down to the level of the paper. You can change the paper to get different textures on the canvas, and it’s got depth. The lights and the shadows change, depending on where the lighting is. And the paint behaves correctly.

Nick, can you zoom in for a bit and just show like what happens when you just – and it’s got – we’re using some hardware that was loaned to us. It’s prototype hardware from Wacom where it’s a mash-up of some components that they’re developing that include a 10-finger multi-touch coupled with a really high quality stylus.

And when you come in, you keep going in and it’s down almost to the pixels. You’re getting like incredible detail.

And you’ll notice that if he starts to mess with his fingers, he can smear with his fingers and mix the paint or he can apply with his brush. He can also manipulate the page. So, he can come in for details, and so on and so forth.

So, it’s just quickly while you’re doing this, but what’s really clear, he can paint better than I can play saxophone, and he can really paint better than I can paint.

And that’s the point, it’s not about the technology. Here’s a guy who’s a professional designer, trained at an art college, a professional painter. So, I mean, in a sense how did — as a painter, how do you feel about this, what’s the sense of this compared to other painting systems you’ve used?

NICK KAMUDA: Well, it’s pretty amazing. I’ve had this for maybe two weeks now. They gave it to me about two weeks ago to start messing around with. And the – I mean, the number one thing that makes me feel comfortable and at ease about it is the way the color blends. It behaves like oils, right? They’ve got all this complex physics modeling and things to simulate the way the oils come together and the way when I put a mark on the page – let’s see, put in some blue here on her sash, the way I can come in and just kind of get right into it with my finger. It’s just this impulse that I have, you know, after years and years of training, and I can’t ignore it, I just want to use it.

BILL BUXTON: So, do you want to talk a bit about what the actual tools you can do that I haven’t mentioned yet?

NICK KAMUDA: Sure, sure. So, there’s a list of brushes here on the side. The brush, the way they model the brushes is pretty impressive with the – I don’t know if you can see – so you can see the brush distortion and things like that there. And then charcoal smear, erasers, undo, this kind of thing.

BILL BUXTON: The critical thing here is that I love – and we’ve been working together with them is that the combination, it’s not pen or touch, it’s pen and touch. So, on the one hand, with the same hand he’s using the brush with he can lay down paint, and then just with his finger smear it. But he can also use his other hands or multiple fingers to actually work the page. And the modalities are really clear and easy to deal with, whether you’re smearing the paint or manipulating the page, and it’s just totally fluid. So, this is why this – I mean, this technology we’re using here to do this right now is held together literally with duct tape, but it’s – I mean, it really is. (Laughter.) You can see it on the side.

But here’s where this goes. Why don’t you keep painting, and I’ll keep talking so we don’t keep these people from lunch.

The thing is this: So, you could say, well, I’m not an oil painter. Message No. 1 This was made with a total respect, like the luttier, for the skills that somebody spent hours and hours over decades to acquire to paint. That’s the deal.

NICK KAMUDA: That’s the beauty of it.

BILL BUXTON: It’s not about cool technology. The technology is there as a prosthesis for the skills of the artist.

I said that what you’re born with is a capacity to acquire skills. Every person, every customer you have, no matter what your industry is, has acquired, through a lifetime of living in the everyday world, really deep specialized skills.

What I’m saying is we need as a community to show the same respect for those skills, the specific skills of our target audience, as these people, Naga (ph) and Bill, who you’ll see in the video that’s going to be released today, so you can see more background on this paint system this afternoon, on Channel 9, but the same level of skills that Bill and Naga put into this, we all need to put into our different applications.

But if you want to say, well, what does it got to do with you, just think about this: This stuff now runs, what you’re seeing right now started off when we first saw it ran on a supercomputer, and now it runs on this TX2 HP laptop. Now, what that means to you is SketchFlow runs on this laptop.

So, the kinds of things I fantasized about is when you’re working within something like SketchFlow, you’re matching things up, that you can work your art, and with this caliber of brushes for the designers you’re working with, and so they have tools that the minute you give them to them just say, man, you understand what we worked pretty hard to get, you really respect us, we’re going to work our butts off for you. And that’s the deal. (Applause.)

So, just to wrap, here’s my closing slides here, and I just want to recap. What I’m trying to say is that what’s really changing is not the technology, even though the technology is changing like crazy. What’s changing is who is doing what, where, when, why, with whom, and for how much. It’s a personal thing. It’s human-centered. That’s what’s the dynamic. My 91-year old father is now using desktop videoconferencing to talk to his great-grandchildren who are spread all over Canada.

We’ve talked about mobile. Mobile is key, because why mobile is so important in this story is that mobile is with you, and you go to all different contexts, like the airplane versus the living room; really have different demands.

And so how we develop applications for mobile has to really respect the sense of place, of physical, social context, as well as skills, as well as content, as well as applications.

And the tools are clearly there now. We saw this funny Morse Code thing. I mean, it’s a joke, but it’s no joke. It’s greatly serious in the most positive sense. The tools are there now.

So, we know that we’re getting to the point where we can build really solid engineered applications, but having acquired those skills, our real challenge now, and this is where we need to partner with the designers and the people who are really expert on the human side of things, whose skill about the people is as good as the rest of our skill on the technology, is how do we get and apply those phenomenal technical skills to best reflect the skills of users, and therefore invest those skills in something worthy that is the right design for the right person and the right place and the right form at the right cost.

And that’s our challenge over the next year. I’m just dying to see what happens. But if you do it, do it naturally. Thanks. (Applause.)

END