You don't need those two, so you just use the green, and you just put the green one in the basket, and you're done, right? My name is Giorgio Sardo. I work in Microsoft in Redmond, and I'm the director of the Windows Evangelist team. I think I have one of the best jobs in the company in Microsoft, because I get to play with very, very smart people, even the product team,

like the Internet Explorer team, the Windows team, the JavaScript team, the Visual Studio team, but also with partners around the world. So I travel a lot around the world. I meet a lot of partners, and we often get to work on projects together. And one of these projects I've been involved on with my team has been cut the rope in the last year.

And so today, I want to share some of the insights and some of the behind the scenes of the game. It's a fun session. I will tell you some stories. Something is kind of obvious. Something is more secret, so we just keep it for this room, all right? And then if you have any questions towards the end, I'm happy to take your questions.

Before we start actually talking with cut the rope, let me give you just a little bit of context, right? HTML5 games have been popular for a couple of years now. Do you remember this? Have you seen this before? It's called Pac-Man. And you might have seen it before, right? You might think, this is one of the very first HTML5 games

that my team has been working on. And it's kind of lame, but this is what I love more, right? You have a maze, and I can go up, and I can go right, and I can go up, and I can go right. And I keep going and going and going.

And if I go home, actually, when we first released it, there was just one maze. Oh, now there are one billion dots eaten, and 91,000 mazes created by end users, right? So this is a big board. And you can just keep panning to a place

where there is some spot available here. And you can create your own maze. And all of this is just HTML5. So this is a project we've been working with Nanko for the launch of Internet Explorer 9 one year and a half ago. And this was good, good fun. And since then, we've seen other games.

For example, Google had been working on Angry Birds. I assume you know the game, and you can just play Angry Birds in the browser. It's an HTML5 game, well, mostly. And it's nice. It supports AppCache. It supports other nice projects. Mozilla more recently released the BrowserQuest.

I love this game because it uses WebSockets. And so it allows you to connect to multiple people in real time. And it's quite a small view, but you can actually interact with other people. And you're using WebSockets. So behind the scenes, you're communicating in real time

with other people in the world. And then more recently, just for fun, we created another small game in Microsoft. This is what we do, and we don't know what to do. It's called Bored to Death. It's very complex, obviously. You select the number of players.

So what does all of these games have in common? HTML5, easy as that. They're all HTML5 games, right? We're just using JavaScript, HTML5, CSS, and other beautiful standards.

But there is no plug-in. There is no other things other than HTML5. And this is just to show you that we actually came a long way. And when we look at HTML5, like three years ago when we released IE9, HTML5 was just starting to grow and to be adopted and to become standard.

Now when we look at the standards implemented in IE10 or other browsers, this is getting bigger and bigger, right? HTML5 is not anymore one or two specs. We're talking about hundreds of these different specifications that cover graphic, cover API, cover offline, databases, sockets. You can do pretty much anything that an application

needs in HTML5. And so today we're not going to talk about all of these, but some of them. And now that we kind of started with a very quick overview of what HTML5 is, today I want to share the experience building Cut the Rope.

How many of you played the Cut the Rope game before? OK. Many of you. How many of you don't know what Cut the Rope is? OK. Wow. So Cut the Rope is one of the most popular games on iPad and iOS. Originally, it was for iPhone. Actually, I think it was one of the most

popular games on iOS. And it was an application written in Objective C, so in a native application for iOS. And I'll be honest. The Internet Explorer team spent about two, three years saying, oh, Internet Explorer is fast, it's hardware accelerated, and we support all of these standards, and

it's beautiful, and blah, and blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, hardware acceleration, blah, blah, blah. GPU, blah, blah, blah. And so we thought, let's take a challenge for the Internet Explorer team. Let's try to take an application like Cut the Rope, which is a native application for iOS, and let's try to convert it to HTML5.

Let's see how it goes, right? And so we started from the objective C code. And we set two criteria for this project. The first is that we didn't want to lose fidelity. So we want to have exactly the same quality of the native game as an HTML5 game. So we didn't simplify, we didn't change the code.

We wanted to have the same fidelity. And that means that eventually we decided to convert line by line all of the objective C code into JavaScript. This is arguably a wrong thing to do. But we had 40,000 lines of objective C, and we just converted to 40,000 lines of JavaScript.

And that ensured us that we had exactly the same user experience. The other criteria was, let's use only HTML5, right? We didn't want to use plugins. And so we started the project, and we started looking at the code. I cannot show you the code, obviously, today. But I will tell you that in the iOS source folder,

there is all of the code for the Cut the Rope game. And 14,000 lines of code. You can imagine objective C was the component for obviously the code. And then they were using OpenGL for all of the graphic. When we look at the JavaScript implementation, we're using JavaScript mainly for the code, and the canvas to show the graphic.

