[MUSIC PLAYING]
Hey, everyone.
What's up?
It's Rob Dodson.
Today on "Polycasts," I'm going to show you
a very important technique for writing reusable elements.
Plus, I've got a boatload of Polymer goodies to give away.
But you're going to have to stick around
till the end of the episode to figure out
how to get your hands on those.
So first thing's first.
Let's talk reusable components.
All right.
And what I'm going to talk about today
is a very important technique that applies
to both Polymer 0.8 and 0.5.
It's one of those things that I see most beginners get wrong,
because frankly, it's just really confusing.
So let me give you a scenario.
Let's say we have a folder structure.
We're creating an element that we
want to share with some folks.
And this is the look of our project so far.
So we've got tiny-badge.html.
This is the tag that we're going to create.
And then inside of here, we've got our bower_components
directory.
And inside of there, we've got polymer.html.
Now, if I open the definition for tiny-badge.html,
you'll see up here at the top, the first thing I'm doing is
I'm importing polymer.html.
And I'm importing it from that bower_components directory.
So I'm basically hard-coding the path bower_components
in my elements definition.
Let's say I'm happy with the look of tiny-badge.
I want to share it with the world.
So I publish it to the Bower registry.
I tell everyone how cool it is, and all my friends
go and install it.
Let's look at what their project looks like, OK?
My buddy installed tiny-badge.
It ends up inside of his bower_components directory.
So now they've got polymer and tiny-badge
as siblings in their bower_components directory.
But wait a sec.
If I open the definition for tiny-badge.html,
you'll recall that I've got this hard-coded bower_components
path in here.
So this element is expecting a sibling,
bower_components directory.
It's expecting something to exist right at this level.
But it doesn't, right?
We're inside of our friend's bower_components structure,
because they installed our components.
So this path right here is going to give us a big, fat 404.
And our friend is going to be super bummed out.
Now, we can change this.
We can totally fix this.
We can just change this path to a relative path.
And we sometimes refer to this as using the canonical path.
The idea here is that, if you're using a front-end package
manager, all of your packages are going to be siblings.
And so if you just use a dot-dot-slash relative path,
you're basically saying, hey, I'm
referring to something that is in one of my sibling
directories.
So that's why we call it canonical,
because you're always sort of sibling to your dependencies.
But hold on a second.
Let's rewind a bit.
This is our original project structure.
This is how we were developing our component.
And the whole reason why we had this hard-coded
bower_components path was because we
needed to be able to preview this thing while we
worked on it.
If we change this to a canonical path here,
then we can't preview our element.
So now we're in this really crappy dilemma
of either being able to preview our component as we're working
on it or being able to actually share it
with people once it's finished.
And this is really not a great dilemma to have.
So last year, we put together an article
which explained a really clever directory structure plus Bower
configuration hack you could use to develop and preview
a sharable element.
What I'm about to show you is a new tool
created by a member of the Polymer team
which removes a lot of this craziness
and lets you develop your element in a very sane fashion.
So let's check that out.
So this is the element that we're going to be creating.
Again, it's this sort of tiny-badge element.
You could imagine it's something you might toss inline
into a project, like a list or something like that,
to let someone know they've got some emails
or some alerts piling up.
And the first thing I'm going to do is create a bower.json file.
I'm going to give my element a name.
And I'm going to include some dependencies.
So I'm asking for webcomponentsjs and polymer.
Over in my terminal, I'm going to run
bower install to pull down all of those dependencies.
The next thing I'm going to do is install
a library called polyserve.
So I'm using the npm command.
I'm doing a global install to pull down polyserve.
And what polyserve is is basically
a server that is going to let you write your element using
canonical path URLs.
It then intercepts those URLs, and it serves them
from your local bower_components directory.
It was created by a member of the Polymer team
to try and work around this dilemma of not being able
to preview and share the same component.
So I'm going to boot up the polyserve server.
And you'll see here that it started on port 8080,
and it's serving tiny-badge from the path
localhost:8080/components/tiny badge.
And over in my project, I'm going
to create a tiny-badge HTML file.
And the first thing I'm going to do
is import the definition for Polymer.
And you'll note that I'm going to use the canonical path when
I do this.
Then I'm going to give my tiny-badge
a don-module with an ID that matches
the name that I'm registering.
I'm going to throw a content element inside of the template
there.
And lastly, I'm going to call the Polymer constructor
and pass in the tiny-badge name.
I'm also going to include a style tag.
And this is just to give my tiny-badge a little bit of look
and feel.
You'll see that I'm using that host selector
from the previous episodes.
So that way, I can target the element itself.
Over in my demo HTML file, I'm going to start off by including
a script tag for webcomponents-lite.js.
And then I'm going to include an HTML
import for my tiny-badge element definition.
Lastly, I'm going to include a style tag.
And I'm just going to use a nicer font family on the page,
so the badge looks a little nicer.
And then down in my body, I'm going to create a list.
And inside this list, I will drop
in a tiny-badge element in line there so that we
can create a fake inbox.
Now, if I go over to Chrome and preview everything,
you can see that I've got the tiny-badge showing up.
If you look at the URL that I'm using here,
it's localhost:8080/components/tiny
badge/demo.html.
And the nice thing is that I'm able to develop this component.
I'm able to preview it.
But I've written its dependencies
using canonical path URLs.
So this component is also ready to be published to the Bower
registry.
It's ready to be shared with the whole world.
So there you have it.
Developing Polymer elements just got way simpler.
Now, normally, this is the part where I sign off,
and I tell you to subscribe to the channel.
But today I've got a very special announcement.
We've got a whole bunch of just killer Polymer swag
that we want to give away to a few of you lucky viewers.
So here is how this is going to work.
You leave questions about Polymer down in the comments.
And each time we shoot a new episode, I'm going to go back,
pick some of the best questions to answer on air.
And if your question gets picked, you get some swag.
We got hoodies, stickers, toys, laptop skins-- you name it.
If you want an autographed photo of me with a corgi or a walrus,
we can do that.
So get your thinking caps on.
Drop me a line in the comments.
As always, thank you so much for watching.
And I'll see you next time.
Hey, Polycasters.
It's Rob here, letting you know I've got a brand
new show called "LazyWeb."
It's all the highlights from last week's news
on the web bundled up for your viewing pleasure.
You can follow this link over here to check it out.
Be sure to subscribe.
Let us know what you think on the Twitters.
And as always, thanks for watching.