1.
Polymer
by Vitalii Perehonchuk,
Software Developer at ElifTech

2.
www.eliftech.com
Polymer
Open-source JavaScript library for building web
applications using Web Components.

3.
www.eliftech.com
WebComponents
[W3C working draft]
1. HTML templates
(inert chunks of HTML in <template> tags)

4.
www.eliftech.com
WebComponents
[W3C working draft]
2. Custom Elements:
API to define new HTML elements
(from scratch and extending built-ins)

5.
www.eliftech.com
WebComponents
[W3C working draft]
3. Shadow DOM:
Encapsulated DOM and styling

6.
www.eliftech.com
WebComponents
[W3C working draft]
4. HTML imports

7.
www.eliftech.com
Examples
<link rel="import" href="../../bower_components/polymer/polymer.html">
<dom-module id="polymer-1-cat">
<template>
<style>
:host {
display: block;
}
</style>
<span>I'm a kitten!</span>>
</template>
<script>
let Polymer1Cat = Polymer({
is: 'polymer-1-cat',
properties: {
name: {
type: String,
value: 'Kitten'
},
},
});
</script>
</dom-module>

8.
www.eliftech.com
Install Polymer
mkdir "polymer-1-kittens" && cd "polymer-1-
kittens"
bower i polymer@1 --save
npm i -g polymer-cli
polymer init

9.
www.eliftech.com
Data interpolation
<template>
<h2 class="name">[[name]]</h2>
</template>
Polymer({
is: 'polymer-1-cat',
properties: {
name: {
type: String,
value: 'Kitten',
},
},
});

10.
www.eliftech.com
Data interpolation
<template>
<h2 class="name">[[name]]</h2>
<img src$="[[imgUrl]]" />
</template>

11.
www.eliftech.com
<template is=”dom-repeat”>
<template is="dom-repeat" items="[[cats]]">
<a href$="#/[[item.name]]">[[item.name]]</a>
</template>

12.
www.eliftech.com
Need AJAX?
bower i iron-ajax --save
<link rel="import" href="../../bower_components/iron-
ajax/iron-ajax.html" />
<iron-ajax handle-as="json" id="request-cats"
on-response="initCats" url="/assets/cats.json"></iron-
ajax>

13.
www.eliftech.com
Need five-star rating?
bower i star-rating --save
<star-rating icon='heart' on-click="_stop" on-rate-
changed="setRating"></star-rating>
<!-- -//- -->

14.
www.eliftech.com
Need routing?
bower i app-route iron-pages --save
<app-location route="{{route}}" use-hash-as-path></app-location>
<app-route data="{{routeData}}" pattern="/:name" route="{{route}}"></app-route>
<template is="dom-repeat" items="[[cats]]">
<a href$="#/[[item.name]]">[[item.name]]</a>
</template>
<iron-ajax handle-as="json" id="request-cats" on-response="initCats"
url="/assets/cats.json"></iron-ajax>
<iron-pages id="cat-list" selected="[[routeData.name]]" attr-for-selected="name">
<template is="dom-repeat" items="[[cats]]">
<polymer-1-cat age$="{{item.age}}" img-url$="{{item.imgUrl}}"
name$="{{item.name}}"></polymer-1-cat>
</template>
</iron-pages>

15.
www.eliftech.com
Google trends

16.
www.eliftech.com
Popularity

17.
www.eliftech.com
Usage: YouTube

18.
www.eliftech.com
Usage: Google Play Music

19.
www.eliftech.com
Usage: Chrome Platform Status

20.
www.eliftech.com
Polymer-1-kittens

21.
www.eliftech.com
Webpack loader
{
test: /.html$/,
use: [
{
loader: "babel-loader",
},
{
loader: "polymer-webpack-loader",
},
],
}
npm i polymer-webpack-loader --save-dev

22.
www.eliftech.com
Polymer-1-cat.html: template
<h2 class="name">[[name]]</h2>
<img src$="[[imgUrl]]" />
<star-rating icon='heart' on-rate-changed="setRating" on-
click="_stop"></star-rating>
<h4 class="age">[[age]] years</h4>

23.
www.eliftech.com
Polymer-1-cat.html: template
ADULT_CAT_PURR_URL = 'http://ronsen.org/purrfectsounds/purrs/canolli.mp3'
KITTEN_PURR_URL = 'http://ronsen.org/purrfectsounds/purrs/max.mp3'
let Polymer1Cat = Polymer({
ready() {
let rate = localStorage.getItem(this.name);
if (rate) {
this.$$("star-rating").rate = rate;
}
},
is: 'polymer-1-cat',
listeners: { 'click': 'purr', },
properties: {
age: { type: Number, value: 0, },
imgUrl: {
type: String,
value: "https://cdn1.iconfinder.com/data/icons/misc-1/100/Untitled-2-15-512.png",
},
isKitten: {
type: Boolean,
computed: '_isKitten(age)',
},
isPurring: { type: Boolean, value: false,
},
name: { type: String, value: 'Kitten'
},
purrAudio: { type: Audio, computed:
'_getPurrAudio(purrUrl)', },
purrUrl: { type: String, computed:
'_getPurrUrl(isKitten)', },
},
purr(event) {
if (this.isPurring) {
this.purrAudio.pause();
this.isPurring = false;
this.classList.remove('purring');
} else {
this.purrAudio.play();
this.isPurring = true;
this.classList.add('purring');
}
},
_getPurrAudio(purrUrl) { return new Audio(purrUrl); },
_getPurrUrl(isKitten) { return isKitten ? KITTEN_PURR_URL :
ADULT_CAT_PURR_URL; },
_isKitten(age) { return age <= 1; },
setRating(event) {
if (event.detail.value !== 0) {
localStorage.setItem(this.name, event.detail.value)
}
},
_stop(event) { event.stopPropagation(); }
});

24.
www.eliftech.com
Polymer-1-kittens.html: template
<app-location route="{{route}}" use-hash-as-path></app-location>
<app-route data="{{routeData}}" pattern="/:name" route="{{route}}"></app-route>
<header class="jumbotron">
<h1>Polymer 1.0 kittens!!!</h1>
<template is="dom-repeat" items="[[cats]]">
<a class="alert alert-dark" href$="#/[[item.name]]">[[item.name]]</a>
</template>
</header>
<iron-ajax handle-as="json" id="request-cats" on-response="initCats" url="/assets/cats.json"></iron-ajax>
<section id="polymer-1-kittens">
<iron-pages id="cat-list" selected="[[routeData.name]]" attr-for-selected="name">
<template is="dom-repeat" items="[[cats]]">
<polymer-1-cat age$="{{item.age}}" img-url$="{{item.imgUrl}}" name$="{{item.name}}"></polymer-1-cat>
</template>
</iron-pages>
</section>

25.
www.eliftech.com
Polymer-1-kittens.html: script
Polymer({
initCats(event) { this.cats = event.detail.response.cats; },
is: 'polymer-1-kittens-app',
properties: {
cats: { type: Array, },
route: { type: String, },
routeData: { type: Object, }
},
ready() { this.$["request-cats"].generateRequest(); }
});

26.
www.eliftech.com
Polymer-1-kittens

27.
www.eliftech.com
Sources
▪ Polymer-project.org
▪ Metro.co.uk
▪ Purch.com
▪ Stockvault.com
▪ Google Trends

28.
www.eliftech.com
Don’t forget to subscribe!
Find us at eliftech.com
Have a question? Contact us:
info@eliftech.com