Download - Introduction to Polymer
![Page 1: Introduction to Polymer](https://reader034.vdocument.in/reader034/viewer/2022042607/55a2c2271a28abbf018b457a/html5/thumbnails/1.jpg)
Introduction to Polymer
Egor MiasnikovSolution Practice, EPAM Systems
![Page 2: Introduction to Polymer](https://reader034.vdocument.in/reader034/viewer/2022042607/55a2c2271a28abbf018b457a/html5/thumbnails/2.jpg)
WHAT IS POLYMER?
![Page 3: Introduction to Polymer](https://reader034.vdocument.in/reader034/viewer/2022042607/55a2c2271a28abbf018b457a/html5/thumbnails/3.jpg)
WHAT IS POLYMER?
Polymer is a library that makes building applications easier
©Matt McNulty
![Page 4: Introduction to Polymer](https://reader034.vdocument.in/reader034/viewer/2022042607/55a2c2271a28abbf018b457a/html5/thumbnails/4.jpg)
![Page 5: Introduction to Polymer](https://reader034.vdocument.in/reader034/viewer/2022042607/55a2c2271a28abbf018b457a/html5/thumbnails/5.jpg)
<X>By Google By Mozilla
![Page 6: Introduction to Polymer](https://reader034.vdocument.in/reader034/viewer/2022042607/55a2c2271a28abbf018b457a/html5/thumbnails/6.jpg)
![Page 7: Introduction to Polymer](https://reader034.vdocument.in/reader034/viewer/2022042607/55a2c2271a28abbf018b457a/html5/thumbnails/7.jpg)
Same technologies
•HTML Imports•HTML Templates•Custom Elements•Shadow DOM
![Page 8: Introduction to Polymer](https://reader034.vdocument.in/reader034/viewer/2022042607/55a2c2271a28abbf018b457a/html5/thumbnails/8.jpg)
HOW DO YOU USE POLYMER?
• Using elements• Create elements
![Page 9: Introduction to Polymer](https://reader034.vdocument.in/reader034/viewer/2022042607/55a2c2271a28abbf018b457a/html5/thumbnails/9.jpg)
Using Elements
1. Find the element★ Polymer elements library★ GitHub
![Page 10: Introduction to Polymer](https://reader034.vdocument.in/reader034/viewer/2022042607/55a2c2271a28abbf018b457a/html5/thumbnails/10.jpg)
Using Elements
2. Import custom element
<link rel="import" href="my-custom-element.html">
![Page 11: Introduction to Polymer](https://reader034.vdocument.in/reader034/viewer/2022042607/55a2c2271a28abbf018b457a/html5/thumbnails/11.jpg)
Using Elements
3. Just use it and that’s it
<my-custom-element></my-custom-element>
![Page 12: Introduction to Polymer](https://reader034.vdocument.in/reader034/viewer/2022042607/55a2c2271a28abbf018b457a/html5/thumbnails/12.jpg)
Example
<core-ajax auto url="http://gdata.youtube.com/feeds/api/videos/" params='{"alt":"json", "q":"chrome"}' handleAs="json" on-core-response="{{handleResponse}}“></core-ajax>
![Page 13: Introduction to Polymer](https://reader034.vdocument.in/reader034/viewer/2022042607/55a2c2271a28abbf018b457a/html5/thumbnails/13.jpg)
Create Elements
1. Register new tag2. Define view3. Sync data
![Page 14: Introduction to Polymer](https://reader034.vdocument.in/reader034/viewer/2022042607/55a2c2271a28abbf018b457a/html5/thumbnails/14.jpg)
Create Elements - Standard way
<template><div id="lable"><content></content></div>Value: <span id="counter"></span><br><button id="inc">Increment</button>
</template>
![Page 15: Introduction to Polymer](https://reader034.vdocument.in/reader034/viewer/2022042607/55a2c2271a28abbf018b457a/html5/thumbnails/15.jpg)
Create Elements - Standard wayvar template = document.querySelector('template'),
MyCounterProto = Object.create(HTMLElement.prototype);MyCounterProto.createdCallback = function (){
var self = this,root = this.createShadowRoot();
root.appendChild(document.importNode(template.content, true));
var counterValue = this.getAttribute('counter') || 0,counter = root.querySelector('#counter');…..
new MutationObserver(function (mutations){mutatins.forEach(function (mutation) {
…..})
}).observe(this, {attribute: true});};MyCounter = document.registerElement('my-counter', {
prototype: MyCounterProto});
![Page 16: Introduction to Polymer](https://reader034.vdocument.in/reader034/viewer/2022042607/55a2c2271a28abbf018b457a/html5/thumbnails/16.jpg)
Create Elements - Standard way
<my-counter></my-counter>
![Page 18: Introduction to Polymer](https://reader034.vdocument.in/reader034/viewer/2022042607/55a2c2271a28abbf018b457a/html5/thumbnails/18.jpg)
Create Elements - Polymer way
<head><script type="text/javascript" src="webcomponents.js"
></script>
<link rel="import" href="polymer.html"></head>
![Page 19: Introduction to Polymer](https://reader034.vdocument.in/reader034/viewer/2022042607/55a2c2271a28abbf018b457a/html5/thumbnails/19.jpg)
Create Elements - Polymer way
<polymer-element name="my-counter"><template>
<style>.....</style><div id="lable"><content></content></div>Value: <span id="counter">{{counter}}</span><br><button id="inc" on-tap="{{increment}}">Increment</button>
</template><script>…..</script>
</polymer-element>
![Page 20: Introduction to Polymer](https://reader034.vdocument.in/reader034/viewer/2022042607/55a2c2271a28abbf018b457a/html5/thumbnails/20.jpg)
Create Elements - Polymer way
<polymer-element name="my-counter"><template>
<style>.....</style><div id="lable"><content></content></div>Value: <span id="counter">{{counter}}</span><br><button id="inc" on-tap="{{increment}}">Increment</button>
</template><script>…..</script>
</polymer-element>
![Page 21: Introduction to Polymer](https://reader034.vdocument.in/reader034/viewer/2022042607/55a2c2271a28abbf018b457a/html5/thumbnails/21.jpg)
Create Elements - Polymer way<polymer-element name="my-counter">
<template>….</template><script>Polymer('my-counter', {
publish: {counter: 0},increment: function (){
this.counter++;}
});</script>
</polymer-element>
![Page 22: Introduction to Polymer](https://reader034.vdocument.in/reader034/viewer/2022042607/55a2c2271a28abbf018b457a/html5/thumbnails/22.jpg)
Create Elements - Polymer way
<my-counter></my-counter>
![Page 24: Introduction to Polymer](https://reader034.vdocument.in/reader034/viewer/2022042607/55a2c2271a28abbf018b457a/html5/thumbnails/24.jpg)
Great!
![Page 25: Introduction to Polymer](https://reader034.vdocument.in/reader034/viewer/2022042607/55a2c2271a28abbf018b457a/html5/thumbnails/25.jpg)
but ….
![Page 26: Introduction to Polymer](https://reader034.vdocument.in/reader034/viewer/2022042607/55a2c2271a28abbf018b457a/html5/thumbnails/26.jpg)
…. server needed
![Page 27: Introduction to Polymer](https://reader034.vdocument.in/reader034/viewer/2022042607/55a2c2271a28abbf018b457a/html5/thumbnails/27.jpg)
![Page 28: Introduction to Polymer](https://reader034.vdocument.in/reader034/viewer/2022042607/55a2c2271a28abbf018b457a/html5/thumbnails/28.jpg)
![Page 29: Introduction to Polymer](https://reader034.vdocument.in/reader034/viewer/2022042607/55a2c2271a28abbf018b457a/html5/thumbnails/29.jpg)
LINKS
• https://www.polymer-project.org• http://todomvc.com/examples/polymer/index.html
![Page 30: Introduction to Polymer](https://reader034.vdocument.in/reader034/viewer/2022042607/55a2c2271a28abbf018b457a/html5/thumbnails/30.jpg)
Questions…..