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
85
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
650
Houdini – Demystifying CSS
surma
3
330
Progressive Web Apps – Mobile has natively come to the Web
surma
5
300
The Glorious Era of HTTP/2
surma
1
95
Instant Loading
surma
4
1.3k
HTTP/2 101
surma
5
500
What if there isn’t?
surma
2
180
The Web is a Contender
surma
0
140
Other Decks in Technology
See All in Technology
AWSにおけるTrend Vision Oneの効果について
shimak
0
130
社内お問い合わせBotの仕組みと学び
nish01
0
460
SoccerNet GSRの紹介と技術応用:選手視点映像を提供するサッカー作戦盤ツール
mixi_engineers
PRO
1
190
SwiftUIのGeometryReaderとScrollViewを基礎から応用まで学び直す:設計と活用事例
fumiyasac0921
0
150
20201008_ファインディ_品質意識を育てる役目は人かAIか___2_.pdf
findy_eventslides
1
520
JAZUG 15周年記念 × JAT「AI Agent開発者必見:"今"のOracle技術で拡張するAzure × OCIの共存アーキテクチャ」
shisyu_gaku
0
130
生成AIを活用したZennの取り組み事例
ryosukeigarashi
0
210
Modernizing Virtio GPU: A Rust-Powered Approach with vhost-device-gpu
ennael
PRO
0
100
神回のメカニズムと再現方法/Mechanisms and Playbook for Kamikai scrumat2025
moriyuya
4
600
Optuna DashboardにおけるPLaMo2連携機能の紹介 / PFN LLM セミナー
pfn
PRO
2
900
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
9.1k
生成AI_その前_に_マルチクラウド時代の信頼できるデータを支えるSnowflakeメタデータ活用術.pdf
cm_mikami
0
120
Featured
See All Featured
The Language of Interfaces
destraynor
162
25k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
How STYLIGHT went responsive
nonsquared
100
5.8k
Typedesign – Prime Four
hannesfritz
42
2.8k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
960
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
The Cost Of JavaScript in 2023
addyosmani
53
9k
A better future with KSS
kneath
239
17k
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