Diese Präsentation wurde erfolgreich gemeldet.

Polymer: brief introduction

1

Teilen

Wird geladen in …3
×
26 von 28
26 von 28

Polymer: brief introduction

1

Teilen

Herunterladen, um offline zu lesen

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

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

Weitere Verwandte Inhalte

Ähnliche Bücher

Kostenlos mit einer 14-tägigen Testversion von Scribd

Alle anzeigen

Ähnliche Hörbücher

Kostenlos mit einer 14-tägigen Testversion von Scribd

Alle anzeigen

Polymer: brief introduction

  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

×