611.srt

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:00:11.026 --> 00:00:14.506 A:middle
>> In this session, my colleague
Mark Malone and I are going

00:00:14.506 --> 00:00:17.476 A:middle
to show you how you can take
your content to your next level

00:00:17.586 --> 00:00:20.506 A:middle
by adding your own
customization while maintaining

00:00:20.506 --> 00:00:21.306 A:middle
great performance.

00:00:23.426 --> 00:00:26.116 A:middle
So first, let me give
you a quick refresher

00:00:26.116 --> 00:00:30.446 A:middle
of what iBook Widget and
iAd are that are rich

00:00:30.446 --> 00:00:34.016 A:middle
in application running
on iOS device.

00:00:34.776 --> 00:00:36.366 A:middle
You can do a lot
interesting things.

00:00:37.216 --> 00:00:38.326 A:middle
Browse a gallery.

00:00:38.876 --> 00:00:39.786 A:middle
Play a game.

00:00:41.946 --> 00:00:43.136 A:middle
Amazing performance.

00:00:43.346 --> 00:00:46.676 A:middle
You may think this is
a native application.

00:00:48.146 --> 00:00:50.266 A:middle
However, if we look
under a cover,

00:00:51.256 --> 00:00:52.806 A:middle
there's this mini
website working

00:00:52.806 --> 00:00:54.846 A:middle
in HTML, CSS and JavaScript.

00:00:54.846 --> 00:00:58.706 A:middle
So there isn't any rocket
science involved here.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:01:00.206 --> 00:01:03.006 A:middle
So if you're a web
developer, it's good news

00:01:03.006 --> 00:01:05.506 A:middle
because you're experience
and knowledge is going

00:01:05.506 --> 00:01:07.676 A:middle
to be really valuable here.

00:01:08.936 --> 00:01:10.746 A:middle
Even if you're not
a web developer,

00:01:10.896 --> 00:01:14.216 A:middle
don't worry because iAd
Producer make it super easy

00:01:14.216 --> 00:01:14.956 A:middle
for everybody.

00:01:15.546 --> 00:01:19.596 A:middle
So here is what we
will learn today.

00:01:20.176 --> 00:01:22.576 A:middle
First, we're going to look
at content customization

00:01:23.176 --> 00:01:24.616 A:middle
and then we'll you
look at testing

00:01:24.616 --> 00:01:25.686 A:middle
and debugging techniques.

00:01:26.446 --> 00:01:29.176 A:middle
Lastly, we're going to cover
performance optimization.

00:01:29.766 --> 00:01:37.306 A:middle
So content customization,
how are we going to do that?

00:01:38.356 --> 00:01:41.746 A:middle
Under a cover, iAd Producer
create your content using

00:01:41.746 --> 00:01:42.616 A:middle
web technology.

00:01:43.396 --> 00:01:47.586 A:middle
And we can use the same exact
technology to do customization.

00:01:49.096 --> 00:01:52.516 A:middle
First, I'm going to show you
how we can do some custom style

00:01:52.876 --> 00:01:54.006 A:middle
using CSS.

00:01:56.516 --> 00:01:59.476 A:middle
In iAd Producer, I have
this project in development.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:02:00.216 --> 00:02:02.916 A:middle
This is image in
the center I would

00:02:02.916 --> 00:02:05.396 A:middle
like to apply some
custom style on.

00:02:07.796 --> 00:02:10.166 A:middle
First, normally, my
first approach is

00:02:10.205 --> 00:02:11.806 A:middle
to use the auto-inspector.

00:02:12.566 --> 00:02:14.476 A:middle
I can do a lot interesting
things there.

00:02:14.566 --> 00:02:17.746 A:middle
I can [inaudible],
apply a filter.

00:02:20.266 --> 00:02:24.166 A:middle
Behind the scene, like those
auto-inspector are applying

00:02:24.166 --> 00:02:25.206 A:middle
CSS property.

00:02:25.686 --> 00:02:27.086 A:middle
So you're already
writing custom CSS

00:02:27.086 --> 00:02:29.926 A:middle
if you are using this inspector.

00:02:30.546 --> 00:02:33.486 A:middle
It's just that iAd Producer is
doing it for you automatically.

00:02:34.816 --> 00:02:37.256 A:middle
But what if you--
what if you want

00:02:37.256 --> 00:02:40.316 A:middle
to use some CSS property not
backed by this inspector?

00:02:40.826 --> 00:02:42.726 A:middle
There are two ways
to go about it.

00:02:45.766 --> 00:02:48.896 A:middle
The first approach is
to import a CSS file.

00:02:49.576 --> 00:02:52.966 A:middle
In iAd Producer, you can
import CSS JavaScript file

00:02:52.966 --> 00:02:55.286 A:middle
like you could for
image and video.

00:02:56.416 --> 00:02:59.566 A:middle
And the CSS JavaScript
file will get bundled

00:02:59.566 --> 00:03:02.096 A:middle
with your content
automatically on export.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:02:59.566 --> 00:03:02.096 A:middle
with your content
automatically on export.

00:03:02.636 --> 00:03:05.286 A:middle
In this particular example,

00:03:05.286 --> 00:03:08.806 A:middle
I imported a file
called custom.css.

00:03:08.886 --> 00:03:12.616 A:middle
Let's take a look.

00:03:13.596 --> 00:03:17.896 A:middle
Inside that file, there's
a custom style setting skew

00:03:17.896 --> 00:03:20.606 A:middle
transform and it's
targeting object

00:03:20.666 --> 00:03:23.586 A:middle
with custom-transform
as a class name.

00:03:24.096 --> 00:03:26.886 A:middle
If I go back to my
project, at this point,

00:03:27.406 --> 00:03:29.646 A:middle
the image is not getting
the skew transform

00:03:30.006 --> 00:03:31.366 A:middle
because it's not having--

00:03:31.626 --> 00:03:34.506 A:middle
it doesn't have to right
custom CSS name applied.

00:03:35.436 --> 00:03:37.846 A:middle
To fix that, we can go to
the property inspector.

00:03:38.416 --> 00:03:42.656 A:middle
And there's a CSS class field

00:03:44.076 --> 00:03:46.056 A:middle
and I can type in
custom-transform.

00:03:46.656 --> 00:03:50.656 A:middle
At this point, if I do
export or assimilation,

00:03:51.396 --> 00:03:54.036 A:middle
I will find that the
skew transform is applied

00:03:54.066 --> 00:03:55.506 A:middle
to the image in the center.

00:03:56.476 --> 00:04:01.276 A:middle
So that's one way to apply
custom CSS in iAd Producer.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:03:56.476 --> 00:04:01.276 A:middle
So that's one way to apply
custom CSS in iAd Producer.

00:04:02.146 --> 00:04:04.066 A:middle
Now, we go and look
at another approach.

00:04:06.986 --> 00:04:09.536 A:middle
The second approach is
to use a Code Editor.

00:04:10.216 --> 00:04:14.286 A:middle
We can open the Code Editor
by clicking on the Code button

00:04:15.056 --> 00:04:16.656 A:middle
on the bottom toolbar.

00:04:17.266 --> 00:04:20.926 A:middle
Here is what the Code
Editor looks like.

00:04:21.776 --> 00:04:23.596 A:middle
You will see a list
of file on beside.

00:04:24.186 --> 00:04:28.586 A:middle
Global.css is a file that you
can add you custom CSS style

00:04:28.656 --> 00:04:30.546 A:middle
and make it available
to your content.

00:04:31.836 --> 00:04:35.416 A:middle
Global.js is the same idea
except uses the JavaScript file.

00:04:36.726 --> 00:04:40.386 A:middle
So previously, we applied a
class name to our image object

00:04:40.536 --> 00:04:42.466 A:middle
and we can use it right
here in Global.css.

00:04:42.466 --> 00:04:44.966 A:middle
And here's an example.

00:04:46.246 --> 00:04:50.056 A:middle
Here's an example of pocketing
an object by its class name.

00:04:51.756 --> 00:04:54.776 A:middle
We can also target the same
object by its unique ID.

00:04:54.936 --> 00:04:56.276 A:middle
Let me show you how that works.

00:04:56.646 --> 00:04:59.916 A:middle
So back to our project.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:05:01.046 --> 00:05:04.796 A:middle
iAd Producer automatically
generate a unique ID

00:05:04.826 --> 00:05:08.226 A:middle
for every single object
by combining the page name

00:05:08.226 --> 00:05:10.156 A:middle
and the object outlet
name with a dash.

00:05:10.666 --> 00:05:13.606 A:middle
Let's take a look
at this example.

00:05:14.256 --> 00:05:18.446 A:middle
In this project, we have
a page called Introduction

00:05:19.126 --> 00:05:21.456 A:middle
and the object outlet
name is "curiosity".

00:05:22.606 --> 00:05:25.396 A:middle
Therefore, the unique ID
for their image is going

00:05:25.396 --> 00:05:27.746 A:middle
to be Introduction-curiosity.

00:05:29.026 --> 00:05:34.196 A:middle
And here's an example how I
can reference it in Global.css.

00:05:34.526 --> 00:05:35.276 A:middle
Super simple.

00:05:35.816 --> 00:05:39.196 A:middle
So that was CSS customization.

00:05:40.506 --> 00:05:43.246 A:middle
We're going to shift focus
and talk about JavaScript.

00:05:46.176 --> 00:05:49.346 A:middle
So at this point, I have
a really beautiful page.

00:05:50.006 --> 00:05:52.056 A:middle
But at the same time,
it's not that interesting

00:05:52.056 --> 00:05:54.486 A:middle
because this is only
showing a static image.

00:05:55.086 --> 00:05:59.236 A:middle
I want it to be dynamic and
always look fresh to our user.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:06:00.546 --> 00:06:04.546 A:middle
To do that, I'm going to
write some JavaScript code

00:06:04.726 --> 00:06:08.846 A:middle
to point the latest satellite
image from NASA and display it

00:06:08.966 --> 00:06:10.246 A:middle
in a multi-cell object.

00:06:11.536 --> 00:06:14.526 A:middle
To start, I'm going to show
you how we can get that data

00:06:14.526 --> 00:06:17.816 A:middle
from NASA and-- on page load.

00:06:18.366 --> 00:06:24.846 A:middle
So in iAd Producer, we can
Object and Page by event

00:06:25.006 --> 00:06:27.416 A:middle
and we can add customization

00:06:27.476 --> 00:06:30.966 A:middle
by implementing JavaScript
callback for those events.

00:06:31.956 --> 00:06:36.226 A:middle
And we can see the event by
going to the Code menu item.

00:06:37.246 --> 00:06:39.826 A:middle
And for example, we're going
to look at the Page Event.

00:06:40.306 --> 00:06:44.166 A:middle
And there we can see a list
of event, the Page Flyer.

00:06:45.456 --> 00:06:47.386 A:middle
View Did Load is
particularly interesting

00:06:47.386 --> 00:06:49.126 A:middle
because it's the
event that got fired

00:06:49.126 --> 00:06:50.856 A:middle
when the page finished loading.

00:06:51.226 --> 00:06:53.636 A:middle
We going to choose that
and we'll see a list

00:06:53.636 --> 00:06:57.166 A:middle
of action base available for
the event, and we're going

00:06:57.166 --> 00:06:58.866 A:middle
to pick Execute JavaScript.

00:06:59.266 --> 00:07:03.286 A:middle
When we choose that option,
we will see the Code Editor.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:06:59.266 --> 00:07:03.286 A:middle
When we choose that option,
we will see the Code Editor.

00:07:03.646 --> 00:07:07.026 A:middle
And there we can add the code
to connect to the NASA server.

00:07:08.476 --> 00:07:10.636 A:middle
So how do we do the
server connection?

00:07:11.216 --> 00:07:13.866 A:middle
If you talk to a web developer,

00:07:14.186 --> 00:07:16.496 A:middle
he or she will probably
recommend something called

00:07:16.496 --> 00:07:19.736 A:middle
XMLHTTPRequest, it works.

00:07:19.736 --> 00:07:21.816 A:middle
But in iAd Producer,
we have something nicer

00:07:21.816 --> 00:07:22.716 A:middle
for you to work with.

00:07:24.056 --> 00:07:25.866 A:middle
It's called iAd.XHRLoader.

00:07:26.086 --> 00:07:28.026 A:middle
It's a really nice
and simple API,

00:07:28.026 --> 00:07:30.266 A:middle
and let me show you
how that works.

00:07:32.296 --> 00:07:33.786 A:middle
You can create an object

00:07:33.786 --> 00:07:36.856 A:middle
of iAd.XHRLoader by
passing in a URL.

00:07:37.696 --> 00:07:42.226 A:middle
Imagine the blue box you
see here is an object of it.

00:07:43.146 --> 00:07:47.116 A:middle
Every iAd.XHRLoader has
an interesting property

00:07:47.116 --> 00:07:47.916 A:middle
called delegate.

00:07:49.186 --> 00:07:53.196 A:middle
The delegate letter
iAd.XHRLoader know who notify

00:07:53.436 --> 00:07:55.016 A:middle
when the loading status change.

00:07:55.826 --> 00:07:57.906 A:middle
And it could be any
JavaScript object.

00:07:58.566 --> 00:08:00.146 A:middle
In this diagram, I'm
going to assign it

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:07:58.566 --> 00:08:00.146 A:middle
In this diagram, I'm
going to assign it