And I will start with the canvas. I will show you a very quick example of how an animation of Cut the Rope looked like. Actually, for those of you that didn't see the game, let me just play the game on the website so we know what we're talking about. Dun, dun, dun, dun, dun, dun, dun, dun, dun, dun, dun, dun.

So this is the game. You have an HTML5 video. You have a selection of boxes. So these are just divs. And then you start into a level. You have your game. You cut the rope, you make your score, and that's it. So how does it work?

It all starts from this. We kind of built this in the first day we were working on this game. And we work on this game, by the way, with the company that owns the game. It's called ZeptoLab. It's based in Russia. As well as one of our partners called Pixel Labs, which is based in Seattle, and they've been helping us with the development and the design.

So this animation is a canvas animation. So we're using the HTML5 canvas. Let me show you the code behind, because you might think that there is a lot of code behind this animation, but actually it's just maybe ten lines of code, if not less. So I'll zoom here. First of all, there is nothing in the page.

So we have an empty body. When we load the page, I'm just calling this init function, and the init function creates a canvas element dynamically. Then I set the size for the element, and I append it to my DOM, right? I just add the element to the DOM. I get a local context to do my drawing, and then I have the most simpler, basic, stupid loop.

So setInterval, and every 16 milliseconds, I just loop into this anonymous function. So this is a drawing loop. Every 16 milliseconds, I'm redrawing. And this is the beauty of the canvas. It's a surface where you keep drawing, drawing, drawing, drawing, drawing. At every iteration, there are two things that happens.

The first, I clear the screen. So I'm saying, hey, clear everything that was drawn before with canvas.clearRect, and then draw an image. So where is that image coming from? That's the trick of the project. This is a sprite.

So a sprite is an image that include multiple images. And if we look closely, you basically, the om om, like this character, and you might think, oh, it's the same image? Not really, because kind of like a change, right? Like each frame, each image is different from each other.

And the idea is that actually all of these are frames of an animation. And so if you take the big image, and you show only one portion of this image, and then you scroll very quickly on one line, for example, on one strip, you will get the idea that is an animation playing. And that's what's happening on this page, right? I have a loop, and I'm just very quickly redrawing,

taking the image from a different position into this larger image. And so if we look at the function, the next function, the draw image function, that's basically what it's doing. It's just mapping the coordinates, x, y coordinates, and then it's just saying, hey, to the canvas, draw an image, and take the image in particular

from this source, and draw it to this destination. So 10 line of code, and we get the image. That was easy. We arrive here in about one day. The next step, and this has been the most challenging step,

is being this, the rope. Now, do you think this is fast or slow? Let me refresh you one more time. What do you think about the performance of these ropes? Good, bad? Good, right?

Well, actually, when I sent this to Russia, to the team in Russia, the partner sent me an email saying, hey, Giorgio, this is horrible. And I was looking, I was like, no, it's not. And then he said, we need to kill this project now. Let's just stop it, and let's do something else. And I was like, no way, it's working.

Why should we interrupt this project? And they make a good point. They say, no, actually, if you look in the profiler, if you look in the JavaScript profiler, you will see that this animation is taking, is slow, it's not a 60 frame per second animation. The mistake I did was that I was testing on my machine.

And on my machine, the performance was good. But when you test on, the partner was testing on another machine, and the performance, I think they were using Chrome or Safari, I don't remember, but this is the performance that they got. So on the left, you see that the performance that they were seeing on the screens.

And on the right, you can see my performance. And so there was a clear disconnect here, right? And so other matter apparently. And so this was a problem, because we were about to kill the project at this point. We were about to say, no, actually, you know what? We just demonstrated that we cannot play

cut the rope in HTML5. And then we tried to understand the problem. And here's the thing, that line, that rope, you might think it's a line, you might think it's a bezier, but you're wrong. It's actually made of 20,000 triangles

next to each other. So imagine 20,000 triangles, and every 60 milliseconds, you're just animating all those triangles to make it look like a rope. Why? Because in OpenGL, you don't have anti-aliasing. And so the way in order to do anti-aliasing, you need to break down a line, a bezier, into triangles.

On top of those 20,000 triangles, they also wanted to have nice, soft edges, and so they added other 10,000 triangles to the edges. And so basically, every 60 milliseconds, you have a JavaScript loop that is iterating 30,000 triangles. So now you see why it's slow, right? That rope was 30,000 triangles.

And it is still 30,000 triangles in the browser. Can you imagine? Take a look at this. 90,000 triangles playing on this page. Isn't this cool? But then, you know, we could have just said, okay, this game is gonna work only in 99 because it's hard to accelerate, and we can run this. We decided to try to fix it

