Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
What if there isn’t?
Search
Surma
September 27, 2015
Technology
2
170
What if there isn’t?
Polymer Summit 2015
https://www.youtube.com/watch?v=qogKAkxrfrk
Surma
September 27, 2015
Tweet
Share
More Decks by Surma
See All by Surma
Know thy buzzwords: HTTP/2
surma
1
550
Houdini Breakout Session
surma
4
630
Houdini – Demystifying CSS
surma
3
320
Progressive Web Apps – Mobile has natively come to the Web
surma
5
290
The Glorious Era of HTTP/2
surma
1
93
Instant Loading
surma
4
1.3k
HTTP/2 101
surma
5
490
What if there isn’t?
surma
0
83
The Web is a Contender
surma
0
130
Other Decks in Technology
See All in Technology
Oracle Cloud Infrastructure:2025年6月度サービス・アップデート
oracle4engineer
PRO
2
240
How Community Opened Global Doors
hiroramos4
PRO
1
120
mrubyと micro-ROSが繋ぐロボットの世界
kishima
2
260
Javaで作る RAGを活用した Q&Aアプリケーション
recruitengineers
PRO
1
110
25分で解説する「最小権限の原則」を実現するための AWS「ポリシー」大全 / 20250625-aws-summit-aws-policy
opelab
9
1.1k
Agentic Workflowという選択肢を考える
tkikuchi1002
1
500
Navigation3でViewModelにデータを渡す方法
mikanichinose
0
220
Tech-Verse 2025 Keynote
lycorptech_jp
PRO
0
100
監視のこれまでとこれから/sakura monitoring seminar 2025
fujiwara3
11
3.9k
GitHub Copilot の概要
tomokusaba
1
130
_第3回__AIxIoTビジネス共創ラボ紹介資料_20250617.pdf
iotcomjpadmin
0
150
Postman AI エージェントビルダー最新情報
nagix
0
110
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Building Applications with DynamoDB
mza
95
6.5k
We Have a Design System, Now What?
morganepeng
53
7.7k
How STYLIGHT went responsive
nonsquared
100
5.6k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
KATA
mclloyd
29
14k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
It's Worth the Effort
3n
185
28k
Why You Should Never Use an ORM
jnunemaker
PRO
57
9.4k
Transcript
1
01 What if there isn’t?! Surma @surmair +PolymerProject @Polymer 2
3
4 +PolymerProject @Polymer <google-map> <google-youtube> <firebase-collection> <?>
5
+PolymerProject @Polymer 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> </template>
+PolymerProject @Polymer 7 <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> </template>
+PolymerProject @Polymer 8 <dom-module id="reddit-api"> <template> <iron-jsonp-library notify-event="data" on-data="_newData" library-url="[[_requestUrl]]"
></iron-jsonp-library> </template> <!-- … --> </dom-module>
+PolymerProject @Polymer 9 <script> Polymer({ is: 'reddit-api', properties: { subreddit:
{ type: String, reflectToAttribute: true, notify: true }, // ... }); </script>
+PolymerProject @Polymer 10 <script> Polymer({ is: 'reddit-api', properties: { sorting:
{ type: String, reflectToAttribute: true, notify: true }, // ... }); </script>
+PolymerProject @Polymer 11 <script> Polymer({ is: 'reddit-api', properties: { posts:
{ type: Array, readOnly: true, value: function() { return []; }, notify: true }, // ... }); </script>
+PolymerProject @Polymer 12 <script> Polymer({ is: 'reddit-api', properties: { baseUrl:
{ type: String, value: 'https://api.reddit.com', notify: true }, // ... }); </script>
+PolymerProject @Polymer 13 <script> Polymer({ is: 'reddit-api', properties: { _requestUrl:
{ type: String, computed: '_computeUrl(baseUrl, subreddit, sorting)', notify: true }, // ... }); </script>
+PolymerProject @Polymer 14 <script> Polymer({ is: 'reddit-api', _computeUrl: function(baseUrl, subreddit,
sorting) { return baseUrl + subreddit + '/' + sorting + '?jsonp=%%callback%%'; }, </script>
+PolymerProject @Polymer 15 <dom-module id="reddit-api"> <template> <iron-jsonp-library notify-event="data" on-data="_newData" library-url="[[_requestUrl]]"
></iron-jsonp-library> </template> <!-- … --> </dom-module>
+PolymerProject @Polymer 16 <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 }; })); } }); </script>
+PolymerProject @Polymer 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> </template>
+PolymerProject @Polymer 18 <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> </template>
+PolymerProject @Polymer 19 <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>
+PolymerProject @Polymer 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> </template>
+PolymerProject @Polymer 21 <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> </template>
22
23
+PolymerProject @Polymer 24 <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>
+PolymerProject @Polymer 25 <platinum-sw-import-script href="custom-fetch-handler.js"> </platinum-sw-import-script> <platinum-sw-fetch handler="customFetchHandler" path="/(.*)/customFetch"> </platinum-sw-fetch>
+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 27 return Promise.all(paramsPromises). then(function(paramsResolutions) { var params =
{} paramsResolutions. forEach(function(childParams) { Object.keys(childParams). forEach(/* merge into params */); }); })
+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(...);
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 /...