Hands on Polymer


By @PascalPrecht

#HannoverJS 26th Sep '13

To makes things clear...



Not enough time, so don't forget to checkout these:


Sup, guys.

This is me
(@PascalPrecht)

me

My boss.
Not as bad as he looks like.

neoskop-logo

heartworking heart

And I animated gifs


Polymer

What is Polymer?

...a new type of library for the web, built on top of Web Components, and designed to leverage the evolving web platform on modern browsers.

In other words...



  • ...a set of polyfills for emerging web platform features

  • ...a next-generation web application framework

  • ...a set of comprehensive UI and utility components

Wait a sec...


WTF Web Components?!

Component model for the Web


  • Template - Defining inert chunks of markup

  • Custom Elements - Defining new custom elements

  • Shadow DOM - Encapsulating DOM subtree

  • HTML Imports - Packaging and loading resources

Architecture Diagram



Polymer UI Elements
Polymer Elements
Mutation Observers
Pointer Events
Shadow DOM
Custom Elements
HTML Imports
Template Binding
Node.bind()

I promise you guys...



This changes EVERYTHING

So let's get started!

Installing Polymer


$ bower install polymer

Gives you platform.min.js and polymer.min.js.

There are also other ways of getting the code.

Basic setup


<!DOCTYPE html>
<html>
  <head>
    <!-- Load Polymer -->
    <script src="polymer.min.js"></script>
    <!-- Load a component -->
    <link rel="import" href="x-foo.html">
  </head>
  <body>
    <!-- 3. Declare component -->
    <x-foo></x-foo>
  </body>
</html>

Example? Sure!



Cheers Eric!

So, how to create such cool elements?

Creating a Polymer element



<polymer-element name="my-element">
  <template>
    <span>Hey there</span>
  </template>
  <script>Polymer('my-element');</script>
</polymer-element>

Usage:


<my-element></my-element>

Result:


Doing it imperative is also possible


<script>
  Polymer('my-element');
  var el = document.createElement('div');
  el.innerHTML = '\
    <polymer-element name="my-element">\
      <template>\
        <span>Hey there</span>
      </template>\
    </polymer-element>';

document.body.appendChild(el);
</script>

<my-element></my-element>

Make sure to add the polymer-element to the document!

Things to keep in mind


  • The name property on a polymer-element is required

  • At lease one dash ("-") is required in the element name

  • polymer-element has to be present in the document to be recognized by Custom Elements polyfill

Adding public properties and methods

Publishing property names


<polymer-element name="my-element" attributes="foo bar">
  <template>
    <span>Hey there</span>
  </template>
  <script>Polymer('my-element');</script>
</polymer-element>

By default, properties defined in attributes are null.

Providing default values


<polymer-element name="my-element" attributes="foo bar">
  <template>
    <span>Hey there</span>
  </template>
  <script>
    Polymer('my-element', {
      foo: true,
      bar: 'defaultString'
    });
  </script>
</polymer-element>

Usage:


<my-element foo="false" bar="hell yeah!"></my-element>

Properties are data-bound!


<polymer-element name="my-element" attributes="foo bar">
  <template>
    <span>Hey there {{bar}}</span>
  </template>
  <script>
    Polymer('my-element', {
      foo: true,
      bar: 'defaultString'
    });
  </script>
</polymer-element>
<my-element bar="HannoverJS guys!"></my-element>

Result:

Binding between components and native elements

<polymer-element name="awesome-bindings">
  <template>
    <input type="text" value="{{name}}" name="foo">
    Hey, my name is {{name}}!
  </template>
  <script>
    Polymer('awesome-bindings', {
      name: 'Bob'
    });
  </script>
</polymer-element>

Change watchers

<polymer-element name="my-element" attributes="foo bar">
  <template>
    <span>Hey there {{bar}}</span>
  </template>
  <script>
    Polymer('my-element', {
      foo: '',
      bar: '',
      fooChanged: function (oldValue) {

      },
      barChanged: function (oldValue) {

      }
    });
  </script>
</polymer-element>

All properties on Polymer elements can be watched by implementing a propertyNameWatched handler

Element lifecycle methods

Custom Element lifecycle callbacks


Polymer('my-element', {

  created: function () {
    // instance is created
  },

  enteredView: function () {
    // instance inserted into document   
  },

  leftView: function () {
    // instance removed from document
  },

  attributeChanged: function (name, oldVal, newVal) {
    // attribute was added, changed or remove   
  }
});

All of these are optional. Naming differences

Stop!


Isn't that kinda Angular?

Well... Kinda sorta


  • Angular uses scope, compile and linking

  • It uses dirty check to stabilize it's model

  • Polymer is actually more the directive part of Angular

There's so much more to cover


Let's have a look at some elements!

More useful resources


Thanks!


Now, go and build great web components!


@PascalPrecht