00:08:00.146 --> 00:08:03.226 A:middle
to an object represented
by the green box here.

00:08:05.376 --> 00:08:06.306 A:middle
And I did-- with
this [inaudible],

00:08:06.306 --> 00:08:10.256 A:middle
I can ask the iAd.XHRLoader
to start loading and one

00:08:10.256 --> 00:08:11.406 A:middle
or two thing would happen.

00:08:12.186 --> 00:08:17.626 A:middle
If the loading is successful,
the iAd.XHRLoader is going

00:08:17.626 --> 00:08:20.716 A:middle
to fire a loaderDidComplete
notification

00:08:21.246 --> 00:08:23.306 A:middle
and the green object
will receive it

00:08:23.306 --> 00:08:25.956 A:middle
and do some interesting
manipulation

00:08:25.956 --> 00:08:27.056 A:middle
with the return data.

00:08:27.636 --> 00:08:30.636 A:middle
However, if their loading
turned out to be unsuccessful,

00:08:30.636 --> 00:08:32.645 A:middle
it will get different
notification called

00:08:32.645 --> 00:08:35.556 A:middle
loaderDidFail and the
green object will get

00:08:35.556 --> 00:08:38.316 A:middle
that notification
and it could choose

00:08:38.316 --> 00:08:40.486 A:middle
to do some error
handling from there.

00:08:41.426 --> 00:08:44.616 A:middle
So this gives you-- this
diagram gives you our view how

00:08:44.616 --> 00:08:47.926 A:middle
iAd.XHRLoader works and
here's how it looks in code.

00:08:49.406 --> 00:08:50.436 A:middle
It's supper simple.

00:08:50.496 --> 00:08:52.626 A:middle
It doesn't take that
many lines of code.

00:08:53.406 --> 00:08:56.386 A:middle
We are going to look at this
in detail in a demo shortly.

00:08:56.906 --> 00:08:59.636 A:middle
Now, let's look at-- let's
move on to the next task.

00:08:59.946 --> 00:09:03.456 A:middle
I'm going to show you how we
can use the data from the server

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:08:59.946 --> 00:09:03.456 A:middle
I'm going to show you how we
can use the data from the server

00:09:03.456 --> 00:09:06.056 A:middle
and populate it in
a multi-cell object.

00:09:06.566 --> 00:09:09.936 A:middle
So back to iAd Producer.

00:09:10.686 --> 00:09:12.616 A:middle
I have replaced a single image

00:09:12.666 --> 00:09:15.076 A:middle
with a gallery, a
multi-cell object.

00:09:15.076 --> 00:09:17.346 A:middle
And this form, we
have a data from NASA.

00:09:17.346 --> 00:09:19.396 A:middle
I'm going to show
you how we can plot

00:09:19.446 --> 00:09:22.136 A:middle
that into this multi-cell
object we see on screen.

00:09:22.686 --> 00:09:29.126 A:middle
So imagine the gallery we
saw earlier represented

00:09:29.126 --> 00:09:33.226 A:middle
by this purple box
you see on screen.

00:09:33.226 --> 00:09:35.906 A:middle
Every multi-cell object
have an interesting property

00:09:35.906 --> 00:09:37.016 A:middle
called dataSource.

00:09:38.416 --> 00:09:40.936 A:middle
The concept of dataSource
is really similar

00:09:40.936 --> 00:09:43.186 A:middle
to delegate property
you saw earlier.

00:09:43.776 --> 00:09:49.716 A:middle
The dataSource property let
the multi-cell object know

00:09:50.006 --> 00:09:51.406 A:middle
where its data is coming from.

00:09:53.106 --> 00:09:56.076 A:middle
Imagine the dataSource
is represented

00:09:56.076 --> 00:09:57.766 A:middle
by the green box you see here.

00:09:58.476 --> 00:10:01.346 A:middle
In order for the green
object to supply data

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:09:58.476 --> 00:10:01.346 A:middle
In order for the green
object to supply data

00:10:01.346 --> 00:10:04.526 A:middle
to the multi-cell object, you
need to implement two methods.

00:10:04.716 --> 00:10:07.306 A:middle
The first method is
numberOfCellsInContainer.

00:10:08.266 --> 00:10:11.516 A:middle
It lets the multi-cell object
know how many cell there's going

00:10:11.516 --> 00:10:11.956 A:middle
to be.

00:10:12.616 --> 00:10:16.236 A:middle
The second method is called
cellAtIndexInContainer.

00:10:16.386 --> 00:10:19.116 A:middle
It just returns the cell
object at a different index.

00:10:19.456 --> 00:10:23.736 A:middle
So this gives you an overview
how to load a dynamic content

00:10:24.086 --> 00:10:25.396 A:middle
in a multi-cell object.

00:10:26.476 --> 00:10:27.876 A:middle
And here's how it looks in code.

00:10:28.486 --> 00:10:29.986 A:middle
It's also super simple.

00:10:29.986 --> 00:10:31.696 A:middle
It doesn't take that
many lines of code.

00:10:32.946 --> 00:10:35.316 A:middle
To give you a concrete
idea how these all work,

00:10:35.316 --> 00:10:37.436 A:middle
I'm going to ask Mark
to give you a demo.

00:10:38.176 --> 00:10:38.536 A:middle
>> Great.

00:10:39.386 --> 00:10:41.386 A:middle
[ Applause ]

00:10:41.756 --> 00:10:42.836 A:middle
Thank you very much Chi Wai.

00:10:43.216 --> 00:10:46.296 A:middle
Great. So I've got here on
my canvas, we're building--

00:10:46.296 --> 00:10:48.896 A:middle
this particular example is
an iBook widget and I've got

00:10:48.896 --> 00:10:51.936 A:middle
on the canvas one of
these multi-cell items.

00:10:52.306 --> 00:10:54.026 A:middle
And you can see, if
you double-click on it,

00:10:54.026 --> 00:10:56.186 A:middle
I can look at each one
of the cells in here.

00:10:56.186 --> 00:10:59.136 A:middle
And the sort of the standard
behavior for laying this out is

00:10:59.136 --> 00:11:02.086 A:middle
to jump in here and maybe I've
got three event associated

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:10:59.136 --> 00:11:02.086 A:middle
to jump in here and maybe I've
got three event associated

00:11:02.086 --> 00:11:05.086 A:middle
with Mars curiosity and I want
go and add a new one, well,

00:11:05.086 --> 00:11:06.656 A:middle
I can drop in a new cell here.

00:11:07.046 --> 00:11:08.686 A:middle
I can lay it out to
look like the other one

00:11:08.686 --> 00:11:10.726 A:middle
or maybe I can have a sort
of arbitrary content in there

00:11:10.726 --> 00:11:13.336 A:middle
and it's a really
nice easy way to go

00:11:13.336 --> 00:11:15.306 A:middle
and layout quite
a bit of content.

00:11:15.306 --> 00:11:17.066 A:middle
But if you go in
and you preview it,

00:11:17.066 --> 00:11:21.286 A:middle
you'll see that it will
preview it in a way that,

00:11:21.286 --> 00:11:23.096 A:middle
except for that cell,
actually looks really nice.

00:11:23.096 --> 00:11:25.606 A:middle
There's this nice fluid
motion back and forth

00:11:25.606 --> 00:11:29.516 A:middle
and it looks a lot like
a cover flow experience.

00:11:29.516 --> 00:11:31.736 A:middle
It's all tied up for
tap and ready for people

00:11:31.736 --> 00:11:33.746 A:middle
to attend, interact with it.

00:11:34.096 --> 00:11:36.986 A:middle
So if I close my preview
here and go back to my cells,

00:11:36.986 --> 00:11:38.416 A:middle
you'll see that I
can double-click in

00:11:38.416 --> 00:11:41.016 A:middle
and I can actually delete
cells as well, right?

00:11:41.016 --> 00:11:44.036 A:middle
So this is how you can go and
edit this if you want to go

00:11:44.036 --> 00:11:46.396 A:middle
and add more cells
when they're static.

00:11:46.896 --> 00:11:50.256 A:middle
Now, this is a gallery view
and if I select the Inspector,

00:11:50.256 --> 00:11:52.516 A:middle
you'll see that I got one
of the cells selected.

00:11:52.516 --> 00:11:55.476 A:middle
But if I just click out, you'll
see that it's a gallery view.

00:11:55.476 --> 00:11:56.736 A:middle
It's got a name here.

00:11:57.166 --> 00:12:00.236 A:middle
And it's a good example of
one of our multi-cell objects

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:11:57.166 --> 00:12:00.236 A:middle
And it's a good example of
one of our multi-cell objects

00:12:00.236 --> 00:12:02.026 A:middle
that has some great properties.

00:12:02.026 --> 00:12:05.796 A:middle
But we actually have quite a
few of those multi-cell objects.

00:12:05.796 --> 00:12:08.456 A:middle
We've got this wizzy
carousel that will spin

00:12:08.456 --> 00:12:11.546 A:middle
and it has multi-cells that
you can go and pop content in,

00:12:11.546 --> 00:12:13.306 A:middle
and a true cover flow view.

00:12:13.566 --> 00:12:16.156 A:middle
This is an example of a gallery
here that I've got on the canvas

00:12:16.156 --> 00:12:18.246 A:middle
and then a series of
other kinds of examples,

00:12:18.246 --> 00:12:21.526 A:middle
and they're all going to have a
different visual representation.

00:12:21.526 --> 00:12:24.706 A:middle
But from a sort of dynamic
and interactive capability,

00:12:24.706 --> 00:12:26.556 A:middle
they're going to have
a great experience

00:12:26.556 --> 00:12:27.956 A:middle
and that's what you're
going to want.

00:12:28.126 --> 00:12:30.766 A:middle
So, this is a rather
static implementation

00:12:30.766 --> 00:12:33.616 A:middle
and I think the whole point
to this particular example is

00:12:33.616 --> 00:12:36.376 A:middle
to take this cover flow or
this flow view that's up here

00:12:36.826 --> 00:12:39.176 A:middle
and convert it to something
that's much more dynamic.

00:12:39.176 --> 00:12:40.146 A:middle
We're going to call
to the server.

00:12:40.146 --> 00:12:42.976 A:middle
We're going to get these
milestones that you see in here,

00:12:43.216 --> 00:12:46.556 A:middle
bring them back, and
populate this thing based

00:12:46.556 --> 00:12:48.046 A:middle
on just calls to web server.

00:12:48.046 --> 00:12:51.236 A:middle
So the reality is I don't
need any of these cells.

00:12:51.486 --> 00:12:54.416 A:middle
And if there's any content in
here, I certainly don't need any

00:12:54.416 --> 00:12:57.606 A:middle
of the content associated
with it as well.

00:12:57.606 --> 00:13:00.316 A:middle
And it's going to bring it down
to basically a prototype cell,

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:12:57.606 --> 00:13:00.316 A:middle
And it's going to bring it down
to basically a prototype cell,

00:13:00.316 --> 00:13:02.336 A:middle
one cell that's going
to represent sort

00:13:02.336 --> 00:13:04.786 A:middle
of the cookie cutter that
I'm going to use for each one

00:13:04.786 --> 00:13:08.076 A:middle
of the calls that I make to
the network or for each one

00:13:08.076 --> 00:13:09.886 A:middle
of the records that I get
back from the network.

00:13:09.886 --> 00:13:12.016 A:middle
And so maybe I'll go and
just make it real clear

00:13:12.016 --> 00:13:14.076 A:middle
that this is generic
information I can put in.

00:13:14.126 --> 00:13:17.776 A:middle
This is a date, placeholder
and title that goes here.

00:13:18.436 --> 00:13:22.946 A:middle
Get a little more room here
and the description goes here.

00:13:22.946 --> 00:13:23.856 A:middle
You sort of get the picture.

00:13:23.856 --> 00:13:26.166 A:middle
This is just sort of a
cookie cutter that I'm going

00:13:26.166 --> 00:13:29.156 A:middle
to use repeatedly after
I call to the server.

00:13:29.596 --> 00:13:31.706 A:middle
So let's get into
some of the code.

00:13:31.786 --> 00:13:34.446 A:middle
I want to make a call to
my web service and I want

00:13:34.446 --> 00:13:36.586 A:middle
to pull back all of
those events on the fly.

00:13:36.586 --> 00:13:39.376 A:middle
Maybe there's a new step in
the Mars curiosity landing

00:13:39.376 --> 00:13:41.916 A:middle
and I want to have that
show up within my iBook.

00:13:42.246 --> 00:13:44.436 A:middle
Well I've got some
really cool interaction

00:13:44.436 --> 00:13:47.406 A:middle
with the social media and I
want to pull that content back

00:13:47.406 --> 00:13:49.316 A:middle
into my iAd on the fly as well.

00:13:49.556 --> 00:13:51.736 A:middle
Well it's these technologies
that will make this work.

00:13:52.476 --> 00:13:53.696 A:middle
So, what am I going to do?

00:13:53.696 --> 00:13:55.726 A:middle
I'm going to click the
Code button, bring it up.

00:13:55.946 --> 00:13:57.706 A:middle
Hopefully, it's large
enough so that you can see.

00:13:58.036 --> 00:14:00.986 A:middle
I have nothing selected on the
page when press the Code button.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:13:58.036 --> 00:14:00.986 A:middle
I have nothing selected on the
page when press the Code button.

