Upgrade to Pro — share decks privately, control downloads, hide ads and more …

What if there isn’t?

Surma
November 06, 2015

What if there isn’t?

DevFest Hamburg 2015

Surma

November 06, 2015
Tweet

More Decks by Surma

Other Decks in Technology

Transcript

  1. What if there isn’t?! Surma @surmair

  2. None
  3. <google-map> <google-youtube> <firebase-collection> <?>

  4. None
  5. <template is="dom-bind"> <reddit-api posts="{{posts}}" sorting="{{sorting}}" subreddit="{{subreddit}}"></reddit-api> <paper-input value="{{subreddit::change}}"></paper-input> <paper-radio-group selected="{{sorting}}">

    <!-- ... --> </paper-radio-group> <template is="dom-repeat" items="[[posts]]"> <a class=“post” href="[[item.link]]">[[item.title]]</a> </template>
  6. <template is="dom-bind"> <reddit-api posts="{{posts}}" sorting="{{sorting}}" subreddit="{{subreddit}}"></reddit-api> <paper-input value="{{subreddit::change}}"></paper-input> <paper-radio-group selected="{{sorting}}">

    <!-- ... --> </paper-radio-group> <template is="dom-repeat" items="[[posts]]"> <a class=“post” href="[[item.link]]">[[item.title]]</a> </template>
  7. <dom-module id="reddit-api"> <template> <iron-jsonp-library notify-event="data" on-data="_newData" library-url="[[_requestUrl]]" ></iron-jsonp-library> </template> <!--

    … --> </dom-module>
  8. <script> Polymer({ is: 'reddit-api', properties: { subreddit: { type: String,

    reflectToAttribute: true, notify: true }, // ... }); </script>
  9. <script> Polymer({ is: 'reddit-api', properties: { sorting: { type: String,

    reflectToAttribute: true, notify: true }, // ... }); </script>
  10. <script> Polymer({ is: 'reddit-api', properties: { posts: { type: Array,

    readOnly: true, value: function() { return []; }, notify: true }, // ...
  11. <script> Polymer({ is: 'reddit-api', properties: { baseUrl: { type: String,

    value: 'https://api.reddit.com', notify: true }, // ... }); </script>
  12. <script> Polymer({ is: 'reddit-api', properties: { _requestUrl: { type: String,

    computed: '_computeUrl(baseUrl, subreddit, sorting)', notify: true }, // ... }); </script>
  13. <script> Polymer({ is: 'reddit-api', _computeUrl: function(baseUrl, subreddit, sorting) { return

    baseUrl + subreddit + '/' + sorting + '?jsonp=%%callback%%'; }, </script>
  14. <dom-module id="reddit-api"> <template> <iron-jsonp-library notify-event="data" on-data="_newData" library-url="[[_requestUrl]]" ></iron-jsonp-library> </template> <!--

    … --> </dom-module>
  15. <script> Polymer({ is: 'reddit-api', _newData: function(ev) { this._setPosts( ev.detail[0].data.children. map(function(post)

    { return { title: post.data.title, link: post.data.url }; })); }
  16. <template is="dom-bind"> <reddit-api posts="{{posts}}" sorting="{{sorting}}" subreddit="{{subreddit}}"></reddit-api> <paper-input value="{{subreddit::change}}"></paper-input> <paper-radio-group selected="{{sorting}}">

    <!-- ... --> </paper-radio-group> <template is="dom-repeat" items="[[posts]]"> <a class=“post” href="[[item.link]]">[[item.title]]</a> </template>
  17. <template is="dom-bind"> <reddit-api posts="{{posts}}" sorting="{{sorting}}" subreddit="{{subreddit}}"></reddit-api> <paper-input value="{{subreddit::change}}"></paper-input> <paper-radio-group selected="{{sorting}}">

    <!-- ... --> </paper-radio-group> <template is="dom-repeat" items="[[posts]]"> <a class=“post” href="[[item.link]]">[[item.title]]</a> </template>
  18. <paper-radio-group selected="{{sorting}}"> <paper-radio-button name="hot"> </paper-radio-button> <paper-radio-button name="new">✨ </paper-radio-button> <paper-radio-button name="controversial">

    </paper-radio- button> </paper-radio-group>
  19. <template is="dom-bind"> <reddit-api posts="{{posts}}" sorting="{{sorting}}" subreddit="{{subreddit}}"></reddit-api> <paper-input value="{{subreddit::change}}"></paper-input> <paper-radio-group selected="{{sorting}}">

    <!-- ... --> </paper-radio-group> <template is="dom-repeat" items="[[posts]]"> <a class=“post” href="[[item.link]]">[[item.title]]</a> </template>
  20. <template is="dom-bind"> <reddit-api posts="{{posts}}" sorting="{{sorting}}" subreddit="{{subreddit}}"></reddit-api> <paper-input value="{{subreddit::change}}"></paper-input> <paper-radio-group selected="{{sorting}}">

    <!-- ... --> </paper-radio-group> <template is="dom-repeat" items="[[posts]]"> <a class=“post” href="[[item.link]]">[[item.title]]</a> </template>
  21. None
  22. None
  23. <platinum-sw-register skip-waiting clients-claim auto-register state="{{state}}" on-service-worker-error="swError" on-service-worker-updated="swUpdated" on-service-worker-installed="swInstalled"> <!-- …

    one or more <platinum-sw-*> … --> </platinum-sw-register>
  24. <platinum-sw-import-script href="custom-fetch-handler.js"> </platinum-sw-import-script> <platinum-sw-fetch handler="customFetchHandler" path="/(.*)/customFetch"> </platinum-sw-fetch>

  25. _constructServiceWorkerUrl: function() { var paramsPromises = []; var cs =

    Polymer.dom(this).children; for (var i = 0; i < cs; i++) { if (typeof cs[i]._getParameters === 'function') { var params = cs[i]._getParameters(); paramsPromises.push(params); } } }
  26. return Promise.all(paramsPromises). then(function(paramsResolutions) { var params = {} paramsResolutions. forEach(function(childParams)

    { Object.keys(childParams). forEach(/* merge into params */); }); })
  27. var serviceWorkerUrl = new URL(this.href, window.location); serviceWorkerUrl.search = Object.keys(params).sort() .map(function(key)

    { return encodeURIComponent(key) + "=" + encodeURIComponent(params[key]); }).join('&'); navigator.serviceWorker .register(serviceWorkerUrl, { scope: this.scope
  28. https://elements.polymer-project.org/ https://github.com/PolymerElements/platinum-sw /platinum-push-messaging https://github.com/GoogleWebComponents/firebase-element /google-map /… https://github.com/surma/polymer-reddit-api Surma @surmair