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
150
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
530
Houdini Breakout Session
surma
4
570
Houdini – Demystifying CSS
surma
3
300
Progressive Web Apps – Mobile has natively come to the Web
surma
5
280
The Glorious Era of HTTP/2
surma
1
82
Instant Loading
surma
4
1.2k
HTTP/2 101
surma
5
470
What if there isn’t?
surma
0
74
The Web is a Contender
surma
0
110
Other Decks in Technology
See All in Technology
分布で見る効果検証入門 / ai-distributional-effect
cyberagentdevelopers
PRO
3
620
LeSSに潜む「隠れWF病」とその処方箋
lycorptech_jp
PRO
2
110
【LT】ソフトウェア産業は進化しているのか? -Javaの想い出とともに- #jjug_ccc
takabow
0
160
ABEMA のコンテンツ制作を最適化!生成 AI x クラウド映像編集システム / abema-ai-editor
cyberagentdevelopers
PRO
1
160
30万人が利用するチャットをFirebase Realtime DatabaseからActionCableへ移行する方法
ryosk7
2
300
新卒1年目が向き合う生成AI事業の開発を加速させる技術選定 / ai-web-launcher
cyberagentdevelopers
PRO
3
1.2k
CI/CDやテスト自動化の開発プロジェクトへの適用
megascus
3
680
WHOLENESS, REPAIRING, AND TO HAVE FUN: 全体性、修復、そして楽しむこと
snoozer05
PRO
3
5.5k
入門『状態』#kaigionrails / "state" for beginners with Rails
shinkufencer
2
820
What's in a Postgres major release? An analysis of contributions in the v17 timeframe | Claire Giordano | PGConf EU 2024
clairegiordano
1
700
AWS re:Inventを徹底的に楽しむためのTips / Tips for thoroughly enjoying AWS re:Invent
yuj1osm
0
300
Databricksで構築する初めての複合AIシステム - ML15min
taka_aki
2
1.4k
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
45
6.5k
Raft: Consensus for Rubyists
vanstee
136
6.6k
Code Review Best Practice
trishagee
64
17k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
24k
GraphQLとの向き合い方2022年版
quramy
43
13k
Six Lessons from altMBA
skipperchong
26
3.4k
Building Applications with DynamoDB
mza
90
6k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.2k
The Power of CSS Pseudo Elements
geoffreycrofte
72
5.3k
Docker and Python
trallard
40
3.1k
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 /...