ALEXIS MOUSSINE POUCHKINE: Hi everyone, we're
here at Devoxx 2014.
I'm here with Martin.
MARTIN GORNER: Hello everyone.
ALEXIS MOUSSINE POUCHKINE: Hi Martin.
And we're here to talk about Polymer.
Because you have been very busy at this conference advocating
Polymer.
MARTIN GORNER: And a lot of people were there to see it.
There is a lot of interest around Polymer today.
ALEXIS MOUSSINE POUCHKINE: I think
indeed there was a lot of interest.
So what are people interested, and why do you
think they're interested?
What is Polymer, and how does it fit
in the-- we're talking about web here, and taking
the web forward.
MARTIN GORNER: So taking just a little step back,
the important thing here is web components.
That's the standard evolving.
And allowing you to use and create components
that you'll be able to import into your page,
and that are self-contained, encapsulated,
have a proper interface.
Well, everything you have been used to in high-level languages
for years, but this did not exist in HTML5.
Finally the standard is evolving to bring this back.
You will be able to have libraries of components
built using various technologies.
You don't care.
It just works.
It doesn't break your page.
You put them in, boom.
ALEXIS MOUSSINE-POUCHKINE: And so we're
talking about in-source code using
tags, which are the implementation.
So as a user of those components, it's very easy.
It's tags attributes and you're done.
MARTIN GORNER: It's easier than that.
It's one tag.
A web component is one tag.
So you have a special button that someone created for you
with beautiful animations, and your company colors,
and whatever.
To use it in your page, you just use
one tag, which is My Custom Button.
ALEXIS MOUSSINE-POUCHKINE: OK.
So web components is actually multiple specs, am I right?
And that is specification by the way,
this is not a Google thing.
This is we're talking something--
MARTIN GORNER: Exactly.
It's four specifications-- Shoadow DOM, Template, Custom
Element, and-- I always forget one.
Template.
ALEXIS MOUSSINE POUCHKINE: Template.
Thank you.
So these are something that is agreed
upon among a number of vendors, and that
makes up the web components.
And then at Google, obviously, we
talk a lot about material design.
And obviously, there's probably an intersection
here between material design, building things for the web
and having this unified way of building and UI, UX.
MARTIN GORNER: So material design is a design philosophy.
I encourage everyone to go and check out google.com/design.
It's all there.
And frankly, I find it a fascinating read.
It reads like a novel.
It's all the philosophy of material design.
ALEXIS MOUSSINE-POUCHKINE: And you're
more of a developer than a designer,
it's probably worth mentioning that it is good for developers
to read this.
MARTIN GORNER: Exactly.
It is.
All developers should be design-minded,
and it's a great resource for developers
who want to become design minded.
And it just happens that Polymer,
which allows the building of reusable components,
comes with a library of paper components
which are based on the principles of material design.
So yeah, it's there.
Try them out.
ALEXIS MOUSSINE-POUCHKINE: Yeah, so Polymer
is the web implementation of what Android Lollipop is
bringing in terms of implementation
of material design.
MARTIN GORNER: Exactly.
Polymer is actually two things.
Polymer, at its core, is a set of polyfills.
Because the web standards we were talking about,
they are not yet supported everywhere.
So the Polymer polyfill brings all browsers to the same level.
ALEXIS MOUSSINE-POUCHKINE: OK.
MARTIN GORNER: This hopefully will go away one day.
And on top of that, there is the value
added of Polymer, which is basically syntactic sugar.
To make the building and using of components
a more enjoyable experience for the developer.
ALEXIS MOUSSINE-POUCHKINE: OK.
Tell us more about that enjoyable experience
of building the component itself.
MARTIN GORNER: So one way to see it is, first,
if you hear about those four specifications--
Imports, Templates, Shadow DOM and the fourth one
which I keep forgetting-- actually
creating your own custom element using the new low level
JavaScript requires-- it's not so complicated,
but it does require quite a few lines of JavaScript.
It's not so simple.
So what Polymer brings is a syntax, using tags,
that allows you to define your own component.
And that is a lot more usable than the low level JavaScript.
It's too much work.
It's nothing fancy, but it's too much
work using the low-level JavaScript.
ALEXIS MOUSSINE-POUCHKINE: OK.
So take the boilerplate out of the way.
So once I have those components, am I
forcing anybody who wants to use one of my components
to use a Polymer?
You know, I'm using all sorts of JavaScript libraries
and frameworks and all that.
Does it play well with all those things?
MARTIN GORNER: Well, that's the beauty.
Those web components, you can build
them using whatever technology, whatever framework is there,
that produces web components.
When a user will import this component into his page,
once the JavaScript that handles all the syntactic sugar
is executed, at the end of the day,
that component ends up in the dump as a web component
that the browser understands natively.
So this means that you will be able to mix and match
components built using various frameworks, and they will work.
And the fact that there are proper components
encapsulated-- their HTML is encapsulated,
their CSS is encapsulated, the JavaScript
that defines their behavior is encapsulated.
They will not break your page.
They should not interfere with each other,
they should not interfere with the other libraries
you're using.
ALEXIS MOUSSINE-POUCHKINE: So encapsulation is great,
but at some point you need to interact with and not
just use it.
Are there ways to customize this and expose
parts of the implementation?
MARTIN GORNER: Exactly.
They have a customizable surface,
but one that you define.
So the simplest way is to define custom attributes.
And you specify what these attributes
are going to do in your component.
For instance, you can have a heading attribute
in a component.
And the definition of the component
will display that heading somewhere
as the CSS and the HTML of this component defines it.
ALEXIS MOUSSINE-POUCHKINE: So from what you're saying--
I mean this is the web.
In terms of, use any tool you want, any framework you want.
We're not forcing people with Polymer to use a new framework,
have this dependency, or use this set of tools, or tool
chain.
You really still are using whatever framework you want.
And at the end of the day, this is all web pages.
MARTIN GORNER: Yes, and I do believe
that in a couple of years, there will
be multiple frameworks for generating web components.
Polymer is one.
Mozilla is creating one actually based on the same polyfills.
Which means that, even now, before web components are fully
implemented in browsers, since they use the same polyfills,
those elements will be compatible, even now.
ALEXIS MOUSSINE POUCHKINE: That's great.
So how mature is this whole thing?
You know, web components, we're using these polyfills now.
But that's certainly a very viable thing.
MARTIN GORNER: So it's very bleeding edge right now.
You can look at the support for the four specs on [INAUDIBLE].
The short version is that those specs are implemented fully
on Chrome only, and they are under various stages
of implementation on other browsers.
So that's totally bleeding edge. it
doesn't work today in a cross browser environment.
The polyfills themselves, in Polymer-- so Polymer
itself is in version 0.4, which means
that the polyfills and their cross browser support
is in the same kind of state.
I would not put it into production today, of course.
You should wait for a 1.0 to put anything into production.
But the promise is that--
ALEXIS MOUSSINE POUCHKINE: There are breaking changes.
MARTIN GORNER: Exactly, there are still breaking changes.
But the promise is, once Polymer reaches 1.0,
those polyfills should be stable.
The libraries of elements that come with Polymer
should be stable.
And you will be able to deploy web components cross
browser thanks to the polyfills.
ALEXIS MOUSSINE-POUCHKINE: That sounds pretty promising.
So in the meantime, you were running a code lab here,
which I believe is available online
which people can follow at their own pace.
So we'll have links in the show notes to that,
and I think that's probably something
that people should check out and--
MARTIN GORNER: Please try it out.
It's a very simple application.
And in it, you can see how fast you
can build something that looks great.
Because it uses the paper elements with material
design behind it.
ALEXIS MOUSSINE POUCHKINE: Great.
So I hope you try this, you follow Polymer as it evolves.
And start using it as soon as you
find it mature enough for your needs.
Thank you, Martin.
MARTIN GORNER: Thank you, Alexis.
And we'll be seeing you online.
Cheers.