00:14:00.986 --> 00:14:03.526 A:middle
And so, what it did was
it opened the Code Viewer

00:14:03.526 --> 00:14:05.606 A:middle
in the context of the page.

00:14:06.076 --> 00:14:08.496 A:middle
If I had a button selected,
it would open the Text Editor

00:14:08.496 --> 00:14:10.476 A:middle
and the context of the
button and you sort

00:14:10.476 --> 00:14:11.696 A:middle
of get the way that it works.

00:14:12.306 --> 00:14:13.196 A:middle
And so, what have
you got in here?

00:14:13.196 --> 00:14:14.926 A:middle
Well you got the name of
the page here on the left.

00:14:14.926 --> 00:14:17.916 A:middle
It will be unique JS file
for each one of those objects

00:14:17.916 --> 00:14:20.716 A:middle
that I'm going to go
and add some code to it.

00:14:20.936 --> 00:14:23.656 A:middle
Drop down for all of
the events associated

00:14:23.656 --> 00:14:27.436 A:middle
with this particular object so
I can hook into the viewDidLoad,

00:14:27.436 --> 00:14:29.676 A:middle
will appear after it's
actually appeared,

00:14:29.676 --> 00:14:30.946 A:middle
or I can have code fire

00:14:30.946 --> 00:14:33.116 A:middle
as the page is going
away, going to hide.

00:14:33.206 --> 00:14:35.186 A:middle
So, this is the little
function that I'm going to go

00:14:35.186 --> 00:14:36.846 A:middle
and override when this
function is called.

00:14:36.926 --> 00:14:41.666 A:middle
I'm going to have my code that
calls back to the server kickoff

00:14:41.666 --> 00:14:42.856 A:middle
and this is what
it's going to call.

00:14:42.856 --> 00:14:44.186 A:middle
It's going to call
a local web service

00:14:44.186 --> 00:14:45.166 A:middle
that I've got running here.

00:14:45.166 --> 00:14:47.196 A:middle
I've got a little JSON feed.

00:14:47.586 --> 00:14:50.836 A:middle
It's a parent is a timeline and
it's got a series of milestones

00:14:50.836 --> 00:14:54.826 A:middle
for each one of the Mars
curiosity landing milestones.

00:14:54.826 --> 00:14:57.736 A:middle
And as, you know, something
new happens with the curiosity,

00:14:57.736 --> 00:14:59.066 A:middle
I'll go and add a
new record to here.

00:14:59.066 --> 00:15:02.586 A:middle
And whenever this particular
add or this widget is opened,

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:14:59.066 --> 00:15:02.586 A:middle
And whenever this particular
add or this widget is opened,

00:15:02.586 --> 00:15:04.026 A:middle
it's going to call
to this feed and pull

00:15:04.026 --> 00:15:05.266 A:middle
in the appropriate
content there.

00:15:05.266 --> 00:15:06.766 A:middle
So that's what it looks like.

00:15:07.396 --> 00:15:09.896 A:middle
And the way that I'll go and
implement this is using one

00:15:09.896 --> 00:15:14.086 A:middle
of those great classes that
we've got within iAd Producer.

00:15:14.446 --> 00:15:16.466 A:middle
And so, I'll just drag it
in here, cheat a little bit.

00:15:16.876 --> 00:15:17.726 A:middle
Drop the code in.

00:15:18.316 --> 00:15:20.616 A:middle
And just to explain what I'm
doing here is I'm going to go

00:15:20.616 --> 00:15:22.726 A:middle
and get a reference to that
gallery view that's sitting

00:15:22.726 --> 00:15:23.216 A:middle
on the page.

00:15:23.216 --> 00:15:25.636 A:middle
You saw that it had a name
of Timeline Gallery View

00:15:26.066 --> 00:15:28.656 A:middle
and I access it through this
outlets which is an array

00:15:28.656 --> 00:15:30.346 A:middle
of all the items sitting
on a page, and I'm going

00:15:30.406 --> 00:15:31.936 A:middle
to store that in a variable.

00:15:32.576 --> 00:15:35.596 A:middle
And then the next class that's
really cool here is this iAd

00:15:35.596 --> 00:15:36.906 A:middle
Archiver class.

00:15:37.316 --> 00:15:39.116 A:middle
What I'm going to do
is I'm going to go

00:15:39.116 --> 00:15:41.166 A:middle
into that gallery view
that's sitting on the page,

00:15:41.516 --> 00:15:44.676 A:middle
take that one cell that I
created as my prototype cell

00:15:45.286 --> 00:15:47.556 A:middle
and basically create
a serialized version

00:15:47.556 --> 00:15:48.366 A:middle
of that storage.

00:15:48.366 --> 00:15:50.426 A:middle
Sort of freeze dry it and save

00:15:50.426 --> 00:15:53.066 A:middle
in this property sitting
here on this page.

00:15:53.106 --> 00:15:54.266 A:middle
Pretty straightforward behavior.

00:15:54.906 --> 00:15:58.476 A:middle
The next step is I'm going
to go and call a web or set a

00:15:58.476 --> 00:16:00.516 A:middle
of web service variable
to the path

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:15:58.476 --> 00:16:00.516 A:middle
of web service variable
to the path

00:16:00.516 --> 00:16:01.856 A:middle
to that JSON file that you saw.

00:16:02.716 --> 00:16:05.236 A:middle
I'm going to hold the results
of the call to the server

00:16:05.236 --> 00:16:07.236 A:middle
in this variable called
Milestones and I'm going

00:16:07.236 --> 00:16:09.166 A:middle
to initialize it so I
don't get in trouble later.

00:16:09.866 --> 00:16:12.766 A:middle
And then here is the
magical XHRLoader class

00:16:12.766 --> 00:16:13.446 A:middle
that I'm going to call.

00:16:13.446 --> 00:16:17.426 A:middle
And again, this just is a
wrapper for XMLHTTPRequest

00:16:17.426 --> 00:16:20.556 A:middle
but it's super simple to go and
implement and you don't have

00:16:20.586 --> 00:16:22.586 A:middle
to look at ready states
and the other properties

00:16:22.586 --> 00:16:25.186 A:middle
that typically you're looking
at, at that particular level.

00:16:25.466 --> 00:16:28.856 A:middle
So here I'm instantiating
my object.

00:16:29.286 --> 00:16:31.706 A:middle
And if there's any confusion
about, well, what is this class,

00:16:31.706 --> 00:16:34.676 A:middle
you'll notice that I've got
documentation that's built right

00:16:34.676 --> 00:16:37.676 A:middle
in and I can show
the documentation

00:16:37.676 --> 00:16:40.276 A:middle
or I can find the text
that I had selected.

00:16:40.276 --> 00:16:42.606 A:middle
And if I want to get a
little bit more information

00:16:42.606 --> 00:16:47.256 A:middle
on this class, I could just
type it in and you'll see

00:16:47.256 --> 00:16:50.926 A:middle
that it will filter the list--
oops-- XHRLoader, there it is,

00:16:51.586 --> 00:16:52.996 A:middle
and get the various details.

00:16:52.996 --> 00:16:54.206 A:middle
But I pretty much
know what I'm doing

00:16:54.206 --> 00:16:56.326 A:middle
for this particular example so
I don't need to bring this up.

00:16:56.326 --> 00:16:58.906 A:middle
But it's really nice to have
the DOCs right there for you.

00:16:59.356 --> 00:17:02.236 A:middle
All right, so I'm instantiating
one of these objects.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:16:59.356 --> 00:17:02.236 A:middle
All right, so I'm instantiating
one of these objects.

00:17:02.986 --> 00:17:05.945 A:middle
I'm setting its delegate
property this page,

00:17:05.945 --> 00:17:08.126 A:middle
meaning this particular page
is going to want to listen

00:17:08.126 --> 00:17:11.836 A:middle
for all the callbacks associated
with the success or failure

00:17:12.006 --> 00:17:13.656 A:middle
of calling my particular
website.

00:17:13.656 --> 00:17:16.715 A:middle
And then I'm going to tell that
bad boy, that loader object

00:17:16.715 --> 00:17:19.116 A:middle
to go and fetch the
content, load the content

00:17:19.116 --> 00:17:20.526 A:middle
that you're pointing to
here, and that's what

00:17:21.046 --> 00:17:22.435 A:middle
that load call does there.

00:17:23.665 --> 00:17:26.016 A:middle
So as I said, when I call
Load, it's going to call one

00:17:26.016 --> 00:17:27.776 A:middle
of two methods, we
saw them in the slide.

00:17:27.776 --> 00:17:29.906 A:middle
Let me just go ahead
and drag them

00:17:29.906 --> 00:17:31.236 A:middle
in from my little
cheater over here.

00:17:32.516 --> 00:17:33.186 A:middle
Drop it in.

00:17:33.546 --> 00:17:35.006 A:middle
It's loaderDidFail.

00:17:35.096 --> 00:17:38.086 A:middle
We pass in the loader,
so it will be a reference

00:17:38.086 --> 00:17:39.586 A:middle
to this instance
that I created here.

00:17:39.906 --> 00:17:41.696 A:middle
There'll be an error
code as well.

00:17:42.256 --> 00:17:43.906 A:middle
And here I'm just
throwing up a silly alert.

00:17:43.906 --> 00:17:44.406 A:middle
You know, you need

00:17:44.406 --> 00:17:45.996 A:middle
to do something a little
bit more important here,

00:17:45.996 --> 00:17:48.266 A:middle
especially if you know that
there's no network connection,

00:17:48.746 --> 00:17:50.406 A:middle
you might want to
load some resources

00:17:50.406 --> 00:17:52.216 A:middle
from the local file itself.

00:17:52.216 --> 00:17:55.896 A:middle
Maybe put placeholder images
there and some placeholder text

00:17:55.896 --> 00:17:57.596 A:middle
in case there isn't an
internet connection.

00:17:58.336 --> 00:18:00.626 A:middle
And this is the
loaderDidComplete call.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:17:58.336 --> 00:18:00.626 A:middle
And this is the
loaderDidComplete call.

00:18:00.626 --> 00:18:02.996 A:middle
And this is, if I successfully
called back to my server,

00:18:03.386 --> 00:18:07.556 A:middle
pull back all that JSON text,
I'll be passed back that loader

00:18:07.556 --> 00:18:09.726 A:middle
and I can inspect it,
pull the content out of it

00:18:10.006 --> 00:18:11.446 A:middle
and do some interesting
things with it.

00:18:11.926 --> 00:18:16.886 A:middle
So rather than having this alert
pop up, I'm going to go and drop

00:18:16.886 --> 00:18:18.366 A:middle
in some more code in here.

00:18:19.576 --> 00:18:21.386 A:middle
Boom. And what does this do?

00:18:21.386 --> 00:18:23.306 A:middle
Well, here I am getting
a reference

00:18:23.306 --> 00:18:25.536 A:middle
to that gallery view that's
sitting on the page again

00:18:25.536 --> 00:18:28.446 A:middle
because I'm going to want to
go and poke some data into it.

00:18:29.616 --> 00:18:32.016 A:middle
Saving it as a local
variable called Gallery View

00:18:32.016 --> 00:18:33.256 A:middle
and then I'm going to go and set

00:18:33.346 --> 00:18:36.446 A:middle
that dataSource delegate
property that Chi Wai mentioned.

00:18:36.446 --> 00:18:38.836 A:middle
And by setting that
property to this,

00:18:38.836 --> 00:18:40.936 A:middle
I'm saying this page
is interested

00:18:41.286 --> 00:18:42.856 A:middle
in all the callbacks associated

00:18:42.856 --> 00:18:45.636 A:middle
with how this gallery view
is going to get populated.

00:18:46.956 --> 00:18:50.006 A:middle
All right, the next step is to
grab this loader that came in.

00:18:50.316 --> 00:18:52.606 A:middle
Ask it for its context, what's
going to be that raw text

00:18:52.606 --> 00:18:54.506 A:middle
that you saw in the JSON feed.

00:18:55.046 --> 00:18:58.136 A:middle
I'm going to convert it to a
JSON object by calling Parse.

00:18:58.756 --> 00:19:01.476 A:middle
And then I'm going to pull out
those milestones that you saw

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:18:58.756 --> 00:19:01.476 A:middle
And then I'm going to pull out
those milestones that you saw

00:19:01.476 --> 00:19:02.606 A:middle
in there which is going to go

00:19:02.606 --> 00:19:06.306 A:middle
and basically set this local
property array to have all

00:19:06.306 --> 00:19:07.206 A:middle
of those values in it.

00:19:07.206 --> 00:19:10.026 A:middle
So now I've got an
array full of objects

00:19:10.026 --> 00:19:11.626 A:middle
for each one of my cells.

00:19:11.856 --> 00:19:14.366 A:middle
And the last step in the
entire process here is to go

00:19:14.746 --> 00:19:16.666 A:middle
and tell the gallery
view that's sitting

00:19:16.666 --> 00:19:18.396 A:middle
on the page to reload its data.

00:19:18.956 --> 00:19:20.056 A:middle
And when it does that,

00:19:20.056 --> 00:19:22.466 A:middle
it's going to call its
dataSource delegate and say,

00:19:22.466 --> 00:19:23.466 A:middle
"OK, what you got for me?"

00:19:23.466 --> 00:19:28.176 A:middle
And the way it does it, as you
saw on the slides, are these--