and try to find a better solution to run this. And so I'll show you some code here because it's interesting. But the real trick to identify this, like if you're building a game or if you're building an application, the learning here is use the profiler. Use the JavaScript profiler in your browser. So for example, now I'm opening the F12 tools in IE.

I start the profiling session. I refresh the page. Then we let this swing for a couple of times. Then I stop profiling. And you can see immediately where the issue is, vector.

This vector in Calpath-Bezier is exactly the code I was referring to, right? There are like four million iteration of vector. And vector is actually like a class. So we are creating the vector object four million times. That's just a waste of space, as I will show you shortly.

And so we knew at that point that we had to optimize vector. Let me show you the code snippet so it's more clear the type of optimization that we did. So this is quickly going to get very technical. Optimizing code, lesson number one. How do we optimize this?

So we have a game object. And in the prototype, we define a function called apply impulse one. And the apply impulse basically does two operation. The first is a multiply operation and the second one is the add operation. I will tell you that there is a way to optimize the add. Any idea?

Look what's going on there. You're basically taking this dot pos. So you're taking a variable and you're passing it as an argument to the vector dot add. Then you're getting back a result and you're assigning back the result to the same variable.

So there immediately there is an override because on the other side, inside the vector dot add, most likely you're creating a new object, you're making a calculation, and then you're transferring the value to the original object. And creating that new object, making a new allocation is expensive. And so the way we optimize this,

if you look at the apply impulse two, is that instead of creating two different objects and then swapping in memory the values, we're just creating a prototype for add and we inline the value inside the prototype. So this was the very first optimization. Now let's go to the next one. How can we optimize the vector multiply?

Can we do the same trick for multiply function? Anyone? No, we can't. Just because it's a multiply. So this time we need to actually add two different parameters. But the way we can break this down is

let's just use local variables. I mean, this is a complex algorithm. We are calculating this thousands of times every 60 milliseconds. It's not important that your code looks beautiful with the right prototypes and the right naming function and the get and setters. You need to be fast. And if you want to be fast, you need to start inlining your code.

And eventually there is a way to be even faster than this, which is just get rid of the prototype as well. And so we just get rid of the apply impulse three completely, we remove it from the prototype. And now we use the three lines of code that you see below. We just copy and paste that line of code every time we needed to have this particular operation.

It was easy. This optimization, when we look at the profiler that I showed you earlier, allow us to save from 2.2 million allocations to 30K. And in terms of array to calculate all of those points, all of the Bezier line, we moved from more than 200,000 arrays to 400. And now the game was running faster.

Everything clear so far? This is easy, right? So this was my worst day in Microsoft, I think. Because really, it's not good to be so close to cancel a project, such a cool project actually. But it was so good to find a solution.

And now finally, you can play the game on some slowest browsers. The other thing you can do, have you ever used Xperf? So Xperf is a part of the Windows SDK. This is a very, very complex tool. It wouldn't deserve its own session.

But I want to show you the result. Xperf basically allow you to take a session in the browser and profile it and profile what's going on in the memory, in the disk, in the screen, and then visualize it. And so I basically took in the past profile section of the game. And I'm just going to open it now with my visual analyzer.

And what you're going to see shortly, this is basically what's going on in my machine when I play the backdrop game. To you probably, this means nothing. To the IE team, this is gold, because this gives you all of the information about what's going on in the browser. On the X axis, you see the time.

So the X axis is the time. The Y axis, depending on which chart we are looking at, it gives you different type of information from the CPU that is used. In this case, these functions is basically when you redraw on screen, so when you're calling the GPU card to redraw on screen.

But the one that I want you to look at is the one in the middle here with the bars. This is seriously interesting, because it basically break down the CPU time spent across the different sub-engines of the browser. And so it will tell you how much of the time was spent inside, for example, the JavaScript engine, or how much time was spent in the display engine,

or relay out the page, or formatting the page. And so this is helpful to understand where you can be faster. And now, for example, if I look at this series, this is the time when I'm cutting the rope, when I'm playing the game. So I just zoom into the selection,

and then I can keep zooming into one specific selection. You see that there are blocks of something happening. You remember I showed you a timer, every 16 milliseconds the timer was clicking? This is basically my timer, so every 16 or 40 maybe milliseconds, I'm just starting to do a new operation,

and so I'm reactivating Internet Explorer. And the interesting part, let's zoom into one of these. You can see, let's see, you can see the first part is just the UI thread, so this is just the browser. Then it goes into the display, so then it's communicating to the GPU what to draw on screen.

And then there is some JavaScript to calculate all of the points and to calculate the physic engine, the permutations. And eventually, there are always other costs with the layout if you're changing DOM elements in the page. The interesting part here is that if you take this loop, this is four milliseconds.

