Download to read offline
![www.eliftech.com
WebComponents
[W3C working draft]
1. HTML templates
(inert chunks of HTML in <template> tags)](https://image.slidesharecdn.com/polymerbriefintroductionedited1-180509152346/85/Polymer-brief-introduction-3-320.jpg)
![www.eliftech.com
WebComponents
[W3C working draft]
2. Custom Elements:
API to define new HTML elements
(from scratch and extending built-ins)](https://image.slidesharecdn.com/polymerbriefintroductionedited1-180509152346/85/Polymer-brief-introduction-4-320.jpg)
![www.eliftech.com
WebComponents
[W3C working draft]
3. Shadow DOM:
Encapsulated DOM and styling](https://image.slidesharecdn.com/polymerbriefintroductionedited1-180509152346/85/Polymer-brief-introduction-5-320.jpg)
![www.eliftech.com
WebComponents
[W3C working draft]
4. HTML imports](https://image.slidesharecdn.com/polymerbriefintroductionedited1-180509152346/85/Polymer-brief-introduction-6-320.jpg)
![www.eliftech.com
Data interpolation
<template>
<h2 class="name">[[name]]</h2>
</template>
Polymer({
is: 'polymer-1-cat',
properties: {
name: {
type: String,
value: 'Kitten',
},
},
});](https://image.slidesharecdn.com/polymerbriefintroductionedited1-180509152346/85/Polymer-brief-introduction-9-320.jpg)
![www.eliftech.com
Data interpolation
<template>
<h2 class="name">[[name]]</h2>
<img src$="[[imgUrl]]" />
</template>](https://image.slidesharecdn.com/polymerbriefintroductionedited1-180509152346/85/Polymer-brief-introduction-10-320.jpg)
![www.eliftech.com
<template is=”dom-repeat”>
<template is="dom-repeat" items="[[cats]]">
<a href$="#/[[item.name]]">[[item.name]]</a>
</template>](https://image.slidesharecdn.com/polymerbriefintroductionedited1-180509152346/85/Polymer-brief-introduction-11-320.jpg)
![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>](https://image.slidesharecdn.com/polymerbriefintroductionedited1-180509152346/85/Polymer-brief-introduction-14-320.jpg)
![www.eliftech.com
Webpack loader
{
test: /.html$/,
use: [
{
loader: "babel-loader",
},
{
loader: "polymer-webpack-loader",
},
],
}
npm i polymer-webpack-loader --save-dev](https://image.slidesharecdn.com/polymerbriefintroductionedited1-180509152346/85/Polymer-brief-introduction-21-320.jpg)
![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>](https://image.slidesharecdn.com/polymerbriefintroductionedited1-180509152346/85/Polymer-brief-introduction-22-320.jpg)
![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>](https://image.slidesharecdn.com/polymerbriefintroductionedited1-180509152346/85/Polymer-brief-introduction-24-320.jpg)
![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(); }
});](https://image.slidesharecdn.com/polymerbriefintroductionedited1-180509152346/85/Polymer-brief-introduction-25-320.jpg)
Uploaded byElifTech
Polymer: brief introduction
The document provides an overview of Polymer, an open-source JavaScript library designed for building web applications using web components. It covers key features like HTML templates, custom elements, and shadow DOM, along with practical examples of data interpolation, AJAX requests, and components for routing and ratings. Additionally, it includes installation instructions and links to further resources and support.
More Related Content
Similar to Polymer: brief introduction
Polymer: brief introduction
- 1. Polymer by Vitalii Perehonchuk, SoftwareDeveloper at ElifTech
- 2. www.eliftech.com Polymer Open-source JavaScript libraryfor 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.
- 7. www.eliftech.com Examples <link rel="import" href="../../bower_components/polymer/polymer.html"> <dom-moduleid="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> <imgsrc$="[[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 iiron-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? boweri star-rating --save <star-rating icon='heart' on-click="_stop" on-rate- changed="setRating"></star-rating> <!-- -//- -->
- 14. www.eliftech.com Need routing? bower iapp-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.
- 16.
- 17.
- 18.
- 19.
- 20.
- 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> <imgsrc$="[[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.
- 27. www.eliftech.com Sources ▪ Polymer-project.org ▪ Metro.co.uk ▪Purch.com ▪ Stockvault.com ▪ Google Trends
- 28. www.eliftech.com Don’t forget tosubscribe! Find us at eliftech.com Have a question? Contact us: info@eliftech.com