00:19:28.706 --> 00:19:34.286 A:middle
boom-- these two particular
calls, numberOfCellsInContainer

00:19:35.116 --> 00:19:37.126 A:middle
and cellAtIndexInContainer.

00:19:37.126 --> 00:19:40.736 A:middle
This first one says, "OK,
I'm this multi-cell view.

00:19:41.226 --> 00:19:43.226 A:middle
I'm supposed to show a
whole bunch of content.

00:19:43.226 --> 00:19:45.756 A:middle
Well how many of this little
view should I display?"

00:19:46.236 --> 00:19:48.726 A:middle
And so, this should return a
number and I'm going to try

00:19:48.726 --> 00:19:51.456 A:middle
to type it with one hand here
which is basically I'm going

00:19:51.456 --> 00:19:53.066 A:middle
to go to my milestones variable.

00:19:53.736 --> 00:19:57.716 A:middle
It's an array, so all I
care about really here

00:19:57.716 --> 00:19:58.976 A:middle
for this is the length.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:20:02.466 --> 00:20:03.896 A:middle
Perfect. So it's going
to say, "OK, yeah.

00:20:03.896 --> 00:20:07.636 A:middle
Gallery view, I got this number
of milestones in my JSON feed

00:20:07.636 --> 00:20:09.456 A:middle
that came back, so
this is how many cells

00:20:09.506 --> 00:20:11.256 A:middle
that you need to
go and fill out."

00:20:11.926 --> 00:20:15.996 A:middle
This particular function here
is cellAtIndexInContainer

00:20:15.996 --> 00:20:19.806 A:middle
and it passes in that gallery
view there and it also passes

00:20:19.806 --> 00:20:23.296 A:middle
in the index, which one of the
cells doesn't need to display

00:20:23.296 --> 00:20:25.686 A:middle
at the particular time,
and what I'm supposed

00:20:25.686 --> 00:20:27.936 A:middle
to do is create a view,
instantiate a view

00:20:28.256 --> 00:20:30.876 A:middle
and just return it a result
of this particular function.

00:20:31.226 --> 00:20:34.466 A:middle
And the multi-cell container
will go and drop it into one

00:20:34.466 --> 00:20:35.836 A:middle
of those cells as a subview.

00:20:35.836 --> 00:20:37.926 A:middle
So it's super easy
to go and implement.

00:20:37.926 --> 00:20:39.886 A:middle
So rather than return Null,

00:20:39.886 --> 00:20:42.256 A:middle
let's return something
interesting here

00:20:42.936 --> 00:20:45.896 A:middle
and here is the actual
code for that.

00:20:46.596 --> 00:20:48.686 A:middle
Drop it in, there we go.

00:20:48.686 --> 00:20:50.176 A:middle
All right, so let me
go through this again.

00:20:50.176 --> 00:20:54.566 A:middle
I'm creating a new view and
I'm using that archived one,

00:20:54.566 --> 00:20:57.446 A:middle
that freeze dried one
that I saved early

00:20:57.446 --> 00:20:59.436 A:middle
when these ad first launched.

00:20:59.776 --> 00:21:01.996 A:middle
And I just say restore
from Archive

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:20:59.776 --> 00:21:01.996 A:middle
And I just say restore
from Archive

00:21:01.996 --> 00:21:05.086 A:middle
and what it does is it
instantiates one of those views

00:21:05.086 --> 00:21:07.576 A:middle
with the image placeholder,
the title and the date

00:21:07.576 --> 00:21:09.116 A:middle
and the description
field at the bottom.

00:21:09.476 --> 00:21:11.096 A:middle
It gives me a new
instance of that.

00:21:11.096 --> 00:21:14.626 A:middle
I'm going to go and grab
the particular instance

00:21:14.696 --> 00:21:18.266 A:middle
or the particular milestone that
was returned from my JSON call

00:21:18.266 --> 00:21:19.956 A:middle
and that's passed in
as the index here.

00:21:19.956 --> 00:21:20.766 A:middle
I've got this array.

00:21:20.766 --> 00:21:22.516 A:middle
I'm going to pull out
the one that I care about

00:21:22.516 --> 00:21:23.576 A:middle
and put it in this variable.

00:21:23.576 --> 00:21:26.416 A:middle
And then the rest of
this content is going

00:21:26.416 --> 00:21:31.046 A:middle
to create an image based on the
URL that's being passed in for

00:21:31.046 --> 00:21:34.186 A:middle
that particular image and
then set the various date,

00:21:34.456 --> 00:21:36.236 A:middle
title and description properties

00:21:36.536 --> 00:21:38.606 A:middle
on that particular
freeze dried version.

00:21:38.716 --> 00:21:41.516 A:middle
And then the last step
is, OK, return that back

00:21:41.516 --> 00:21:43.936 A:middle
to the multi-cell container
so it can plunk it in

00:21:43.936 --> 00:21:45.126 A:middle
and drop it in the right spot.

00:21:45.796 --> 00:21:47.736 A:middle
So that's all the
code that I need.

00:21:49.926 --> 00:21:51.036 A:middle
Just move that over.

00:21:52.056 --> 00:21:53.886 A:middle
Go back to my view,
nothing at my sleeve,

00:21:53.886 --> 00:21:55.486 A:middle
no assets in here, no.

00:21:56.126 --> 00:22:00.546 A:middle
If I hit Preview here, it made
the call to the local server

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:21:56.126 --> 00:22:00.546 A:middle
If I hit Preview here, it made
the call to the local server

00:22:01.036 --> 00:22:03.356 A:middle
and there are all the
items sitting in it

00:22:03.356 --> 00:22:04.536 A:middle
and even some additional ones,

00:22:04.536 --> 00:22:05.776 A:middle
just so you know
I wasn't cheating.

00:22:06.266 --> 00:22:08.616 A:middle
So all of this content was
being pulled on the fly.

00:22:08.616 --> 00:22:11.796 A:middle
And like I said, you could
go and add another item

00:22:11.796 --> 00:22:14.206 A:middle
on your server the next
time this is launched.

00:22:14.446 --> 00:22:17.126 A:middle
It would go and pull down
the appropriate content.

00:22:17.906 --> 00:22:20.476 A:middle
So that's a bit of an overview
of pulling content on the fly.

00:22:20.476 --> 00:22:22.626 A:middle
I think one other thing,
just to mention really quick,

00:22:22.626 --> 00:22:25.326 A:middle
is these multi-cell
views, if you look at them,

00:22:25.666 --> 00:22:28.066 A:middle
you'll see that you can
add more and more and more.

00:22:28.066 --> 00:22:29.836 A:middle
And if you're worried
about memory consumption

00:22:29.836 --> 00:22:32.086 A:middle
when you're building this
out, just keep in mind

00:22:32.086 --> 00:22:33.396 A:middle
that we take care of doing a lot

00:22:33.396 --> 00:22:35.786 A:middle
of efficient memory
management with these.

00:22:35.786 --> 00:22:39.666 A:middle
I could, say, insert cell,
insert cell and create 50

00:22:39.756 --> 00:22:43.226 A:middle
of these, but from a DOM
perspective, what's in memory,

00:22:43.226 --> 00:22:46.246 A:middle
we make sure to set
display none on those items

00:22:46.246 --> 00:22:47.976 A:middle
that aren't visible
at any given time.

00:22:47.976 --> 00:22:50.446 A:middle
So that's something that we take
care of so that you don't get

00:22:50.446 --> 00:22:52.876 A:middle
in trouble in case you
pull down 300 cells

00:22:53.256 --> 00:22:54.456 A:middle
and want to go and populate.

00:22:54.456 --> 00:22:56.126 A:middle
We're pretty good with
the memory management

00:22:56.126 --> 00:22:57.816 A:middle
and that's actually a
really good best practice

00:22:57.816 --> 00:22:58.826 A:middle
for you folks as well.

00:22:59.576 --> 00:23:03.286 A:middle
So that's the demo and I'll
pass it back to Chi Wai

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:22:59.576 --> 00:23:03.286 A:middle
So that's the demo and I'll
pass it back to Chi Wai

00:23:03.286 --> 00:23:05.756 A:middle
to take it to the next step.

00:23:06.366 --> 00:23:08.716 A:middle
>> So that was JavaScript
customization.

00:23:08.846 --> 00:23:11.096 A:middle
We're going to shift
focus and talk about HTML.

00:23:11.686 --> 00:23:17.466 A:middle
So if you look into--
in iAd Producer,

00:23:17.466 --> 00:23:19.086 A:middle
if you look into
your Object Library,

00:23:19.416 --> 00:23:23.216 A:middle
there's an awesome object called
HTML Under Dynamic Content.

00:23:24.216 --> 00:23:25.536 A:middle
We can add that to canvas.

00:23:26.766 --> 00:23:28.656 A:middle
And double-clicking
on the object,

00:23:28.656 --> 00:23:30.246 A:middle
it will give us the Code Editor.

00:23:31.566 --> 00:23:34.046 A:middle
And there we can
add our custom HTML.

00:23:35.086 --> 00:23:37.836 A:middle
The HTML object is
super flexible.

00:23:37.836 --> 00:23:41.366 A:middle
We can literally put any
kind of HTML code inside.

00:23:41.926 --> 00:23:44.986 A:middle
One great use case
is format of text.

00:23:47.076 --> 00:23:49.566 A:middle
With the HTML object,
we can do all kind

00:23:49.566 --> 00:23:50.866 A:middle
of interesting things with text.

00:23:51.376 --> 00:23:54.876 A:middle
We can set the font,
color, create hyperlinks.

00:23:55.906 --> 00:23:57.436 A:middle
The sky is really
the limit here.

00:23:59.386 --> 00:24:03.946 A:middle
Another great use case of
the HMTL object is MathML.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:23:59.386 --> 00:24:03.946 A:middle
Another great use case of
the HMTL object is MathML.

00:24:05.176 --> 00:24:06.336 A:middle
Back to your Code Editor,

00:24:06.456 --> 00:24:09.956 A:middle
I can define my mathematical
equation in MathML.

00:24:10.656 --> 00:24:13.816 A:middle
If I go back to canvas and
look at my HTML object,

00:24:14.166 --> 00:24:16.646 A:middle
now it becomes a
mathematical equation.

00:24:17.176 --> 00:24:19.686 A:middle
It's super beautiful and
also really straightforward.

00:24:20.936 --> 00:24:23.156 A:middle
So now if we go back
to our project

00:24:23.156 --> 00:24:24.256 A:middle
that we've been working on,

00:24:24.846 --> 00:24:27.866 A:middle
at this point we have
a beautiful gallery.

00:24:28.496 --> 00:24:29.376 A:middle
It's dynamic.

00:24:29.776 --> 00:24:31.276 A:middle
Always look fresh to our user.

00:24:32.336 --> 00:24:34.416 A:middle
But we're going to take
it to the next level.

00:24:34.826 --> 00:24:37.846 A:middle
We're going to add a video.

00:24:37.846 --> 00:24:40.696 A:middle
NASA have an interesting
site, like you have all kind

00:24:40.696 --> 00:24:42.706 A:middle
of video content in it.

00:24:42.806 --> 00:24:46.916 A:middle
However, it doesn't provide
direct link to the video file

00:24:47.406 --> 00:24:51.236 A:middle
so we cannot really use a
video player object built in,

00:24:51.236 --> 00:24:52.286 A:middle
in iAd Producer.

00:24:53.976 --> 00:24:56.406 A:middle
Fortunately, like a lot
of video sharing site,

00:24:56.406 --> 00:25:00.466 A:middle
it does provide an
embeddable HTML object.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:24:56.406 --> 00:25:00.466 A:middle
it does provide an
embeddable HTML object.

00:25:01.786 --> 00:25:03.916 A:middle
And we can use it for our--

00:25:04.446 --> 00:25:06.166 A:middle
I mean we can use
it in iAd Producer

00:25:06.166 --> 00:25:07.146 A:middle
and let me show you how.

00:25:07.746 --> 00:25:11.116 A:middle
And now if we go
back to our canvas,

00:25:11.116 --> 00:25:12.676 A:middle
we can add our HTML object.

00:25:13.426 --> 00:25:15.366 A:middle
We can go to Code
Editor and paste

00:25:15.366 --> 00:25:19.986 A:middle
in the HTML snippet provided by
NASA and we save and close that,

00:25:20.496 --> 00:25:22.686 A:middle
we get our beautiful
video from NASA.

00:25:23.496 --> 00:25:24.226 A:middle
Super simple.

00:25:25.456 --> 00:25:26.716 A:middle
So that was HTML.

00:25:28.136 --> 00:25:29.676 A:middle
And I'll show you
a number of ways

00:25:29.676 --> 00:25:32.116 A:middle
to do customization
using web technologies.

00:25:32.936 --> 00:25:35.506 A:middle
I'm going to change subject
and talk about performance.

00:25:37.226 --> 00:25:40.346 A:middle
So performance and user
experience go hand in hand.

00:25:40.846 --> 00:25:43.496 A:middle
You cannot possibly provide
a great user experience

00:25:43.546 --> 00:25:45.286 A:middle
without having great
performance.

00:25:46.156 --> 00:25:49.756 A:middle
To help you accomplish the
best possible performance

00:25:49.756 --> 00:25:52.976 A:middle
on your content, I'm going
to talk about some testing

00:25:52.976 --> 00:25:55.956 A:middle
and debugging tools and then
I'm going to give some tips