So each loop, I'm just taking four milliseconds. Remember that the timer was 16 milliseconds? It means that I basically have 12 milliseconds left that I'm not using, which means eventually you can build games that are even more complex than this. So this was easy. You still have 12 milliseconds for each loop

where you can do more if you are building more complex applications. How many of you are lost at this point? Is this too much? Is it too in-depth? Is it okay? Just getting a feedback? Okay, cool. I wanted to show you something more internal, more new that probably you haven't seen before, but if you have any questions,

just feel free to interrupt me nicely. And so at that point, we basically just keep working on the game. And about four weeks into the project, we were starting to get everything together.

And about four weeks into the project, this is what Cut the Rope was looking like. So let me refresh again. It's not perfect, right? There is still some bug, and then as I Cut the Rope, the physical engine is still not there, but you can see that it's running 60 frames per second. It got the rope, it got the animation, it gets everything you need. Yes, it's working.

It's fucking working. Screw you that you said it was too slow, right? This was fun. When we got to this point, actually everything else was easy. So we knew that we could have just done it. And so from this point on, it was just a matter of implementing the game, implementing the logic, implementing all of the various elements.

And if we look at the page, again, it's still a fairly clean page, right? So we have only one thing going on on this page, a canvas element, which is where we are redrawing all of those frames. And then I have my logic of, my JavaScript logic. Notice also that we're using jQuery.

We decided to use jQuery for some of the animation that I will show you shortly. And we're not using a physic engine. So the physic engine is basically built in into the code. We're not using Box2D or other frameworks. And this actually help us also to increase the performance and make sure that the game had the same playability

that added beginning and also we didn't want to add overrides in the middle. We did build like a framework to preload all of the assets. So when you have a game, basically the first thing you need to do is preload in memory all of the visual assets, all of the images that you're going to use in the game. And we made that framework available open source is at I think pixellab.com, WAPX Loader.

The next thing is about touch. As we were working on this game, we were designing this game as an IE project,

as an IE website, as a website actually, as an HTML5 website. And so we had the challenge of taking a game that was for a device, for a mobile device, where you would use the touch to cut the ropes. And we had to convert that action into a mouse action. So we initially start removing all of the touch gestures, touch inputs, and replacing those with mouse input.

But eventually we realized that today it's not anymore about mobile or browser. I'm not sure if you follow some of the recent announcement. Last week we released Windows 8. This week at Computex, like Intel shows 50 different devices.

But we talk about at E3, we talk about Xbox and IE on Xbox. Reality is that the HTML5, the browser, and our platform is getting to a variety of devices. And these devices very soon, not 10 years from now, but this year, like this holiday, we start having touch screens.

Like my laptop today is already touch screen. And I will tell you, it's beautiful, because it's just easy. And in a few years from now, all of the machines that you have in your office, in your home, everything will just be touch screen. And so it's very, very important to think about mouse and keyboard, but also the touch input.

Up to the point where I was a couple of weeks ago, I was in Singapore, and I was talking with one of my colleagues, and he said, Giorgio, I hate you. Okay, sorry about that. Why? This basically, my friend has two kids. And you can see the kids playing cut the rope on the machines that they have at home, right?

So you see the first kid is, she's playing cut the rope using the mouse pad on the laptop. The second one is using this Windows 8 tablet, so it's just using touch on a Windows 8 tablet. But here is the challenge, right?

Then there is a television that is projecting the tablet. And then you want to do that. You want to touch the television, and you want to, like, the expectation at some point will be that. And this feels like, oh, she's a child. It's normal that she's so dumb, but she doesn't understand yet the reality between what's real and what's not.

I made the same mistake every day. In the office, I have all touch screens, and at home, I still have an old monitor, a cylinder upgrade. But then I spend the time in the office just touching the screen with my fingers. And then I get home, and I touch the screen, and I'm thinking, it doesn't work. And then I'm thinking, you're an idiot.

Like, it's not touch. But soon, like, all of the screens will be touch screens. And so it's important to get there. And so, both online, as we start looking at the touch screens, today there are a number of APIs that actually Apple has been the first to come out with a number of APIs, like touch, start, events, et cetera. And we look at those APIs,

and we thought that they were good, but not enough. And we came up with a different proposal. We called them Pointer. This is Pointer API. I still prefix it with MSMS. We're still looking for feedbacks and making this more solid. But the idea is that we have one event called Pointer

that can trigger all of the different, like, input. Either it's a touch, or it's a pen, or it's a keyboard, or if it's a mouse, not the keyboard, sorry, the mouse. It's just one event called Pointer. And so you get Pointer down, map up, over, cancel, et cetera. You get all of the properties that you will get before with the mouse. And in addition to that, you get new properties,

