ROB DODSON: Hey guys.
What's up?
It's Rob Dodson here from the Google Developer Relations
team.
And today, I want to talk to you about how
you can create your own responsive UI
elements using Polymer.
Now, Polymer's a new kind of library
for creating custom HTML tags.
And with that comes the ability to do
things like bake responsiveness in by default.
That's a really awesome feature.
As recent studies have shown, the average person
is interacting with about three different devices a day,
oftentimes beginning a task on one device
and later finishing it on another one.
Now, as web developers, it's our responsibility
to make sure the experiences that we create work well
in this new multi-device world.
But HTML and CSS don't always give us
the best tools for completing that job.
That's where a library like Polymer
can actually jump in and really help us out.
Now as I mentioned, Polymer's for creating custom HTML
elements.
Under the hood, it's actually using a new set
of emerging standards called web components, which basically
give developers access to the same low level APIs
that the browser makers use when they
implement their own elements.
Now, from a high level, that means we actually
have the ability to create a whole new ecosystem
of shared, responsive, performant HTML elements.
And when the tools we use are performant by default,
it makes the whole process of supporting
the multi-screen web that much easier.
So in this video, I'm going to show you
how to create a responsive Polymer element.
We're actually going to make a little collapsing toolbar tag
that's going to take all of its anchors
and put them into a little menu button.
But most importantly, every technique that we cover here
can be applied to any responsive element
that we build using Polymer.
Now, as we're working, we're going
to be building something that's got
to be shared with other developers.
So we've got to constantly ask ourselves,
how can I make this flexible for others to use?
The first part in this process is figuring out
when we want to change the appearance of our element.
Every site is going to have different amounts of content
and layout, and in particular at different screen sizes,
it's going to need to know when to update its appearance.
Let me show you an example of what I'm talking about.
So over here, I've got about nine items in my toolbar,
meaning my toolbar can only be about 900 pixels before it
needs to collapse.
But over here, I've got four items in my toolbar.
So my toolbar can be as small as 500 pixels
before it needs to collapse.
Every site's going to have this same issue
of having different amounts of content.
So how can I create a responsive element
that doesn't bake in all of its break points?
One option is to allow the developer
to actually pass in a breakpoint,
to actually configure my element from the outside
and tell me when they want it to collapse.
Now, to make this happen, the Polymer team's
created the core media query element.
Under the hood, the core media query element's
going to check the size of the view port
and see when it matches a developer provided breakpoint.
Let me show you how that works.
So over here, I've got a core media query element.
And I've gone ahead and configured it's query attribute
to have a maximum width of 500 pixels,
meaning when the screen size is less than 500 pixels,
it's going to go ahead and set its query matches attribute
to true.
And this means we can actually create our own binding called
small screen and set it to the value of query matches.
When the screen is less than 500 pixels,
it's going to set small screen to true.
And now any element that's watching small screen
will know that it's time to update its appearance.
So let's actually put this into our collapse toolbar tag.
I've got a very simple Polymer definition
here to get us started.
And the first thing we're going to do
is we're going to import that core media query element.
Then we can drop the media query element
into the template for our Polymer element.
And lastly, we're going to publish that query attribute
to the outside world by adding it to our attributes list.
And we can bind that value back to the query property
on the core media query element.
This allows a developer to actually pass in a breakpoint
and have it reflected inside of our tag.
So that lets us know when it's time
to update the appearance of our element,
but that brings us to the next point, which is how do we
actually update the appearance of our element?
Now, to do this we're going to use one more feature of Polymer
called conditional template bindings.
As we know, from the top level of a Polymer element,
there's a template for rendering content into the shadow dome.
But what's really cool is that this top level template
can actually contain additional nested templates which
support data bindings.
So if we use an if condition inside
of one of our nested templates, we
can actually bind to the value of small screen
and only display content on smaller screen sizes.
As an example, I'm going to actually try
to grab all of the links out of my toolbar
using a content element which I've placed inside
of a menu button, which is inside of our template
that's only going to render on smaller screen sizes.
Now from the user's perspective, the developer who's actually
using our tag, their code is going to remain the exact same.
They don't need to change anything.
They just pass in a few anchor tags.
They set the query attribute to max width 500 pixels.
And now the toolbar just does the right thing.
I'll show you an example of what that looks like.
So over here, as we start to reach
that 500 pixel breakpoint, you'll
see that all the anchor tags are going
to jump out of the toolbar and into that Menu button.
This is really awesome, because if the developer using
our element doesn't have to stress out
about supporting all these different screen sizes,
it means they can spend more time doing the things they
enjoy, like adding really awesome features to their app.
So if you want to grab the code for this example,
head on over to GitHub and grab it
at robdodson/collapse-toolbar.
If you want to learn more about Polymer,
be sure to check out Addy Osmani's video
on building web components with Polymer and Eric Bidelman's
video on using Google services with Polymer elements.
Also be sure to check out the Polymer website
at polymer/project.org.
And if you haven't done so yet, make sure to follow us
on Twitter at @polymer and Google+ at PolymerProject.
Now, I want all of you get out there
and start componentizing the web.
It's up to all of us to build this new ecosystem
of responsive elements.
My name's Rob Dodson, and thank you so much for watching.