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
76
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
540
Houdini Breakout Session
surma
4
600
Houdini – Demystifying CSS
surma
3
310
Progressive Web Apps – Mobile has natively come to the Web
surma
5
290
The Glorious Era of HTTP/2
surma
1
86
Instant Loading
surma
4
1.2k
HTTP/2 101
surma
5
480
What if there isn’t?
surma
2
160
The Web is a Contender
surma
0
120
Other Decks in Technology
See All in Technology
Developers Summit 2025 浅野卓也(13-B-7 LegalOn Technologies)
legalontechnologies
PRO
1
1.3k
Cloud Spanner 導入で実現した快適な開発と運用について
colopl
1
880
プロダクトエンジニア 360°フィードバックを実施した話
hacomono
PRO
0
120
(機械学習システムでも) SLO から始める信頼性構築 - ゆる SRE#9 2025/02/21
daigo0927
0
200
明日からできる!技術的負債の返済を加速するための実践ガイド~『ホットペッパービューティー』の事例をもとに~
recruitengineers
PRO
3
500
ホワイトボードチャレンジ 説明&実行資料
ichimichi
0
130
エンジニアの育成を支える爆速フィードバック文化
sansantech
PRO
3
1.1k
Amazon S3 Tablesと外部分析基盤連携について / Amazon S3 Tables and External Data Analytics Platform
nttcom
0
150
Building Products in the LLM Era
ymatsuwitter
10
6.1k
レビューを増やしつつ 高評価維持するテクニック
tsuzuki817
1
820
クラウドサービス事業者におけるOSS
tagomoris
3
950
ユーザーストーリーマッピングから始めるアジャイルチームと並走するQA / Starting QA with User Story Mapping
katawara
0
260
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Producing Creativity
orderedlist
PRO
344
39k
Code Reviewing Like a Champion
maltzj
521
39k
The Language of Interfaces
destraynor
156
24k
Unsuck your backbone
ammeep
669
57k
Designing for humans not robots
tammielis
250
25k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.8k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
How STYLIGHT went responsive
nonsquared
98
5.4k
Fireside Chat
paigeccino
34
3.2k
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