DANIEL BUCHNER: Cool.
So Daniel Buchner.
I was formerly in Brazil for about five years.
I led all of our initiatives surrounding Web Components
for everything from spec interactions
to how we actually would use the components for things
like making Firefox OS app development easier.
One of my 20% projects while was there
was actually writing X-Tag library.
Weird for a PM, I guess.
It's awesome.
It's our version of Polymer essentially.
It does a little bit less, less than Polymer.
No data binding, stuff like that.
It's simply about Custom Elements.
But I'll walk through what it does do.
So interesting point, we actually
use the same polyfill layer that Polymer does.
So if you already were to be using Polymer
and you wanted to use any Web Component from X-Tag that
was built with this library, all you would need to include
is a small-- the actual library itself,
which is 12k, instead of redundantly loading everything
that Polymer loads.
It takes care of most of the platform stuff.
If you wanted to use a part, you can
include that platform JS and include X-Tag, the library,
on top of that as well.
And it will operate just fine in the presence
of only the native Web Component APIs.
It also enhances those APIs.
It gives you an interface that's just a little bit more
ergonomic.
It links your custom attributes, getters and setters, together.
You saw that with Polymer.
So we have our own little dialect,
our own way of declaring that.
But we do the same thing there.
Also it provides some great event features,
stuff I'll show you in the demo, as well as hooking up
a pseudo system and a mixin API.
So that if you create something like maybe-- iframe
and image have source attributes and you want to just have
the source attribute able to be applied to multiple elements,
we have a mixin called SRC.
And you mix that into any component.
And when you change source, downloads your data.
Makes it available to you.
So it's awesome.
Let's just jump right in the demo.
So you can click.
If anyone's following along, I will--oops.
Actually, it's already loaded.
So here we have our code.
I'm going to walk through it really
quickly just so we understand what we're doing.
This is what an X-Tag created element looks like.
So xtag.register.
This is all maps that document that register element.
You'll see some of the same things
you are used to-- lifecycle.
Obviously those APIs map straight to Web Components.
Created, that's for when element instantiates
any way that it may happen.
Insert and Removed-- this is when the element
is removed from the DOM and inserted in the DOM.
Accessors-- This is how we actually link up our attributes
to setters and getters.
So we have a Super Mario attribute, or Super Mario
getter.
So if you say this.supermario, you're
going to be able to access it there or through the attribute
super-mario.
This is also declaring it as a Boolean attribute.
So it doesn't actually have a value.
But X-Tag handles that for you.
So if you say this.super-mario=true,
it knows to put that attribute on your element without
a value.
We also have methods.
So if you want to say, here's some methods
that are going to go on my custom element,
you can see we have jump and play sound as well as an events
object that does some nice wrapping.
So what tap is actually an event that
wraps click and touch for you, so you
don't have to worry about where you're at.
It just works.
As well as animation end and some other things.
You know, animation end is still prefixed in some browsers.
We go ahead and take care of that for you.
So all you say is I want an [? animation end ?]
event on this element, and we'll make sure
that the right events are handled.
So let's check it out.
Looks pretty familiar.
People are probably used to this.
Let's put Mario into the DOM.
MARIO: It's me, Mario.
DANIEL BUCHNER: So when he enters the DOM,
we have this part of the demos playing here inserted, right?
So that's actually what's happening.
It's going and saying, let's play this sound,
which is a function that's on your custom element.
Let's do some other stuff.
That jump, that tap that we had and the jump function.
Yeah.
Let's do that.
So that's all there.
And Mario, he's feeling a little low.
He might want to become super.
So you can do that.
You can go back.
And remember, it's a Boolean attribute.
So I can say zero, falsy.
X-Tag handles all this for you, converts it
to truthy and falsy.
So I can say zero.
It's going to go back.
Also, just to show you the power of getters and setters,
let's say plus plus also works.
Right?
This is just JS.
It's just the platform, the DOM, stuff
you're going to be used to more and more now that we're
returning back to that platform.
And let's say I'm done with my demo
and I really want him to leave.
MARIO: Hey, you very good.
See you next time.
DANIEL BUCHNER: Yeah.
So this is all stuff you can do with custom elements.
I would encourage you, no matter what you get into,
what library around custom elements-- X-Tag, Polymer,
both-- just get into them.
I mean, the web is the Napoleon Dynamite of the platform,
then surely web components are Pedro.
Your wildest dreams are going to come true.
Just to give you one quick demo because I think
we have a couple more minutes.
When they talk about non-visual text--
this is really important-- think outside the box.
Not everything has to be a UI element.
Here we've actually created something really cool
to do element queries.
So I don't know if you are familiar with media queries.
Think about what if you could have media queries
scope to just a certain element so that max width wasn't
300 pixels of the whole window, it
was 300 pixels of a specific element.
This is a non-visual element that we have that actually--
see how they're morphing?
I'm able to drag them and get different queries.
They're just changing.
Right?
This is all done through a non-visual tag.
And it's handled by the Shadow DOMs.
So all the mechanisms to allow you
that functionality are baked into a non-visual tag.
Explore the DOM.
Explore tags, no matter if they're visual or not.
Thank you for your time.
And questions welcome.
[APPLAUSE]