OK guys, good evening.
So today we're going to talk about web components,
and all this chance to create the future.
My name is Zeno Rocha.
Here's my Twitter.
If you want to send any feedback,
you know, this talk sucks, this talk is awesome,
if you have any questions, just let me know.
Just ping me on Twitter, I'll be more than happy to answer you.
And I'm from Brazil, which is kind of crazy,
because I flew like 16 hours to be here for a 15 minute talk.
[APPLAUSE]
And I'm extremely happy to be here with you today.
It's just amazing to see all those people together
to talk about web components and discuss this new thing.
And today's basically about those three things.
It's about how to create your element,
it's about how to learn how to create your element,
and it's about sharing your element and all your work
to the world.
When I first started learning web components
was in the beginning of last year.
And I was learning web components,
was pretty amazed by it, but then
I saw those two talks from Alex and Matthew,
and then this other talk from Eric on Google I/O last year.
And I was completely amazed.
It's like, oh my god, this thing is crazy.
Web component's crazy.
It's going to change everything.
I really need to study this thing.
I was just like that guy, exactly same feeling.
And I started learning web components,
creating my new things.
But at that time, there was no starter kit.
So there were a couple tutorials to teach you
how to create your element, but there was no starter kit--
something, some boilerplate code, something like that,
that I could just jump in and start creating my elements.
So since there was no starter kit,
I decided to create our own.
So if you want to create your element using Polymer nowadays,
you can just go to github.com/webcomponents/polymer-boilerplate,
and we have this boilerplate for you, which is great.
There's a lot of stuff that you can use it.
If you want to use X-Tag, no problem, we got you covered.
It's basically the same web component but using X-Tag.
But if you don't want to use any of those solutions,
you want to see how web components will interact just
using plain JavaScript, just vanilla JavaScript,
we got another one, which is element boilerplate.
So those three repos, they tried to solve the exact same problem
using those different solutions.
And you can just go ahead, see it,
and decide which one is better for your problem.
And what's included in those boilerplates?
So we encourage a set of best practice.
We really want you to share elements on Bower, for example.
We want you to have some Grunt tasks
that you can put your live demos online.
We want some lifecycle call backs,
which are pretty useful when you're developing.
So these boilerplates contain those kinds of things.
But, still, that's not totally awesome,
because you go to GitHub, you click on Fork,
and then you need to make some edits.
You need to do some find and replace
and comments to change and create your element.
So we decided, hey, we can automate this thing.
And we created a Yeoman generator
that can automate even more live for you.
So it's on webcomponents/generator-element.
And let me show you how it works.
So let me create a folder here.
It's going to be called my element.
Nice.
And then you install it.
And after you install it from NPM, all you need to do
is type yo element.
And we show you this little awesome welcome thing
that I took like three hours to create.
And then you have this first question.
What do you want to use to create your element?
You want Polymer, you want X-Tag,
or you just want vanilla JS?
I just want Polymer.
My element will be called my element.
Yeah, I want lifecycle callbacks.
And in three seconds, you have your element created.
Let's check.
What is this?
So it's just the element itself.
It's important Polymer.
They have the Polymer definition here
and the lifecycle callbacks.
So this is pretty great.
But this is just the element.
I want to create a repository on GitHub
that I can share with everybody and contains my element.
If you type yo element repo, then you've
got this awesome welcome message.
And almost the same questions, but
what's the GitHub repository you want?
What's your GitHub user name?
What's the name of your element?
What's the description?
Life cycle callbacks?
Yes.
I want to some useful Grunt tasks.
And then it generates all the files for you.
It runs NPM install and Bower install,
and then grabs all the dependencies, and boom.
If I open this in Sublime, you have the application loading
platform loading your element, importing your element,
and now you have your element with Bower and the node modules
already installed for you.
So this pretty great, right?
So it's so easy to create your element nowadays.
So, OK, we got creating elements covered.
So when we put together this boilerplate, lots of people
started to create their elements.
And they end up doing crazy things.
So
One of the things that people have
been doing-- so this library is tracking.js.
It's a library created by Eduardo Lundgren,
he works with me at Liferay.
And it's a library to do color recognition and face detection.
And we thought, hey, what if we wrap this library
into an element?
Wouldn't that be cool?
Yeah, probably.
So I got these PlayStation controls here, I
have some colors, magenta, cyan, other ones.
And I hope this works, because this really
depends on the light.
So let's see how it goes.
No, you can turn it on, no problem.
So, first.
Let's do some changes in the code.
Let me explain to you what is this about.
So I have a video, and I'm extending this video
to create a video track.
So my element is video tracking.
I'm expanding it and creating a new thing.
And I added two new attributes.
The first one is what, what do you want to track?
I want to track a color.
And what's the color?
Well, the color is cyan.
Can you turn on the lights, please?
So this is cyan.
I need to do it.
Oh, no.
Ooo.
Come on, that's awesome, guys.
[APPLAUSE]
All you need to do is this.
But, yeah, I don't want to track colors.
I just want to track a human.
But what part of a human do you want?
I want the frontal face.
The frontal face seems nice.
If I go here, and, ooo.
Ah, no.
Why zoom.
So it's here.
It's working.
[APPLAUSE]
Imagine how hard it will be to create an element that
makes face detection, right?
Peter, can you turn on the lights?
Yeah.
Because this next one really depends on the light.
So another element that we created
is the SF-HTML5 element, which is pretty useful.
You're going to see how useful it is.
So what we're doing here is just importing platform JS.
We're importing the element, some CSS for the demos.
And if I open this on Firefox, it's just this.
OK, it's just this CSS thing going on.
But if I turn off the lights.
Ooo.
[APPLAUSE]
OK.
So what this element is doing under the hood
is using the device light API, which
has just landed on Firefox.
And we detect how much light has in his room,
and then we do something.
In this case, it's just doing some CSS changes.
So, yeah, it's so awesome.
You have all those things, and people
started to create amazing things, you know?
Today we saw a bunch of crazy things
that people are doing with web components.
But we needed to show to people that those elements exist.
So we needed a place to show elements.
We needed a place for people to hey,
take a look this is what I created using web components.
So we got some friends together last year,
and we created this thing called customelements.io.
I don't know if any of you ever heard about it.
Has someone ever heard about it?
[APPLAUSE]
Oh, that's awesome.
So we created this back on August, and it's been crazy.
There's almost 200 elements in this gallery,
more than 100,000 page views on the website from all
over the world.
It's just one page on the website, so yeah, it's nice.
And now people are able to share their elements.
And we have a place to put those things.
Because before that, we had, like, where
should I place my element?
Should I put it on NPM, Bower, or any other package manager?
And OK, Bower seems like the best decision
to put your elements, right?
It's the front-end package manager.
But how can you find web components inside of Bower?
No, there's this huge thing, ecosystem,
with lots of front end packages.
But you can't filter which ones are really web components.
So we made this thing to put elements into the world.
And how do you add your element there?
It's pretty easy.
On your bower.json file, all you need to do
is include the web components keyword, th this one here.
When you include this keyword, you register your package.
And then it will appear on customelements.io.
So it's really, really easy.
So we know how to create elements.
We know how to share them.
But how do you learn about web components?
If there was no SF-HTML5 for you, how would you learn?
What's the main reference to learn web components?
Should I go to Polymer website?
Or should I go to X-Tag website?
Should I go to some blog posts that I find on the web,
should I go to HTML5 Rocks, what's the main reference
to learn web components?
So again, we got some friends together,
friends like Addy Osmani, which really helped in this project,
and lots of awesome guys that talked here today and are doing
amazing stuff using web components.
And we are really excited to present this to you.
We have been working on this project since last year,
and we decided to choose this conference
to show it to you guys and present for the first time.
And this project is called WebComponents.org.
It's not available on webcomponents.org now,
so if you want to reach, you need
to reach webcomponents.github.io.
You can blame the guys' work from Google
that didn't set up the domain yet.
But this place is what we want to give to the community
to learn and to share things about web components,
and gather best practices, all articles about web components,
these packs of web components, the browser
support, everything, presentations.
We want to put content there that people
can learn what web components is.
And we want to put the best content there.
So what's web components all about?
It's about gathering best practice, discussing
API implementations, like how should I build a carousel?
So everybody will start to building
their own carousel elements, right?
So what's the best way to build it?
We want to introduce useful stuff,
like the Yeoman generator or the boilerplates.
And we want to highlight articles and talks
like those we have seen today.
So now that's it.
We got covered everything.
And before leaving you, I just want
to say that the best way to predict
the future is to create it.
And that's the exact same thing that we are doing right now.
We are not just waiting for someone
to create the future for us.
We are here to define how web components will be.
We are here to define the future of the web platform.
That's it.
Thank you.
[APPLAUSE]
One quick thing.
Oh, the mic is off.
So the slides are here, bit.ly/wc-slides.
And I got stickers.
You can find me after Rob's talk,
and I can give you some stickers.
See you guys.
[APPLAUSE]
All right.
Thank you.