00:25:55.956 --> 00:25:57.386 A:middle
and tricks for optimization.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:26:00.766 --> 00:26:04.386 A:middle
First, let's look at an iAd
project I have been doing

00:26:04.916 --> 00:26:05.576 A:middle
in the weekend.

00:26:05.806 --> 00:26:08.516 A:middle
It's a particle assimilation
model.

00:26:08.646 --> 00:26:10.176 A:middle
I figured out the
physics and math

00:26:10.176 --> 00:26:11.886 A:middle
and I think it's ready to go.

00:26:12.326 --> 00:26:15.136 A:middle
Here's the assimilation
I have on a Mac.

00:26:16.176 --> 00:26:18.666 A:middle
The particle is doing
exactly what I wanted to

00:26:19.076 --> 00:26:20.696 A:middle
and also the frame
rate is pretty good.

00:26:20.696 --> 00:26:22.886 A:middle
It's 50, 60 frame per second.

00:26:23.426 --> 00:26:27.946 A:middle
But if I run it on
my iOS device,

00:26:28.586 --> 00:26:31.006 A:middle
though I'm getting
their correct behavior

00:26:31.266 --> 00:26:33.386 A:middle
but I'm not getting
good frame rate.

00:26:33.386 --> 00:26:35.366 A:middle
I'm only seeing 20
frame per second.

00:26:36.306 --> 00:26:39.206 A:middle
So obviously, I'm not-- I mean
I'm not ready to ship this yet.

00:26:39.786 --> 00:26:44.286 A:middle
To help you identify issue--

00:26:44.286 --> 00:26:46.146 A:middle
performance issue
like this on device,

00:26:46.146 --> 00:26:49.096 A:middle
there are two tools you can
use for testing and debugging.

00:26:50.006 --> 00:26:52.886 A:middle
The first one is Remote
Web Inspector from Safari.

00:26:53.776 --> 00:26:56.686 A:middle
The second one is the Instrument
app that come with Xcode.

00:26:57.056 --> 00:26:59.436 A:middle
First, let's talk about
the Web Inspector.

00:26:59.976 --> 00:27:05.446 A:middle
The Web Inspector is a debugging
tool that comes with Safari.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:26:59.976 --> 00:27:05.446 A:middle
The Web Inspector is a debugging
tool that comes with Safari.

00:27:06.786 --> 00:27:09.816 A:middle
In iAd Producer, you can
attach a Web Inspector along

00:27:09.816 --> 00:27:11.496 A:middle
with your content on export.

00:27:12.866 --> 00:27:14.246 A:middle
And let me show you
how that works.

00:27:17.276 --> 00:27:20.916 A:middle
First, you want to make sure
you have Web Inspector enabled

00:27:20.916 --> 00:27:22.786 A:middle
on your iOS simulator
and device.

00:27:23.386 --> 00:27:25.086 A:middle
To do that, simply
go to Settings.

00:27:25.086 --> 00:27:28.716 A:middle
And if you go to Safari,
there's an Advanced option

00:27:28.896 --> 00:27:32.046 A:middle
and you can turn on
Web Inspector there.

00:27:32.156 --> 00:27:34.286 A:middle
And after that, we can go
back to the iAd Producer.

00:27:35.066 --> 00:27:37.946 A:middle
There's a Preview
menu item and we want

00:27:37.946 --> 00:27:42.316 A:middle
to make sure show Web Inspector
when Previewing is enabled.

00:27:42.886 --> 00:27:47.016 A:middle
So what that does is that next
time when you do a preview

00:27:47.336 --> 00:27:51.566 A:middle
where there is an iOS
device or iOS simulator,

00:27:51.566 --> 00:27:54.376 A:middle
the Web Inspector will show
up along with the content.

00:27:54.866 --> 00:27:56.866 A:middle
And let me give you an example.

00:27:58.276 --> 00:28:00.896 A:middle
So I do a preview and
will see my content

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:27:58.276 --> 00:28:00.896 A:middle
So I do a preview and
will see my content

00:28:00.896 --> 00:28:03.356 A:middle
in the background a Web
Inspector out front.

00:28:03.846 --> 00:28:06.276 A:middle
With the Web Inspector,

00:28:06.616 --> 00:28:09.196 A:middle
we can do powerful
performance analysis.

00:28:09.856 --> 00:28:13.286 A:middle
One thing we could do is
to identify CPU hotspot.

00:28:14.666 --> 00:28:18.716 A:middle
To get started, we need to
go a tab called Instrument

00:28:19.606 --> 00:28:21.326 A:middle
on the Web Inspector.

00:28:22.396 --> 00:28:25.906 A:middle
And we can start the
JavaScript Profiler

00:28:26.206 --> 00:28:28.696 A:middle
and we can run some
interesting report.

00:28:29.216 --> 00:28:32.876 A:middle
We can do a-- we can
run a report like this.

00:28:33.376 --> 00:28:36.246 A:middle
We can see the number
of call per function.

00:28:36.796 --> 00:28:41.766 A:middle
It's really easy to identify CPU
hotspot by singling out function

00:28:41.766 --> 00:28:43.476 A:middle
with a normal amount of calls.

00:28:45.596 --> 00:28:48.286 A:middle
Another thing we can do
with the Web Inspector is

00:28:48.286 --> 00:28:50.196 A:middle
to monitor network traffic.

00:28:50.636 --> 00:28:55.736 A:middle
On the same view, we can capture
a live network report like this.

00:28:55.976 --> 00:28:59.756 A:middle
If we take a closer look,
for every single file,

00:28:59.816 --> 00:29:04.776 A:middle
we can see the file size,
latency and duration.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:28:59.816 --> 00:29:04.776 A:middle
we can see the file size,
latency and duration.

00:29:05.256 --> 00:29:06.826 A:middle
So it's really easy for us

00:29:06.826 --> 00:29:11.326 A:middle
to identify network
inefficiency or bottleneck.

00:29:13.236 --> 00:29:16.756 A:middle
For memory related issue, we're
going to use a different tool.

00:29:19.286 --> 00:29:21.486 A:middle
Instrument is the
application we want to use

00:29:21.486 --> 00:29:24.766 A:middle
to identify memory
issue on device.

00:29:25.786 --> 00:29:28.906 A:middle
To set it up, first we
need to download Xcode.

00:29:29.806 --> 00:29:31.836 A:middle
Xcode is free on
the Mac App Store

00:29:32.866 --> 00:29:35.086 A:middle
and Instrument will
come along with it.

00:29:37.026 --> 00:29:38.866 A:middle
To give Instrument
the permission

00:29:38.866 --> 00:29:41.796 A:middle
to profile your iOS
device, first we need

00:29:41.796 --> 00:29:43.486 A:middle
to do some setup on Xcode.

00:29:44.056 --> 00:29:48.466 A:middle
So we want to launch Xcode and
go to the Window menu item.

00:29:49.266 --> 00:29:53.016 A:middle
In there, we want choose
the Organizer option.

00:29:53.556 --> 00:29:56.566 A:middle
Here's the Organizer window.

00:29:56.636 --> 00:30:00.276 A:middle
If your iOS device is
connected to your computer,

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:29:56.636 --> 00:30:00.276 A:middle
If your iOS device is
connected to your computer,

00:30:00.486 --> 00:30:01.816 A:middle
you will see on the side bar.

00:30:02.786 --> 00:30:04.266 A:middle
To give Instrument
the permission,

00:30:04.266 --> 00:30:05.996 A:middle
you want to choose the device

00:30:05.996 --> 00:30:08.226 A:middle
and then click Use
for Development.

00:30:08.996 --> 00:30:10.306 A:middle
At this point, you're all set.

00:30:10.306 --> 00:30:12.756 A:middle
You can quit Xcode
and launch Instrument.

00:30:13.296 --> 00:30:17.516 A:middle
And this is a screen you will
see when you launch Instrument.

00:30:18.376 --> 00:30:21.256 A:middle
And you want to choose
Activity Monitor for iOS.

00:30:21.706 --> 00:30:25.966 A:middle
And you can get a memory
usage report like this.

00:30:26.316 --> 00:30:28.136 A:middle
Let's take a closer look.

00:30:29.066 --> 00:30:30.636 A:middle
With this kind of information,

00:30:30.876 --> 00:30:34.486 A:middle
you can see how much memory
your content is consuming

00:30:34.486 --> 00:30:38.336 A:middle
at a given point of time and
you can also see a breakdown

00:30:38.336 --> 00:30:39.436 A:middle
of the memory footprint.

00:30:40.066 --> 00:30:41.016 A:middle
Super powerful.

00:30:41.646 --> 00:30:45.776 A:middle
To show you Instrument and
Web Inspector in action,

00:30:46.186 --> 00:30:50.136 A:middle
I'm going to ask Mark to come
back and give you another demo.

00:30:51.006 --> 00:30:52.716 A:middle
>> All right, so here
is the actual project

00:30:52.716 --> 00:30:53.806 A:middle
that you saw on the slides.

00:30:54.056 --> 00:30:55.696 A:middle
And just to let you
know that it's real,

00:30:55.696 --> 00:30:58.096 A:middle
I'll hit the Preview button and
you can see it's running here

00:30:58.096 --> 00:31:00.566 A:middle
on the Mac and it looks great.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:30:58.096 --> 00:31:00.566 A:middle
on the Mac and it looks great.

00:31:00.566 --> 00:31:03.416 A:middle
And that's, as you would
expect, it's running on a Mac.

00:31:04.016 --> 00:31:07.096 A:middle
The reality is we know that
if we write applications

00:31:07.096 --> 00:31:10.486 A:middle
or if we write websites that
have all sorts of complications

00:31:10.486 --> 00:31:13.126 A:middle
with them there-- within them,
they might perform differently

00:31:13.126 --> 00:31:14.796 A:middle
on the-- some of
the mobile devices.

00:31:14.796 --> 00:31:17.636 A:middle
I mean it doesn't have the
same fat pipe necessarily,

00:31:17.636 --> 00:31:18.406 A:middle
the same chipset.

00:31:18.406 --> 00:31:22.646 A:middle
And so, the reality is it's all
about testing on the device.

00:31:22.646 --> 00:31:25.986 A:middle
And we've got some great tools
to go and test on the device.

00:31:26.586 --> 00:31:30.096 A:middle
Now if you download and
install the Xcode toolset,

00:31:30.096 --> 00:31:32.466 A:middle
you'll get the iOS simulator.

00:31:33.016 --> 00:31:36.906 A:middle
And it does a pretty close
job of going and simulating

00:31:36.906 --> 00:31:38.386 A:middle
that have something
would run on the device.

00:31:38.386 --> 00:31:40.316 A:middle
You can choose Preview
and Simulator

00:31:40.316 --> 00:31:43.356 A:middle
and export the widget
rule, export the ad,

00:31:43.356 --> 00:31:45.436 A:middle
we'll launch the
appropriate tester application

00:31:45.436 --> 00:31:47.436 A:middle
on the platform and
you can bring it up.

00:31:47.436 --> 00:31:49.766 A:middle
Let me shrink it down a little
bit so you can actually see it.

00:31:50.306 --> 00:31:54.856 A:middle
And there it is running
simulated on the device.

00:31:54.936 --> 00:31:57.516 A:middle
Still pretty good of course
because it's not running

00:31:57.516 --> 00:31:58.996 A:middle
on the actual chipset.

00:31:58.996 --> 00:32:00.436 A:middle
It's not using the
same networking,

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:31:58.996 --> 00:32:00.436 A:middle
It's not using the
same networking,

00:32:00.436 --> 00:32:01.126 A:middle
those types of things.

00:32:01.126 --> 00:32:03.086 A:middle
But it's certainly
something that's capable

00:32:03.436 --> 00:32:05.796 A:middle
and gives you a really good feel
for, you know, how far you are,

00:32:05.796 --> 00:32:08.566 A:middle
how close you are to
doing the real project

00:32:08.566 --> 00:32:09.646 A:middle
or completing your project.

00:32:09.646 --> 00:32:13.416 A:middle
So, I'm just going to go and
close that, come back up here.

00:32:13.816 --> 00:32:16.616 A:middle
Another option is actually you
can go and Preview in Safari.

00:32:17.046 --> 00:32:19.906 A:middle
This application
generates great web content.

00:32:19.906 --> 00:32:22.676 A:middle
So, the reality is a lot of
this content will actually run

00:32:22.676 --> 00:32:23.496 A:middle
in Safari as well.

00:32:23.496 --> 00:32:25.836 A:middle
And so, a lot of folks will
just choose Preview in Safari

00:32:25.836 --> 00:32:29.126 A:middle
for just doing that quick look
of how their ad experience

00:32:29.126 --> 00:32:32.376 A:middle
or how their widget
experience is coming along.

00:32:32.726 --> 00:32:35.286 A:middle
And then the final one of course
is the one that you always want

00:32:35.286 --> 00:32:36.846 A:middle
to use, certainly
before you ship.

00:32:36.846 --> 00:32:40.246 A:middle
But also as you're working
in your design efforts,

00:32:40.246 --> 00:32:40.786 A:middle
you want to make sure

00:32:40.786 --> 00:32:42.246 A:middle
that you're building
something that's really going

00:32:42.246 --> 00:32:43.896 A:middle
to perform well on the device.

00:32:43.896 --> 00:32:47.156 A:middle
And of course, we've got built
in preview on device there

