Transcript
Introduction to Polymer
Egor MiasnikovSolution Practice, EPAM Systems
WHAT IS POLYMER?
WHAT IS POLYMER?
Polymer is a library that makes building applications easier
©Matt McNulty
<X>By Google By Mozilla
Same technologies
•HTML Imports•HTML Templates•Custom Elements•Shadow DOM
HOW DO YOU USE POLYMER?
• Using elements• Create elements
Using Elements
1. Find the element★ Polymer elements library★ GitHub
Using Elements
2. Import custom element
<link rel="import" href="my-custom-element.html">
Using Elements
3. Just use it and that’s it
<my-custom-element></my-custom-element>
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>
Create Elements
1. Register new tag2. Define view3. Sync data
Create Elements - Standard way
<template><div id="lable"><content></content></div>Value: <span id="counter"></span><br><button id="inc">Increment</button>
</template>
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});
Create Elements - Standard way
<my-counter></my-counter>
Create Elements - Polymer way
<head><script type="text/javascript" src="webcomponents.js"
></script>
<link rel="import" href="polymer.html"></head>
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>
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>
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>
Create Elements - Polymer way
<my-counter></my-counter>
Great!
but ….
…. server needed
LINKS
• https://www.polymer-project.org• http://todomvc.com/examples/polymer/index.html
Questions…..
top related