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
September 27, 2015
Technology
2
180
What if there isn’t?
Polymer Summit 2015
https://www.youtube.com/watch?v=qogKAkxrfrk
Surma
September 27, 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
0
85
The Web is a Contender
surma
0
140
Other Decks in Technology
See All in Technology
PLaMoの事後学習を支える技術 / PFN LLMセミナー
pfn
PRO
9
3.9k
多野優介
tanoyusuke
1
470
社内お問い合わせBotの仕組みと学び
nish01
0
460
SwiftUIのGeometryReaderとScrollViewを基礎から応用まで学び直す:設計と活用事例
fumiyasac0921
0
150
[2025-09-30] Databricks Genie を利用した分析基盤とデータモデリングの IVRy の現在地
wxyzzz
0
500
AI時代だからこそ考える、僕らが本当につくりたいスクラムチーム / A Scrum Team we really want to create in this AI era
takaking22
7
3.7k
空間を設計する力を考える / 20251004 Naoki Takahashi
shift_evolve
PRO
3
410
「Verify with Wallet API」を アプリに導入するために
hinakko
1
250
多様な事業ドメインのクリエイターへ 価値を届けるための営みについて
massyuu
1
400
いまさら聞けない ABテスト入門
skmr2348
1
210
Azure SynapseからAzure Databricksへ 移行してわかった新時代のコスト問題!?
databricksjapan
0
150
綺麗なデータマートをつくろう_データ整備を前向きに考える会 / Let's create clean data mart
brainpadpr
2
260
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
We Have a Design System, Now What?
morganepeng
53
7.8k
Git: the NoSQL Database
bkeepers
PRO
431
66k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Visualization
eitanlees
148
16k
Automating Front-end Workflow
addyosmani
1371
200k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
Practical Orchestrator
shlominoach
190
11k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Building Applications with DynamoDB
mza
96
6.6k
Transcript
1
01 What if there isn’t?! Surma @surmair +PolymerProject @Polymer 2
3
4 +PolymerProject @Polymer <google-map> <google-youtube> <firebase-collection> <?>
5
+PolymerProject @Polymer 6 <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>
+PolymerProject @Polymer 7 <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>
+PolymerProject @Polymer 8 <dom-module id="reddit-api"> <template> <iron-jsonp-library notify-event="data" on-data="_newData" library-url="[[_requestUrl]]"
></iron-jsonp-library> </template> <!-- … --> </dom-module>
+PolymerProject @Polymer 9 <script> Polymer({ is: 'reddit-api', properties: { subreddit:
{ type: String, reflectToAttribute: true, notify: true }, // ... }); </script>
+PolymerProject @Polymer 10 <script> Polymer({ is: 'reddit-api', properties: { sorting:
{ type: String, reflectToAttribute: true, notify: true }, // ... }); </script>
+PolymerProject @Polymer 11 <script> Polymer({ is: 'reddit-api', properties: { posts:
{ type: Array, readOnly: true, value: function() { return []; }, notify: true }, // ... }); </script>
+PolymerProject @Polymer 12 <script> Polymer({ is: 'reddit-api', properties: { baseUrl:
{ type: String, value: 'https://api.reddit.com', notify: true }, // ... }); </script>
+PolymerProject @Polymer 13 <script> Polymer({ is: 'reddit-api', properties: { _requestUrl:
{ type: String, computed: '_computeUrl(baseUrl, subreddit, sorting)', notify: true }, // ... }); </script>
+PolymerProject @Polymer 14 <script> Polymer({ is: 'reddit-api', _computeUrl: function(baseUrl, subreddit,
sorting) { return baseUrl + subreddit + '/' + sorting + '?jsonp=%%callback%%'; }, </script>
+PolymerProject @Polymer 15 <dom-module id="reddit-api"> <template> <iron-jsonp-library notify-event="data" on-data="_newData" library-url="[[_requestUrl]]"
></iron-jsonp-library> </template> <!-- … --> </dom-module>
+PolymerProject @Polymer 16 <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 }; })); } }); </script>
+PolymerProject @Polymer 17 <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>
+PolymerProject @Polymer 18 <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>
+PolymerProject @Polymer 19 <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>
+PolymerProject @Polymer 20 <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>
+PolymerProject @Polymer 21 <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>
22
23
+PolymerProject @Polymer 24 <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>
+PolymerProject @Polymer 25 <platinum-sw-import-script href="custom-fetch-handler.js"> </platinum-sw-import-script> <platinum-sw-fetch handler="customFetchHandler" path="/(.*)/customFetch"> </platinum-sw-fetch>
+PolymerProject @Polymer 26 _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); } } }
+PolymerProject @Polymer 27 return Promise.all(paramsPromises). then(function(paramsResolutions) { var params =
{} paramsResolutions. forEach(function(childParams) { Object.keys(childParams). forEach(/* merge into params */); }); })
+PolymerProject @Polymer 28 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 }).then(...);
01 Surma @surmair +PolymerProject @Polymer 29 https://elements.polymer-project.org/ https://github.com/PolymerElements /platinum-sw /platinum-push-messaging
https://github.com/GoogleWebComponents /firebase-element /google-map /...