00:32:47.156 --> 00:32:49.396 A:middle
as well and that
will not be there

00:32:49.396 --> 00:32:51.076 A:middle
if you don't have
a device connected.

00:32:51.076 --> 00:32:54.266 A:middle
So if you launch iAd Producer
and you want to go demo

00:32:54.266 --> 00:32:57.036 A:middle
on device, if it's not actually
tethered, then you're not going

00:32:57.136 --> 00:32:58.646 A:middle
to see this particular menu.

00:32:58.646 --> 00:33:00.926 A:middle
But once you tether with
an iPad or an iPhone,

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:32:58.646 --> 00:33:00.926 A:middle
But once you tether with
an iPad or an iPhone,

00:33:00.926 --> 00:33:01.866 A:middle
this will become enabled

00:33:01.866 --> 00:33:03.596 A:middle
and it'll do the
right thing for you.

00:33:03.596 --> 00:33:05.636 A:middle
So previewing on a device is
definitely what you want to do

00:33:05.636 --> 00:33:08.826 A:middle
and we're all about trying to
figure out, "OK, what's going

00:33:08.826 --> 00:33:10.176 A:middle
on with this particular
examples?"

00:33:10.176 --> 00:33:13.556 A:middle
so I'm going to check Show
Web Inspector when Previewing.

00:33:13.556 --> 00:33:16.756 A:middle
And of course, the Web Inspector
will show in all of these.

00:33:16.756 --> 00:33:19.466 A:middle
It'll show on Safari, the
simulator and on device as well.

00:33:19.466 --> 00:33:21.456 A:middle
And now just to preview
on device,

00:33:21.456 --> 00:33:22.786 A:middle
I'm going to choose
Preview on Device.

00:33:22.786 --> 00:33:25.916 A:middle
It talks to you about what
you need to do on your device.

00:33:25.916 --> 00:33:27.906 A:middle
I've got an iPad that's
plugged in over here

00:33:27.906 --> 00:33:29.646 A:middle
and I'm just going to unlock it.

00:33:30.096 --> 00:33:32.206 A:middle
It's not very interesting
to see but it'll walk you

00:33:32.206 --> 00:33:33.806 A:middle
through the process
of maybe you need

00:33:33.806 --> 00:33:36.466 A:middle
to load the Tester
app on your device.

00:33:36.466 --> 00:33:37.956 A:middle
It'll go and install
that for you

00:33:37.956 --> 00:33:40.286 A:middle
and might ask you some
permissions in order

00:33:40.356 --> 00:33:42.686 A:middle
to get the debugger
hooked up to the device.

00:33:42.686 --> 00:33:44.406 A:middle
But I'm just going
to press OK here.

00:33:45.156 --> 00:33:47.426 A:middle
It's going to export whatever
I've got on the screen,

00:33:47.426 --> 00:33:49.146 A:middle
bundle it up, ship
it over the cable,

00:33:49.616 --> 00:33:51.896 A:middle
and move it over to the device.

00:33:51.896 --> 00:33:54.676 A:middle
And so, there's a little Widget
Tester application over here.

00:33:55.306 --> 00:33:57.186 A:middle
And if I'll go and I launch it,

00:33:59.286 --> 00:34:03.246 A:middle
you'll see when I do
this particular example.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:33:59.286 --> 00:34:03.246 A:middle
you'll see when I do
this particular example.

00:34:03.246 --> 00:34:04.386 A:middle
I just launched it.

00:34:04.386 --> 00:34:05.716 A:middle
Now it's running on the device.

00:34:05.716 --> 00:34:07.056 A:middle
It's running here
on the desktop.

00:34:07.396 --> 00:34:09.496 A:middle
And you'll see that the
Web Inspector launched.

00:34:09.985 --> 00:34:11.275 A:middle
A bunch of detail over--

00:34:11.326 --> 00:34:12.996 A:middle
information over
here, I can hide that.

00:34:12.996 --> 00:34:15.166 A:middle
But you can see the
DOM that's generated,

00:34:15.166 --> 00:34:17.966 A:middle
the markup that's generated
when this was exported.

00:34:18.356 --> 00:34:20.246 A:middle
Lots of HTML goodness.

00:34:20.295 --> 00:34:22.306 A:middle
How everything is
categorized here.

00:34:22.306 --> 00:34:24.485 A:middle
All the scripts are put
together within the inspector.

00:34:24.485 --> 00:34:26.286 A:middle
And just to level set here.

00:34:26.286 --> 00:34:29.226 A:middle
We've had two incredible
sessions on the Web Inspector.

00:34:29.226 --> 00:34:31.606 A:middle
So I'm going to touch this
thing fairly light today.

00:34:32.045 --> 00:34:34.576 A:middle
But if you go back and
look at the videos we had

00:34:34.576 --> 00:34:36.766 A:middle
in Introduction to the
Web Inspector as well

00:34:37.056 --> 00:34:41.186 A:middle
as an advanced version of
that session and they're great

00:34:41.186 --> 00:34:43.045 A:middle
if you really want to get
in to the nuts and bolts.

00:34:43.045 --> 00:34:45.656 A:middle
But, you know, the idea of this
particular demo is to figure

00:34:45.656 --> 00:34:47.926 A:middle
out what was going on with
the sample and I'm going

00:34:47.926 --> 00:34:49.356 A:middle
to focus the bulk of my time

00:34:49.356 --> 00:34:52.116 A:middle
in this little Instruments
icon that's right up here.

00:34:52.116 --> 00:34:54.136 A:middle
So it looks like a
little stopwatch.

00:34:54.136 --> 00:34:57.296 A:middle
So I've got my sample
running here on the iPad.

00:34:57.296 --> 00:34:59.526 A:middle
The balls are bouncing
around as I would expect.

00:34:59.526 --> 00:35:01.316 A:middle
And the first thing
that I want to look

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:34:59.526 --> 00:35:01.316 A:middle
And the first thing
that I want to look

00:35:01.316 --> 00:35:03.986 A:middle
at are the network requests.

00:35:03.986 --> 00:35:06.776 A:middle
If you're building in iAd, you
know that you're pulling content

00:35:06.776 --> 00:35:08.376 A:middle
down from the network.

00:35:08.376 --> 00:35:10.546 A:middle
You're typically using
cellular data as well

00:35:10.546 --> 00:35:12.846 A:middle
and we know there's all
sorts of efficiencies

00:35:12.846 --> 00:35:16.096 A:middle
and inefficiencies associated
with cellular network

00:35:16.096 --> 00:35:18.626 A:middle
when it comes to latency
and those types of things.

00:35:18.626 --> 00:35:20.846 A:middle
You could be pulling
from a Wi-Fi network

00:35:20.846 --> 00:35:22.356 A:middle
or maybe you're just
pulling locally.

00:35:22.616 --> 00:35:25.096 A:middle
It's always good to get a feel
for sort of what, you know,

00:35:25.096 --> 00:35:27.296 A:middle
the-- what's the network
profile associated

00:35:27.296 --> 00:35:30.656 A:middle
with your Widget
or iAd gesundheit.

00:35:30.986 --> 00:35:33.686 A:middle
So, I've got network requests
setting here, so I'm going

00:35:33.686 --> 00:35:35.616 A:middle
to hit Start Recording,
this little button.

00:35:35.946 --> 00:35:38.846 A:middle
And then I'm going to
tell my widget to reload

00:35:38.916 --> 00:35:39.826 A:middle
to fetch all the assets.

00:35:39.826 --> 00:35:41.336 A:middle
So I'm going to do a Command-R

00:35:41.476 --> 00:35:44.236 A:middle
and then I'll see it
update here on my iPad.

00:35:45.616 --> 00:35:46.696 A:middle
And it's loaded.

00:35:47.276 --> 00:35:47.936 A:middle
It's done.

00:35:48.226 --> 00:35:50.636 A:middle
I'm going to press
Stop Recording.

00:35:51.016 --> 00:35:52.136 A:middle
And you can see all sorts

00:35:52.136 --> 00:35:55.046 A:middle
of very numeric specific
information associated

00:35:55.046 --> 00:35:56.486 A:middle
with the latency of these items.

00:35:56.486 --> 00:35:59.406 A:middle
But the nicest screen to
look at is basically this one

00:35:59.406 --> 00:36:01.176 A:middle
without all of the
numbers there.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:35:59.406 --> 00:36:01.176 A:middle
without all of the
numbers there.

00:36:01.176 --> 00:36:04.606 A:middle
And it gives you a really good
feel for the loading aspect

00:36:04.606 --> 00:36:07.396 A:middle
of your particular widget or ad.

00:36:07.866 --> 00:36:09.686 A:middle
You'll see a timeline
across the top.

00:36:09.686 --> 00:36:13.606 A:middle
And this purple bar is when
the load event was called

00:36:13.606 --> 00:36:14.996 A:middle
for this particular item.

00:36:14.996 --> 00:36:17.796 A:middle
And that's when it's presented
on the screen, and let's assume

00:36:17.796 --> 00:36:19.066 A:middle
that all the assets are present.

00:36:19.066 --> 00:36:20.796 A:middle
And that's the thing
that you want

00:36:20.796 --> 00:36:22.576 A:middle
to get as short as possible.

00:36:22.576 --> 00:36:25.186 A:middle
You want that load to be
called as quickly as possible

00:36:25.186 --> 00:36:26.066 A:middle
so people aren't waiting

00:36:26.066 --> 00:36:28.136 A:middle
around wondering why they're
looking at a blank screen.

00:36:28.706 --> 00:36:30.856 A:middle
And so if I look at this,
it says, "Oh, it's about"--

00:36:30.856 --> 00:36:32.836 A:middle
I don't know, 2.71, let's say.

00:36:33.416 --> 00:36:35.786 A:middle
And just to get a feel for
the rest of the content here,

00:36:35.786 --> 00:36:39.196 A:middle
you'll see the times associated
with downloading each one

00:36:39.196 --> 00:36:42.086 A:middle
of the assets as well
as how long it takes

00:36:42.086 --> 00:36:44.776 A:middle
to actually process
some of these as well.

00:36:44.776 --> 00:36:47.776 A:middle
And if you look at this
last file, this particle.js

00:36:47.916 --> 00:36:50.406 A:middle
which is the nuts and
bolts of all the animation

00:36:50.406 --> 00:36:54.456 A:middle
that you see spinning around
in that example was gadded

00:36:54.456 --> 00:36:56.726 A:middle
by this particular file
here, and this is a bit

00:36:56.726 --> 00:36:58.066 A:middle
of a contrived example.

00:36:58.066 --> 00:37:01.286 A:middle
If I look at it, I can see that
the thing is called lorem.js

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:36:58.066 --> 00:37:01.286 A:middle
If I look at it, I can see that
the thing is called lorem.js

00:37:02.336 --> 00:37:04.686 A:middle
which is, you know,
suspect to begin with.

00:37:05.136 --> 00:37:07.896 A:middle
And going up, there's this
other one called ipsum.css.

00:37:08.016 --> 00:37:10.116 A:middle
So that sounds pretty
suspect as well.

00:37:10.116 --> 00:37:13.686 A:middle
I mean it's kind of a silly
example but I think the point

00:37:13.686 --> 00:37:17.166 A:middle
to make with this is this
particular project has a bunch

00:37:17.166 --> 00:37:20.776 A:middle
of files better compressed,
thrown down to the device.

00:37:21.256 --> 00:37:23.586 A:middle
But there's a good chance
that you're still shipping

00:37:23.586 --> 00:37:25.386 A:middle
down to the device
extraneous files.

00:37:25.386 --> 00:37:26.826 A:middle
Maybe it's part of your
development effort,

00:37:27.146 --> 00:37:28.906 A:middle
you're using third
party libraries

00:37:28.906 --> 00:37:31.446 A:middle
or maybe you had other source
code trees that you were pulling

00:37:31.446 --> 00:37:33.576 A:middle
in and then you decided,
"I don't need those."

00:37:33.576 --> 00:37:35.276 A:middle
You're doing your
testing on the Mac.

00:37:35.276 --> 00:37:37.476 A:middle
You didn't see any sort
of performance issues.

00:37:37.836 --> 00:37:39.476 A:middle
But then when you go and
you look at the device,

00:37:39.476 --> 00:37:41.886 A:middle
it's taking forever for this
particular page to load.

00:37:41.886 --> 00:37:44.616 A:middle
So, always go and take at look
at the files that are here

00:37:44.616 --> 00:37:47.696 A:middle
and make sure that they're
what you actually want

00:37:47.696 --> 00:37:51.706 A:middle
because they all impact this
bar here to impact the load time

00:37:51.706 --> 00:37:54.676 A:middle
and you want to keep it as
short as possible as I said.

00:37:55.206 --> 00:37:57.516 A:middle
So clearly, I've got a
couple extraneous silly named

00:37:57.516 --> 00:37:58.146 A:middle
files here.

00:37:58.576 --> 00:38:00.896 A:middle
Another good example of
a best practice here,

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:37:58.576 --> 00:38:00.896 A:middle
Another good example of
a best practice here,

00:38:01.196 --> 00:38:03.586 A:middle
certainly in a cellular
network and in sort

00:38:03.586 --> 00:38:05.686 A:middle
of low bandwidth
areas is pulling

00:38:05.686 --> 00:38:07.686 A:middle
in a series of particles.

