Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
1
Slide 2
Slide 2 text
01 What if there isn’t?! Surma @surmair +PolymerProject @Polymer 2
Slide 3
Slide 3 text
3
Slide 4
Slide 4 text
4 +PolymerProject @Polymer >
Slide 5
Slide 5 text
5
Slide 6
Slide 6 text
+PolymerProject @Polymer 6 paper-input>
[[item.title]]
Slide 7
Slide 7 text
+PolymerProject @Polymer 7 paper-input>
[[item.title]]
Slide 8
Slide 8 text
+PolymerProject @Polymer 8
Slide 9
Slide 9 text
+PolymerProject @Polymer 9 Polymer({ is: 'reddit-api', properties: { subreddit: { type: String, reflectToAttribute: true, notify: true }, // ... });
Slide 10
Slide 10 text
+PolymerProject @Polymer 10 Polymer({ is: 'reddit-api', properties: { sorting: { type: String, reflectToAttribute: true, notify: true }, // ... });
Slide 11
Slide 11 text
+PolymerProject @Polymer 11 Polymer({ is: 'reddit-api', properties: { posts: { type: Array, readOnly: true, value: function() { return []; }, notify: true }, // ... });
Slide 12
Slide 12 text
+PolymerProject @Polymer 12 Polymer({ is: 'reddit-api', properties: { baseUrl: { type: String, value: 'https://api.reddit.com', notify: true }, // ... });
Slide 13
Slide 13 text
+PolymerProject @Polymer 13 Polymer({ is: 'reddit-api', properties: { _requestUrl: { type: String, computed: '_computeUrl(baseUrl, subreddit, sorting)', notify: true }, // ... });
Slide 14
Slide 14 text
+PolymerProject @Polymer 14 Polymer({ is: 'reddit-api', _computeUrl: function(baseUrl, subreddit, sorting) { return baseUrl + subreddit + '/' + sorting + '?jsonp=%%callback%%'; },
Slide 15
Slide 15 text
+PolymerProject @Polymer 15
Slide 16
Slide 16 text
+PolymerProject @Polymer 16 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 }; })); } });
Slide 17
Slide 17 text
+PolymerProject @Polymer 17 paper-input>
[[item.title]]
Slide 18
Slide 18 text
+PolymerProject @Polymer 18 paper-input>
[[item.title]]
Slide 19
Slide 19 text
+PolymerProject @Polymer 19 ✨ paper-radio-button>
Slide 20
Slide 20 text
+PolymerProject @Polymer 20 paper-input>
[[item.title]]
Slide 21
Slide 21 text
+PolymerProject @Polymer 21 paper-input>
[[item.title]]
Slide 22
Slide 22 text
22
Slide 23
Slide 23 text
23
Slide 24
Slide 24 text
+PolymerProject @Polymer 24
Slide 25
Slide 25 text
+PolymerProject @Polymer 25
Slide 26
Slide 26 text
+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); } } }
Slide 27
Slide 27 text
+PolymerProject @Polymer 27 return Promise.all(paramsPromises). then(function(paramsResolutions) { var params = {} paramsResolutions. forEach(function(childParams) { Object.keys(childParams). forEach(/* merge into params */); }); })
Slide 28
Slide 28 text
+PolymerProject @Polymer 28 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 }).then(...);
Slide 29
Slide 29 text
01 Surma @surmair +PolymerProject @Polymer 29 https://elements.polymer-project.org/ https://github.com/PolymerElements /platinum-sw /platinum-push-messaging https://github.com/GoogleWebComponents /firebase-element /google-map /...