Polymer Summit 2015 https://www.youtube.com/watch?v=qogKAkxrfrk
1
View Slide
01What if there isn’t?!Surma@surmair +PolymerProject@Polymer 2
3
4+PolymerProject@Polymer>
5
+PolymerProject@Polymer 6posts="{{posts}}"sorting="{{sorting}}"subreddit="{{subreddit}}">paper-input>href="[[item.link]]">[[item.title]]
+PolymerProject@Polymer 7posts="{{posts}}"sorting="{{sorting}}"subreddit="{{subreddit}}">paper-input>href="[[item.link]]">[[item.title]]
+PolymerProject@Polymer 8notify-event="data"on-data="_newData"library-url="[[_requestUrl]]">
+PolymerProject@Polymer 9<br/>Polymer({<br/>is: 'reddit-api',<br/>properties: {<br/>subreddit: {<br/>type: String,<br/>reflectToAttribute: true,<br/>notify: true<br/>},<br/>// ...<br/>});<br/>
+PolymerProject@Polymer 10<br/>Polymer({<br/>is: 'reddit-api',<br/>properties: {<br/>sorting: {<br/>type: String,<br/>reflectToAttribute: true,<br/>notify: true<br/>},<br/>// ...<br/>});<br/>
+PolymerProject@Polymer 11<br/>Polymer({<br/>is: 'reddit-api',<br/>properties: {<br/>posts: {<br/>type: Array,<br/>readOnly: true,<br/>value: function() {<br/>return [];<br/>},<br/>notify: true<br/>},<br/>// ...<br/>});<br/>
+PolymerProject@Polymer 12<br/>Polymer({<br/>is: 'reddit-api',<br/>properties: {<br/>baseUrl: {<br/>type: String,<br/>value: 'https://api.reddit.com',<br/>notify: true<br/>},<br/>// ...<br/>});<br/>
+PolymerProject@Polymer 13<br/>Polymer({<br/>is: 'reddit-api',<br/>properties: {<br/>_requestUrl: {<br/>type: String,<br/>computed: '_computeUrl(baseUrl,<br/>subreddit, sorting)',<br/>notify: true<br/>},<br/>// ...<br/>});<br/>
+PolymerProject@Polymer 14<br/>Polymer({<br/>is: 'reddit-api',<br/>_computeUrl: function(baseUrl,<br/>subreddit, sorting) {<br/>return baseUrl +<br/>subreddit + '/' +<br/>sorting + '?jsonp=%%callback%%';<br/>},<br/>
+PolymerProject@Polymer 15notify-event="data"on-data="_newData"library-url="[[_requestUrl]]">
+PolymerProject@Polymer 16<br/>Polymer({<br/>is: 'reddit-api',<br/>_newData: function(ev) {<br/>this._setPosts(<br/>ev.detail[0].data.children.<br/>map(function(post) {<br/>return {<br/>title: post.data.title,<br/>link: post.data.url<br/>};<br/>}));<br/>}<br/>});<br/>
+PolymerProject@Polymer 17posts="{{posts}}"sorting="{{sorting}}"subreddit="{{subreddit}}">paper-input>href="[[item.link]]">[[item.title]]
+PolymerProject@Polymer 18posts="{{posts}}"sorting="{{sorting}}"subreddit="{{subreddit}}">paper-input>href="[[item.link]]">[[item.title]]
+PolymerProject@Polymer 19 radio-button>✨ radio-button> paper-radio-button>
+PolymerProject@Polymer 20posts="{{posts}}"sorting="{{sorting}}"subreddit="{{subreddit}}">paper-input>href="[[item.link]]">[[item.title]]
+PolymerProject@Polymer 21posts="{{posts}}"sorting="{{sorting}}"subreddit="{{subreddit}}">paper-input>href="[[item.link]]">[[item.title]]
22
23
+PolymerProject@Polymer 24skip-waitingclients-claimauto-registerstate="{{state}}"on-service-worker-error="swError"on-service-worker-updated="swUpdated"on-service-worker-installed="swInstalled">
+PolymerProject@Polymer 25href="custom-fetch-handler.js">handler="customFetchHandler"path="/(.*)/customFetch">
+PolymerProject@Polymer 26_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);}}}
+PolymerProject@Polymer 27return Promise.all(paramsPromises).then(function(paramsResolutions) {var params = {}paramsResolutions.forEach(function(childParams) {Object.keys(childParams).forEach(/* merge into params */);});})
+PolymerProject@Polymer 28var 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}).then(...);
01Surma@surmair +PolymerProject@Polymer 29https://elements.polymer-project.org/https://github.com/PolymerElements/platinum-sw/platinum-push-messaginghttps://github.com/GoogleWebComponents/firebase-element/google-map/...