00:38:08.186 --> 00:38:11.306 A:middle
Each one of these are
the little molecules

00:38:11.306 --> 00:38:13.096 A:middle
that you see bouncing
around in that demo.

00:38:13.396 --> 00:38:15.916 A:middle
There is a separate file
for each one of these.

00:38:15.916 --> 00:38:17.436 A:middle
And one of our best practice is

00:38:17.436 --> 00:38:19.846 A:middle
when we're doing mobile
development is to take all

00:38:19.846 --> 00:38:22.036 A:middle
of those and combine
them into a single image

00:38:22.036 --> 00:38:25.366 A:middle
so that you're only waiting for
that one file, a certain amount

00:38:25.366 --> 00:38:27.046 A:middle
of time, but when
it comes you get all

00:38:27.046 --> 00:38:28.446 A:middle
of the images associated
with it.

00:38:28.446 --> 00:38:30.226 A:middle
So another good best practice is

00:38:30.226 --> 00:38:33.216 A:middle
to not only remove this
extraneous content here

00:38:33.216 --> 00:38:35.326 A:middle
but also take all
of those images

00:38:35.406 --> 00:38:37.396 A:middle
and combine them into one.

00:38:38.256 --> 00:38:41.876 A:middle
And I've got one of those
that's sort of pre-baked

00:38:41.876 --> 00:38:43.096 A:middle
as well which I can show you.

00:38:43.096 --> 00:38:49.206 A:middle
Let me go ahead and close this
and I'll pull up this one.

00:38:51.006 --> 00:38:53.296 A:middle
And so I've gone back,
I've optimized my project.

00:38:53.296 --> 00:38:54.676 A:middle
If I go and look
at the assets here,

00:38:54.676 --> 00:38:57.906 A:middle
it just has the one JS file
that's required for this.

00:38:57.906 --> 00:38:59.516 A:middle
This is where all
my code logic is.

00:38:59.936 --> 00:39:00.936 A:middle
Here's my particles.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:38:59.936 --> 00:39:00.936 A:middle
Here's my particles.

00:39:01.556 --> 00:39:03.566 A:middle
All put together
within one image.

00:39:04.106 --> 00:39:06.656 A:middle
And then if I zoom in a
little bit closer here,

00:39:06.656 --> 00:39:09.346 A:middle
you'll see that iAd
Producer allows you

00:39:09.346 --> 00:39:12.466 A:middle
to do this image spriting
technique with the single image.

00:39:12.466 --> 00:39:14.036 A:middle
So there I've selected
one of the beads.

00:39:14.486 --> 00:39:16.066 A:middle
If I go and look
at my Inspector,

00:39:17.586 --> 00:39:20.436 A:middle
you'll see that it's using the
same image for every single one

00:39:20.436 --> 00:39:22.196 A:middle
of these and it's just
computing an offset

00:39:22.196 --> 00:39:24.896 A:middle
or it's using an offset
within that particular image.

00:39:24.896 --> 00:39:27.346 A:middle
And you can actually see
it if I double-click in it.

00:39:27.346 --> 00:39:28.766 A:middle
All of these other
images are here

00:39:28.766 --> 00:39:30.896 A:middle
but we're just showing
a real slice of it.

00:39:30.896 --> 00:39:33.536 A:middle
So it's making one
request, pulling it down

00:39:33.536 --> 00:39:35.116 A:middle
and then just showing
a little portion of it.

00:39:35.376 --> 00:39:36.516 A:middle
It's great best practice.

00:39:37.036 --> 00:39:40.446 A:middle
All right, so let me go
back out to my overview.

00:39:40.446 --> 00:39:42.286 A:middle
And so, what's-- what
am I going to do next?

00:39:42.286 --> 00:39:44.356 A:middle
Well let's do a little
bit more sleuthing here.

00:39:44.356 --> 00:39:47.966 A:middle
Let me go back and preview
it on the device and see

00:39:47.966 --> 00:39:51.246 A:middle
if I have any gains,
and I bet I will.

00:39:53.366 --> 00:39:55.806 A:middle
Launches, comes back up.

00:39:57.926 --> 00:39:58.306 A:middle
It's running.

00:39:58.306 --> 00:40:00.706 A:middle
I'm going to hit Start
Recording, do a Command-R

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:39:58.306 --> 00:40:00.706 A:middle
I'm going to hit Start
Recording, do a Command-R

00:40:00.706 --> 00:40:04.706 A:middle
to relaunch, and Stop Recording
'cause it's completely loaded.

00:40:04.706 --> 00:40:05.906 A:middle
Now, look at the times here.

00:40:06.126 --> 00:40:08.016 A:middle
I mean it brought it
down significantly.

00:40:08.016 --> 00:40:09.436 A:middle
And although it was
a bit contrived,

00:40:09.896 --> 00:40:11.196 A:middle
it's still fairly significant.

00:40:11.196 --> 00:40:12.756 A:middle
Some of these files
that you'll use

00:40:12.756 --> 00:40:15.386 A:middle
or may use physics libraries,
those types of things,

00:40:15.386 --> 00:40:17.516 A:middle
in your ads or in your widgets

00:40:17.516 --> 00:40:20.886 A:middle
when you're building them
can take up a huge amount

00:40:20.886 --> 00:40:23.756 A:middle
of real estate in a
significant amount of time.

00:40:23.756 --> 00:40:26.206 A:middle
And there is just the one
image being pulled back

00:40:26.206 --> 00:40:28.146 A:middle
and then we're doing all the
right thing about spriting it.

00:40:28.176 --> 00:40:30.356 A:middle
So, I don't remember what
the number was before,

00:40:30.356 --> 00:40:33.456 A:middle
but this is probably a quarter
of the time that it was to load.

00:40:33.836 --> 00:40:36.346 A:middle
So the faster that you can get
content on the page, the better,

00:40:36.346 --> 00:40:37.546 A:middle
and that's what you want.

00:40:37.546 --> 00:40:39.866 A:middle
You want this bar to be
further and further down,

00:40:40.336 --> 00:40:41.476 A:middle
this number to be smaller.

00:40:41.746 --> 00:40:43.846 A:middle
All right, another thing
that we can take a look

00:40:43.846 --> 00:40:46.856 A:middle
at in this particular project
is sort of performance.

00:40:46.856 --> 00:40:47.916 A:middle
We can look for hotspots.

00:40:47.916 --> 00:40:52.036 A:middle
Where is this particular item
spending the bulk of its time?

00:40:52.086 --> 00:40:54.466 A:middle
Maybe it's getting a
little sluggish and, OK,

00:40:54.466 --> 00:40:55.926 A:middle
clearly something is going on.

00:40:56.236 --> 00:40:59.176 A:middle
Well, I can hook in
to the profiler here

00:40:59.596 --> 00:41:01.006 A:middle
and hit Start Profile.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:40:59.596 --> 00:41:01.006 A:middle
and hit Start Profile.

00:41:01.006 --> 00:41:03.446 A:middle
And you'll see we have two
different options for profiling.

00:41:03.446 --> 00:41:06.436 A:middle
We can watch the JavaScript
as it's actually running.

00:41:06.786 --> 00:41:08.306 A:middle
See all the calls it makes.

00:41:08.306 --> 00:41:11.716 A:middle
We can do that for CSS selectors
as well and try to find

00:41:11.716 --> 00:41:15.646 A:middle
out what's going on, where is
something spending the bulk

00:41:15.646 --> 00:41:16.306 A:middle
of its time.

00:41:16.836 --> 00:41:18.786 A:middle
So I want to do a
JavaScript profile

00:41:18.786 --> 00:41:19.816 A:middle
in this particular example.

00:41:20.696 --> 00:41:21.566 A:middle
Hit Profile.

00:41:21.636 --> 00:41:23.006 A:middle
Now, it's going to run.

00:41:23.006 --> 00:41:25.496 A:middle
The balls are bouncing
around here on my device.

00:41:25.496 --> 00:41:28.636 A:middle
If this was a multi-page
add or multi-page widget,

00:41:28.686 --> 00:41:30.896 A:middle
then you'd want to start
doing some navigation just

00:41:30.896 --> 00:41:32.026 A:middle
so you got a good, you know,

00:41:32.076 --> 00:41:34.376 A:middle
coverage of the app while
you're doing your profiling.

00:41:34.786 --> 00:41:36.156 A:middle
But this is just
bouncing around.

00:41:36.156 --> 00:41:37.026 A:middle
It's a single page.

00:41:37.026 --> 00:41:41.116 A:middle
I'm going to hit Stop Profiling
and then select my profile.

00:41:41.116 --> 00:41:43.686 A:middle
And here is where-- I'll zoom in
a little bit so you can see it.

00:41:44.176 --> 00:41:47.946 A:middle
You'll see this little
disclosure item

00:41:47.946 --> 00:41:50.376 A:middle
where it'll show me
all the function calls

00:41:50.486 --> 00:41:54.226 A:middle
and how much time it's spending
within each one of them.

00:41:54.646 --> 00:41:57.196 A:middle
Right, so there's-- 100 percent
of the calls are being made

00:41:57.196 --> 00:41:59.096 A:middle
in this particular
program but I can also see

00:41:59.096 --> 00:42:02.616 A:middle
that there is this particle
simulation move particle that's

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:41:59.096 --> 00:42:02.616 A:middle
that there is this particle
simulation move particle that's

00:42:02.616 --> 00:42:04.996 A:middle
got the bulk of the
calls actually happening

00:42:04.996 --> 00:42:07.606 A:middle
and all the other numbers
there are relatively small,

00:42:07.606 --> 00:42:08.586 A:middle
and that sort of makes sense.

00:42:08.586 --> 00:42:10.936 A:middle
The bulk of the code being
executed right now should be

00:42:10.936 --> 00:42:13.626 A:middle
to move the little balls around,
so that makes total sense.

00:42:13.626 --> 00:42:17.236 A:middle
And if I drill in a little bit
more, you'll see that something

00:42:17.236 --> 00:42:18.736 A:middle
that doesn't make
sense is actually--

00:42:18.736 --> 00:42:22.886 A:middle
it looks like the collision
detection is being called a lot

00:42:22.886 --> 00:42:25.416 A:middle
more than actually the rest
of the code that's there.

00:42:25.416 --> 00:42:28.246 A:middle
It's all about calculating
how close it is to something.

00:42:28.246 --> 00:42:30.556 A:middle
And this is a real life
example that we run

00:42:30.556 --> 00:42:32.096 A:middle
into when we were trying to--

00:42:32.196 --> 00:42:33.826 A:middle
when the team was trying
to debug something.

00:42:34.136 --> 00:42:37.376 A:middle
It was doing all sorts of
inappropriate calculations,

00:42:37.376 --> 00:42:39.716 A:middle
spending way too much time
in this particular function.

00:42:39.986 --> 00:42:41.466 A:middle
And the way they found
it was they found

00:42:41.466 --> 00:42:43.576 A:middle
that it was spending the bulk
of its time in this call.

00:42:43.996 --> 00:42:46.476 A:middle
And if you go over and you
click on the line there,

00:42:46.726 --> 00:42:49.476 A:middle
it'll take you directly to that
call and you can review the code

00:42:49.476 --> 00:42:50.886 A:middle
and you can say, "I see it.

00:42:50.886 --> 00:42:51.566 A:middle
I was brain-dead.

00:42:51.566 --> 00:42:53.466 A:middle
I put the wrong, you
know, item in here

00:42:53.466 --> 00:42:55.686 A:middle
and this is why this
is misbehaving."

00:42:56.516 --> 00:42:58.526 A:middle
So that's what JavaScript
profiling looks like.

00:42:59.076 --> 00:43:02.636 A:middle
And taking a look
at network requests.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:42:59.076 --> 00:43:02.636 A:middle
And taking a look
at network requests.

00:43:03.306 --> 00:43:06.996 A:middle
The next thing that I'll do
is I'll show you some items

00:43:06.996 --> 00:43:08.216 A:middle
on Instruments.

00:43:08.626 --> 00:43:11.186 A:middle
So Instruments, as Chi
Wai said, it comes--

00:43:11.186 --> 00:43:14.126 A:middle
it gets downloaded along
with the Xcode toolset.

00:43:14.126 --> 00:43:16.766 A:middle
So I've got Xcode
on this device.

00:43:16.816 --> 00:43:18.646 A:middle
But what's a little bit
frustrating if you're not used

00:43:18.646 --> 00:43:21.646 A:middle
to it is the fact that if you
go looking for Instruments--

00:43:22.046 --> 00:43:23.446 A:middle
I'll go into my launch pad here

00:43:24.256 --> 00:43:26.926 A:middle
and just type INS,
it's not found.

00:43:26.926 --> 00:43:27.996 A:middle
OK, I've downloaded Xcode.

00:43:27.996 --> 00:43:29.136 A:middle
Where is this silly tool?

00:43:29.136 --> 00:43:33.696 A:middle
Well it's actually embedded
within the Xcode bundle.

00:43:33.696 --> 00:43:35.826 A:middle
So the best way to find it,
certainly the first time,

00:43:36.226 --> 00:43:40.376 A:middle
is to go and use your
[inaudible] spotlight, type in,

00:43:40.956 --> 00:43:43.876 A:middle
launch it, and now you've
got Instruments launched.

00:43:43.876 --> 00:43:46.826 A:middle
And then you can do the
trick of saving it in the DOC

