Modernization Hub

Modernization and Improvement
Google I/O 2014 – Unlock the next era of UI development with Polymer

Google I/O 2014 – Unlock the next era of UI development with Polymer


ROB DODSON: So this is going
to be a higher level talk. I’m not going to go into
the specifics of how Polymer itself works. I think Eric and
Matt have already done a really awesome
job covering that. Instead, what I want
to do, is I want to cover some of the elements
sets that we’re shipping today. And I’m going to give you enough
information so that all of you can get up and running. You can start playing with these
things in your own projects. For those of you don’t know
me, my name is Rob Dodson. I’m a developer
advocate here at Google. I work on the open web
platform, but I primarily work on the Polymer project. And I am especially excited to
be working on Polymer today, because I really think it’s
going to fundamentally change the way that we build and
design our web applications. Now, right now we’re in
a very interesting moment in web development, where
we’re moving from the desktop over to this new,
multi-device landscape. And with that, comes a lot of
challenges and expectations, where the things
that we build are expected to be very app-like. But HTML itself
doesn’t always give us the best tools for
completing that task. It wasn’t designed
to be app-like. It was designed for more of
a document-centric model. So the HTML elements that
you have to work with today are for things like creating
headers, bulleted lists, paragraphs, things like that. And don’t get me wrong, I’m
not trying to knock on HTML. I think it’s awesome. I think it is the
greatest publishing platform in the history
of the human race, OK. So I think the web is
amazing, but I just think it has a lot of potential. It’s got a lot of
room to grow into. And if we had the opportunity
to redesign HTML today, knowing what we know about the whole
multi-device landscape, I think it would probably
look a bit more like this. We’d probably have some
more elements like this that we could use for
transitioning from one state to another. Maybe having nice
responsive drawers so we could slide
on and off screen. And this is really
what we’re trying to accomplish with Polymer. We want to give developers the
tools so that they can actually extend HTML, and
then together we can build a new
ecosystem of elements which are responsive by default,
and performant, by default, and accessible. And do all of these app-like
things that we want. So that’s what we’re going
to be touching on today. We’re going to look
at two element sets. We’re going to start by
looking at the core elements. These are released now. They are very general
purpose, sort of utilitarian. They’re not highly stylized. They’re meant to be kind of like
bedrock that you build upon. And we split these
into two categories. We’ve got visual elements
and non-visual elements. The visual elements
are for things like creating toolbars,
header panels, menus, and things like that. Non-visual elements
are for doing things like working with
Ajax or local storage, or even the file system. And I know it might seem
weird to think about working with Ajax in the file system
using an HTML element, but I promise you, when you
start using these elements, and you start composing
them together, and binding things
together, you’re going to find that this is
an amazing workflow that you really enjoy. So that’s the core elements. We’re also going to be touching
on the paper elements, which I think you’ve probably heard
a lot about at this point. The paper elements are
going to be more stylized. They’re part of that
material design system, and they’re really designed to
push the envelope of what we’ve come to expect in the browser
in terms of animation, lighting, shadow, and spatial
relationships. So those are the things
we’re going to touch on. These are the major
categories that we’re going to try and cover. We’re not going to
cover everything, because there’s just
way too many elements to touch upon in one talk. But we are going to give you
enough information so that you can get rolling and
get up and running. The first place I want
to start is with layout. Now this is where most of us
begin our applications anyway. I’m just trying to block
some stuff out on the screen, figure out where it’s
going to live on the page. And a very common starting
point is with navigation. And so to aid in
this process we’ve created an element
called core-toolbar, which is a very basic
HTML element for holding controls such as buttons
or tabs or title. I think this is a great place
to start with web components if you’re just getting up
and running using Polymer, because it’s a very
simple element. All it does is it just lays out
its children in space, right. It doesn’t do
anything too crazy. And as Matt spoke
about before, if you want to get started
using a custom element, all you’ve got to do
is import it, and then start working with the tag,
just like it’s any other HTML element. So I’ll run that by you again. If you want to use any Polymer
element, any custom element, you first need to
import its definition. And then you just start
working with it, just like any other HTML tag. What we’ve done here
is we’ve actually thrown a div inside
of our toolbar, to give us a little
title up there. And because custom elements
are all about composability, we can throw an
additional assets. We can throw in an
icon button, which will give us little hamburger
menu we can play with. We can also style this thing. We can throw a tall class on it. And the toolbar knows that it
should expand once that class is on there, and
we can do something like include an image
background at this point. Now what’s really awesome
is that to get all of this that you’re seeing
on screen right now, I haven’t had to go in
and write a bunch of CSS. It’s just baked
into the element. And as I’m just composing
these things together, it lays out properly. Now a very common pattern is to
take a core-toolbar and nest it inside of another element
called a core-header-panel And a core-header-panel is a
really simple container, which just has a toolbar
area up at the top, and then a main content
section down below. And the core-header-panel’s
sole job is to manage the
scrolling of the page. So as you see here, when
the user starts interacting with our device, it’s going to
keep our core-toolbar pinned to the top of the document,
and allow the content to scroll underneath it. So that’s the default mode
for core-header-panel. Now, because custom
elements are configurable, we can change that mode. We can set it to scroll. And what that’s going to do,
is going to take our toolbar, and it’s going to
fuse it with the rest of the content on the page. So as you see, when the
user is scrolling now, it’s actually going to slide
the toolbar off the screen, and it’s going to move with
the rest of the content. And if we want to kind of
riff on that taller toolbar that we had before,
we have another mode which is waterfall tall,
which will actually do this cool sort of
condensing animation as it collapses the toolbar
down and the user scrolls around on screen. And again, I’m not writing a
bunch CSS to get these effects. I’m not running a
bunch of JavaScript to make all these things happen. I’m getting these effects
by composing these elements together. They’re smarter, more
powerful, HTML elements that know how to work together. Now, an interesting variation
of the core-header-panel is another element called a
core-scroll-header-panel. And it basically has all
the same capabilities as the header-panel, but it
adds this really neat condenses attribute. And what that’s going to do
is as the user is scrolling, it’s actually going to
do this cross-fade effect between our background
image and our toolbar. And as they start to
come back up the page, it’ll slide the toolbar back in
until they reach the top where it will do a cross-fade again. Again, this is a really
sophisticated effect. This is the kind of app-like
behavior that I want to have, but I’m not having to write a
mountain of CSS and JavaScript to get to this point. I’m just composing
these elements together. All right, so we talked a bit
about sort of general layout. Because the
multi-device web is sort of the major theme
of this event, we’ve got to talk about
responsive layout. And we’ve created some elements
to help out with this as well. So we’ve got a
core-drawer-panel, which is a responsive
container which will lay out its children in a sidebar,
either on the left or the right, and in
a main content area. So if I have a child of
the core-drawer-panel, and I give it this
drawer attribute, the content that I place
inside of that drawer is going to show in my sidebar. And if I place content in an
element with a main attribute, then all that content is going
to display in my main content area. Now what’s really cool
about the core-drawer-panel is that it knows,
on a smaller screen, that it needs to collapse
down and move that sidebar out of the way. So we’re only going to focus
on the main content area when we’re on a smaller device. But it’s very easy to rig it up
so that it slides that drawer back out, and the
user can then start interacting with those
additional controls. Now what I’ve shown
up to this point has been very general
layout elements. They’re sort of
one size fits all. But there are
going to come times when you need more
granular control over the layout in
your application. And so, to help
out with that we’ve created what we call layout
attributes, which basically add declarative support for CSS
flexbox to your application. And the way we do this
is, under the hood, when you import Polymer, we
also include an additional style sheet that has these flexbox CSS
selectors kind of ready to go. And that means that you
can use these attributes inside of a Polymer
element definition, or just outside
anywhere in your page. Any page that’s
using Polymer, you can use these layout attributes. And let me show you
some examples of that. So what I’ve got here is
just some divs, right? I’m not inside of a
Polymer element definition. I’m not doing anything crazy. I’ve just got a
collection of divs. And on that parent
div, I’ve told it that I would like it to lay
out its children horizontally using flexbox. If I want, I can specify
that any of those children should flex to try and take
up as much space as it can. And this also works in
the vertical orientation. I can just change that direction
attribute from horizontal to vertical, and
now everything’s laying out top to bottom. And again, flexing works in
this orientation as well. We’ve also added
support for flex ratios. So if you want to specify
that a child should be three times the size
of one of its siblings, you can do that as well. And because we’re
working in flexbox, we’ve always got
two axes that we’ve got to kind of keep in mind. We’ve got our main
axis, which flows in the direction of
our primary layout. Since we are doing
layout horizontal, that main axis
flows left to right. So if I want to center justify
something in that main axis, I can pass in the center
justified attribute, or start justify to have
it at the beginning, or end justify to
have it at the end. I’ve also got a cross
axis, which is always going to be flowing
perpendicular to my main axis. And if I’d like to center
a child in the cross axis, I just pass a center attribute. Now, if I combine these
attributes, center justified and center, I get the
holy grail of layout, which is vertical and
horizontal centering. And I don’t have to write
any CSS to do this, OK. I just get that from using
attributes, which is awesome. [APPLAUSE] In my opinion this is one of
the coolest things in the world. It just happens to
be part of Polymer, but I don’t want
to go back to doing web design without
these attributes, because they make my
life so much easier. So I think you guys are
really going to enjoy that. OK, we’ve talked a
lot about layout. Let’s move on. Let’s talk about the
material design stuff, because it’s pretty exciting. It’s a big part of the keynote. What we’ve been doing is, we’ve
been creating material elements which are really aimed at
pushing the boundaries of what we expect in terms of
animation, lighting, and spatial relationships in the browser. And so that means taking
things that we kind of take for granted on the web,
like your typical checkbox, and re-imagining it for 2014. So this is a paper-checkbox
element, and as you see here, it’s got some really
stand out features. It’s got these really
fluid animations, and it’s also got these
cool reactive ink effects anytime a user clicks on
something with their mouse, or taps on it on a touch device. So it’s really good, because
the user on a touch device is going to get some really
specific feedback about what they’ve just interacted with. And these elements are meant
to be drop-in replacements for a lot of the tags
that we use every day. So this is another example. This is paper-toggle-button. And as you can
see, it’s about as straightforward to use as
anything you could imagine. It’s just simple HTML,
and that’s by design. We want it to be really
easy for you guys to bring these things
into your projects, and just start
working with them. Now text input, probably
only one of the most commonly used
controls on the web, and it’s gotten a
lot of attention in the material design system. So this is a paper input
element, and as you see here there’s a lot of really
interesting effects going on as were interacting with it. We’ve got a floating
label attribute here, and what that does is it
actually jumps our label up above the text input area
as the user is typing. Which is really good on a
space-constrained device like a mobile phone when you
don’t always have a great place to put the label, but
you do want the user to still know what
they’re working with. And I’ve also got some other
interesting attributes here. We’ve got a validate
attribute, so we can validate what
the user is typing using regular expression,
and we get this error state basically for free. That red bar and
the icon, that’s all built into the element. And we can just kind of
figure what the error message is by passing an
error attribute. One more element I want to
touch upon real quick– this is paper-tabs. If you’ve ever
built tabs before, just on HTML, CSS,
and JavaScript, you know that it’s often
times just like div soup. You just write a
bunch of markup, you shellac it with CSS
until it looks right, and then you hit it
with some JavaScript so it’ll do the sort of like
toggle state that you want. And what I love
about paper-tabs, is just that it’s just using so
much less markup, and less CSS. And overall there’s just
less clutter in my document. And when I have an idea that I’m
trying to get out of my head, onto the page, I
don’t want to have to invent everything
from scratch. I want HTML to be
expressive for me. I want to be able to use
these new tags and just say, I want some tabs and I get it. Now one thing that you
notice about probably a lot of these elements is this cool
sort of reactive ink effect as the user is
tapping on the screen. Now we wanted other
developers to be able to use the cool effects
that are in the material design system in their own elements. And so what we’ve done is we’ve
actually broken those effects out into standalone
elements that anyone can drop into an element
that they’re working on. So this is a
paper-ripple element. This is how we actually generate
that cool reactive ink effect that you see in all
of the paper elements. And all I’ve done here
is I’ve nested it inside of a div tag with an
image, and then I’ve told the paper element
that I want it to fit, so it’s going to try and cover
the surface area of that div tag when the user taps on it. And what’s great about
this is that it’s a very, very small bit of effort
to add a bit more visual punch through your UI. And especially if your
user is on a touch device, they’re going to get a lot
more feedback about what it is that they’re
interacting with. Another example is paper-shadow. So we wanted to give
developers the ability to create realistic shadows
in their applications. And what paper-shadow
does is it allows you to set a visual
z-depth on your element. So as you see here, as we’re
interacting with this thing, it’s going to kind of jump
off of the page, which is nice because as your user is
working with this element, it can start to feel a little
bit more alive and a bit more tactile. Feel like they’re actually
interacting with a real thing. Now, under the hood,
paper-shadow is actually generating two shadows so it
looks a bit more realistic and lifelike, and it’s an
improvement on the basic CSS box shadow. OK, so I don’t have time to
touch on all the elements, because there’s
a whole lot more, and they’re all really amazing
and fun to play around with. What I will suggest is that you
had over the Polymer project website. We’ve actually just
thrown up a sampler of all of our paper elements. You can get to it
from the homepage. Play around with
all these things. See some examples of
them, grab some code, and start dropping them
into your own application. I want to move on from
paper for a second, and I want to talk about
theming, because it’s a topic that comes up a lot. How do you take these elements–
now that you’ve got them, and now that you’re
excited to use them– how do you take them, bring
them into your own application, and make them feel like
they belong to your project? And so we’ve got a few
new tools in the toolbox to do the theming. And the first is the new
shadow psuedo-element. And this is part of
the CSS shadow dom. And the new shadow
psuedo-element is going to allow you to
pierce an element’s shadow boundary, and style
its immediate children. And so, as you see
in this example, I’ve got a paper slider
element, and it’s got this really dark blue knob
that the user is currently dragging across the screen. So if I want to change
the color of that knob, I can use the shadow
psuedo-element, I can pierce the paper
slider, and I can specifically target that one child
element inside of there and change its color. Now this is good if you
know specifically what you want to target, or you just
want to tweak a few things, shadow is really great for that. But if you want to do something
that’s a bit more far reaching, we also have the
new deep-combinator, which will pierce
all shadow boundaries and allow you to style any
child in the shadow dom. And a really common
theme, is to do something like put a class on your
body, something like red beam, use a deep-combinator,
and then pierce all of your element’s
shadow boundaries to update something
inside of them. Now I know that all of these
elements that I’m showing here are paper elements. I know that they all have
paper ripples inside of them, and I want to change
the ink color to red. So what I’m doing
here is, I’m just applying that red theme
to my body, using deep to dive into all
of those elements and update their ink
in one fell swoop. Now just using
shadow and deep, you can get pretty far
with theming your site. This is an example that
Eric Bidelman put together. This is from his
material playground. And what you’re
seeing here is, he’s got a whole bunch of
paper elements on screen. He’s interacting with
them, and then he’s going to hit the switch, and
change all of their colors over to green from purple. And you can do this
with typography. You can use it with padding and
spacing, and things like that. So with just those two tools,
you can get pretty far. And developers often
see this, and they start to freak out a little bit. And they’re like, hey
you’re breaking the style encapsulation. I thought the whole
idea of shadow dom was that we weren’t
going to do that. And I want to make a point here. So the shadow
boundary is intended to prevent accidental
styling in the shadow dom. We don’t want a developer
to accidentally turn everything red. That is bad. But we do want to
give developers the final say over what
their site looks like, and that means giving them
the tools and the flexibility to reach inside of
something and specifically say, no that thing should look
this way because it’s my site and I say so. So that’s the intention there. But also, we get it. Preserving style encapsulation
is a good thing to do. And so we’ve been
experimenting with an element called core-style,
which allows you to share styles
between elements, but also preserve
encapsulation at the same time. And I’m going to put this
experimental badge on this, because it’s
definitely still kind of in that developer preview,
we’re working on it phase, but it’s also so
interesting that I wanted to talk about today, so
you guys could get up and running and start
playing with it. The way core-style works is
you have a core-style element, which is going to act
as your style producer. And inside of this
element you can put in CSS that you intend to end up inside
of someone else’s shadow dom. Then, inside of your
Polymer element definition, I’ve got an x-foo tag
that I’m creating here. I’ve got another
core-style element there, with a reference attribute. I’m actually targeting
the core-style element that’s above it– that
tomato-theme core-style producer. So we create this
little relationship between producer and consumer. You can have multiple
consumers all pointed at the same producer. You can have multiple
producers and a consumer changing which one
it’s looking at. You can mix and match
those any way you want, but the overall effect is
that we end up with a themed element, and we didn’t have to
specifically go in and target that item. Now another really cool,
interesting feature of core-style is style binding. So maybe you’re
working on a theme, and maybe you don’t know
exactly what color you want to use for a
particular aspect, but you do want to
expose a hook to the user so that they can set
that value later. So using a style
binding here, we’re just using mustache syntax. We’ve got myColor
set up as a binding. And then later on in the
script, in their document, the user can set the
value for myColor, and they can do it on
a per-instance basis, or they can do it
globally, which is what we’re doing here,
using the CoreStyle.g object. And again, this gives us the
effect of a styled element, and we didn’t have to
specifically go in and target anything using shadow or deep. So this is a lot of good stuff
here in the world of theming. It’s all still sort
of exploratory, but I’m excited by
where this is heading. I think we’re definitely
getting there. The last thing I want to
touch on are transitions. How do I move from one state
of my application to the next? And we’ve been doing
some work here as well. This is an element called
core-animated-pages, which is also still kind of in
that developer preview phase. We’re still kind
of working on it, but it’s so cool I
wanted to show it today. And core-animated-pages,
as it says, is a pluggable system
for creating transitions from one state of
your app to the next. So I’ve got a
core-animated-pages element here. Inside I’ve got some sections. That’s what you’re seeing
on the phone there. And I’ve got a selected
index, and then I’ve got a list of the
transitions that are going to play as
that index is updated. So as the user is interacting
with these tabs, all I’m doing is updating the index
and it’s sliding over the different
sections, using the transition
that was provided. Now, because this is
a pluggable system, it means you can do some
pretty wild things with it. And if any of you
have seen Topeka, which is our sort of flagship
app kind of demonstrating a lot of the core
and paper elements, you’ve probably seen a lot
of these really awesome hero transitions that happen as
you answer different quiz questions. And what’s going on
here is all of these are animations that were created
using core-animated-pages. So there’s a lot
that you can do here. But instead of just
talking about this, I can actually show you a brief
demo using our designer tool. Now some of you may have seen
our designer tool before. It’s kind of like
a drag and drop editor for working
with web components. And what we’re
going to do is we’re going to try to build a
little piece of Topeka using this tool. And so we’re going to start
by grabbing a card out at this pallet here. And what we’re
doing right now is we’re just dropping Polymer
elements into a canvas. So I’m going to drop
a card on screen. And we’re going to grab
some paper elements as well. So we grab paper input,
throw that in there, grab another paper input. And as you can see right
now, it’s kind of laying out, but it’s not
exactly what I want. I’d like it to have a
little bit more padding. So I can go over to my
properties inspector here, from a card, I can
switch to the styles, and I can go down
to padding, and just add a tiny bit of padding. And that looks a
little bit nicer. And right now these labels
are kind of nondescript. They just say type something. So I can go to my
properties inspector, and I could update them
here, but I can also hop into the code. If I want, I can just
change the label value here from type something to
first name and last name. And then save that,
and switch back, and now my labels have updated. And if we want to go as
far as adding validation, we can do that as well. So we can say that we only
want to accept letters and not numbers. So I’ll say yeah, only give me
capital and lowercase letters and no numbers please. So as the user is typing,
they can type in some letters. That works, but as soon as
they start typing in numbers, it’s going to start
yelling at them. And if I want, I can throw an
error message in there as well. I can be like, yo,
only letters dude. And then I can give them
a little frowny face, so they know I
mean business here. So let’s add some
more stuff here. Let’s throw in some icons, so
the user can pick their avatar. Drop those in there. Let’s also throw in
an action button, so when the user is done, they
can navigate out of the screen. And this action button right now
is kind of laid out far left. I’d like it to lay
out to the far right, and I can use some of those
layout attributes to do that. So I can tell it to
justify to the end, and just slide it over. Now, really quickly, I’ve
created my sign-in form. And it didn’t take
a lot of effort, and the code underneath is
pretty straightforward as well. But I said I was going to
show off core-animated-pages. So let’s actually grab
a little scaffold. Just drop this on the screen. You guys see that OK? [INAUDIBLE] and over
in core-animated-ages, drop this element in there. So we just dropped a
core-animated-pages element into our scaffold, and the
last thing we’re going to do is just drop our
card on top of it. And now this is
starting to kind of look like a mobile application. And what I want to
do next is I want to bind the core-animated-pages
selected index to these tabs. So as I click on
the different tabs, it changes which
page is showing. So over my tree-view, I’m going
to select core-animated-pages, go to its properties,
and we’re going to hook up a data binding. And we’re going to bind to the
selected property of our paper tabs. So now as we click from
item one to item two, it’s going to attempt
to show two pages. But we don’t have a
second page at the moment. We can change that. We can kind of cheat, and we
can do like a cooking show, pull out the turkey fully baked. Ah yeah look at that. And now that I’ve
got these two pages, I want to animate between them. I want to fire up
core-animated-pages. And so what I’m
going to do, is I’m going to tell each
element which animation it should use as we transition. So for all of these
tiles here, I’m going to tell them
to do a tile cascade, and I’m also going to
tell them to fade out. For our header here, I’m going
to tell it to slide down. And then, we switch
over here for our card, and tell it to slide up. And the last thing
we need to do is we need to tell
core-animated-pages all of the animation targets
that we just created. So we got slide up, slide
down, fade, and tile cascade. And now, the demo
gods are smiling. When I click on item two, whoa,
we get some nice transitions. [APPLAUSE] So that’s pretty exciting. So that’s really awesome. If you want to play
around with Designer more, it is up on the project
Polymer website, but it’s also up on GitHub. So that means you take
it, you can fork it, you can play around with it. And what’s really
cool, is that it means anyone can take this and
add their own components to it. And that’s exactly what the
team at Salesforce has done. So a group led by Eugene
Oksman and Akhilesh Gupta from the Salesforce
mobile SDK team has actually taken Designer,
they’ve extended it, they’ve created
Salesforce elements using Polymer– these are
UI and data elements– and they’ve added
them to the Designer. So what you’re seeing
here is Akhilesh is actually building a
Salesforce mobile app using these components. And what’s really awesome
is that these Salesforce components are already set up
to connect to the Salesforce backend. So for things like identity,
and APIs, and offline sink, and storage, like
all that stuff, it’s already built
into their elements. Which is really super cool. So by combining Salesforce
API and Polymer, their developers get
the best of both worlds. And I think what
you’re going to see here is in a second Akhilesh
is going to grab the code. And i think he throws
it into Cordova, and he’s going to preview it
in the iOS simulator, and also the Android device simulator. How cool is that. OK. [APPLAUSE] All right, so what
did we learn today? Hopefully a lot. Hopefully you guys are
leaving here really excited, because we covered
a lot of ground. These are the major categories
that we started off with. And to summarize, if you want
to scaffold your app together, you want some good
bedrock to build upon, you can use these core elements
that are out there today. We’ve also shipped the
paper elements, which are part of the
material design system, so if you want to create
some really beautiful, interactive UIs, we’ve
got that as well. We’ve got new tools like
shadow, and deep, and core-style for theming. And there’s a lot
of good exploration that’s happening in that space. And lastly, if you want to
move between different states in your application,
and you want to generate some really amazing,
eye-catching transitions, you can use core-animated-pages. Now if you don’t take
anything else from this talk, the one thing that
I ask of all of you is to head over to the
Polymer project website, download Polymer,
and give it a shot. We’ve just completely
revamped the website. We’ve got all new
getting started guides. We’ve got the paper
sandbox up there. We’ve got element catalog. We’ve got Designer. A bunch of new documentation
for things like icons, and gestures, tons of
stuff to cover there. So please, hit up the Polymer
website and check it out. Also, check out the Google
Developers channel on YouTube. We’ve recorded a whole
bunch of DevBytes on Polymer, building elements,
building accessible elements, connecting with Google services
through web components. Lots of really awesome stuff I’m personally just like super
excited by where all of this is heading. I hope you are as well. I really do believe
that together we can build a new ecosystem
of amazing HTML elements, and we can revolutionize
the mobile web. So thank you all so much
for coming and enjoy I/O. And we have time for questions. There’s microphones up here. Please come up to the
microphone to ask questions, because otherwise the
video won’t pick you up. AUDIENCE: Hey Rob, thanks
for all the awesome work on Polymer. I notice that you’re using
attributes for the things that classes have been
traditionally used for, and I was wondering
if you could speak to the motivation behind that? ROB DODSON: I think that
configuring things through attributes, it feels like
how you work with other HTML elements, typically. And that is probably why we
are heading in that direction. You can still use
classes if you like, if you kind of prefer
to do things that way. But with Polymer
itself, there’s a lot of built in niceties
to using attributes. So if you change an
attribute in Polymer, you’ve got automatic
change hammers, which are going to detect when
that thing has been changed. So really the framework itself
is adding some more sugaring to that particular
area, so that’s why we’re supporting that. AUDIENCE: And do the order
of the attributes matter, like when you say, float
left or layout horizontal, or something like that. Do they talk to each other,
or how does that work? ROB DODSON: That layout
should not matter. The order of the attributes–
sorry– should not matter. AUDIENCE: Thanks So using JavaScript from
the global of the app, like say, jquery or
something like that, to interact with these,
does that change, or is that sort of the
same as it always was? ROB DODSON: Interacting
with them from the outside is totally the same, because
to jquery, or like a framework, it just looks like an HTML
element on the outside when you create
a custom element. When you’re on the
inside of an element, like if you’re trying to use
jquery inside of your element definition, you’ve got
to be careful there because jquery
doesn’t necessarily know about the shadow dom So you
can run into weird situations. So we typically just
use vanilla JavaScript. And to be honest, like
with create selector and forEach, and like a handful
of other things, that gets you like 90% of what
you need usually. AUDIENCE: Is that JavaScript
sandboxed inside the shadow dom or is it– ROB DODSON: No, JavaScript
is part of the page. AUDIENCE: So my question
is kind of similar to his. I’ve been using Angular
for the last year or so, and I was just wondering how
well it plays with Angular. ROB DODSON: The one, I guess,
big distinction to make, is to also keep in
mind that Polymer is kind of meant to
be like a new thing. It’s built on top
of web components, and it’s kind of trying
to head in that direction. But if you are trying
to mix the two together, like anecdotally, I’ve
dropped paper elements even in to an Angular
project, and had Angular kind of like poking
at them and driving them, and everything, and it
generally seems to work out OK. There may be some issues around
data binding complex data objects. I’m not sure. I don’t know for certain. But in general, a framework
that knows how to work with HTML can work OK with
Polymer elements, because it is just HTML. AUDIENCE: So thanks for
the great presentation. What about accessibility? So for instance,
the checkboxes, I saw was using canvas
elements, and I tried to navigate with my
tab around in the browser, but I wasn’t really
able to do that. So is there any talking to that? Is that in a road map or–? ROB DODSON: Yes. Absolutely. So accessibility is
a big concern for us. We want to make accessibility
easier on the web. We want to give developers
better primitives so that it’s not such a
chore to add accessibility to your project. So we’ve been working
with Alice Boxhall, and I believe she’s actually
going to be doing a sandbox session, if she hasn’t
already– but it might be tomorrow– on building
accessible web components, and she also has a DevByte
that she has recorded, which is already on YouTube,
which goes into great detail how to do accessible
web components. So yes it’s definitely
on the road map. We are totally going to
do it and support it. For I/O it’s a bit of a
crunch, there last minute. But it’s coming for sure. AUDIENCE: Thanks ROB DODSON: Hello again AUDIENCE: One of the cool
visions behind web components is the idea that everything is
composable, in that you expose a public API, and then
you have this private API to do whatever you like with. And then, when I see
the angry developers bit that you posted
earlier about how you can pierce the shadow dom, I
wonder what the story is as far as maintaining
that separation of, I’m the guy who
makes the component, and I’m the guy who consumes it. And it doesn’t really matter
what the guy who makes it does without breaking
the other person’s site. If there’s a story that’s
like how versioning works, or if there are best practices
as to when you pierce a shadow dom, or how you
expose things should be pierced versus not pierced. ROB DODSON: Yeah. I don’t think we’ve
actually done a ton to codify when you should
and shouldn’t pierce things. I think, in general,
if you give something like an ID or a class, that’s
kind of been one of the ways that we’ve been thinking about
saying, if I specifically name something, if I give it
a name that’s sort of intended for the world and
I document that, and I say in my
documentation, OK that knob is called slider knob and
I’m telling you its name, and if you need to get
in, that’s how you do it. It’s kind of a bit of like an
agreement between the person creating the thing and
the person using it, that they’re going to
document the bits that they are cool with people changing. And as for versioning
stuff, I mean we’ve been just following
semantic versioning rules. So you just need to
keep an eye on things. I saw someone mention
the other day on Twitter, they were like, well, what if I
want to just add like a border and like some additional
UI to an element. Isn’t that going
to break everybody? And if you think it’s
going to break everybody, then that needs to
be a major version update in your
semantic versioning. Because if it’s going
to break somebody, then it’s not
backwards compatible. It is API breaking. So that needs to be a
major version uptick. AUDIENCE: Thank you You showed a video demonstrating
someone using Cordova. How well does Polymer perform
in legacy webview on Android? ROB DODSON: Android Browser? AUDIENCE: If I have an
app with the webview, and I’m showing a
Polymer display– ROB DODSON: So right
now, my understanding is that the webview in
KitKat is the one that is going to work with Polymer. Older webviews– basically stuff
that’s not based on Chromium, is not going to work AUDIENCE: Quick question, CSS
is so much simpler and cleaner. But how does it work on
something other than Chrome, such as some of those other
evil browsers, like IE– ROB DODSON: Hey,
they’re our friends. It works good on
the other browsers. So we test on all of
the other browsers. We make sure that
we’re doing our best to work in Firefox, Safari, IE. Our support– sorry,
I’m just nervous, that was not meant
to be a slight. We support the last two
versions of every browser. That’s kind of our target. AUDIENCE: Thanks. ROB DODSON: All
right, that’s it. Thank you all so much. Enjoy– oh, sorry,
one more, one more. AUDIENCE: [INAUDIBLE]. So how does this compare
to replacing the Bootstrap? ROB DODSON: Yeah. So the thing about Bootstrap
is, Bootstrap is awesome. And the reason why it’s
awesome and so successful is because it gave us guidance. And we were like, I get
components and I can use them, these awesome. But there’s just a lot of markup
that goes in to Bootstrap. Their navbar is like
blah, it’s crazy. So my hope is that you can
take Bootstrap and evolve it to this world. That in the future
Bootstrap is going to be a collection
of custom elements. And that’s what
we’ve tried to do with the core elements
and the paper elements, is to start heading
in that direction. And when I’m talking about sort
of like the ecosystem of shared elements, that’s
really what I want. The thing about
Bootstrap is, you can’t use Bootstrap
with foundation, or another CSS framework. But with web components
you can, and that’s huge. So that’s what I’m
hoping we head to. AUDIENCE: All right, thank you ROB DODSON: Yep, thank you. AUDIENCE: So at what
point in the future do you expect that these will
start to appear mainstream, that a mainstream app
will start using this? Is this three months out, or
can I use it now and sort of– ROB DODSON: The time is now man. We’re like talking about it
in the keynote let’s do this. Yeah. The thing is, it’s
future facing. So you’ve got to
make sure that you’re cool supporting the
modern Evergreen Browsers. But if that’s your major
user base then do it. Go for it. Thank you guys so much.

