Program

• Polymer Intro
  • WebComponents
  • Polymer

Program

• Polymer
  • Custom Element
  • Template
  • Data Binding
  • Filter
  • Events
  • Change Watchers
  • Routing

WebComponents

Standards for the new web.

• Custom Elements
• HTML Imports
• Shadow DOM
• Template

WebComponents

Custom Elements

a way to define and use custom HTML elements

var CustomElementPrototype = Object.create(HTMLElement.prototype);

CustomElementPrototype.property = value;

CustomElementPrototype.method = function(){
  // ...
};

CustomElementPrototype.createdCallback = function() { /* ... */ };
CustomElementPrototype.attachedCallback = function() { /* ... */ };
CustomElementPrototype.attributeChangedCallback = function(attrName, oldVal, newVal) { /* ... */ };

var CustomElement = document.registerElement('custom-element', {
  prototype: CustomElementPrototype
});
            

WebComponents

Custom Elements

var customElement = document.querySelector('#customElement');

// or

var customElement = document.createElement('custom-element');
document.body.appendChild(customElement);

// or

var customElement = new CustomElement();
document.body.appendChild(customElement);


customElement.item = "...";
customElement.addEventListener('event', function(e) {
  // process event here
});

            

WebComponents

HTML Imports

not really a module system .. just loading stuff

WebComponents

Shadow DOM

encapsulating the DOM!

var shadow = document.querySelector('#container').createShadowRoot();
var template = document.querySelector('#template');
var clone = document.importNode(template.content, true);
shadow.appendChild(clone);
            

WebComponents

Template

more like and inert container than a template.

Polymer

Everything is an element!

• a lib, not a framework on top of WebComponents
• a different syntax to define reusable element .. declarative!
• a set of ready-to-use elements
  • core-elements
  • paper-elements (implements Material design)

Polymer

DOM is the module system.

• A module is an element^*.
• A view is an element^*.
• An application is an element^*.

* either Polymer or plain native WebComponent

Polymer

Custom Element

Custom element area just HTML elements!

Polymer

Template

Polymer

Filter

PolymerExpressions.prototype.myFilter = function( input, arg1, arg2, ...) {
  // Transformation ...
  return output;
}
            

Polymer({
  // ...
  myFilter: function( input, arg1, arg2, ...) { /* ... */ }
  // ...
})

            

{{ expression | myFilter }}
{{ expression | myFilter:arg1:arg2:... }}

            

Polymer

Events

this.fire('event', {
  // event data here
})
            

customElement.addEventListener('event', function(e){
  e.stopPropagation();
  // handle event ...
});
            

Polymer

Change Watchers

Polymer({
  usernameChanged: function validateUsername(){
    // validation code here ...
  }
});
            

Polymer({
  observe: {
    usernameInput: 'validateUsername'
  },
  validateUsername: function validateUsername(){
    // validation code here ...
  }
});
            

Polymer({
  attributeChanged: function (attribute, oldValue, newValue){
    // validation code here ...
  }
});
            

Polymer

Routing

Bad news!

There is no routing in Polymer.

Polymer

Routing

Wait! That's not a bad news!