Hi, I'm Addy Osmani.
I'm a Senior Developer Relations Engineer working on Polymer.
Today we're going to take a look at how to save you
time building components for the web in fewer lines of code.
Before we dive in, let's talk about web components.
They're still pretty new to a lot of people.
So let's make sure we're all on the same page before we go
and build something.
Web Components are an emerging set of standards
that allow you to build new HTML elements.
The APIs are Templates, Custom Elements, Shadow DOM,
and HTML Imports.
Each one of these APIs is useful individually.
But when used together, they enable
developers to be really productive.
So Polymer helps developers stay more productive.
What do we mean by productivity?
Well, take a component like tabs, a pretty common place
component on the web.
You've probably used a tab component at some point.
Writing a tab component on the web has changed over time.
Years ago, we started off in markup
with a little bit of JavaScript.
But since then, we've piled more and more and more
and even more of our logic into JavaScript.
Maybe this isn't the best approach.
Look at the suffering it causes.
Perhaps there's a better way of doing this.
Using web components with Polymer,
we could rewrite those nasty-looking widgets
using a custom HTML element, which is much more readable.
So, here's what tabs would look like if they were just HTML.
It's much easier to see what's going on.
The code is declarative.
It's legible.
And it's descriptive.
Simple, right?
My-tabs is just an element, something componentized
that's readable, semantic, and describes
exactly what it offers.
Components are awesome because they
force us to think about constructing
web apps as a composition of components,
rather than a mass of tightly coupled pieces.
We're no longer looking at a soup of divs and script.
Now, this is where Polymer comes in.
Polymer is a new type of library for the web that
allows you to easily build applications
based on Web Components.
It includes a set of polyfills for the native APIs.
So you can start using them today.
What Polymer really does is it provides
a convenient and opinionated layer on top of vanilla web
components, with features like Two-way data
binding, declarative event handlers, property observation,
and touch gestures, to help you quickly build powerful apps.
Great.
So let's build a tabs element using Polymer.
Let's first take a look at our completed element.
Our control is both beautiful and quite functional.
We begin building our first element using seed-element,
a boilerplate project providing sample code and structure
to help you get off the ground quickly.
The boilerplate is available on GitHub at the following link.
Great.
Once you're on the page for the repository,
click the Download ZIP button to download the boilerplate
to your machine.
Next, create a new directory called development
and a sub-directory called my-tabs.
Extract the contents of the zip file to your my-tabs folder.
Next, we'll rename the files from the boilerplate,
replacing seed-element with my-tabs.
It should look like this.
So, my-tabs.css and my-tabs.html.
Great.
Next, let's talk about dependencies
for creating our element.
So, this is Bower.
It's a package manager that can be used to install and manage
front end dependencies.
Before you can begin working on your element,
you'll want to make sure you have Bower installed.
Follow the instructions on the Bower site
for installing the tool.
If you have Node.js installed, this
can typically be done by running this command.
Bower will install all the different modules we'll need.
You can now install the dependencies
needed by untitled element by running
bower install from the my-tabs directory.
Navigating back a level, this will add a few dependencies
to your development directory, Polymer, the web component
polyfills, and one or two others we'll be using for docs.
You're now ready to begin working on the my-tabs element.
So, here's what the boilerplate seed-element ships with,
looks right out of the box.
For my-tabs, we won't directly be using JavaScript.
So you can add the noscript attribute to our element.
This informs Polymer that we won't
want to interact with JavaScript for this particular element.
Now, a tab element can actually be
built using a number of existing Polymer elements.
And this is pretty powerful.
You can compose whole elements and apps
from elements written by other people.
You can find our existing elements
over on the Polymer site at the following address.
For example, core-selector is an element
that manages a list of items that can be selected.
They can be divs, spans, or something else.
Here's a quick example of it in action.
You can select items in a list and trigger an active state
on them.
Magical.
So you can install this element for use
in my-tabs using the following line.
It'll then go and fetch your dependency from Bower.
Once installed, you can reference this new import
inside of my-tabs.
So core-selector can now be used in this page.
Next inside of your element definition at the line,
extends="core-selector".
This tells Polymer that you'd like
to extend the functionality of the selector element.
This lets us get its functionality for free.
Quick note.
Styles defined within your element
get scoped, meaning they don't leak into the rest of the page.
Shadow DOM lets us let in as much or as little
of the outside world as we choose.
In this case, our styles are scoped
within the confines of the my-tabs element.
We can use this fact to apply a little bit of Flexbox magic
inside our element.
Now we're going to add in one more import called layout.html,
which is basic and will allow our element
to be a Flex container.
A Flex container is basically an element
that might contain children, in our case, tabs,
that we'd like to make flexible.
One thing the Polymer team believe in,
in this brave new world of Web Components,
is that everything is an element.
That's one reason we're implementing these concepts
as elements.
It's pretty powerful when you're just configuring components
using attributes.
So going back to my-tabs, you want
to enable a way to render children
of your my-tabs element to define individual tabs.
So working with these guys, the child elements.
Now this is achieved by adding in the shadow tag
inside of your template.
These represent something called a Shadow DOM insertion point.
Now Shadow DOM refers to the ability of the browser
to include a sub-tree of DOM elements
into the rendering of a document,
but not into the main document DOM tree.
This provides CSS and DOM encapsulation.
Fantastic.
So now we have the final version of the code for our custom tab
element.
Before we can use our new tab element,
you'll want to edit demo.html to add in the relevant markup.
So let's highlight them.
This is what it looks like with my-tabs in place
before we've added any actual tabs to our element.
Check that any references to seed-element now point
to my-tabs.html instead.
Next, we add in the markup for three new tabs inside our tabs
element.
Here we're just using some simple spans.
So each span represents a new tab.
Great.
So let's see what we've built.
Go and run a new preview server at the command line
to preview your new custom element.
And boom, there we have the my-tabs element.
It's beautiful and it's functional.
You can now reuse this element across pages
with encapsulation and a clean markup.
I've never seen anything that looks so elegant.
Now that we've created our my-tabs element,
let's deploy it to GitHub pages so you
can share it with your friends.
Elements can be shared, but we'll
be working with two branches, master and GitHub pages.
We want to ensure that our master branch contains
the bare minimum of code that needs
to be consumed by other apps or elements.
Now your GitHub pages branch should contain a landing page
and checked independencies, demos, and documentation.
First, create a new repository on GitHub for your element.
And push the source for my-tabs to this repository.
Navigate back to your development directory
from the terminal.
And create a new temporary directory and CD into it.
Next, grab a copy of Polymer's Official Helper Tools.
You can git clone them using the following one liner.
Great.
You should now have the tools on your system.
Take note of where they've been cloned to.
Finally, run the gp.sh script found in the tools directory,
passing in your GitHub username and the name of your element.
This will create a gh-pages branch
on GitHub containing a landing page
for your element and a link to a demo for it.
It'll also include all of the dependencies needed
to preview your element live.
Great.
So this is where my landing page is now live.
And if you've been following along,
yours should be live on a very similar address
with your username instead of mine.
Let's take a closer look at the page.
It's pretty.
Our landing page can contain examples and a summary
of the attributes and events supported by our element.
Now these are all straight from comments in our code.
And if your friend's click the demo button at the very top,
it'll take them straight to your demo page.
And there we go.
Tabs.
Our element is both beautiful, functional, and awesome.
Hooray, I feel like a real engineer now.
Web Components with Polymer present an incredibly exciting
step forward for re-usability.
And there's a whole world of elements
out there just waiting to be built.
To get started, go check out polymer-project.org .
Now go out and help componentize the web today.
Thank you.