>> Daniel Stafford: Hi, everyone. My name is Daniel Stanford I'm a PM on Windows Phone
development platform team, and today I'm going to talk about the tools for Windows Phone 8
and what's new. So what is new? We now have tools and templates for native and hybrid
applications as part of Windows Phone 8. We did a big push for native, so now there's actually
tools and templating to go along with that. There's also debugging improvements and this is
mostly around native again. Improved profiling which includes a new app monitor and
emulator improvements including Hyper-V and also a simulation dashboard. So we've added a
bunch of different project templates and to show this I'm actually going to go into Visual Studio.
So if we go to file, new project, under visual C sharp here we have the Windows Phone node
and now there's a couple of new templates. First of all we have Windows Phone XAML and
direct 3-D applications. So this application actually uses a drawing surface as its starting point,
which its drawing point is just like any other XAML control. You can use it behind, in front of or
side-by-side with another XAML control, and it basically just renders D3-D graphics. The D3-D
graphics that are actually rendered will be in a separate runtime component. Also, in the visual
C sharp node here we have the HTML 5 application, but don't get too excited. This is not WW
AE or anything. This is actually putting a web browser control on a page and then rendering
HTML as part of your application. Under other languages, Visual C++ here, there is now a new
node for Windows Phone which includes a Direct 3-D with XAML application, so we saw the
other one. This one is actually using a drawing surface background grid which the difference is
that it has to be at the root of the XAML tree and it covers the entire surface all the time. So
the D3-D component is still in a separate runtime component, but the frame rate for Direct 3-D
with XAML application is actually a little bit better than the XAML with Direct 3-D application.
Also another difference is the fact that the XAML with D3-D application is to use XAML, XAML
controls along with your project. This actually is a very thin client on top of a essentially native
game. So this is more if you want to take advantage of some things that are only in the
managed stack like live tiles, background transfer service or launchers and choosers and such.
There's also a native only choice. So that choice is basically entirely D3-D, so if you want to add
any controls or anything you have to do everything yourself or use third party libraries. And
then the other stuff is just run time components, DLLs, static libraries et cetera. So also, there's
the manifest designer, so the manifest designer is basically a more friendly UI to the deadly WM
app manifest XML file, so I'll show you that. So if we use this project that I already created
which is just the basic XAML with D3-D application, under the properties here we've got the
WM app manifest.XML and so this is the new designer for that. It allows you to do a lot of stuff
like the display name, the supported resolutions, any app icons, et cetera et cetera. It also
allows you to set the capabilities, so the capabilities are basically anything software related so
access to the location-based services or microphone, camera -- sorry not camera. Well yeah,
camera as well, maps et cetera et cetera and also as part of this you can click on it and see the
description. A lot of people tend to set all of these because they're having an issue with access
and it’s, personally I would recommend that you only do the ones that you actually really need
because when someone downloads it from the App Store it's going to show all of these
capabilities as part of your thing. So there's also the requirements tab, so this is basically the
hardware requirements that you have to meet to actually be able to download the application.
This includes things like NFC or rear camera or gyroscope et cetera. And then lastly there's
packaging. Packaging allows you to set the version number for your application and then allows
you to say what languages you support and what the default language is and et cetera. So
there's also a simulation dashboard, so this allows you to actually basically simulate real-world
scenarios. So for example, a lot of people have issues where they're going in and out of cell
range or switching to Wi-Fi or something like that and I've personally even used a lot of
applications that tend not to handle the scenarios very well. So this is basically a tool that you
can use to try and simulate those simulations, moving different data networks or something like
that. It also allows you to trigger reminders, so the reminders are just a little slide that comes
down and it also allows you to simulate a lock screen. And that can be found under tools and
simulation dashboard here. So. Next is the debugging. So as part of this, you know, we've
enabled native so we wanted to also enable debugging native obviously. In the property pages
of your application you can set whether you want the UI task to be managed or native and you
can also debug a background agent and you can set these independently, so you can debug the
managed part of your UI task and the native part of your background agent if you want. You
can also debug both a background agent and a UI task in the same debugging session, so you
don't actually have to switch back and forth. However, there is no mixed mode debugging so
you can't like F11 into your native code. You have to choose one or the other. Also, the
debugger stays attached after you've exited the application, so if you start the application,
press back and then the debugger will still be attached so that you can try to launch your
application from a live tile or from a push notification, and then it will continue the debugging
session. Also new with Windows Phone 8 is the fact that we compile in the cloud now, so
Visual Studio compiles into CIL which is Common Interface Language. This used to be known as
MISL; it's pretty much just a name change. Apps when they're submitted to the store they get
converted into MDIL, which is Machine Dependent Intermediate Language and then once the
application is downloaded by an end user the MDIL actually generates a native image
depending on the device. So this is good for users because of the fact that it runs a lot faster
and it's good for us because we don't actually have to generate native images for every single
possible phone that comes out. But also it has the caveat of not being able to debug as easily.
However, you can debug a native image; it's just not supported in the emulator so you have to
use your real device for this. If you run without debugging on a phone, it actually will already
run the optimized native image. If you want to debug the native image then you have to go to
tools -- here, I'll actually just show you in Visual Studio. You go to tools, options and then in
options there is debugging here and debugging has a couple of options. One of which is enable
just my code and also suppress JIT optimization on module load. If you uncheck both of those
then it will actually load the native image onto your phone so you can debug while using the
native image. So there's a bunch of emulator changes. The biggest of them being Hyper-V. So
Hyper-V is the new platform that the emulator is built on. What this means to you is that you
have to actually have a computer that's SLAT enabled. So there's a tool called core info.exe
under C Windows system 32, I think. And it will basically tell you the, what your computer
allows, or what your computer’s capabilities are and so it will tell you if your computer is SLAT
enabled or not. There's also different ways to find out. Like for example, you can go into the
bios and usually there will be a little thing in your bios that tells you whether you can do
virtualization are not, so that has to be enabled for Hyper-V to actually work. And also as part
of the install for the SDK tools it'll tell you whether Hyper-V is turned on and if your user was
added successfully to the Hyper-V administrators group, which it has to be part of that to be
able to set up the next part which is networking. So the networking stack in the emulator is
actually a bit different than it used to be. To understand the capabilities of the emulator's new
networking stack you can think of it kind of like a Windows Phone basically attaching to the
same network. So if there's a network resource that you're trying to actually hit, if your
Windows Phone attached to the same network can hit that network resource, then the
emulator will be able to as well. The emulator does require that you have DHCP on your
network because it will actually attach itself as a separate device and get its own IP address. It's
also not possible to set the DNS and Gateway settings on the emulator manually, unfortunately.
It'll copy the proxy settings from the host machine though, so if you have a proxy server set up
on your network it will automatically configure itself and it should be fine. It now supports
multiple resolutions, so there's WVGA, WXGA and 720p, so all the resolutions that Windows
Phone 8 ships in you can now test in the emulator, and I recommend that you actually do test in
all of the resolutions to make sure that any of the applications that you're developing, you
know, all users can actually see everything well and have a good experience. The camera now
supports photo capture device and audio video capture device. These are two classes that are
used to enable some external situations if you want to, you know, take control of some of the
camera settings yourself, like iso, contrast, brightness et cetera. So it allows you to set a lot of
that stuff so you can have a more rich camera experience and the camera in the emulator does
support that. It doesn't use your WebCam or anything, still. It still has the lovely little blinking
box around the border, but… And lastly there's graphics changes, so we've actually switched to
software rendering as opposed to the hardware enabled rendering that the old emulators used
to do. What this means is that it'll look a little bit slower, so anything that you have that's
animation intensive or if you're running a game or something like that, you'll definitely want to
run it on the device as well just to make sure that it's actually running smoothly. So app
monitoring allows you to collect a lot of key metrics based on the quality of your application.
Things like events, frame rate, CPU, app responsiveness, battery consumption, storyboards,
image loads and garbage collection events. A lot of this data is then compiled and basically it'll
analyze the data and give you and actionable list of things to do based on the data. So for
example, you can see over here that we have startup time, resume time and responsiveness
and so if your startup time is between zero and five seconds, it'll continue to be green. If it has
anything past that then it will warn you that you are startup time is a little bit too long, so you
should probably, you know, take it easy on your textures or something. Resume time has to be
within zero to two seconds for it to be considered green and that'll actually only show up if you
resume your program, so if you press the Windows key and then back or something like that.
Responsiveness is based on UI stuttering and latency and then it also gives you a lot of other
data like the data uploaded, the data downloaded, the battery charge remaining, memory used
and the average memory used. So now I'm going to show you a demo of the app monitoring
stuff. So here we've got an application. It's a pretty simple application. It's basically just got a
couple of buttons and a canvas, if the designer loads. There we go. And basically when you
click on the button, the code here will actually -- let me, sorry I have to make it a little bigger.
There we go. So the code here will basically create a bunch of new bubbles, set them at a
random point on the canvas and then add some animations. The animations here, I specifically
set as CPU Datamations, so they're dependent animations. It's animating the width and the
height at random intervals and a random time span. The reason I did this is to tax the system as
much as possible so you can actually see what's going on. So we can start an app monitoring by
pressing alt F1 or you can also go to debug here and then there's start Windows Phone
application analysis. So basically what you need to do is just start the session which will startup
the emulator. Hello? Emulator’s on the other screen. So here we've got our application, so if I
basically do some bubbles and more bubbles. Eventually the UI starts to stutter and in a normal
situation this could be something like this box blinking or if you have a lot of animations or
something going on it could stutter, so then you can end the session. And then basically this
will copy the log file, parse it and then analyze it. This can take a long time depending on how
long you've actually done your app session. In this instance it would probably take about 30
seconds, so actually I already have an app monitor log here that I ran a little bit earlier. So you
can see here that our startup time was fine but our responsiveness is poor, so we have two
alerts up here. So we can see that the first alert is very low frame rate from 21270 to 21570,
and then we also have high battery consumption, so you can see here that like the frame rate is
kind of halting a little bit and our CPU usage is incredibly high. So if we actually select a time
span which will give us more information about that specific time range, you can see here that
like we've got low frame rate because of the fact that we have CPU bound animations, so
because we have a lot of dependent animations on the screen, it's taking a long time to actually
do these things. So it's causing the frame rate to drop significantly. Another very interesting
part about this is that we can see these frames of that specific timeframe and we can see based
on certain things like CPU usage, so CPU usage is a very useful one in this instance because
we're peaking a lot. So you can see here that this specific frame is at 25% CPU usage which is
really high. So we can see certain things about that frame, like we can see the entire visual tree
for that frame, actually. So this will tell us what is going on in that frame. So you can see here
that like we have all of these controls and all of that is -- and it will also tell you what's being
drawn to the screen and what's dirty and what needs to be remeasured. So you can see here
that everything basically needs to be remeasured because of the fact that we're using
dependent animation for width and height which are both layout based which means that they
run on the UI thread. So also, as part of this you can see things like the battery consumption.
So our battery consumption got pretty high when the animation started and then it tailed off at
the very end. So this is useful for things like, you know, if your app is really using a lot of
batteries because it's loading a lot of textures or something like that, you may want to check it
out because a lot of times users don't like that kind of stuff. Another thing it'll tell you is
memory usage, so you can see here that the memory usage steadily spiked which is what we
expected. And then it'll also tell you things like when storyboards start. So here you can see
that we do have a bunch of storyboards and they're CPU bound. And it'll also tell you the start
time and duration of this, of the storyboards. It'll also tell you when you have image loads, so I
loaded just one texture for the bubbles so that's why it only shows one. And it'll also show you
all of the garbage collection events. So with that, it's Q and A.
>>: My question here is how much is enabled on the Express SKU?
>> Daniel Stafford: Okay. So the question how much of this is enabled on the Visual Studio
Express SKU. Actually all of this is enabled, I believe on the Express SKU.
>>: Wow.
>> Daniel Stafford: Yes?
>>: Are there plans to add a unit test framework?
>> Daniel Stafford: Are there any plans to add a unit test framework. I can't answer that one. I
don't really know, so if you send me that question in an e-mail, I'll try to follow up with that for
you. Yes?
>>: [inaudible] what is a storyboard?
>> Daniel Stafford: What is a storyboard? A storyboard is a XAML animation, so it's basically
telling the XAML framework what you want to do and how long you want to do it. So I'll show
you an example. So in here we have a storyboard declared at the top here, so it's storyboard SB
here. And then down here we're basically doing a double animation so we tell the storyboard
what the target is. In this case it's the element that I want to actually animate the width, and
then we actually set the target property which in this case is the width property. We tell it
what value to do it from and what value to do it to, so in this case we're animating it from 25
pixels to 100 pixels and then we also tell it what the begin time is, the duration and if you want
to auto reverse it and repeat behavior. There some other things that you can also do, but this is
most of the stuff that you'll actually ever use.
>>: [inaudible].
>> Daniel Stafford: Yes. Begin time is basically what the time in milliseconds to actually begin
after this point, so you can basically delay animations to start after a different animation. So for
instance, if I wanted to animate the width and then the height, I can set the begin time for the
height animation to be the end, to be the length of the duration of the width. Does that make
sense?
>>: Yes.
>> Daniel Stafford: So basically then we just add those as children of the storyboard and then
we can basically tell the storyboard to begin and then it will run the animation.
>>: Storyboard [inaudible]
>> Daniel Stafford: Storyboard is only for animations. Not necessarily. It also can be set to do
discrete keyframes, so what that means is you can actually basically set properties at specific
times. So you can actually do anything with it. You don't have to animate. You can actually set
specific things. That question back there?
>>: [inaudible] network on [inaudible]
>> Daniel Stafford: I'm sorry. What?
>>: The network, do you use [inaudible]
>> Daniel Stafford: Yes. Network usage, network usage you can't see like the individual data on
this screen, but it will tell you on the, on the summary page here, it will tell you how much data
was uploaded and downloaded.
>>: [inaudible] question here is short of that [inaudible] socket communication or anything like
that?
>> Daniel Stafford: So about the socket communication stuff, yeah, I can't remember. I don't
think the app monitor itself will actually show you like any spikes in network usage, but you can
see at least the summary stats.
>>: And what they do [inaudible] just [inaudible] monitor just the gauge the traffic I would just
[inaudible] the phone to [inaudible]. Anything else now or is this still [inaudible] basically?
>> Daniel Stafford: So basically he's asking if Fiddler is basically the best route, which currently
yes. Fiddler is still kind of the best route to monitor network traffic for any phone apps that
you're writing. Yes?
>>: One of those screens showed frames. You were showing frames?
>> Daniel Stafford: Yes.
>>: It is the context of the frame an actual, you know, 60 second segment of the screenshot or
is it talking about stack frames or what is a frame in that context?
>> Daniel Stafford: So a frame in this context is basically one tiny little unit of time. Yes. So…
>>: Is everything sort of time sliced in the frames in this profiler? Is that [inaudible]
>> Daniel Stafford: Yes. So you can see up here at the top that we have this ruler. This ruler is
basically the frames. So frame 238 basically has a start time and a duration. So you can see
here like all of these have the start times of very, very miniscule amounts different.
>>: Why would they have different durations?
>> Daniel Stafford: I'm not entirely sure on that one. I think there was a reason. There was a
reason but I can't think of it off the top of my head. I'm sorry.
>>: It looks like the duration gets very small when the CQ drops, so it must be bound to how
often the CPU…
>> Daniel Stafford: Yeah. The profiler does run on the same thread, or it runs as part of it,
basically sideloading, so I think it's partially due to the fact that like, you know, when we have a
lot more CPU action happening, it won't run as often because of the fact that the UI thread is
very busy.
>>: It injects markers into your code so it if there's no code running, you're going to have
shorter breaks, whereas, if something takes longer to run it's going to have a longer break.
>>: Ah, so it is [inaudible] with your code. So it's not a time slice necessarily.
>>: I don't know too much of the details, but I know that there is some…
>> Daniel Stafford: It's not like a static time slice, so it's not like 60 milliseconds every time, but
it is, it does represent a unit of work, a unit of time.
>>: [inaudible] questions [inaudible]
>> Daniel Stafford: Okay. We'll do them.
>>: Okay. Since I have different types of phones and the screen sizes, so is there very easy way
to set the control’s width and height because it's different on the phone and size, so that
[inaudible] so is there very easy way to identify the phone size and [inaudible]?
>> Daniel Stafford: So the question is basically how to set control widths and heights based on
phone size. So the best way that I have found personally to develop applications that actually
target different sizes is to make it so that your application doesn't necessarily depend on exact
pixel width. Like, for example in this application, I didn't specify any widths or heights, so I
actually used a grid and I defined a couple of rows in my grid. So this one is defined as auto, so
basically it's just saying use up as much space as you need and then the other row is set as the
star which basically says use the remaining space. And then my columns I did the same thing,
so it's basically splitting the screen in half.
>>: Problem is simple [inaudible] some complicated app and then [inaudible]
>> Daniel Stafford: If you do have a complicated application, usually you can still get away with
making at least part of your application use the rest of the space essentially. So you might have
parts of it that you have to have specific sizes because they're an image or something like that
that has to be the same size, but best practice is to make it so that you can have part of your
application that just basically takes up the remaining space.
>>: [inaudible] other Windows [inaudible] exactly the UI in Windows because you don't know
what scheme you're going to end on. [inaudible] hardcode something then like, you know,
have a control [inaudible] certain scale or whatever [inaudible]
>> Daniel Stafford: Right. Yeah. So basically he was saying, you know, in Windows they do the
same thing.
>>: Back on the network thing [inaudible] can we do anything more [inaudible] network?
>> Daniel Stafford: Can we do anything monitoring with NetMon? I'm not sure on that one.
>>: When you have the [inaudible] in [inaudible]
>> Daniel Stafford: Yeah. Due to the fact that it's a Hyper-V instance which technically it's
another instance basically within your computer and it’s virtualized, I'm not sure if NetMon will
work. It's worth a shot. Do you know?
>>: If you're not using IP [inaudible] so nothing on corporate domain, you're able to actually
just snip the traffic off of the controller now, so you won't get both the desktop and your
mobile [inaudible] can just snip the packet. Now most, almost everything can be snipped from
the network card, but you cannot snip things [inaudible] still not going to happen, so you won't
be able to [inaudible], but for sniffing the traffic, just taking the network card’s enough. It's
Hyper-V. I mean it's [inaudible]
>> Daniel Stafford: Yeah. So you can actually just…
>>: It's a lot easier that way.
>> Daniel Stafford: So basically you can set up like a Wireshark instance or something like that
and set it to do the Hyper-V's network adapter. Okay. Any other questions? All right.
>>: Cool.
>> Daniel Stafford: Thanks guys. [applause]