Chrome, HTML5, JavaScript, mobile, webdev

Polymer And Web Components At I/O 2014

This talk cover three main subjects:

  • State of the union – What has change in the past 3 years
  • Problems solved by web components – When it comes to build complex web applications, there are many ways we can do things better. In this section we will see how/why.
  • Thinking in components – What are the implications when you coming to design and build web apps.

== Psst… It’s in raw format – I will polish it after I/O is over ==

State of the union

Once many years ago… We had HTML4 with all its problems. Later, well few years back, HTML5 was the answer for everything. It specifically, tried to show developers what can be done on the web modern platform and moreover APIs browser vendors could add to help developers boost their productivity. In the past 18 months we saw a lot of things like: templates, shadow dom, data binding etc’. It’s been a long journey. Now, we have Polymer.

What is polymer?

Polymer is opinionated way on top of web components. The great news is that Chrome 36 – is the first browser that will have it all! Opera as well thanks to Blink. Firefox – coming along. IE – there is hope. Safari – They remove it on valentine day! but there are signs they will bring it back into webkit.

What are the main problems do web components solve?

The time before web components was challenging in term of maintaining the building block of your site/app. A good example is the polymer site that is composed from few components. If you open chrome dev-tools on a web app like gmail you will see that HTML didn’t keep up – A huge soup of html tags that are very hard to navigate. The good news are that with custom elements you can declare a new element (e.g tabs, calendar etc’). The usage is powerful as you can extend elements and use other developers work. We integrated with the browser / DOM. Mutation observers and query selectors are now at our hands.
The interoperability give us every framework compatible with the dom.

Html templates

In the past we had mustache and other hacks. But with this new ability we have template at the client side which won’t be visible to the user until we instance it. Think on it as classes and objects. It’s very powerful way to build complex application.

Shadow Dom

Two main aspect to remember:

  • Composibilty.
  • Scoping.

All polymer objects are shadow dom by default.
You add styles to your shadow dom. You can use IDs without worry to scope. It’s private to your element. Later we can add (content) tag and let our users insert their data.


Change the way we develop. We don’t need to re invent the wheel each time. A cool toolbar, tabs, widget etc’ you can just use it. Declare it after you import it and here you go!
Reusable stuff is important. It will let us develop faster with smarter building blocks.
Btw, you can import a component that import anoter one and again and again. So you have now a dependency management as well.

Polymer’s material design elements

Check it out live at: and play with the batmen button at the bottom.

Screenshot 2014-06-26 10.04.49

How to interact with APIs

Screenshot 2014-06-26 10.10.33

By composing elements we building our web app. It’s native to the browser as it is a combination of tags. Then, when we use title or drag able=true it will continue to work.

Google got 250+ APIs and you can find on GitHub – a growing collection of components that will let you work with these APIs with a (big) smile. This collection of components, let developers reuse APIs without starting from zero. As we said, small step to men… I hope we could have all the web elements hosted on GitHub soon.

The (great) slides that Eric made are over  at:

Enjoy you next project on the web.


One thought on “Polymer And Web Components At I/O 2014

  1. Pingback: מה חדש בפיתוח אתרים ואפליקציות רשת | עידו גרין

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s