like if you're doing a gesture, like some information about the gesture, the pressure, the movements, the diff of the points. But the beauty of this approach is that in our application, we have only one event. For example, canvas.listen for mouse, sorry, pointer down.

And then if I'm on a tablet, that call is going, Windows is going to connect to my touch driver, and it's gonna transform the touch input into a JavaScript event. If I'm on my laptop or my desktop, I can just use the mouse, and it will just work. And this is what we use in Cut the Rope. And it works great.

And so, eight weeks into the project, sorry, 12 weeks into the project, we were done. So let me show you the final project. And this is my beautiful application. So this is the same website that you saw before, right?

It's just running locally. I will tell you that at this point, we started the QA with Zeptolab in Russia. We sent them the game. These guys are the same guys that at the beginning told us, it's too slow, we should kill the project. Next day, I got another email in my inbox.

Giorgio, it's too fast. Can you slow it down? You laugh. I was like, yes, it's too fast. And you know what we did? Well, initially, we kind of negotiated, why do we need to slow it down?

But then eventually, we realized that it was important to keep a consistent experience. And that means that in that code, when you play the game online, inside all of the JavaScript loops, et cetera, we basically add other JavaScript code to slow down the animations. Believe it or not, we really added code to slow down the performance.

And there was a good, good test for the browser. Other acceleration matters. And having a good browser and a good platform, not just the browser, a good user agent in general that is able to render fast graphics, fast JavaScript is important and matters. And we did test this website, not just on IE,

but we also wanted to test on a variety of devices. So we tested it on, it will work on Chrome, on Firefox, on Safari. We tested it on the iPad, on some Android, not all of them. We tested it on the Windows 8 devices. And the result was quite impressive. We built the website using IE,

but at the end of the day, it just worked on most of the other browsers. There were very few things that we had to tune between one browser and the other. And in terms of, the only difference was the performance. So the code works across all of these browsers. The performance was different. And we had to do some optimization

on the slowest browser to optimize the performance. A couple of things I want to share. So if you're building a game, most likely you will need to use the Canvas object. And in particular, there are a number of new functionality, new APIs that have just been included recently in some of the browsers.

Like some of these are just coming in with i10 and are not even implementing other browsers, but they're all standards compliant, so you should expect them to see soon. Request animation frame, instead of having, the idea is that instead of having like a timer and then saying every 16 milliseconds, send some code to the GPU and let the GPU draw on screen, you change this and you do the opposite.

And so you say, hey GPU, when you have time to draw, can you call me? And then I'm going to give you the code back. And that's a nice way to optimize basically your workload with the GPU and to run even faster. Set immediate, it's something that developers ask for years, but browsers never gave it to developers.

Have you ever done set time out zero? Have you ever done it? And you know that it's silly, like there is no way any browser is going to return in zero milliseconds, just because the browser is basically using the CPU

or the GPU clock. And so each browser will interpret the set time out zero in a different way. So in Chrome, you will get between three and five milliseconds, in Firefox between 10 and 12, I believe, Opera is between 10 and 50, IE is around 16 or four if you're using high performance.

Set immediate is basically a way to break down your code and say, as soon as you can, it's almost zero, right? As soon as you can, call me back. And so this is very helpful if you have a long operation and sometime you need to break down to make sure that the UI doesn't get stuck, you can just interrupt your loop or your thread with set immediate.

In performance.now, this is very, very recent, like we added this maybe a few weeks back. And the idea behind performance.now is that today you have datetime.now, right? Or datetime get time. And that gives you more or less, now it's, yeah, what time is it?

11, 55, 20 seconds, and 15 milliseconds, but I'm not really sure. When you start drawing things, when you need to get precision, you need to have the CPU exit perfect time. And that's what performance.now does.

Performance.now, they're basically high resolution timers inside the machine, and it will give you very, very granular and precise information about what time it is. And again, this is coming from the web performance working group. So this is something we've been leading there for a while. For simpler interactions, for example,

you know at the beginning that there is that sliding of the box and you just choose the box? That was not a canvas. We decided to use jQuery and CSS to do the animation because it was easy. We didn't want to complicate our life. And so eventually we end up having a page that has some canvas, some DOM element,

jQuery to do the animation between the boxes or CSS to do like the closing animations. Some tip about audio as well. The good news, HTML5 audio is awesome. You have an audio tag, you can play audio, and it just works.

And that's what we use for this game. And I see some of you are thinking, what's the bad news? The bad news is that some browser cannot handle HTML5 audio yet properly. And there are known bugs open at Firefox and Chrome and we actually work with these guys for a couple of years now. I'm waiting for them to fix it. But eventually at the end we had to,

and this was a painful decision, but we had to fall back to Flash. So if you're using Chrome or Firefox, we are actually using Flash for the audio. It's the same trick that Google used for Angry Birds. And this is just, again, a fallback solution. This is not what we wanted. But eventually right now you're not able

