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
180
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
300
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
fukabori.fm 出張版: 売上高617億円と高稼働率を陰で支えた社内ツール開発のあれこれ話 / 20250704 Yoshimasa Iwase & Tomoo Morikawa
shift_evolve
PRO
2
7.8k
FOSS4G 2025 KANSAI QGISで点群データをいろいろしてみた
kou_kita
0
400
2025-07-06 QGIS初級ハンズオン「はじめてのQGIS」
kou_kita
0
170
Should Our Project Join the CNCF? (Japanese Recap)
whywaita
PRO
0
340
さくらのIaaS基盤のモニタリングとOpenTelemetry/OSC Hokkaido 2025
fujiwara3
3
440
CDKTFについてざっくり理解する!!~CloudFormationからCDKTFへ変換するツールも作ってみた~
masakiokuda
1
150
関数型プログラミングで 「脳がバグる」を乗り越える
manabeai
1
190
赤煉瓦倉庫勉強会「Databricksを選んだ理由と、絶賛真っ只中のデータ基盤移行体験記」
ivry_presentationmaterials
2
370
生成AI活用の組織格差を解消する 〜ビジネス職のCursor導入が開発効率に与えた好循環〜 / Closing the Organizational Gap in AI Adoption
upamune
7
5.3k
OSSのSNSツール「Misskey」をさわってみよう(右下ワイプで私のOSCの20年を振り返ります) / 20250705-osc2025-do
akkiesoft
0
170
SaaS型なのに自由度の高い本格CMSでサイト構築と運用のコスパ&タイパUP! MovableType.net の便利機能とユーザー事例のご紹介
masakah
0
110
LangChain Interrupt & LangChain Ambassadors meetingレポート
os1ma
2
320
Featured
See All Featured
Six Lessons from altMBA
skipperchong
28
3.9k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
KATA
mclloyd
30
14k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
820
It's Worth the Effort
3n
185
28k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
970
Building a Scalable Design System with Sketch
lauravandoore
462
33k
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 /...