41 comments on “Google I/O 2014 – Unlock the next era of UI development with Polymer

  1. Google I/O 2014 – Unlock the next era of UI development with Polymer

    A bit childish to avoid mentioning IE like that.
    Otherwise great speak, will definitely try out polymer!

  2. Was going to try this one out and the first thing I notice is that the demo paper elements don't animate as they suppose under IE11 🙁

  3. Can anyone share any link or anything to learn this amazing stuff from the beginning level, please? Tremendously interested about it!!!

  4. I am so disappointed because all of this is AMAZING but Polymer doesn't degrade in older browser beautifully at all 🙁

  5. Google is crazy. They want to sell the web as viable platform to develop apps, but the apps performance is sluggish and choppy.

  6. If a toast element was added to notify the user of a completed activity there could be a bit less page redrawing. http://developer.android.com/reference/android/widget/Toast.html

  7. HTML attributes for styling content? Oh man…
    What happened to the separation of content and presentation principle?

  8. When I click on my animated pages, I get only id / className / attributes in the properties tab. It is completely different compared to 27:31. Is this a bug ? Or what I am doing wrong ? Thank you.

  9. This looks fine and quite usable for a development team or a client that doesn't want to invest time on creating a specific product that better suits it's needs and instead prefers something "outofthebox", I mean, come on, if today website design is getting pretty "alllookthesame" thanks to the css frameworks like bootstrap, how is it gonna be if people starts to implement standarized UI patterns without a conscious of rethinking what's needed for a specific purpose? In my opinion features are developed to solve concrete problems even if the standarization of some of those features can help faster learning and interaction in the future. I'm not saying we have to reinvent the bicycle but in a preliminary stage, Polymer just doesn't look like a good proactive way to evolve instead a way of "doing it all app'alike"

  10. He keeps insisting the "without writing CSS or JavaScript" part. To me it feels like it's just the component users are the ones that do not have to write it. Where's the difference to using a Bootstrap class, or a jQuery plugin? It feels like a more "comfortable" way to boundle things (no need to import JS, CSS and initialize the element) – but that's about it. I can't yet see the big revolution. To a developer this will just be a change in "where" you put your custom CSS/JS.
    I do see the potential though. But right now, AngularJS (still) seems to be way more powerful (although more complicated).

  11. Dope! As a designer, this seems pretty sharp. For the presentation, what did you use for Ix animations such as at 6:30?

  12. paper input validation is not working properly in local and even also in https://www.polymer-project.org/tools/designer/

  13. web apps are not so complicated to get so simple, current state of the web allows any sort of formats on your html, that is a plus for the wake up call!

  14. The designer tool is just something like Form + live reload. instead, i prefer
    raw code + live reload. hope we have a direct code editor in chrome in the future.

  15. Nice video and informative video in the #UIdevelopmentservices  and simple easy to understand of the unlock the next era of the #UI / #UXdevelopmentservices and i have bookmark this video      http://aspiresoftware.in/services/front-end-development.html

Leave a Reply

Your email address will not be published. Required fields are marked *