Remarks from David Treadwell, corporate vice president, Operating Systems Group, on April 30, 2015.
DAVID TREADWELL: (Applause.) Good morning, Build. (Crowd responds.) So at Build, we’ve been talking a lot about our conversations with developers.
Now I’d like to tell you about a conversation that Terry and Kevin Gallo and I had last summer with one well-known developer, a guy named Bill Gates.
We were reviewing with Bill our plan for making Windows 10 great for developers like you. As you might imagine, a review with Bill is always a big deal. So we were well-prepared, but were also nervous.
One of the points that I made is that we’ve been getting lots of feedback from people like yourselves that they didn’t like one thing about the modern platform in Windows 8, and that’s that it really only supported full-screen applications. No windowing.
Full screen is great on a smaller screen like a tablet, but many people like large screens, multi-monitor setups. I love the three-monitor setup that I have.
So I told Bill one of the things that we’re doing in Windows 10 is we’re bringing back this fine feature from 1986: resizable, overlapping windows for apps. (Laughter, applause.)
And Bill paused, he looked at me kind of intently for a second. And then he said, “Wow, that’s a really great idea. You know what we should do? We should name the product after that feature.” (Laughter.)
So I told him that the joke in the engineering team is that we really should have called it “Window 8.” (Laughter.) (Applause.)
True story, happened just like that. And that story does show something important. While it is valuable to have experiences that span multiple devices, we as developers must put the user at the center of these experiences.
What works great on a tablet may not work great on a huge, modern desktop monitor. This important idea from our conversation with Bill carries through both of the developer conversations that Kevin and I are excited to talk with you about today.
First, how can Windows 10 enable you to provide a continuum of experiences across device types that put the user at the center?
Second, how can Windows 10 help you take the code that you have today and reach over a billion Windows users with more-personal computing experiences only possible on Windows?
Let’s start by discussing the first one. With Windows 10, the Universal Windows Platform now lets you reach the entire family of Windows devices. From laptops and desktops to tablets, phones, HoloLens, Surface Hub, Xbox and even Raspberry Pi. All with one amazingly flexible platform.
Whether a device has a large screen, a small screen, or even no screen at all, a mouse, keyboard, touch, a game controller, pen, camera, sensor, you name it. The universal Windows platform gives you a way to exploit the abilities of the device and create more-personal computing experiences for your customers.
We’ve made improvements across the board for developers. It’s now easier to design, debug, develop and distribute your app.
Last year here at Build, I told you about how universal Windows apps could adapt one design across devices or tailor the design to each device.
The Universal Windows Platform and Windows 10 makes this even easier. There’s now one design language and one control set across the platform. This gives you a predictable, consistent toolkit for creating your user experiences across all Windows devices.
For example, the pivot control, which originated on phone, is now available across devices in a way that works great on each one.
The Universal Windows Platform and Windows 10 includes brand-new controls, too, like a fully featured calendar control. Controllers work across screen sizes with mouse, touch, keyboard, pen and now even game controller right out of the box. And all of the controls are accessible to all users.
The one design language and one control set make it easy to adopt your apps for common scenarios. Things every app designer needs to handle like window size and input type are handled automatically by the platform for you.
For example, menus appear with mouse-optimized or touch-optimized presentations depending on how they’re invoked by the user. But you can write the code just once.
Universal Windows Platform and Windows 10 gives you more power to tailor to each individual device as well.
The new adaptive triggers feature lets you respond to changes such as window size and automatically adjust your layout all in markup.
Beyond just size, you can tailor based on input, orientation, availability of sensors, app services or pretty much any other change you can detect.
You can even create a totally custom XAML view for each device, all sharing common code. Last year, I also told you about how you could share a common code for a universal Windows app across phone and PC. With the Universal Windows Platform and Windows 10, you can now literally write to one universal API and produce one package to reach every device. It’s incredibly straightforward as well as flexible.
Using feature detection and API contracts, you can take advantage of any device-specific APIs while still writing the overall apps to the one universal API.
The Universal Windows Platform is really just V10 of the same modern platform you’ve been using on phones since Phone 8.1, and on PCs since Windows 8. Your code still works, your concepts still hold true.
The Universal Windows Platform brings together the best of Windows, Phone and Xbox. Now you can access Cortana in Action Center on the PC. You can print on the phone. You can use Xbox Live services on every Windows device.
And there are tons of new things in the Universal Windows Platform as well. DirectX 12, Holographic, Active Pen, Windows Hello. Over 2,500 new platform features, over 8,000 new functions unlock new capabilities for your apps.
Now, I’d like to ask Kevin Gallo to come show you how to use the Universal Windows Platform to build an app that reaches every Windows device family. (Applause.) Go get ’em.
KEVIN GALLO: Thanks David. I’m excited because today I’m going to be able to give you a lap around the Universal Windows Platform.
What I’ve done is written a single application that runs across a plethora of devices I’m going to show you today.
Now, I’ve decided to focus on a home remodeling application. I was inspired because my wife and I started a project in our home. And as we were working with a firm to go through this process, I kept thinking about how I could streamline and improve the experience that they had between the firm and us, the customer. And really, also, with the device family we have with Windows, there are a bunch of things they could do that would be unique and they could differentiate from their competitors.
So let me just dive right in here and talk about this application. So it has five phases. It has a design phase, a planning phase, a capturing phase, organizational phase and then kind of this last phase, which is they present the final product. I was trying to ultimately trying to enclose that.
So for this design phase, I think, the best device I could think of was kind of a creative sketching device, which is a Surface Pro 3.
So here I have that running. And you can see on the left-hand side I have a split view UI here at the top. I have the five phases that I talked about. And on the right-hand side is a canvas for me to draw on.
So I’ll just start drawing. And you’ll notice the beautiful ink support that we have with the Universal Platform. And I can go draw my room here and, you know, I’m actually not very good at sketching, but it all looks beautiful with this ink, low latency, and you see it’s very fluid. This is all built on the new DirectInk APIs that we support on the Universal Platform, and it’s all hosted inside of an Ink canvas.
But I wouldn’t be the one who really was doing the initial design. Instead, I would have gotten help from a designer. So we can also save and load ink. And when it loads the ink, this is real ink, this is not some image that can’t be modified, because we want to collaborate on it.
So here I’m going to move my pen to selection mode. And I’m going to draw a lasso around that. And then I’m going to use my finger. This app is aware, it knows that when I’m using my finger, I’m in editing, I’m not drawing. I can also draw with my finger, but here I’m going to differentiate between pen and touch.
And then I can go and say, you know what? I really want my entryway to be a little bit bigger. So I can add my creative — whatever creative I have to this application for us.
So let me go show you the code that we wrote to create that lasso. So I’m going to hop on over here to Visual Studio. And what you’ll see here is this is my XAML from my design pane. And so all I had to do was add this ink canvas control that’s new in the Universal Platform.
So once I have this in here, then I can wire up some code to create that lasso. So let’s go look at how to write that code.
There are really three parts that I have, three event handlers that I need to do. When I first press when I want the selection, and as I move the pen, I get another set of events. And then I release it, I need to go perform the operation.
So let’s start with the code for creating the lasso on my press. So when I press, I’m going to create a poly line. This is the line I’m drawing for the lasso. I go set some attributes on the line itself. I add the first point. And then I go and I say for the canvas I want this to be a selection versus the actual part of the canvas drawing. The ink canvas is smart enough to know the difference between selection and drawing on the canvas itself.
Then I’m going to go here when I move it, and all I do is add another point every time I move. And that’s nice and simple. And then when I release it, I need to process it. And so, of course, never forget to add the last point so it looks right. And then create a bounding rec here.
What I do is I get the poly line that I drew around it, and I ask the ink canvas to give me all the points that are within that poly line. And that creates a bounding rec. And then right around that, I draw that bounding rec, that’s all I had to go do.
So pretty straightforward, little bit of code here, and I have a great selection and a great experience on this device.
Now, this is not the only device that supports pen. And we know that universal applications run across many devices and any one that supports pen will support it.
So here, we have the largest of our pen-enabled devices. This is an 84-inch, 4K Surface Hub. So let me go load the same application. And so this literally is the same binary running here on the Surface Hub. And I can go and I can draw beautiful, fluid ink. Build — I shouldn’t have done that, oh well. (Laughter.) You know, can’t spell.
But I can load the same exact thing here. All very fluid, beautiful ink, all with the same application.
But this is not just for drawing. It really is a phenomenal collaboration device. And having this in the showroom would be a great place to interact with their customers and to kind of not just draw the sketch, but also begin to plan the trip.
So the next phase is going out, going to different stores, and looking at different materials, carpeting, flooring, countertops, and deciding what you want to do.
So here in this phase we’re looking at a map. And this is a built-in map control. If you remember from yesterday, Joe showed you our map app. And our map app is using the same exact map control that is available to every developer using the universal platform.
Now, this is a very rich control. I can go move it around, I can stretch it, I can actually do a tilt view. All of this works offline. I also have a 3-D aerial view built in. All you have to do is change the mode and say you want an aerial view. But I’m going to move back here.
So a map is not very useful if you can’t put anything on the map. So we also have the ability to pin points of interest, or in this case stores.
So I’ve set up a little filter here where I can go choose what type of store they want. So they have a list that they work with and partner with. And, you know, I typically like more modern stores, my wife likes traditional. But since she’s not here, I win this time, we’re going to go look at modern stores.
Mileage may vary. So you’ll see that I also have a list here because I want to actually see what they are. And then the points of interest show up on the map. All I had to do was data-bind that list to both of these and they show up.
So now I’m going to hop on over here and show you the code that I wrote to create those points on the map. So here I am back in my Visual Studio. And I’m going to go to my trip XAML right here.
So all I had to do was add a map control, set some basic zoom levels on it, and then create a list box, data-binding the stores that I was going to have here in this list box. And then that’s all I need to do with my XAML.
Then every single time I do the drop-down and I choose which ones I want, whether I select all of them, I get an event handler here on my click. And let me just pop in the code here.
So I do some simple processing right here. You know, go through, this is pretty simple, just go see the checkbox, create some queries, you know, which of the stores I wanted. And then I just go and I update my observable collection that’s data-bound, and then I update that, and it automatically goes and shows points of interest and the list. Very straightforward, easy to add, easy to optimize.
But now once I’ve gone and I’ve sort of planned my trip, I want to go take photos and see the different furniture and carpets, you know, nice, optimized fashion, just kind of walk around and go. And it’s kind of heavy to go lug one of these big things around.
So let’s go from our largest device to our smallest device, which is our phone, and it’s the most portable, so I can bring it with me.
So here, I’m going to launch the same exact application. And what you’ll notice is it’s automatically adapted its user experience to run on the smaller form factor and look appropriate on this device. Basically, the map is now at the top and the list at the bottom, the menu is now in overlay mode. All of that, very straightforward.
So let’s go see here — go into capture — and you’ll see here we have a new camera API that allows you to go into the preview mode and take a picture. And this conveniently located end table over here is a perfect one that I think I’ll put maybe in my living room.
So I’ll just go, I’ll take a picture of that. And I’m able to go say, hey, you know, tell my wife I think this would be great for our — maybe our bedroom, living room or something like that.
So now let me go show you the code that we wrote to build that adaptive user experience that we’ve been talking so much about at this conference.
So I’m going to pop back here to the XAML I have in that planning page. So what I didn’t show you above this is right here, right above the map and the list, they’re inside of a relative panel. Relative panel is a new layout container that we’ve created that really provides a lot of the magic behind the adaptive user experience. It allows you as developers to either dock items inside of it to each other or to the side, top, bottom, and give you a lot of flexibility in setting attributes.
Above this, I’ve set up a few visual state groups with adaptive triggers that David talked about. And so I have two states. One, when it’s between zero and 599 pixels, and then when it’s 600 pixels and above. So my narrow state is that smaller one. So basically my adaptive trigger says, hey, when it’s zero, basically less than the other one, it will go through a bunch of setters. And what these setters do is it makes the map go above and the list below and then take the full width of the screen.
When it’s 600 pixels, this adaptive trigger will fire and apply these setters. And these setters do what you see on the screen over here, the map on the left-hand side and the list on the right-hand side. And then they take up the full height.
So here you set up a bunch of adaptive triggers based on the size or any other attributes and adapt the user experience very straightforwardly. This is what provides all the magic. Relative panel plus adaptive triggers plus the visual state manager. And that gives you all that richness that you’ve seen in all these different user experiences over the last few days.
So now that we’ve taken the photos, and we have a bunch of those that we collected, it’s really about arranging those photos and deciding you want to create storyboards for different rooms.
Now, when I think about going and creating a storyboard and kind of manipulating lots of different pictures and photos. I think a desktop is a much better device for doing that, use a mouse, my keyboard maybe to type things.
So I’m going to move over to my desktop and show you the same exact application running here. What you’ll notice in this organized space, first of all, is we’re using a pivot. As David said, we’ve added pivot now to the desktop. This is a great user control to be able to view the rooms and then be able to assign different things to different rooms.
So I can pivot between each of the rooms and I just have to create storyboards for each of these. And it works very nicely with touch as well.
And then I think the right way to do this is really to use a drag-and-drop metaphor. I’ll go to my living room and say, “You know what? I don’t really like this. I’m going to remove that.” So you just right-click, that works natural.
Then I’ll just drag in another one and say, “You know, I want this instead.” And so here are the floors that I think would be great for it. I’ll go to my master bedroom, say I think — fireplace? Anybody think I should have a fireplace in my master bedroom? I think it would be great to have a fireplace in the master bedroom. I think it would be great to have a fireplace in the master bedroom.
So I’ve dragged that in there as well. So now I am able to basically add a few things here. But from the desktop, it’s not just about the single application. It’s about using multiple applications and really multiple windows, like David said.
So I’m also able to support drag and drop between applications. So here we have the photo application that’s built in, but you could also use the file explorer. So if you had something on an SD card, or if you had a Win32 application, all of those would work as well.
So we can drag in. And this will go, take this bitmap that I had, or this JPEG, I think it is. And we’ll go and import it in here and add it to the film strip at the bottom. It allows me to use the palette that I’m choosing from for my rooms.
So now I’m going to go back to Visual Studio to show you how I implemented all of that drag-and-drop functionality.
So I’m going to move over to my organize page. And here’s the code behind that I’ve got. So I have a handbook called Grid Drop. So whenever I drop it onto that grid, this fires. It’s the same function that fires whether or not I dragged it from inside the app or from outside from a different application.
But I get different content. When I drag it from outside the application, I got a bitmap or I got a JPEG or some sort of image format. But when I dragged it from inside, I had already one that I had defined in my collection there.
So I detect those in two different ways. So when it comes in here, it’s one of the — you know, if it’s storage item, then I’m going to know it came from outside. So let me drop in the code here and show you how I add it to the list of furniture.
So I go and I find — enter any items. And then I go and get the bitmap, I import it. So whatever format, we have a bunch of decoders built into the platform and they will automatically decode it.
Then I have three different attributes on every furniture item, which is a name, a description, and then I have this ID that I have. It gives it a unique identifier for every piece of furniture. And I actually use that later on so that I don’t have more than one copy because nobody wants more than one copy of everything.
And then I set the image. And then all I do is add it to the list of captured images.
If I actually am dragging it from within the application, I have some code here I’ve written, here I pass — the way I do that is I reference just the unique identifier of the furniture. And then I want to assign it to a specific room in the pivot.
So I get that ID that was passed in during the drop operation. Then I go ask which of the pivot tabs — those are the three rooms that I was having remodeled — it was in, and then I just add it to the list of captured images for that room.
So very straightforward, I was able to use drag and drop between applications or within my applications as a great way to build an experience that felt natural for someone using a mouse.
So now once we kind of get through this phase of, you know, we’ve kind of assigned and created storyboards for each room, what we also like to do is kind of get — you know, kind of do a slide show. How do I get a feeling for what that room’s going to feel like and the characteristics of that room?
So here I’m going to go back and get this slide. We have a slide show mode. If I hit this, it will cycle through all the photos of captured images for that room. So I can get a feel for the aesthetic and say, “Yeah, do they all match or not match?”
Now, while this is great to do for my room, I think it’s great also for this customer. I was thinking, wow, if they could build some kiosks and have some of these pre-done, you know, some area of their showroom that says, OK, here’s the kitchen, you know; over here here’s the living rooms, you know; here are the different type of aesthetic like traditional. They can have these dedicated kiosks that would kind of advertise, you know, some of the ways that their aesthetic works, and could attract more of their customers and excite them, and give them maybe some ideas.
I think the best way to do that is with some dedicated devices. So I suggested we use a Raspberry Pi 2 with Windows IoT core running on it, because I can run the exact same application.
What you see here is a Raspberry Pi, and I have a proximity sensor hooked up to it so you can tell if someone walks over to the room, I can give them a custom experience of how did they do that.
So let me show you here running because I have one running here. So when I walk in front of it, you’ll see it will detect me, I’m here, and it will start the slideshow. It will start rotating through several of the images.
And then as I move closer, it will say, well, I know they’ll closer, so I’ll get denser. And even closer, goes even more dense. When I move away — good, I’m glad it worked. (Applause.) It’s always nice when they do. And it will just turn off when I’m not in front of it anymore.
So that will be great, and the nice thing about it is since it’s the Universal Windows Platform it runs on those devices as well.
So let me hop over and show you the code that I wrote to talk to that sensor.
So let me move over to my sensor code here, and so that’s a little bit of special code there that in the past if you were running on anything other than Windows 10, you would have had to go write a driver and you’d have to talk to this special bus, and they had a bunch of stuff for it. It was a fairly complex amount of code.
But with Windows 10 we now directly support talking to these various different buses. And so here I’m talking to an iTC bus. And so what I need to do is in my function here, the first thing I need to do is enumerate that devices that are on the bus. Then I will establish a connection, and a lot of this information comes from the device. Got to read the manual. You know, you can try and guess the parameters here, but typically you read the manual and get the SDK for it. And then set up a timer that will go and sample that periodically.
Now, once I have all those samples, then I can go hook up, you know, how close I was and, you know, how fast it changed. And then I can re-create that behavior. Very straightforward, easy code now that we have support for all these buses in the Universal Windows Platform.
Now, once we’ve kind of set up all these things in the showroom, the most important thing is the presentation. They’ll go off, they’ll finalize it, they’ll do some sketches and then they’ll come back with a design. And they’ve got to close a deal. They want the best presentation that they can possibly set up.
So we think really the best way to present that is on a large-screen TV, because we all watch our home remodeling shows, don’t we? Great, everybody watch those? And they’re always on our TV. So that’s kind of the best way to go present it.
So here I have chosen to show this on an Xbox One running on the TV here that you can show on a TV. And so I’m going to run the application. And again because it’s part of the Universal Windows family, it can run any app that was built to the Universal Windows Platform.
And so I’m going to go into presentation mode here, and here we’ve got a sketch of a 3-D model. That’s the room and so you can go present that and they can look around and, you know, see different rooms and whether they liked them or not. And sure, it’s a little void right now because I’m really not very good at designing, but nice, great experience.
You know, but I was thinking, if you want to be the best one out there, you want the best experience for your customers, there’s another device in the Windows family that will provide even better experience. Can you join me in welcoming Felicia from the HoloLens team out here to show you this same exact app running on the HoloLens? (Applause.)
And so what you’ll see here is the same app that we wrote runs on the HoloLens, because Windows Holographic is Windows 10. And so here we have the same exact model, and she is able to look at it, walk around it, look at the flooring. See it, looks a lot nicer than it did on the Xbox. And kind of just look around this and get just a great experience using this same exact application.
Now, of course, you know, we probably would have gone and built a more customized experience, something that she could be immersed in and walk through it, and that will be all great, but I want to show this exact same app running to show you that a very simple app can be moved over to the HoloLens just as easily as any app can move to any other device family.
Thank you, Felicia. I appreciate it. (Applause.)
So what I’m going to show you is the actual code that we wrote to make that work on the HoloLens versus what we had on the Xbox.
So before I jump into that, I want to explain a little bit about how the camera works. In HoloLens the camera moves all the time. Whenever the person’s head moves or tilts or they move around, you must keep up the camera or the object will not look correct.
In the past, the camera’s been controlled by the developer or the program in most cases, but here it’s controlled by the end user.
And so it’s also a stereoscopic camera. You have left and right eye. Whereas on the Xbox it’s a flat 2-D. So the camera on the Xbox, the 3-D model is the same, it’s the same exact 3-D model, but the camera was a fixed 2-D camera that would take it, create an image from the three-dimensional object, and then show that on the screen. On here we’re going to have to keep updating it with the left and right eye and update the parameters.
So simply on each update, so this update gets called whenever she moved or looked around and tilted. And I need to go update the left and the right eye. So I’ll read those from HoloLens and I’ll update those parameters in my rendering loop. And then I need to go update the rendering resources and the shaders based on those new camera positions.
So this goes and now creates an interactive experience where she can walk around and see and interact with that model, so fairly straightforward for a very simple application. Obviously for some of the more advanced stuff we saw yesterday it’s a little bit more of an investment in code, but then you get a lot more benefit for the customer.
So I’ve kind of gone through a lot of devices and shown you the same exact app running all of them, but the goal really being that it was centered around the user. They were able to use that app with the right device that made sense for the task and the part of the operation that they were doing. And they can provide, this company can provide a great experience for their customers and really to differentiate versus the competition.
Thanks. Back to you, Dave. (Applause.)
DAVID TREADWELL: Great job, Kevin. One app across all the devices, it’s really pretty remarkable.
Visual Studio 2015 makes it easier not just to develop your apps but to debug them as well.
The improved XAML designer makes it easy to review and adapt your UI for each device. You can jump between phone, desktop and other views of your same XAML layout inline.
The new live visual tree lets you select, inspect and edit elements in real time in your running app. It’s like browser F12 tools for app development; it’s so cool.
Visual Studio pushes the state of the art in diagnosing performance issues by allowing you to identify performance issues without even leaving the debugger. You can see how long code takes to execute through perf tips. You can visualize your app CPU and memory utilization through the CPU and memory graph. All this without having to switch and run a separate profiling tool.
Windows 10 makes it simple to distribute a Universal Windows App, and offers more powerful insights into your app’s usage. There’s one submission process for all devices. There’s one set of certification policies to go through. No other platform makes it this easy to distribute your app to such a broad range of devices.
New features from the store let you analyze your usage and monetize your apps. App insights are integrated right into your apps in dev account, enabling you to answer questions like how many users are getting stuck in a level of a game, how is a specific feature actually being used.
Campaign attribution lets you compare the success of your app marketing strategies and get your data within a few hours, so you can adjust your strategy in real time.
So that’s how the Universal Windows Platform on Windows 10 helps you design, debug, develop and distribute your app.
Those of you that have already bet on the Universal Windows Platform can benefit from all of that in Windows 10.
For those of you who don’t yet have Universal Windows apps let’s talk about how we’re going to help you get your code to the Universal Windows Platform.
We all know the best apps are the ones developers have poured their blood, sweat and code into, the whiteboard sessions working through your app’s design, the late nights hunting down and fixing that gnarly bug, the excitement and anticipation of pushing out each flight. It’s not just your code but all that has gone into your code that ultimately makes your app what it is.
At Microsoft we live and breathe developers. We recognize this fundamental truth: Your code is the soul of your app.
And that’s why we’re so passionate about building Universal Windows Platform bridges that let you start with your code no matter where it was born, and bring it to the Universal Windows Platform and store.
The first bridge that we’re going to talk about today is how you can bring your Web code to Windows 10. There’s a new Web rendering engine, Microsoft Edge HTML, that’s built for the modern Web. It powers both the new Microsoft Edge browser that Joe showed yesterday, as well as Web content in Universal Windows apps.
Microsoft Edge leaves behind all of the Internet Explorer behaviors, all the behaviors specific in Internet Explorer that have been built up in the last 20 years. And it has over 4,200 interoperability improvements to ensure that the Web just works. For developers this means less time fixing up your Web apps to work across browsers.
Microsoft Edge HTML also features over 45 new Web standards, including HTTP 2, Web Audio and a bunch more that you can see here. This is just a snapshot. We’ve been doing our Microsoft Edge HTML planning in the open, with new features coming to Windows Insider builds each month.
While improving interoperability and adding new features to Edge HTML, we didn’t forget to pay attention to performance. On the Jetstream benchmark created by Apple, which simulates complex Web applications, Edge HTML is over 1.5 times faster than IE11. Beyond that, it’s also ahead of the latest 64-bit browsers.
Next, on Google’s Octane benchmark, created by Google, Microsoft Edge is over twice as fast as IE11. And again Microsoft Edge leapfrogs into the lead ahead of the other 64-bit browsers. Rest assured that great Web performance will continue to be a priority for us.
Beyond making the Web run great on the browser itself, Windows 10 provides a powerful new path for sites to become apps. With Windows 10 you can reuse your existing website code and create an app that points directly to your URL.
You don’t need to rewrite your server code into packaged client code. You can access Universal Windows Platform APIs directly from the Web code that came down from your server. And you can distribute the app you’ve made in the Windows Store.
This new path is fully integrated into your existing Web workflow. You can continue to use the same tools, libraries and services that you use today. You can continue to deploy to your servers to make updates.
Kevin, show us how to make a website into an app.
KEVIN GALLO: Great, thanks, Dave.
So I have here a website that I’ve built, and I’m going to show you how I’ve made it into that hosted Web app here.
So first, I’m going to show you the site running in Microsoft Edge. It’s a flight arcade app, flight simulation, kind of cool to play.
And so here I’ll just go start and you’ll notice here that it’s a beautiful looking app, you know, great graphics. It’s also got great audio because audio’s got to be there in every game to be cool.
But this audio here is actually using that Web Audio. And as you hear me throttle up and down, it’s actually a single audio file that we have that we’re using Web Audio to modulate.
But, you know, I’m really not very good, my team told me not to fly, but I’ve got a game controller here, and we’ve hooked this up to the new gamepad support that we have in Microsoft Edge HTML.
And so I’m able here to try and let’s see if I can — I like to fly fast and loose, but, yeah, not very good. So we’ll kill that before I go crashing into the earth.
Now, there’s a couple other features that I wanted to add that really weren’t available on the Web platform. One is integration with Xbox Live. And so here I’m going to launch the same app, the same site, but hosted inside of an application.
So I’ve already deployed the application here, and when I run it, it logs me into Xbox Live. I have my cached credentials from the machine, and automatically just logs me right in.
The second feature that I wanted to go add is Cortana integration, the ability to launch this application using Cortana.
So I use Sublime to edit, and I also use Git as my repository. So what I’m going to do here is edit the code. I’m going to submit it to Git. It will publish it back up to Git, and now I have it automatically deployed to my Web server. I’m not going to reinstall the application, I’m just going to rerun it, and automatically it’s got all that functionality, with no update, no ingestion process or anything like that.
So here let me un-comment the code, save, adding Cortana support, wait for that go to work. Here we go. And now I can go to Cortana and say, Flight Arcade, go to waypoint Alpha Bravo.
CORTANA: OK, going to Alpha Bravo in Flight Arcade.
KEVIN GALLO: And so you can see here that I was able to launch the application using Cortana, go to a certain point that had a deep link inside, I had set that up automatically, and it did also that integration with Xbox Live. And, of course, my team set it up so that by doing nothing I can get an achievement. Everyone heard that, everybody gets an achievement doing nothing. (Applause.)
So there you go, very simple, able to go do that and continuing the developer workflow for Web as well as developers at the release.
Back to you, Dave.
DAVID TREADWELL: Thanks, Kevin.
Let’s shift gears, to use a Guggsism. Was anyone here at the PDC in 2003 when we introduced WPF? (Show of hands.) How about 2000 when we introduced Windows Forms? (Show of hands.) Still a few hands. Let’s go way back, 1992, Win32? (Show of hands.) All right.
Later this year Windows 10 will provide a bridge for you to the Universal Windows Platform and store. Apps written to these classic platform technologies will be able to be packaged and deployed with AppX. You’ll get the same fast, safe, trusted deployment as apps written to the Universal Windows Platform.
You’ll be able to distribute these apps via the Windows Store. You’ll be able to call even more of the Universal Windows Platform APIs directly from your existing code, Live Tiles, notifications, Cortana and more.
I’m going to turn it back over to Kevin to show you how to use the Universal Windows Platform APIs from your existing code.
KEVIN GALLO: Thanks, Dave.
So, of course, since I’ve written to all these platforms, I’ve shown you Web, I’ve shown you Universal Platform. Now I’m going to show you a WPF application. So let me run it here just to give you kind of a look at it. It’s a very simple application that I’ve written, but basically it’s a personal trainer application that allows me to track information about things that I eat, my workouts, my health information and a bunch of different things.
And what I want to do here is add two specific features. One is a very simple feature, the ability to just pop a toast. And I want to show you just how simple it is, to show it’s not a lot of complex work just to call one of the new Universal APIs from a WPF application.
The second is one of our more complex ones. We’ve added a feature called App Services. This is the ability for Universal Applications to provide services to other applications so that they can call them and they can basically work together on different data and different services.
So the first thing here is when I click the launch button, I just want to pop a toast. So it’s very simple code. It’s three lines here. First you’ll notice that I had added some name spaces up here, otherwise it wouldn’t compile. These are just the Universal API name spaces that I use. Then for the toast I go, I get the XML for it, I create a new toast, and then I say show toast.
Let me run this code. And so when I click “launch” this will pop what we call an Interactive Toast. This toast actually allows me to open an application from it. So what I did is, I popped this here, and the XML said, open the Microsoft Health application. So I’m going to click on that, and it actually opens this applet here. This is a sample app that allows you to gather information from the Microsoft Band. And as I’ve been wearing it for a while, and so it’s tracked my heart rate and different things that it tracks.
And so it has also an app service that we’ve implemented. And so what I want to do is go to call that app service to get all of that information from the last week. The nice thing about App Services is I don’t need this app running to be able to talk to it. So I’m going to close the application, and then when this calls it, it will just directly connect to the application in the background. So here is my quick handler for my start button that I had in there, and I’m going to pop the service here — the code here to talk to that service.
So the first thing I do is I establish a connection. I do a strong connection here. I want to know that I’m talking specifically to that application. So I have a grid here and an app service name, and then I just establish the connection.
The next thing I want to do is send it a message. So I want to send it a message to get the past week’s data. So I send it this message here, I wait for the service, I do the wait here. I send it asynchronously. And when it’s done it comes back. I update my user interface with the data that I got from it. So again, very straightforward and not a huge amount of code.
So here I’m going to hit “start.” So it will take a few seconds, not even, and then it goes, it talks to that app service in the background, and it’s pulled that data and integrated it directly into my application.
So I’ve showed that you’re able to do very simple things with a few lines of code, or you can do one of the more complex things integrated with these App Services, a brand-new feature with the platform coming in Windows 10.
Back to you, Dave.
DAVID TREADWELL: Thanks, Kevin.
Now let’s talk about the bridge we’re building to help you take your Android code and get it to Windows. You can reuse the existing Java or C++ code you’ve written for your Android app. You can continue to work in your existing tools, even using Android Studio to produce the app for Windows.
When you make the app for Windows function calls and even services brought to deliver the correct Windows experience. You can update your code to take advantage of key features of the Universal Windows Platform, like Live Tile. You can distribute your apps through the Windows Store to phones running Windows 10. Let’s take a look.
Yesterday, you saw how you can start with code you wrote for Android to create an app for Windows that integrates with Windows Shell features like keyboard, touch and navigation. Today I would like to show you how starting with your Android code, you can integrate with some more advanced Windows capabilities.
This app, Lose It!, empowers people to live healthier lives and achieve their goals through rich experiences and insights about their lifestyle. This version of Lose It! running on a Windows 10 phone was built starting with the original Android code base.
All this talk up on stage it’s like exercise for me, I’m sweating a lot, it’s kind of fun. So let me log this exercise. You can see I have stage talk as a regular exercise in addition to running and bicycling. We’re supposed to be up here about 45 minutes. We’re going to be about that by the time we’re done. We go ahead and save. Now we’ve got stage talk logged as an exercise.
Terry and I, sometimes we’re in competition over exercise. So I’m going to share this stage talk workout that I did with Terry. This app is using the Windows share contract, instead of the default Android experience. I’ll click into messaging, I’m not sending it to him, but you can see how it brings up the Windows experience for sharing. This is just one example of how Windows code — Windows apps that reuse Android code can interact with other Windows apps.
These apps can also use key universal platform APIs like Live Tiles. If you look in the upper right on the screen you can see my start screen is a live tile for this sample app Timber, that’s timber with a B as in bravo. It occasionally changes states. Timber is another Windows app that was also built starting with an Android code base. With just a few lines of code it was able to integrate a Live Tile.
Apps can also integrate with Microsoft cloud services with minimal effort. Here Timber is showing me a map of my favorite national park. Maps are one example of cloud services that modern apps expect and use. It was trivial for the developer to invoke Bing Maps in place of Google Maps when running their code on Windows. Part of the bridge we’re building for Android code will include a rich SDK for Microsoft services in Java, to make it easier for developers using Android code to build a successful Windows app. And as far as tooling, I’m not going to show you this right now, but there’s a session later on today where you can learn how to reuse your current ID and workflow to build great Windows apps from your Android code. (Applause.) That’s a big step for us, in case that wasn’t obvious.
Now let me walk you through the Universal Platform Bridge for your iOS code, as well. It lets you import an Xcode project into a Visual Studio solution, while sharing the exact same source code files across the two projects. You can work in the familiar, powerful Visual Studio experience to edit, debug, profile and ultimately build your Windows app. You have full access to the API set the platform provides, including things like Cortana. And you can integrate C and C++ code in with the same project.
You’re producing a Universal Windows App that you can deploy to the Windows Store. Let’s check it out. Here we have a directory with the source code files for the Math Stream project that Terry showed yesterday, same exact Objective C files. In the command line interface we’re going to run a little batch file and what this batch file does, it runs the code that’s going to do the conversion of the Xcode project to the Visual Studio solution.
If you watch in the Explorer Window over here a bunch of new files showed up, including the solution file. Double-click on it; we’ll bring up Visual Studio. And we’ve created this Math Stream project from the Xcode project. It still has the original Objective C code from the iOS application and you can see it in the Visual Studio view. Simple F5 will build and run it. And for a simple app like that, that’s all it takes. Here’s the app running, the same one you saw yesterday. We can add the apples, simple arithmetic application.
But now let’s take a step and bring this one step further. We know that great Windows apps also want to take advantage of all the compelling, unique Windows features we’ve been talking about in the Universal Windows Platform. So let’s actually do that. First we’re going to add a couple of files that we’ve already written into the project, these two files. And then what we’re going to do is we’re going to make a couple of small modifications to this source code. You’re not going to enjoy watching me type source code, so I’m just going to cut and paste this from the popular Notepad application.
All right, now when we rebuild this project it will rebuild it with the changes for the new interactive notifications. This is the same concept that Kevin showed with Band, but now we’re going to have an interactive toast added to this particular application. F5 to run it, now what we’ve done is if you do a math operation that results in 10, we like the number 10, it brings you this interactive toast down at the bottom right. And what we can do is a compelling feature of unlocking division inside the application. So we can have all four basic arithmetic operations in the app, six divided by three is, in fact, two.
So that’s how you can add unique universal Windows platform capabilities to an existing iOS Objective C application. All right, thanks for your attention. (Applause.) That was all a look at how you can take your Universal Windows Platform Bridges to take the code you have today, no matter where it was born, bring it to Windows. Then you can build experiences only possible on Windows across all our family of devices by taking advantage of unique Windows features like Xbox Live Services, Cortana, Interactive Notifications, Live Tiles, adapting and tailoring your UI, inking, sensors, holograms, and much, much more.
I’m psyched to see what you all do to change the world using the Universal Windows Platform. Thank you very much.