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
160
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
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
85
Instant Loading
surma
4
1.2k
HTTP/2 101
surma
5
480
What if there isn’t?
surma
0
76
The Web is a Contender
surma
0
120
Other Decks in Technology
See All in Technology
テストアーキテクチャ設計で実現する高品質で高スピードな開発の実践 / Test Architecture Design in Practice
ropqa
3
410
【弥生】20250130_AWSマルチアカウント運用セミナー登壇資料
yayoi_dd
1
160
もし今からGraphQLを採用するなら
kazukihayase
10
4.5k
事業継続を支える自動テストの考え方
tsuemura
0
200
Postman Vaultを使った秘密情報の安全な管理
nagix
3
220
Next Step: Play Time!
trishagee
2
140
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
10
120k
Oracle Cloud Infrastructure:2025年1月度サービス・アップデート
oracle4engineer
PRO
0
430
アンチパターンのアーキテクチャと組織 / Anti-Pattern Software Architecture and Organization
oztick139
0
160
技術的負債解消の取り組みと専門チームのお話 #技術的負債_Findy
bengo4com
1
540
アーキテクチャわからん、の話
shirayanagiryuji
0
270
プロダクト観点で考えるデータ基盤の育成戦略 / Growth Strategy of Data Analytics Platforms from a Product Perspective
yamamotoyuta
0
420
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
Site-Speed That Sticks
csswizardry
3
320
Building Applications with DynamoDB
mza
93
6.2k
How GitHub (no longer) Works
holman
313
140k
Unsuck your backbone
ammeep
669
57k
How STYLIGHT went responsive
nonsquared
98
5.3k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Documentation Writing (for coders)
carmenintech
67
4.6k
Keith and Marios Guide to Fast Websites
keithpitt
410
22k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Navigating Team Friction
lara
183
15k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
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 /...