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
November 06, 2015
Technology
0
83
What if there isn’t?
DevFest Hamburg 2015
Surma
November 06, 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
2
180
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
6.9k
無意味な開発生産性の議論から抜け出すための予兆検知とお金とAI
i35_267
3
12k
マネジメントって難しい、けどおもしろい / Management is tough, but fun! #em_findy
ar_tama
7
950
開発生産性を組織全体の「生産性」へ! 部門間連携の壁を越える実践的ステップ
sudo5in5k
2
6.4k
ゼロからはじめる採用広報
yutadayo
2
650
2025-07-06 QGIS初級ハンズオン「はじめてのQGIS」
kou_kita
0
160
Tech-Verse 2025 Keynote
lycorptech_jp
PRO
0
1.8k
Zephyr RTOSを使った開発コンペに参加した件
iotengineer22
1
200
20250707-AI活用の個人差を埋めるチームづくり
shnjtk
4
3.6k
KubeCon + CloudNativeCon Japan 2025 Recap by CA
ponkio_o
PRO
0
290
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
27k
モバイル界のMCPを考える
naoto33
0
430
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
336
57k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Optimizing for Happiness
mojombo
379
70k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
730
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.5k
Balancing Empowerment & Direction
lara
1
420
Transcript
What if there isn’t?! Surma @surmair
None
<google-map> <google-youtube> <firebase-collection> <?>
None
<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 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>
<dom-module id="reddit-api"> <template> <iron-jsonp-library notify-event="data" on-data="_newData" library-url="[[_requestUrl]]" ></iron-jsonp-library> </template> <!--
… --> </dom-module>
<script> Polymer({ is: 'reddit-api', properties: { subreddit: { type: String,
reflectToAttribute: true, notify: true }, // ... }); </script>
<script> Polymer({ is: 'reddit-api', properties: { sorting: { type: String,
reflectToAttribute: true, notify: true }, // ... }); </script>
<script> Polymer({ is: 'reddit-api', properties: { posts: { type: Array,
readOnly: true, value: function() { return []; }, notify: true }, // ...
<script> Polymer({ is: 'reddit-api', properties: { baseUrl: { type: String,
value: 'https://api.reddit.com', notify: true }, // ... }); </script>
<script> Polymer({ is: 'reddit-api', properties: { _requestUrl: { type: String,
computed: '_computeUrl(baseUrl, subreddit, sorting)', notify: true }, // ... }); </script>
<script> Polymer({ is: 'reddit-api', _computeUrl: function(baseUrl, subreddit, sorting) { return
baseUrl + subreddit + '/' + sorting + '?jsonp=%%callback%%'; }, </script>
<dom-module id="reddit-api"> <template> <iron-jsonp-library notify-event="data" on-data="_newData" library-url="[[_requestUrl]]" ></iron-jsonp-library> </template> <!--
… --> </dom-module>
<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 }; })); }
<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 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>
<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>
<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 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>
None
None
<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>
<platinum-sw-import-script href="custom-fetch-handler.js"> </platinum-sw-import-script> <platinum-sw-fetch handler="customFetchHandler" path="/(.*)/customFetch"> </platinum-sw-fetch>
_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); } } }
return Promise.all(paramsPromises). then(function(paramsResolutions) { var params = {} paramsResolutions. forEach(function(childParams)
{ Object.keys(childParams). forEach(/* merge into params */); }); })
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
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