WWDC2015 Session 501

Transcript

X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
>> BRENT FULGHAM: Hello
and welcome to "What's New
In Web Development and
WebKit and Safari."
My name's Brent Fulgham
and I will be taking you
on a guided tour of some of the
advances we've made this year.
This is an especially
exciting time of year for us,
because throughout most of the
year, we only hear from you
through bug reports and things
told to us by other people,
but this time of year, we have
labs, we have sessions like this
where we can get into all of the
things that we have done to try
to make your lives better.
And whether you primarily target
Safari as a web developer,
or an embedded web view
in a larger application,
I think you will find a
few things in this talk
that will be useful to
you almost immediately.
So I would like to start with a
brief overview of what WebKit is
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
So I would like to start with a
brief overview of what WebKit is
and how it fits into the
software design stack at Apple,
and then move on to some
enhancements we've made
in Safari this year
that you will be able
to take advantage of.
And finally, I would
like to talk
about creating some
amazing experiences
for the iOS and Mac platforms.
Technologies that are
available on these platforms
that if you take advantage
of them will really make
your website more compelling
and useful to your customers.
So let's get started
talking about WebKit.
WebKit is our web
browsing engine.
And it's an open source
project that anyone,
any of you could join.
And while you may know
that WebKit is the engine
that powers Safari, you may
not be aware that it's used
in a tremendous number of
applications across the spectrum
of things we do at Apple.
WebKit is the same
engine on iOS and OS X
with very few variations
between them.
So during rest of my talk,
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
So during rest of my talk,
unless I specifically
call something
out as being available only
on one platform or the other,
you can safely assume that
the things we are talking
about today will be
available on both platforms.
So the takeaway here is that
if you are a web developer
targeting Safari or
any web browser on iOS,
you can use all the things I
am going to talk about today.
And if you are an app developer
with an embedded web view,
you can use all the
things I'm talking about.
And if you are a
developer targeting just the
JavaScriptCore framework itself,
or the OS X automation tools,
you can make use of all
the JavaScript features
that we will talk
about in this session.
So that was our introduction
to WebKit, and let's move
on to the enhancements
we made this year.
So I'm going to break this
down just for structure
into new layout and
rendering features.
Some JavaScript updates
that we made
to support the new ES6
standard, and CSS features
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
to support the new ES6
standard, and CSS features
that will make your
style sheets easier
to maintain and simpler to read.
So let's talk a little bit
about the enhancements in Safari
and specifically, layout
and rendering features.
And even more specifically,
I want to talk
about backdrop effects.
In iOS 7, the design language
for the user interface
was changed
to incorporate some beautiful
backdrop blur effects.
For example, here you can see
the home screen icons just kind
of peeking through that
frosted glass effect.
And this kind of layering
gives a lot of depth
and gives you a sense of what's
happening behind this overlay,
without obstructing the content
that we are trying to view
in the front of the interface.
And later, in OS X Yosemite,
we provided similar
backdrop effects.
Here we have a very subtle blur
in the sidebar of the finder
and we have this beautiful
frosted glass effect on the doc.
And so these effects
are important to feel
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
And so these effects
are important to feel
like a native part
of the system.
And they are the kind of
things you might want to use
in the most refined version of
your webpage for people visiting
on a Mac or iOS device,
but it's doubly important
when you have an embedded
web view that you want
to have be part of the
system, and look like part
of the native user interface.
But how do you do that?
Let's say I have an application
that's displaying photos.
There's no obvious way to
create a backdrop effect
like the ones we saw earlier.
We can try an overlay with
a translucent background
but you can see that the
content kind of fights
with the text on top of it.
You know that there are things
behind it and it's difficult,
makes it more difficult to read.
Now, we have CSS filters
and those include a blur.
Could we try something
like that?
Well, that's a nice effect,
but it doesn't really
get us what we want.
About the only thing
that is clear
in this image is the background,
which is kind of
besides the point.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
So we observed people,
developers like yourselves
going to heroic efforts.
What they would do is they
would have a background picture
like this and they would create
an entirely blurred version
of it, which would then be
clipped and moved into position
to cover up the elements that
you want to dismay as a blur.
And that's awful.
I mean, it's amazing that you
did that but it's bad for us
that we did that to you.
So -- and there are
other problems with that.
We can't animate
those backgrounds.
And it's difficult to
change the blur effects.
Once we have made a choice, we
have to re-render everything.
So we needed a better way,
and that is backdrop-filter.
Backdrop filter allows us
to specify these backdrop
effects entirely in CSS
and it's been proposed
as a standard to the W3C
and is undergoing that
process right now.
Let's see how this
fits together.
So if we have an
element that we want
to provide a backdrop
filter for,
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
WebKit will take the region
behind it and re-render it
in an off screen context.
And while that's efficient,
rendering passes are costly,
and so we want to make sure
we don't over use them.
Once we have this
background context,
we then apply the filter
to them, so we blur it,
we composite the front-end
content back on top of it,
and then we can recomposite
the entire scene back together
and you get this beautiful blur
effect, exactly what we wanted.
And once we got the
blurs to work,
we realized that we
wanted the flexibility
to use any of the CSS filters.
So we did.
We made it so that
you can use any
of the CSS filters
in this effect.
So we can invert colors.
We can combine filters together.
So we can get a blur
and a grayscale
to get an effect like this.
And most amazingly of
all, we can overlay this
on top of dynamic content.
So this backdrop blur filter
that's one line of CSS can be
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
So this backdrop blur filter
that's one line of CSS can be
on top of a video,
which is amazing!
I was so excited when we had
this working and I can't wait
to see what you guys do
with it on your own sites.
So let's shift gears
a little bit.
Another area that we saw
some issues was in layout
and rendering of
scrolling effects.
You have probably seen this
great iTunes banner at the top.
And if you've ever tried
playing with it, you'll notice
that when you try to scroll
it, it moves in whole steps.
You get an entire movie
title, movie brick,
each time you make a movement.
And our photos app in iOS
has a similar kind of effect.
Each time we look at a photo we
want to swipe to the next one,
we move across an entire
photo, we don't show part
of one photo and
part of another.
This kind of interaction is
really great for image galleries
or other types of tiled
content like this.
And so what we observe people
doing was writing complicated
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
And so what we observe people
doing was writing complicated
JavaScript implementations
that take
over the scrolling operations.
They'd effectively throw out
the browser's built-in smooth
scrolling infrastructure,
and replace it
with manual JavaScript that
did this frame by frame.
And we know that that's a
significant performance penalty.
One thing we found is that
you can't get smooth scrolling
by running complicated
JavaScript on every frame
of a scrolling effect.
So we needed another
way to do this.
And that's scroll snap points.
Scroll Snap Points are
a way to declare in CSS,
regions of scrolling that
take over the animation
of that scrolling curve, and
this is also a CSS standard.
So imagine we have a viewport
of some kind, a box that we want
to look at a series
of album covers in.
And so in this image, I
have the album covers kind
of dim and off-screen.
But I want to cycle
through them one at a time.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
But I want to cycle
through them one at a time.
And let's say that I know
that they have a thick size,
they are all 300
pixels, for example.
Every time I swipe on this
content, I would want the scroll
to take me across, one
entire album cover.
And we can specify this behavior
in Scroll Snap Points using
the Scroll Snap Points
x declaration.
And we tell it that we want
it to be marching along
in a 300-pixel interval
using the repeat function,
with a 300-pixel argument.
And this animation shows
kind of how this looks.
I make a gesture to swipe
through these images,
we travel across
some number of them,
depending on how strong my
gesture is, but as we --
as the momentum slows us
down, and we come to a stop,
we always land on a
clean album boundary.
Now, in source code, that
effect requires two lines.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
We turn the feature on using
the Scroll Snap Type mandatory,
and then we specify the
repeat 300 pixel declaration.
So I did a capture
on a live site.
You can see that as I'm swiping
across these, you get movement.
And if I slightly pull off and
let go, the system scrolls back
to the nearest scroll
snap point.
So, like, they're rubber
banding back to that position.
And you've probably already
figured this out from the name,
but scroll snap points work
in both dimensions, x and y.
So what I have shown you
so far would already be
a pretty neat feature
but it doesn't handle the case
of varying sizes of content
in the scroll container.
And so here, where I have
non-uniform elements,
even though I might
have a 300 pixel square,
I also have a rectangular unit.
That rectangular image
or content will not fit
in that 300 pixel boundary.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
in that 300 pixel boundary.
And so if I attempt
to do a scroll
with that set content,
it won't look right.
And so scroll snap has a
way of dealing with this.
If we take the scroll container
as this white box behind me,
there's something called
the scroll snap destination
and that's a position that
we will align our elements
when scrolling.
It defaults to the
upper left corner
but we can position it using
standard CSS positioning syntax.
The companion to the scroll
snap destination is the scroll
snap coordinate.
These are positions on each
of the elements inside
the scrolling container.
And they are also defaulted
to the upper left corner.
So we can tell the scroll --
the WebKit that we want our
scroll snap coordinates to be
in the center of each
element using this syntax,
and we can say that
we want the center
of the scrolling container
to be our target
point, the destination.
And when you put them together,
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
And when you put them together,
when you perform a scroll
gesture, we land on a clean,
centered point on that box.
And the code for that is no
more complicated than it was
for the simple repeating
pixel case.
We turn the feature
on, on the container,
the scrolling container,
with mandatory,
and we position the
destination in the center
of the scrolling container.
And then we position
the coordinate
on each of the elements.
And I created a class,
'photograph,' here, but,
you know, you can do
whatever you want,
and position that in the center.
And so this is a capture of what
that looks like on a website.
And so with a series of images,
as I scroll through them,
we always land with
something in the middle.
And with an example, with a
demonstration of how this looks
in practice, I will invite Chris
up to give you an
amazing example of this.
[Applause]
>> CHRIS YOUNG-ZAWADA:
Thanks, Brent.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
>> CHRIS YOUNG-ZAWADA:
Thanks, Brent.
My name is Chris
Young-Zawada and I'm a developer
on Apple's Interactive team.
The interactive team at
Apple does a lot of work
around the company, and one
of the things we do is
we're responsible for a lot
of the web content
you see on Apple.com.
So I'm super excited to be here
today because I feel like a lot
of the features that Brent
has been showing off are going
to be really great
for web developers
and I'm really excited
to use them myself.
So to get started what we put
together is a little web app
here that shows off some of
these new features in WebKit.
And we have a photo
gallery laid out here
that we can scroll up and down.
And you can see that some
of the photos are
different sizes than others.
We can hover over one, and
when we click to open it,
it will open in this overlay
view, where we are able
to scroll between the photos,
by going left and right,
and we can even choose
our favorites
in the top right
by clicking here.
Now this is pretty cool,
but I feel like we could make
it a lot better using some
of the new features in Webkit.
So, to get started, I want
to focus on backdrop filters.
If you notice at the top
of the application here,
we have this fixed
navigation element
and right now it's just
a solid black color
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
and right now it's just
a solid black color
and it's fixed at the top.
As we scroll up and down, the
content goes underneath it
and then goes into the Safari
tool bar where it gets blurred.
That's pretty cool
but we actually can make
it a lot more cohesive
by adding a backdrop filter to
this element and making it feel
like it's much more
part of the UI.
So I'm going to show
you how to do that.
Just so you guys know, I like
to use spaces a lot when I code,
so I'm going to jump between
the UI here and the code,
back and forth, quite a bit.
Cool. So right now, I'm in
Xcode and I'm in a CSS file
that we are going to start
appending some new code to.
So to do that, I'm going
to start, and I'm going
to paste a new navigation
declaration here
which is targeting that
solid black navigation bar,
and we are going to set
the background color
to be solid black
with 50% opacity.
And then we are going
to add a backdrop filter
with 10 pixels of blur.
If we go back, we can
now see in just one line
of code we have added
this amazing new way
to blur the content behind
as you are scrolling.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
to blur the content behind
as you are scrolling.
The text is still super clear
and everything goes really
nicely into the Safari toolbar.
I think this is awesome.
Like, this is fantastic work
on the WebKit team, to do this.
Awesome. So the next
thing I want
to show you guys is
scroll snap points.
And I think a really
good candidate
for Scroll Snap points
is this overlay gallery.
Remember, when we're
scrolling this left and right,
we can get left in places where
we might see through the content
and not exactly focus on
what we're looking at here.
This is okay, but we can
definitely make it better
and by focusing on the content
with Scroll Snap Points we
are always going to look
at the photos we
want to look at.
So I'm going to show you
how to do that as well.
So if we go back to
the CSS, we are going
to add a new declaration
on the overlay gallery
where we are going to set the
scroll snap type to mandatory
and we are going to set
Scroll Snap Points x to repeat
at 100 viewport width.
Each photo container
is this size,
so everything should fit
really nicely when we go back
and we scroll that element.
If we refresh, we can now very
cleanly go between the photos
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
If we refresh, we can now very
cleanly go between the photos
and WebKit has taken
control of the scrolling.
So you'll see that
I can hit the edges
and everything will
bounce back into place.
It's really nice.
And as you guys know this would
take a lot of JavaScript to do
without this feature, so I can't
wait to see what you guys do
with it and I think it's
going to be really great.
Another thing that is
popular, as you guys know,
is you oftentimes will use
JavaScript to append styles
to elements and what would be
a really interesting use-case
for that would be
on this overlay --
on this masonry gallery here.
As we are scrolling up and down,
we actually generate
this grid in JavaScript.
So we can change how many cells
we want on the x and y axis.
So we don't really know ahead of
time how tall each one is going
to be but we can actually
set a repeat value
on Scroll Snap Points
in JavaScript to make it
so as we're scrolling
this vertically,
the nav bar will sit very
nicely with these elements,
so you are always focusing
on what you are supposed to.
So to do that, we are going to
jump into the JavaScript, here,
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
and this is a new JS file.
And we are going to extend our
masonry gallery constructor
to a Snap Points
masonry gallery.
We are going to, and
basically all we're going
to do is we're going to add
a new method called set snap
point styles.
What this will do is we will
actually set the scroll snap
type to mandatory, and it
will set the snap points
on the y axis to repeat as tall
as each cell is in the y axis
and this is a variable that we
set inside of the constructor
when we are running
this on instantiation.
The last thing we're going
to do is we are going
to tell our JS file to use this
so, because we've extended it,
we just have to put it
here and use that instead
of the masonry gallery.
And now when we refresh,
you'll notice
that the nav bar sits very
nicely with these elements
and we can throw it
and it will always land
in a really nice place where
it fits with the content.
I think that's really
great, and with that,
I want to give it back to Brent,
who is going to talk some more
about layout and rendering.
Thank you.
[Applause]
>> BRENT FULGHAM: Thank you.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
>> BRENT FULGHAM: Thank you.
That was amazing.
So I just want to go
over a couple of things
about those features
we just talked about.
Backdrop filters
are very efficient.
They are hardware accelerated,
but the rendering passes
that it causes to
trigger can be expensive.
So we want to be
careful to measure
and see how things
work on your own sites.
Scroll Snap is great for page
content, for tile content,
but you want to be careful
if you are doing any kind
of programmatic scrolling
because the two features will
fight each other when trying
to animate the scroll.
So keep that in mind.
And that wraps up the section on
layout and rendering features.
And now I would like to move
on to some JavaScript updates
that we worked on this year.
The JavaScript ES6
standard is fantastic
and is moving JavaScript
forward in a number
of exciting new ways, and Chris
alluded to some in his demo.
I want to talk for
a moment about a few
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
I want to talk for
a moment about a few
of the exciting features that
we put together this year.
Last year, in our session,
we talked about a number
of features that were added
and we haven't been
sitting around since then.
We have expanded the ES6
support tremendously this year
with a lot of stuff, symbol
objects, object out of sign,
weak sets, but I am just going
to touch on a couple of things
that I think are
really, really useful.
Let's start with my favorite.
Template Literals.
Now how many times have
you run into this problem
where you have a set of --
you are trying to
build a logging string
or produce something for a
user, and you have a bunch
of string chunks that you want
to concatenate together,
and some objects.
And so you end up with something
like this old syntax example.
And I have spent more time
than I care to admit looking
for the missing concatenating
operator
or the closing quote
sign that I forgot about.
And so I was super excited
when ES6 introduced this
new template literal syntax,
where we create strings,
special strings,
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
where we create strings,
special strings,
using the backtick
character instead
of a regular quote string.
And when we do that,
anything inside of the string
that is escaped with this dollar
sign curly brace syntax gets
converted into string
representation automatically.
And you can even do operations
inside the syntax, like,
here I'm adding two
numbers together.
And so both of these
give us the same output,
but I find that the second
one is so much easier to read,
and I have jumped
wholeheartedly into this.
Everything I write is
in this syntax now.
I love it!
Another neat shorthand that was
introduced this year is related
to object literal creation.
So you often have a
situation like this,
where we have a generator
function of some kind with a set
of argument names
that we want to use.
And often those argument names
are actually the names we want
to use for the new object
literals that we're creating
and so you send up with a silly
repetition of name, colon, name,
and category, colon, category.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
and category, colon, category.
And that's such a common idiom
that the ES6 designers
introduced a shorthand for this,
where you can create an
object literal with variables
and if you don't supply the
property names it will just use
the names of the values that
you are supplying to it.
We were able to get rid of
a couple of hundred cases
of this kind of duplication
in the web inspector,
and found that to
be quite useful.
And I'm sure that if you
look into your own code,
you will find plenty of
cases where this is helpful.
Now, JavaScript has always had
strong object-oriented software
design features but it's
prototype based syntax has
seemed, has been somewhat less
accessible for people coming
to JavaScript from
languages like Swift or C++
or other class-based
syntax languages.
So here I have a simple example
of a polygon class written
in the standard prototype
syntax.
But in ES6, a new syntax has
been introduced, an object,
a class-based syntax that
looks very familiar to anyone
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
a class-based syntax that
looks very familiar to anyone
who comes from a language like
C++ or swift, and allows us
to encapsulate everything
together.
It's so much easier to
read and easier to see
where things relate
to each other.
The class syntax includes a
special function, a constructor,
that handles the object
initialization for us,
and we can define
methods in the class
that are part of the object.
And it supports inheritance.
So we can inherit using
the extends keyword
from existing objects.
When we inherit, we
want to make sure
that we initialize the parent
class using the super operator.
We can override methods
like you would expect
from other object-oriented
languages,
and it even supports
static methods now,
so you can define
methods on the class
that you don't need a specific
instance of the object to use.
And finally, this new class
syntax is completely compatible
with the existing
prototype-based syntax.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
with the existing
prototype-based syntax.
So you can immediately start
extending prototype-based code
using this new syntax without
having to rewrite anything.
I think that's a huge
advantage and it's something
that you can start
using right away.
So that was the brief overview
of some JavaScript updates.
We have a ton more JavaScript
things that we did this year,
so I really recommend you
get the El Capitan developer
software and try it out.
Now, as we've dealt with CSS
for many years we have run
across a number of patterns that
lead to bloated style rules.
And so this year, we implemented
a number of new CSS standards
that are aimed at combatting
that, making styles simpler
and easier to maintain.
It's a recurring theme in this
talk, but I don't have time
to get into all the things
we did this year, any-link,
placeholder-shown, lang,
just a bunch of improvements,
but I do hope that you get our
developer seed and try it out.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
but I do hope that you get our
developer seed and try it out.
So I want to talk first
about some recently unprefixed
properties and values.
We became satisfied with
the standards compliance
and stability of a number
of features this year,
and so we've unprefixed them.
So now you can use them
in their native format.
We will continue to support
the WebKit prefixed version
of these, so your existing
sites will continue to work.
We recommend that you
switch to the new WebKit,
or the WebKit less version of
these strings in your new code.
Now, I know it's going
to be hard to top
that exciting unprefixing slide.
But I am going to try.
A very common need is
the ability to recognize
when your site is
being used in a browser
that supports specific features.
And so you may choose
to use certain features
or not depending on
what the browser can do.
Let's say, for example, I
have a website where I want
to use a neat drop cap style,
and so to achieve this look,
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
to use a neat drop cap style,
and so to achieve this look,
I want to use a different
font for that "C."
I want to add spacing and
extra padding around it.
I want it to be a different size
so that it's visually
distinctive.
And I can do that using
WebKit initial letter,
which is another new
feature this year in WebKit.
But if the browser viewing
my site doesn't support this,
we get this awful --
I mean this is gross!
I would never have used this
font if I knew it was going
to end up looking like this.
I wouldn't have put
the spacing around it,
if I knew it was
not going to fit
in this with idea that I had.
I would rather have
done nothing at all.
And so in the past, we would
use code that looks something
like this, to probe the
browser and say, hey,
do you support initial style?
And if you do, then I
can do some extra work,
navigate the dom, find
the elements that I want
to style, turn these things on.
Well, that's a lot of
JavaScript to run or a lot
of libraries to import
to do that.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
of libraries to import
to do that.
And now we don't have to.
WebKit supports the
@supports function this year,
which allows us to
create a conditional
where everything inside the
brackets is applied only
if the conditional is true.
So in this case where I
have WebKit initial letter,
I can have all my
special styling inside the
supports clause.
And so if I go to that
site with a browser
that doesn't support WebKit
initial letter, I get a,
you know, blander view of
things, but it's perfectly fine.
This is legible and
it looks good.
But if someone goes to
the site with Safari,
they get this glorious drop cap.
Amazing! I want to talk a little
bit about reducing repetition.
This is some actual code
from the web inspector.
Well, I cleaned it up a
little bit for the slide,
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Well, I cleaned it up a
little bit for the slide,
but we have lots of cases where
we have something like this,
defaults and a bunch of
classes that are part of --
are part of that same group,
and we want to apply
some styling to them.
But we're repeating
defaults over and over again,
and you multiply this times
dozens of other classes
and hundreds of other styles
that we are trying to achieve
and it ends up being a
lot of stuff to maintain.
And so the CSS 4
designers agreed
and created the matches
pseudo-class.
And what this does
is it allows us
to programmatically
define all the permutations
between default, for example, a
class, and a list of selectors.
And this takes the place
of those repeated
lines of common stuff.
Replaces it with one line.
And, so, about the only
thing I like better
than writing code
is deleting it.
And so this is fantastic!
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
And so this is fantastic!
Because we can get rid of tons
and tons of replicated code.
This was a great day in the
web inspector when we were able
to land these changes and get
rid of all this duplication.
And so those were some new
CSS features this year.
And that also completes
our discussion
about enhancements in Safari.
So now I want to shift gears
a little bit and talk a bit
about creating amazing
experiences on OS X and iOS.
How many of you here have sites
that are targeted
just for desktop?
Or you have special things
that are just for desktop?
One or two.
And others that might have stuff
that's specific for mobile,
right, iOS and Safari.
And so while the bulk of my
talk is aimed at convincing you
to use some of these
web standard features
that have been developed,
in this part of the talk,
I'm hoping to convince you
to adopt a few of the things
that are unique to Mac and iOS.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
that are unique to Mac and iOS.
And by supporting these
technologies, you can surprise
and delight your users and
extend their engagement
with your content across
our entire ecosystem.
AirPlay has been around on iOS
since iOS 4 and we've supported
that in Safari since iOS 4.
But this year, we opened
up AirPlay on Safari,
on OS X which allows your
users to play your media
to Apple TV directly
from the device.
The API is identical to the
one that was produced for iOS.
So if you did the work
to support it back
in 2013, you are done!
Or if you use our
media controls,
you have that support now.
But if you haven't, I
recommend that you look
at our WWDC 2013 talk where we
go into some detail about how
to support the AirPlay protocol.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Multitasking.
Wasn't it cool to see
multitasking on iPad yesterday?
Until yesterday you
had a pretty good idea
that when you viewed content
on an iPad, you had a good idea
of what you were getting.
You pretty much had
the entire screen.
But now you can have two-thirds
of the screen allocated
to your content, or
half, or a third.
And so responsive design
is really important now.
Users control the
size of the view,
and iPad is a lot
more like desktop now.
It's so important, responsive
design is so important,
that we have an entire session
tomorrow, same time, same place.
I know you all are capable
of getting up in the morning
because you are here today,
and I recommend you come
and see "Using Safari to Deliver
and Debug a Responsive
Web Design" tomorrow,
which goes into the tools and
features that have been added
to the web inspector in Safari
to make your life easier
when trying to support
these styles.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
when trying to support
these styles.
There's also a session
on multitasking
for media-based apps on iPad and
iOS 9 which is also of interest.
And we talked about
picture-in-picture yesterday.
The iPad has always been a
great way to view content,
and until yesterday,
you had a good idea
that your content
would be consumed
in this sort of full
screen form.
But now we have a new way.
We have picture-in-picture
which allows you
to compress your pictures of
your children into a small box
in the corner of your
giant empty calendar.
But it's a great feature.
We have -- we defined this in
WebKit as presentation mode.
We support full screen,
which you are familiar with.
And inline in which your content
is displayed in the page itself,
and picture-in-picture,
which is our new style.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
So we have a range of sizes that
you need to be worried about.
The WebKit, default WebKit
Media Controls support
picture-in-picture
out of the box,
but if you write your
own media controls,
you need to use the
presentation mode API
to control these things.
And our developer documentation
has information on how
to take advantage of
that in your own content.
There are a few things for
you to be thinking about here.
When a viewer starts
viewing your content
in full screen video display,
the page may not
be obscured anymore
because the viewer can exit
full screen mode and go
into picture-in-picture without
you really knowing about it.
So if you take the opportunity
to turn certain features off
or hide content on your
page while a video is being
displayed, that may not
look right if they are going
to picture-in-picture.
And since the media may be
playing in a very small window,
we strongly recommend that
use HTTP Live Streaming,
or HLS, for delivering media.
HLS allows our media engine
to select a bit encoding,
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
HLS allows our media engine
to select a bit encoding,
a bit rate for the video
that matches the size
of the content being displayed.
It also takes into
effect, network conditions,
battery status on the device.
And so by using it,
you will ensure
that your user has
the best experience
because it will take care of a
lot of those details for them.
Multitasking essentials for
media based apps on iPad
in iOS 9 is a great
session to see on Wednesday.
And if you haven't heard
enough from me this year,
you can see me and Jer
talking about advanced media
for the web last year, where we
went into some detail about HLS.
So finally, I want to talk
about something really amazing,
our Force Touch trackpad.
back in March we were excited
to show off our new products
with this great new hardware.
It allows us to recognize
a second level of click,
we call Force Click, and we
are really excited about this.
We had a lot of fun adding
new user interface features
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
We had a lot of fun adding
new user interface features
like this mode of dictionary
look up that allows us to find
out what a fluoroelastomer
really is.
And we added a way to view
the content behind a link
without having to
leave the web page.
I know that all of you can
come up with even better ways
to make use of this
hardware in a web context.
And so we wanted to open
up access to that hardware
so that you could
use it yourselves
in your own web pages.
Let me talk briefly about
how this fits together.
When we have a normal
Trackpad, if the user presses
down we eventually
reach a level of force
that we consider
to be mouse down.
And as the user continues
to press, and then lets up,
we come back through
that pressure level
and call it mouse up, and
we issue it a click event.
We extended this model to
support Force Click operations
by adding a WebKit force
property to all mouse events,
which tells you how much
force is being applied
to the Trackpad.
And then we also added
a number of new events
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
And then we also added
a number of new events
that you can register
for, to handle this.
So if we go back
to this last slide
where we had mouse
up, mouse down.
We now emit a mouse
force will begin event.
And that's a great opportunity
to call prevent defaults
on the event itself
to prevent us
from calling the
dictionary look up logic
or from doing the link preview,
if you want to take
over this yourself.
After passing through
the mouse down phase,
if the user continues to press,
we hit a second level of force
that we consider
to be a force click
and we emit a mouse
force down event.
And as the user lets
up on the force,
we pass through a
mouse force up.
So it's completely analogous
to mouse up, mouse down,
we have mouse force
down, mouse force up.
And during the entire phase
of time, between mouse down
and mouse up, we emit
mouse force changed events
and we do this because the
user may be changing pressure,
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
changing the amount
of force they apply
without moving their
finger around.
So there would be
no mouse move event
to capture that force for you.
And note, we also define
two layers, two constants
that define the level of force
at a regular click
and a Force Click.
And we strongly recommend you
use these constants instead
of capturing numeric values
because those may change
as the specification matures.
And so to show us how to
take advantage of this
in your own website, I would
like to invite Chris back
to show us another demo.
[Applause]
>> CHRIS YOUNG-ZAWADA: Great.
Thanks, Brent.
So as Brent just told us about
Force Touch, there's a lot
of really cool things
you can do with it
that can really enhance
your websites.
And if you guys remember
when we were looking
at the demo earlier, when we
were clicking into this overlay,
we had the ability to
choose our favorite photos.
That's really easy to do,
but it's also another step
and I think if we can really
make it better for users
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
and I think if we can really
make it better for users
that have a Force Touch
trackpad in case we want
to make a little bit more
interactivity for them.
So while I was offstage,
I actually made a couple
of changes to the code and what
I have done is I've actually
extended the Snap
Points masonry gallery
to create a force enhanced
masonry gallery and we are going
to use this to add
some force events,
and actually do some
animation on force change.
So there's a couple of
things to point out here.
The most important thing is we
are going to get the min force
and max force values from
the mouse event data,
which are the force at mouse
down and force at force mouse
down contstants that
Brent just told us about.
The other thing we are
going to do is we're going
to bind some event listeners for
the force events that get thrown
so we can actually bind to
them and make updates on those.
I've just stepped out how we
are going to handle those,
so it doesn't do
anything right now.
So we are going to
go step by step.
Cool. So to get started, I
am actually going to start
with force mouse down.
And what we are going to do
in this case, is we are going
to run this function
I have written,
called set within
force range of true,
and all this really does is
put a CSS property in the page
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
and all this really does is
put a CSS property in the page
that makes sure that our CSS
transitions don't interfere
with our own animations in
JavaScript, because we are going
to be getting a lot of force
data with force change events.
We don't want those
to interfere.
So this basically makes sure
that the transitions is
set in a lot of things.
The next thing we are
going to do is look
at what kit mouse force changed.
And we do a few things here.
We are actually getting
the force data
from the WebKit force
property of the event.
And we are going to create
a progress, and we are going
to see how far along
between the min force
and the max force values we are.
And we're actually going
to animate some elements
between those, so you'll see
that we are going to go back
and do some interesting
things there.
And basically when we are
through our progress
we are going to say
that we favorited the image
and we are going to say
that we are done animating.
So if we go back and refresh.
If you hover over this photo you
can see that now as I press up
and down, we are actually
scaling the image depending
on the pressure that I'm
applying to the force trackpad.
It's really cool and
it's really interactive
and it adds a whole
new layer of depth.
When I press all the
way down, you will see
that this heart appears which
means we've liked the photo,
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
that this heart appears which
means we've liked the photo,
but I'm actually still
holding my finger down.
So as I pull it up,
you will see that we go
into this overlay view.
And that might not
be what we want.
What's happening is that the
click event is still being fired
because we haven't prevented any
of the default behavior
in the browser.
So to do that, we
actually just go back
and add a quick line of code.
And we're going to go to
'mouse force will begin'
and we are basically just
going to call prevent default.
This is going to
make sure that none
of the OS interactions
interfere with what you
as developers are doing
and you get full control.
So if we go back, we can
try it one more time,
and after we hit this level,
nothing is going to happen.
But we still have
to reset everything.
So to do that, we have to
remove the styles we've set
with JavaScript and make sure
that everything runs
really smoothly.
So we can just fill that
in with mouse force up.
And all we are doing
here is removing a lot
of the styles we set
and making sure that all
of the CSS properties we put in
there get removed and go back
to normal as if we never
touched this at all.
Great. So with this new
interaction we can hover
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
Great. So with this new
interaction we can hover
over the photos, get that
animation, like them,
and just like that, we have got
the ability to add favorites
to our photos and we can still
just do a regular click to go
to the gallery any time.
I think this is really
cool and I'm really excited
to see what you guys are going
to do with this new technology.
And with that, I am going
to give it back to Brent.
Thank you.
[Applause]
>> BRENT FULGHAM: Thanks, Chris.
So I think you will agree
that that was a great way
to make use of this hardware.
A couple of best practices
for the Force Touch trackpad
that I would like to recommend.
Always use the mouse
force constants
and not hardcoded numerical
values, because we expect
that these may change as
we navigate the process
of fulfilling or
completing this feature.
And remember that not all users
have Force Touch hardware,
sadly, and so we should use this
as a shortcut or as a flourish,
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
sadly, and so we should use this
as a shortcut or as a flourish,
an extra for people
who have this hardware.
Use it to drive animations or
to provide a shortcut to content
that you can get to other ways.
And that was creating amazing
experiences on Mac and iOS.
And that rounds out the
bulk of the talk today.
I just want to summarize
a couple of things.
We talked about backdrop
filters, an amazing way
of hardware accelerated backdrop
filter effects on your sites.
Scroll Snap Points allow
you to get tiled scrolling
with just a few lines of CSS.
We talked about the amazing
new class syntax in JavaScript,
the @supports functions for CSS,
so that we can block out content
and have styles that apply only
when certain features
are available.
We talked a bit about AirPlay
coming to OS X through Safari,
and picture-in-picture and iOS
multitasking, and some sessions
that you should see about that,
and this new Force Touch API.
X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000
that you should see about that,
and this new Force Touch API.
For more information,
documentation is available.
We always love people to come
to the WebKit project
at www.WebKit.org.
Join us and see what we
are doing or come try
out the nightlies and see
what new features are coming
for next year.
Get a sneak peek.
And for general inquiries,
I recommend that you get
to know Jonathan Davis,
our WebKit Evangelist.
He's a great person to get
to know when you have issues
that you want to talk about or
if you have messages you want
to get to us on the WebKit team.
And with that, thank you so
much for your time this morning
and have a great time
at WWDC this week.
[Applause]
Thank you.