00:43:46.826 --> 00:43:49.046 A:middle
and then you can go and access
it multiple times whenever you

00:43:49.046 --> 00:43:50.416 A:middle
want to go and get access to it.

00:43:50.976 --> 00:43:52.676 A:middle
So this is Instruments launched.

00:43:53.666 --> 00:43:56.306 A:middle
And what we want to
do is take a look

00:43:56.306 --> 00:43:58.766 A:middle
at the memory profile associated

00:43:58.766 --> 00:44:00.766 A:middle
with this particular
demonstration.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:43:58.766 --> 00:44:00.766 A:middle
with this particular
demonstration.

00:44:01.216 --> 00:44:04.146 A:middle
And so, what I'm going to use is
this Activity Monitor instrument

00:44:04.146 --> 00:44:04.606 A:middle
that's here.

00:44:05.016 --> 00:44:08.016 A:middle
Always make sure that you're
targeting the OS here 'cause I'm

00:44:08.016 --> 00:44:10.316 A:middle
going to go and do the
profiling of the memory

00:44:10.316 --> 00:44:11.816 A:middle
as it's actually on the device.

00:44:11.856 --> 00:44:14.396 A:middle
Not a lot of need to
profile it while it's running

00:44:14.396 --> 00:44:15.806 A:middle
on the MAC or in the simulator.

00:44:15.906 --> 00:44:17.806 A:middle
So I'm going to choose
the Activity Monitor.

00:44:19.316 --> 00:44:19.896 A:middle
Place it there.

00:44:20.836 --> 00:44:21.956 A:middle
Now I've got in on the left.

00:44:21.956 --> 00:44:24.406 A:middle
And now all I need to do is
say, "OK, Activity Monitor,

00:44:24.406 --> 00:44:27.866 A:middle
I want you to monitor a
process that's running currently

00:44:27.866 --> 00:44:29.106 A:middle
on this type of device."

00:44:29.646 --> 00:44:31.296 A:middle
So under the process' dropdown,

00:44:31.296 --> 00:44:32.916 A:middle
you'll see there's
my iPad connected,

00:44:33.266 --> 00:44:34.666 A:middle
here's this machine as well.

00:44:34.666 --> 00:44:35.696 A:middle
I don't care about that.

00:44:36.276 --> 00:44:38.936 A:middle
With that iPad selected, I'm
going to go and choose a target.

00:44:39.456 --> 00:44:41.936 A:middle
So this is the process that's
on this particular device

00:44:41.936 --> 00:44:42.846 A:middle
that I want to connect to.

00:44:42.846 --> 00:44:46.026 A:middle
So I can go and I can look at
the memory profile associated

00:44:46.026 --> 00:44:49.446 A:middle
with my iAd or I can look at
the memory profile associated

00:44:49.446 --> 00:44:52.976 A:middle
with my iBooks widget, the
tool will perform the same.

00:44:53.746 --> 00:44:55.646 A:middle
So I'm going to choose
iBook's widget tester

00:44:55.646 --> 00:44:58.066 A:middle
because Chi Wai's
example is a widget.

00:44:59.166 --> 00:45:02.346 A:middle
Now I connect to that process
and what I want to do is come

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:44:59.166 --> 00:45:02.346 A:middle
Now I connect to that process
and what I want to do is come

00:45:02.346 --> 00:45:05.736 A:middle
into my pad and press Record.

00:45:06.456 --> 00:45:12.826 A:middle
It will go and launch
the widget tester.

00:45:12.916 --> 00:45:15.796 A:middle
And if you can see, it's got
some pretty sweet graphs here,

00:45:17.016 --> 00:45:17.146 A:middle
right.

00:45:17.146 --> 00:45:18.996 A:middle
And you can see some
traces about how much

00:45:18.996 --> 00:45:21.766 A:middle
of the memory is consumed and
that's fairly interesting.

00:45:21.766 --> 00:45:24.986 A:middle
But what's really interesting
is testing the memory profile

00:45:24.986 --> 00:45:27.036 A:middle
associated with my
particular widget or ad.

00:45:27.036 --> 00:45:28.546 A:middle
So now I'm going to
go and launch that

00:45:29.456 --> 00:45:31.206 A:middle
and you should see a
spike in memory here.

00:45:32.716 --> 00:45:34.006 A:middle
And that's expected, right?

00:45:34.006 --> 00:45:36.036 A:middle
There's a lot objects
being allocated.

00:45:36.096 --> 00:45:39.416 A:middle
And if I look at this
chart, it looks pretty good.

00:45:39.416 --> 00:45:40.686 A:middle
It looks fairly flat.

00:45:40.686 --> 00:45:41.906 A:middle
And that's actually what I want.

00:45:41.906 --> 00:45:43.376 A:middle
Once things settle
down a little bit,

00:45:43.696 --> 00:45:45.496 A:middle
I should see memory allocated.

00:45:45.696 --> 00:45:48.986 A:middle
It sort of gets free and then
it finds this sort of flat line

00:45:49.386 --> 00:45:51.196 A:middle
of coexistence on the platform.

00:45:51.196 --> 00:45:53.996 A:middle
And that's what you want to see,
maybe little bump here and then.

00:45:53.996 --> 00:45:56.246 A:middle
But if you see some
sort of incline,

00:45:56.246 --> 00:45:57.986 A:middle
that means you're
leaking memory associated

00:45:57.986 --> 00:45:59.026 A:middle
with your particular project.

00:45:59.026 --> 00:46:01.406 A:middle
Maybe things aren't getting
freed or you're just building

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:45:59.026 --> 00:46:01.406 A:middle
Maybe things aren't getting
freed or you're just building

00:46:01.406 --> 00:46:03.236 A:middle
up arrays until they explode.

00:46:03.646 --> 00:46:06.476 A:middle
So this data down here,
it's a lot of data

00:46:06.476 --> 00:46:10.116 A:middle
and all we really care about
is our iBook widget tester

00:46:10.116 --> 00:46:11.496 A:middle
that we're taking a look at.

00:46:11.496 --> 00:46:13.956 A:middle
So if I spell it, i-B-o-o--

00:46:13.956 --> 00:46:15.536 A:middle
you'll see here,
I've zeroed down.

00:46:15.536 --> 00:46:16.906 A:middle
And now I've got
actually the raw data.

00:46:16.906 --> 00:46:19.396 A:middle
Instead of just looking
at a pretty chart up here,

00:46:19.396 --> 00:46:22.106 A:middle
you'll see that I can look
at the real memory as well

00:46:22.106 --> 00:46:23.096 A:middle
as the virtual memory.

00:46:23.366 --> 00:46:25.336 A:middle
And you just want to make
sure that these numbers,

00:46:25.336 --> 00:46:27.356 A:middle
even though they'll
bounce around a little bit,

00:46:27.356 --> 00:46:30.216 A:middle
they always hover within
a particular range.

00:46:30.536 --> 00:46:32.586 A:middle
And that range will vary
based on the content

00:46:32.586 --> 00:46:33.666 A:middle
that you've got on a page.

00:46:33.666 --> 00:46:36.076 A:middle
So, this is a great
best practice especially

00:46:36.076 --> 00:46:38.446 A:middle
if you're using WebGL
with a lot of vertices.

00:46:38.866 --> 00:46:42.216 A:middle
Depending on what you're
doing, you may have constraints

00:46:42.216 --> 00:46:44.106 A:middle
in memory if you're
building an ad.

00:46:44.106 --> 00:46:45.956 A:middle
There might be a cap
'cause you're running

00:46:45.956 --> 00:46:47.086 A:middle
in a shared memory space

00:46:47.086 --> 00:46:49.186 A:middle
with the application
that's displaying your ad.

00:46:49.666 --> 00:46:51.056 A:middle
You might have other
constraints.

00:46:51.376 --> 00:46:54.656 A:middle
Again, this tool is a great way
to look at the visual aspects

00:46:54.656 --> 00:46:56.676 A:middle
of how your memory is
being consumed as well

00:46:56.676 --> 00:46:59.216 A:middle
as the raw data associated
with it.

00:46:59.616 --> 00:47:02.326 A:middle
So that's it for Instruments
and the Web Inspector.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:46:59.616 --> 00:47:02.326 A:middle
So that's it for Instruments
and the Web Inspector.

00:47:02.326 --> 00:47:04.066 A:middle
Let me turn it back
over to Chi Wai.

00:47:05.516 --> 00:47:09.426 A:middle
[ Applause ]

00:47:09.926 --> 00:47:10.496 A:middle
>> Thank you Mark.

00:47:11.476 --> 00:47:13.526 A:middle
With Instruments
and Web Inspector,

00:47:13.686 --> 00:47:15.916 A:middle
we know that we're not flying
in the dark when we run

00:47:15.916 --> 00:47:17.166 A:middle
into performance issue.

00:47:18.296 --> 00:47:19.646 A:middle
Now, let me give you a summary.

00:47:20.886 --> 00:47:23.816 A:middle
Very first thing,
always test on device.

00:47:25.166 --> 00:47:27.826 A:middle
Second item, always
test on device.

00:47:29.376 --> 00:47:31.476 A:middle
As I showed you earlier,
what you see

00:47:31.476 --> 00:47:33.846 A:middle
on a MAC simulation could
be with [inaudible] thing.

00:47:33.916 --> 00:47:36.016 A:middle
So, I'm going to say
it one more time.

00:47:36.366 --> 00:47:37.146 A:middle
Test on device.

00:47:37.616 --> 00:47:43.206 A:middle
So, with Web Inspector
it's really easy

00:47:43.206 --> 00:47:46.666 A:middle
to identify CPU hotspot
and we can also look

00:47:46.666 --> 00:47:48.426 A:middle
at the network traffic life.

00:47:49.596 --> 00:47:51.766 A:middle
And we can help by
doing image spriting

00:47:52.636 --> 00:47:54.426 A:middle
and also removing unused asset.

00:47:55.026 --> 00:48:01.396 A:middle
With Instrument, we can memory
the memory footprint on device

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:47:55.026 --> 00:48:01.396 A:middle
With Instrument, we can memory
the memory footprint on device

00:48:02.176 --> 00:48:05.786 A:middle
and we can save some memory
by removing hidden element

00:48:05.836 --> 00:48:07.136 A:middle
by applying display:none.

00:48:07.696 --> 00:48:10.796 A:middle
So what we have learned today.

00:48:11.956 --> 00:48:15.846 A:middle
We learned that iBook widget
and iAd are just mini website

00:48:15.846 --> 00:48:18.496 A:middle
within an HTML, CSS
and JavaScript.

00:48:19.776 --> 00:48:22.236 A:middle
And we learned that we
can do customization

00:48:22.236 --> 00:48:23.866 A:middle
with the same exact technology.

00:48:24.466 --> 00:48:28.856 A:middle
I showed you how we can put
data from a remote server

00:48:29.086 --> 00:48:31.616 A:middle
and show the data in
a multi-cell object.

00:48:32.826 --> 00:48:36.766 A:middle
And lastly, we looked at Web
Inspector and Instruments.

00:48:37.646 --> 00:48:39.976 A:middle
You can do some powerful
performance analysis

00:48:39.976 --> 00:48:40.896 A:middle
with these tools.

00:48:41.366 --> 00:48:45.626 A:middle
With what you learned,
go download iAd Producer.

00:48:46.406 --> 00:48:47.246 A:middle
It's free.

00:48:47.246 --> 00:48:50.806 A:middle
It's fun. It's super easy
to create amazing content

00:48:50.806 --> 00:48:51.856 A:middle
with great performance.

00:48:52.356 --> 00:48:56.866 A:middle
For more information,
contact Mark Malone.

00:48:57.216 --> 00:48:59.386 A:middle
He's our iAd Technology
Evangelist,

00:48:59.576 --> 00:49:02.116 A:middle
also our awesome demo
person of the day.

WEBVTT
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

00:48:59.576 --> 00:49:02.116 A:middle
also our awesome demo
person of the day.

00:49:02.116 --> 00:49:07.316 A:middle
There is documentation
online and developer forum

00:49:07.316 --> 00:49:08.376 A:middle
in case you need help.

00:49:08.946 --> 00:49:12.076 A:middle
Here are some related sessions.

00:49:12.766 --> 00:49:15.166 A:middle
I mentioned earlier,
there is an Introduction

00:49:15.166 --> 00:49:17.186 A:middle
to iAd Producer happened
this morning.

00:49:17.236 --> 00:49:19.376 A:middle
The video should be
available shortly online.

00:49:20.406 --> 00:49:24.626 A:middle
There will be iAd Integration
session happening tomorrow.

00:49:25.816 --> 00:49:27.836 A:middle
There're two Web
Inspector sessions

00:49:27.836 --> 00:49:28.846 A:middle
that happened yesterday.

00:49:28.986 --> 00:49:31.036 A:middle
The videos should be
available online by now.

00:49:32.376 --> 00:49:34.996 A:middle
And if you are interested
and want to learn more

00:49:34.996 --> 00:49:37.296 A:middle
about Instrument, there's a
session tomorrow you should

00:49:37.296 --> 00:49:38.296 A:middle
definitely check it out.

00:49:39.426 --> 00:49:40.766 A:middle
Thank you for attending
this session.

00:49:40.806 --> 00:49:41.556 A:middle
I will see you around.

00:49:42.016 --> 00:49:43.000 A:middle
[ Applause ]