to loop very quickly audio loops in these browsers. It's still HTML5 audio. All right. Oh, did you notice this? That sound? No sound. Sound? No sound.

So this is either called magic or, it's actually not magic. It's another standard coming from, I think it's the Web Performance Working Group. It's called page visibility. It's the idea that if your tab is not like on the foreground, we basically give an event to the site or to the application and we can suspend the drawing loop

or we can suspend the audio in such a way that we don't consume battery or resources behind the scenes. There are a lot of nice HTML5 things behind the site. All right. So at this point we moved from an iOS application

to a browser application. It was working on most browsers. We were very happy. And by the time, by the way, we were two weeks away from the consumer preview or from launching the consumer preview of Windows 8. And so at that point, you know, in Windows 8 we talk about the platform and I have a session after this

where we will talk about Windows 8 metro applications. But one of the characteristic of the Windows 8 platform is that you can use HTML and JavaScript to create applications, metro applications. And so we thought, what does it take to take a game like this and turn it into a metro application? And so let me do step by step what I did that day.

So I opened the new Visual Studio tools. Those are free and they just come with Windows 8. I create a new project. And so notice that I have a project template for JavaScript metro app and I just choose the blank app template. So Visual Studio is creating a template for me.

And so I'm going to move this on the right. This is my website. So this is my previous website. What I'm going to do, I'm just going to go to the Windows Explorer folder. I'm going to select all of the files, right click, and I say copy. So I'm just copying all of the files that I use for the website.

Now I move into my metro project, go to the solution folder and I say paste. And I decide to override everything. As soon as it let me override.

There it is. So I'm just copying all of the files inside my metro template. Then there is a file here called package app manifest. This is an XML file which basically defines some of the property

of the application. The only thing I need to change is basically I want to start from index.html. So I save. Ready? I click local machine, debug. What do you think?

Is it good? And this is functioning, right? So it's, now I'm using my finger. It's touch friendly and is a metro application.

So with zero line of code, we move something that was a website built in HTML5, CSS and JavaScript into an application. So this is an application that is running, is a metro application. Now, what I've just done is horrible.

Don't do it, never. Promise? Do you promise? Please don't do it. Because I'm not here to ask you to take website and for them to do copy and paste and now you have the application. Yeah, I have an application. Like this is not an application. This is just a technical proof

that the platform is the same, right? Like you can build metro application using the JavaScript HTML and CSS that you already know that said this is not an application. You see that it just doesn't feel like an application. It's not full screen. It doesn't have any capability that make it an application and so I'm going to kill this project

and I'm going to show you actually what the real application that you find in the Windows 8 store looks like. So you find here the tile, right? So I'm just going to launch the tile. This is my application, metro application, the real one. So you see that it's full screen. So basically we did some work to change the assets and to make sure that we fit the screen resolution.

By the way, Windows 8 runs on a variety of different resolution from 1024 up to 2560. And so we basically have three different set of assets and then depending on which resolution you're coming from, we rescale using CSS3, the wall viewport to a different resolution. Now you can play the game

and you have the same functionalities. The options, for example, if I click options, I'm using the setting charm bar of Windows 8. So I can also open this by swiping on the right. I go settings and now I have specific settings for my game but it already feels like settings of a Windows app. I'm already using Windows.

When I play a game, and so now I'm gonna play without looking. I'm very good and I'm very happy about my 3,554, a lot of score. And I want to share this with my friends.

And so what I do is, again, I swipe from the right, I pull the share contract and I have a number of application I can use to share. This is Windows 8, right? And so basically I'm creating a connection between an application that gives some content to share and other application like my mail client that takes that application.

And I can just say to my manager, hey Drew, I'm playing, not working. And I can just share this over email. Or I could use one of the other application and just share it on Twitter and very quickly tweet it from here.

I can do other things like in Windows 8, you can snap side by side application. So you can have, let's see, for example, you can have, let's open my mail client. And then I take a drop.

And so for example, if you're in the office, no, no, I'm working, I'm working. And then when your manager leaves the office, you can continue playing your experience. And then as soon as something happens, oh, no, I'm back on my emails. And this is again something that you can do as part of Windows 8. So other things that we can do is just play with the ties.

And so you see, for example, the ties of the application on my side, those are called live ties. Because basically depending on the context of the application or what's get pushed by the server, we show real time notification and updates to the user. And so eventually think about displaying a new achievement

or new levels or other players waiting for you in the queue. And so these are just some of the things that you can do with Windows 8. And you can see that now it start filling as an application, it's not a website anymore. So let me show you the code behind the application. So I already have a project here.

