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
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
2
180
The Web is a Contender
surma
0
130
Other Decks in Technology
See All in Technology
Microsoft Build 2025 技術/製品動向 for Microsoft Startup Tech Community
torumakabe
2
310
Tech-Verse 2025 Global CTO Session
lycorptech_jp
PRO
0
840
AIの最新技術&テーマをつまんで紹介&フリートークするシリーズ #1 量子機械学習の入門
tkhresk
0
140
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
920
Amazon Bedrockで実現する 新たな学習体験
kzkmaeda
2
620
自律的なスケーリング手法FASTにおけるVPoEとしてのアカウンタビリティ / dev-productivity-con-2025
yoshikiiida
0
120
2年でここまで成長!AWSで育てたAI Slack botの軌跡
iwamot
PRO
4
800
生成AIで小説を書くためにプロンプトの制約や原則について学ぶ / prompt-engineering-for-ai-fiction
nwiizo
4
2.9k
LangSmith×Webhook連携で実現するプロンプトドリブンCI/CD
sergicalsix
1
120
AWS Organizations 新機能!マルチパーティ承認の紹介
yhana
1
180
Core Audio tapを使ったリアルタイム音声処理のお話
yuta0306
0
120
フィンテック養成勉強会#54
finengine
0
180
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
524
40k
Six Lessons from altMBA
skipperchong
28
3.9k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
A designer walks into a library…
pauljervisheath
207
24k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
The Cult of Friendly URLs
andyhume
79
6.5k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
How to train your dragon (web standard)
notwaldorf
94
6.1k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
4 Signs Your Business is Dying
shpigford
184
22k
Balancing Empowerment & Direction
lara
1
380
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