Polymer

Training


Tunpixel - March 2015

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
Definition

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


Usage (HTML)


            
Usage (JavaSCript)

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!
Definition



  


            
Usage




            

Polymer

Template






            

Polymer

Filter


Definition (global)


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



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

            
Usage


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

            

Polymer

Events


Fire Event (in element definition)

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


            
Catch Event (JavaScript)

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

Polymer

Change Watchers


Property Change Listener

Polymer({
  usernameChanged: function validateUsername(){
    // validation code here ...
  }
});
            
"Advanced" Property Change Listener

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

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!

app-router ...



  
  
  
  
  


            



  


          

References

THE END