And all the code is the same. The difference is that I just wrote a few additional lines, which are all here, to implement some of the specific functionalities of Windows 8. Let me increase the font here. 16, so you can see it.

So for example, at the beginning, I'm using, I'm connecting to the own settings, and basically when the users wipe on the, you saw like the settings panel, this is just like an HTML page inside my project where I define all of the settings property. And I just say, hey, when the user use the charm bar in the setting,

go and display my page. Another thing that I did is, oh, this is very nice. One of the features that has been more requested during the consumer preview is just the ability to roam the settings of the game. So you start playing in the office,

you have a very busy day in the office, and you get to the 20 level, and you unlock a lot of achievements, and then you go home, and you have a different machine, and you need to restart. Boring, right? You expect to have the same, to catch up from the same place. And so what we have in Windows 8 is the ability to roam setting.

Each application has its own space. It's like a folder in the disk, or you can imagine it as a virtual space in the cloud, where you can just store information. And so all of that logic is within those 10 lines of code. Basically every time you unlock a new level, you're just saying to the cloud, hey, save this new information to the profile of my user

for this application, and then the other machines will just reconnect and sync automatically. And the roaming is given to you by the Windows runtime, and we will talk about the Windows runtime later again. You remember that I snapped the application side by side with the mail client?

That code is just using a media query. So we're using CSS3 media query, and in particular we have a specific media query defined as view state, snapped. And basically we have a listener, this is a very new standard from the CSS3 working group, that allow you to listen for the specific state,

and when you're in that state, we basically pause or re-enable the logic of the game. Tiles, we actually also have tile notifications. So as you start unlocking new levels, we can update the tile of the application. And the way we do this is just, again, using the notification namespace in the Windows runtime,

we start from a standard template, we change the image, we create the image on the fly using the number of stars of your last level, and then we create a tile for your application and we update it. And then the last one is the share contract.

And I will show you the share contract here. So this is the basic function for the share contract. You start from Windows, and then you get a data transfer manager. Oh, here it is, sorry. Data transfer manager. And you add an event listener for data requested.

The share contract in Windows 8 is a contract. It's like an interface. It's very simple. Normally in the past, for example, if you have a website and you want to share information to Facebook and Twitter, you need to code, you need to write the code for two buttons, Facebook and Twitter, and embed them inside your application, inside your website. With Windows 8, we decided to make this experience

more linear and more flexible and more powerful. The application says, in this case, cut the drop, it's not sharing. The application is saying, I have something that I can share. So for example, if you just unlock a new level, it will say, I have a new achievement and this is my text, image, or link.

And you ask to the operating system, here is my content. Can you please ask Windows to share it with some other application? The operating system is basically going into the, when you do this, it's basically looking all of the application installed on my machine and you look for all of the application that are able to re-share content.

In this case, I have like a Twitter, I have a People app and a Mail app. And the operating system is responsible for creating that connection between your data and the contract or this application. So it's like an interface and this is very powerful because then you don't need to implement one contract for every channel you want to distribute.

You have one unique data and you can have as many application installed as you need. All right, so this was basically the application. Let me show you one more thing. This is actually quite exciting. Everything I show you so far is called Visual Studio.

Have you used Visual Studio before? Good. Now let me show you another tool that we call Blend. And if you use Civilite or XAML or you did development for Windows Phone before, you're probably already familiar with Blend. The news with Windows 8 is that now Blend

allows you to also to work with HTML project. But it's not just the type of tool that you would expect. And let me show you why. Let's open my page. Default. It's slow, it's taking some time.

Here is my page. Do you notice anything? Anyone? It's animated, it's moving, it's alive. You see the shadow in the background? That shadow is not CSS or HTML, it's JavaScript.

So we're actually looking at a page that is running JavaScript in the background. And that's the power of Blend. Blend allows you to edit an application in real time. Not just looking at the static DOM, but also at what get created in real time from JavaScript. Up to the point where eventually

you can even navigate into the application. For example, I can start playing. I can start getting the video. I select my level, just say the first level. I go into the level and then I'm thinking, no, there is something wrong in this page. And you can just pause it and you create a snapshot. By the way, this is a canvas.

So everything you see on screen now is created by JavaScript. And with the tool, you can still operate on top of that canvas and you can just edit. In real time, a page that is created by JavaScript, not by static DOM. Isn't that impressive? This is freaking cool.

This is the definition I use internally. And actually, when you look at the DOM Explorer here. Let's go back, for example. Let me reset it to the beginning. Actually, I'll show you in the next session.

But the Explorer, the solution, the live DOM is called live DOM exactly because it shows you both static DOM elements as well as, like when you see the flash symbol, that means that it's coming from JavaScript. And so the ability of this tool is to combine static editing of a page with HTML, CSS,

