O slideshow foi denunciado.

Polymer: brief introduction

1

Compartilhar

Próximos SlideShares
Mojolicious - A new hope
Mojolicious - A new hope
Carregando em…3
×
26 de 28
26 de 28

Polymer: brief introduction

1

Compartilhar

Baixar para ler offline

Descrição

Polymer is a Google's attempt to introduce principles that were intended to get ahead of their time (HTML templates, custom elements, shadow DOM, HTML imports), but trends went into another direction. Google uses Polymer in its products including (but not limited to) YouTube, Google Music, Google Earth, but there is hardly any interest to Polymer from the community. Thus, you can develop a rich web application with Polymer, but it's hard to find documentation and examples.

Prepared byVitalii Perehonchuk, Software Developer at ElifTech

Transcrição

  1. 1. Polymer by Vitalii Perehonchuk, Software Developer at ElifTech
  2. 2. www.eliftech.com Polymer Open-source JavaScript library for building web applications using Web Components.
  3. 3. www.eliftech.com WebComponents [W3C working draft] 1. HTML templates (inert chunks of HTML in <template> tags)
  4. 4. www.eliftech.com WebComponents [W3C working draft] 2. Custom Elements: API to define new HTML elements (from scratch and extending built-ins)
  5. 5. www.eliftech.com WebComponents [W3C working draft] 3. Shadow DOM: Encapsulated DOM and styling
  6. 6. www.eliftech.com WebComponents [W3C working draft] 4. HTML imports
  7. 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. 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. 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. 10. www.eliftech.com Data interpolation <template> <h2 class="name">[[name]]</h2> <img src$="[[imgUrl]]" /> </template>
  11. 11. www.eliftech.com <template is=”dom-repeat”> <template is="dom-repeat" items="[[cats]]"> <a href$="#/[[item.name]]">[[item.name]]</a> </template>
  12. 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. 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. 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. 15. www.eliftech.com Google trends
  16. 16. www.eliftech.com Popularity
  17. 17. www.eliftech.com Usage: YouTube
  18. 18. www.eliftech.com Usage: Google Play Music
  19. 19. www.eliftech.com Usage: Chrome Platform Status
  20. 20. www.eliftech.com Polymer-1-kittens
  21. 21. www.eliftech.com Webpack loader { test: /.html$/, use: [ { loader: "babel-loader", }, { loader: "polymer-webpack-loader", }, ], } npm i polymer-webpack-loader --save-dev
  22. 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. 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. 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. 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. 26. www.eliftech.com Polymer-1-kittens
  27. 27. www.eliftech.com Sources ▪ Polymer-project.org ▪ Metro.co.uk ▪ Purch.com ▪ Stockvault.com ▪ Google Trends
  28. 28. www.eliftech.com Don’t forget to subscribe! Find us at eliftech.com Have a question? Contact us: info@eliftech.com

Descrição

Polymer is a Google's attempt to introduce principles that were intended to get ahead of their time (HTML templates, custom elements, shadow DOM, HTML imports), but trends went into another direction. Google uses Polymer in its products including (but not limited to) YouTube, Google Music, Google Earth, but there is hardly any interest to Polymer from the community. Thus, you can develop a rich web application with Polymer, but it's hard to find documentation and examples.

Prepared byVitalii Perehonchuk, Software Developer at ElifTech

Transcrição

  1. 1. Polymer by Vitalii Perehonchuk, Software Developer at ElifTech
  2. 2. www.eliftech.com Polymer Open-source JavaScript library for building web applications using Web Components.
  3. 3. www.eliftech.com WebComponents [W3C working draft] 1. HTML templates (inert chunks of HTML in <template> tags)
  4. 4. www.eliftech.com WebComponents [W3C working draft] 2. Custom Elements: API to define new HTML elements (from scratch and extending built-ins)
  5. 5. www.eliftech.com WebComponents [W3C working draft] 3. Shadow DOM: Encapsulated DOM and styling
  6. 6. www.eliftech.com WebComponents [W3C working draft] 4. HTML imports
  7. 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. 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. 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. 10. www.eliftech.com Data interpolation <template> <h2 class="name">[[name]]</h2> <img src$="[[imgUrl]]" /> </template>
  11. 11. www.eliftech.com <template is=”dom-repeat”> <template is="dom-repeat" items="[[cats]]"> <a href$="#/[[item.name]]">[[item.name]]</a> </template>
  12. 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. 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. 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. 15. www.eliftech.com Google trends
  16. 16. www.eliftech.com Popularity
  17. 17. www.eliftech.com Usage: YouTube
  18. 18. www.eliftech.com Usage: Google Play Music
  19. 19. www.eliftech.com Usage: Chrome Platform Status
  20. 20. www.eliftech.com Polymer-1-kittens
  21. 21. www.eliftech.com Webpack loader { test: /.html$/, use: [ { loader: "babel-loader", }, { loader: "polymer-webpack-loader", }, ], } npm i polymer-webpack-loader --save-dev
  22. 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. 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. 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. 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. 26. www.eliftech.com Polymer-1-kittens
  27. 27. www.eliftech.com Sources ▪ Polymer-project.org ▪ Metro.co.uk ▪ Purch.com ▪ Stockvault.com ▪ Google Trends
  28. 28. www.eliftech.com Don’t forget to subscribe! Find us at eliftech.com Have a question? Contact us: info@eliftech.com

Mais Conteúdo rRelacionado

Livros relacionados

Gratuito durante 30 dias do Scribd

Ver tudo

Audiolivros relacionados

Gratuito durante 30 dias do Scribd

Ver tudo

×