Introduction to Polymer Egor Miasnikov Solution Practice, EPAM Systems
Introduction to Polymer
Jul 13, 2015
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
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…..
Related Documents
