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

What if there isn’t?

8314890e50d87c60b2ab5fdab90a9630?s=47 Surma
November 06, 2015

What if there isn’t?

DevFest Hamburg 2015

8314890e50d87c60b2ab5fdab90a9630?s=128

Surma

November 06, 2015
Tweet

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