like you've done in the past, with real time editing of content is created in real time or data binded in real time and anything coming from JavaScript. I think this is the best tool I ever used. And I'm biased. I work in Microsoft, as you probably know by this point.

But still, this is pretty impressive. And other things you can do with this tool. Eventually, you can test a different solution. So you can test, for example, how it will look like on some device, for example, running at 2560 resolution. Or you can see what it looks like when you run it in a snap view, right? You remember when I snapped it on the screen.

Or what it looks like in portrait. And I'm scared because we didn't test this. So you see, it's not really optimized for portrait right now. But you can test all of this very easily. And of course, you have a full live editing of all the CSS property and you can set animations. We'll get deeper on this tool in the next session.

And the next thing, obviously, is the store, right? At this point, we have an application, which means that we have a great platform, Windows 8, to add a lot of nice features. But we also have a distribution channel to eventually monetize the application. And that is called store.

And the Windows store is the same store across all of the Windows 8 devices. So no matter if you are on a laptop, or a desktop, on a tablet, on an Intel, or an ARM device, you actually have access to the same store. So if you go to games, you will see there my page for Cut the Rope. You see the nice preview.

Good news is that because we are still in release preview, all of the application today are free. So go and download it now that they're free. Because eventually, as we get closer to GA, obviously developers will be able to monetize their applications. And now I want to show you that exactly the same code, like once I release the application to the store,

I didn't change anything, right? So that code base is one code base. It works on its machine, and it works also on a machine like this, right? So no change at all, and now I'm able to play the same game on a touch device. And you can see that the performance is still good, right?

We're still running at 60 frames per second, and I can still choose all of my, I can just play the full game here. And eventually, if this device was connected and I play some level here, and then I stop playing and I restart from here, you remember the roaming? I'm just going to roam in real time through the cloud, my setting and my achievements.

And that's why I say that I have the best job in the company, because it's fun to work with this stuff. Like Windows 8 is such a powerful platform that I really invite you to take a look, and it's definitely a good time to spend on Windows 8 now. So today I share some of the story working on Cut the Rope.

This is just one of the many projects we work in internally in Microsoft. And I know that there are people in this room actually that have been working on other Windows 8 applications or are thinking to work on applications. I hope this was inspiring. I hope we gave you the idea that everything is possible, and HTML5 is ready, not just for website,

but also for applications. We have tools, we have a platform, we have a store. And this is, again, we just released release preview last week. This week we are talking about the hardware, so if you haven't seen it yet, just search for Computex and you will see 50 new devices, Windows 8 devices that will ship soon.

Closer to GA, we will talk also about other devices. And I'm really looking forward to see some of the application that eventually people in this room are going to build in the next weeks or months. And if you have anything interesting, please let us know. We are always excited to see projects from you.

The last note, my team in Redmond is hiring a Windows 8 HTML5 algebises, so if you're interested, just contact me after this session. Thank you again, thank you. So I see five minutes left. As a reminder, green card in the box,

the other color, so just leave them in the table. And is there any question that I can answer now? Yes, please.

Of course, yes. So the short answer is yes, I'll show you later eventually, one demo. We absolutely support multi-touch and we don't have a limit to the number of fingers that you can put on the screen.

And actually, I'll show you on this device, let me see. Or I can even do it here, just, let's see. If I go to the IE test drive, there is a nice demo that shows the touch APIs. It's here at the bottom. Here it is, touch effects.

And so two fingers, one on the right and one on the left. And you can see, so this is just JavaScript and using the MS pointers. And you can see the shade of my fingers on the screen. So this happens to be, this, my laptop support only two touch points. This Nike device support 10, so I could put 10 fingers

and you will see 10 different fingers there. The code is just the same and we allow that, which was somehow a limitation in other platforms. And also in terms of gestures, like I didn't talk about it but we support also gestures. And so eventually you can use the windows gestures or you can eventually create your own gestures

just using JavaScript events. Any other question? Yes. How about the non-JavaScript HTML way of doing things?

So the question is, can I do metro apps in C sharp? Will the support continue? I'll talk about this in the next session. But the answer is, of course. It's the platform, I have a slide and in the next session I'm going to talk about the Windows 8 platform.

The beauty of Windows 8 is that we kind of reimagine the whole system and we have a runtime called Windows runtime, which is the base. On top of this, we have different projections. One is HTML and JavaScript, one is C sharp, BBnet and XAML and one is C++. And today when you look at the store and you look at the application,

some of them are HTML5 games. For example, this is another HTML5 games. This is a C++ game. This is a C++ game, Fruit Ninja, you might have seen it before. Yes? Oh, you're thinking Windows 9 and Windows 10.

You know, we're thinking about Windows 8 now. We didn't ship yet. We'll talk about the next version of Windows after we ship Windows 8. All right, thank you again.