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
87
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
CDKのコードを書く環境を作りました with Amazon Q
nobuhitomorioka
1
120
ユーザーストーリーマッピングから始めるアジャイルチームと並走するQA / Starting QA with User Story Mapping
katawara
0
270
Classmethod AI Talks(CATs) #17 司会進行スライド(2025.02.19) / classmethod-ai-talks-aka-cats_moderator-slides_vol17_2025-02-19
shinyaa31
0
160
わたしがEMとして入社した「最初の100日」の過ごし方 / EMConfJp2025
daiksy
2
830
Potential EM 制度を始めた理由、そして2年後にやめた理由 - EMConf JP 2025
hoyo
1
110
脳波を用いた嗜好マッチングシステム
hokkey621
0
220
Two Blades, One Journey: Engineering While Managing
ohbarye
1
240
なぜ私は自分が使わないサービスを作るのか? / Why would I create a service that I would not use?
aiandrox
0
890
Windows の新しい管理者保護モード
murachiakira
0
180
転生CISOサバイバル・ガイド / CISO Career Transition Survival Guide
kanny
3
1.1k
【詳説】コンテンツ配信 システムの複数機能 基盤への拡張
hatena
0
150
AI エージェント開発を支える MaaS としての Azure AI Foundry
ryohtaka
6
650
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
35
1.6k
Building an army of robots
kneath
303
45k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Done Done
chrislema
182
16k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
How STYLIGHT went responsive
nonsquared
98
5.4k
The Invisible Side of Design
smashingmag
299
50k
Bootstrapping a Software Product
garrettdimon
PRO
306
110k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Designing Experiences People Love
moore
140
23k
Designing for humans not robots
tammielis
250
25k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
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