chrome enchanted 2015
TRANSCRIPT
![Page 1: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/1.jpg)
+ChangwookDoh@cwdoh
Google I/O extended 2015 SEOUL
Chrome enchanted 2015
![Page 2: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/2.jpg)
Chang W. Doh
Developer at SKPlanet
Organizer of ● GDG Korea WebTech
Contributor of ● HTML5Rocks/KO ● Web Fundamentals/KO
![Page 3: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/3.jpg)
![Page 4: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/4.jpg)
![Page 5: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/5.jpg)
Permission query
![Page 6: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/6.jpg)
Check before do something.
![Page 7: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/7.jpg)
Chrome version 43
// Check for Geolocation API permissionsnavigator.permissions.query({name:’geolocation’}).then(function(permissionStatus){console.log('permission status is ',permissionStatus.status);
permissionStatus.onchange = function() {console.log('permission has changed to ',this.status);
};});
![Page 8: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/8.jpg)
Theme color
![Page 9: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/9.jpg)
<metaIIIIname="themeKcolor"IIIIcontent="#40bd9e">
![Page 10: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/10.jpg)
App install banner
![Page 11: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/11.jpg)
![Page 12: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/12.jpg)
manifest.json ServiceWorkerServed over HTTPSVisit frequency heuristics
Requirements
![Page 13: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/13.jpg)
{"short_name": "Kinlan's Amaze App","name": "Kinlan's Amazing Application ++","icons": [
{"src": "launcherKiconK3x.png","sizes": "144x144","type": "image/png"
}],"start_url": "index.html","display": "standalone"
}
manifest.json
![Page 14: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/14.jpg)
<linkrel=“manifest"href="manifest.json">
HTML
![Page 15: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/15.jpg)
Cancelling installation
window.addEventListener(‘beforeinstallprompt', function(e) { e.preventDefault(); return false; });
![Page 16: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/16.jpg)
Checking installation
window.addEventListener(‘beforeinstallprompt', function(e) { e.userChoice.then(function(choiceResult) { if(choiceResult.outcome == 'dismissed') { console.log('User cancelled install'); } else { console.log('User added to homescreen'); } }); });
![Page 17: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/17.jpg)
Are you Android
developer?!?
![Page 18: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/18.jpg)
Chrome custom tabs
![Page 19: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/19.jpg)
When showing web contents in native app…
Launching the browserEmbedding WebView
![Page 20: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/20.jpg)
One more thing!
![Page 21: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/21.jpg)
Chrome Custom Tabs
![Page 22: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/22.jpg)
Chrome Custom Tabs
Share all contexts with ChromeCustomize how Chrome L&FPre-start and pre-fetch contentEasy to implement
![Page 23: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/23.jpg)
Available on Chrome 45 dev channel
Visit for samples: https://github.com/GoogleChrome/custom-tabs-client
![Page 24: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/24.jpg)
“If your app directs people to URLs outside your domain”
When I use Chrome custom tabs?
![Page 25: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/25.jpg)
Native app install banner
![Page 26: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/26.jpg)
![Page 27: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/27.jpg)
{IIII"short_name":I"Kinlan'sIAmazeIApp",IIII"name":I"Kinlan'sIAmazingIApplicationI++",IIII"icons":I[…],IIII"start_url":I"index.html",IIII"display":I“standalone”,I
}
manifest.json
"prefer_related_applications": true,"related_applications": [
{"platform": "play","id": "com.google.samples.apps.iosched"
}],…
![Page 28: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/28.jpg)
“The user has visited your site
twice over 2 separate days
during the course of 2 weeks.”
When can my user see that banner?Rule of 2-2-2
![Page 29: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/29.jpg)
Are you Android
developer?!?
![Page 30: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/30.jpg)
“이제 다른 세션으로 가셔도 좋습니다.”
![Page 31: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/31.jpg)
Service Worker
![Page 32: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/32.jpg)
Yay, ServiceWorker!!
● Caching/offiline● Push notification● Background sync● Intercept request● Offline google analytics
![Page 33: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/33.jpg)
WEB PAGE
![Page 34: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/34.jpg)
Web Page are running on single thread(UI)
WEB PAGE
![Page 35: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/35.jpg)
WebWorker
WebPage has spawned new thread(Worker)
On UI thread On Background thread
![Page 36: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/36.jpg)
WebPage install new service module on the browser
Service Worker
JS
Event NetworkBROWSER
Cache
![Page 37: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/37.jpg)
App. Cache!! App. Cache!!Offline!!
Offline!!
Image: ‘Mission Impossible 4’ Movie
![Page 38: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/38.jpg)
![Page 39: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/39.jpg)
![Page 40: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/40.jpg)
![Page 41: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/41.jpg)
“Now, you can use notification for your web app like native app”
https://simple-push-demo.appspot.com/
![Page 42: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/42.jpg)
manifest.json
{IIIIII"IIII"IIII"IIIIIIII"IIIIIIII"IIIIIIII"IIII}],IIIIII"IIII"
}
IIII"gcm_sender_id":I"123456789012",IIIIII"gcm_user_visible_only":ItrueII
![Page 43: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/43.jpg)
javascript - serviceworker code
self.addEventListener('push',Ifunction(event)I{IIIIIIIconsole.log('ReceivedIaIpushImessage',Ievent);IIIIvarItitleI=I'YayIaImessage.';IIIIIIvarIbodyI=I'WeIhaveIreceivedIaIpushImessage.';IIIIIIvarIiconI=I'/images/iconK192x192.png';IIIIIIvarItagI=I'simpleKpushKdemoKnotificationKtag';IIIIevent.waitUntil(IIIIIIIIIIself.registration.showNotification(title,I{II IIIIIIIIIIIIbody:Ibody,IIIIIIIIIIIIicon:Iicon,IIIIIIIIIIIIIItag:ItagIIIIIIIIII})IIIIII);II});
![Page 44: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/44.jpg)
![Page 45: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/45.jpg)
Slide from “Polymer and modern web APIs: In production at Google scale"
READYFOR
PRODUCTION
![Page 46: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/46.jpg)
“Existing HTML is a set of tools useful 20 years ago for building documents, not applications.”
![Page 47: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/47.jpg)
Slide from “Polymer and modern web APIs: In production at Google scale"
![Page 48: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/48.jpg)
Image: Slide from “Polymer and modern web APIs: In production at Google scale"
![Page 49: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/49.jpg)
Web Components
HTML ImportsCustom elementsTemplate Shadow DOM
컴포넌트 로딩
엘리먼트 등록
마크업 구조화/생성
스타일과 DOM을 보호
Visit to read in detail: http://goo.gl/aiEI6F
![Page 50: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/50.jpg)
Why Polymer?
![Page 51: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/51.jpg)
Step 1
Slide from “Polymer and modern web APIs: In production at Google scale"
![Page 52: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/52.jpg)
Step 2https://goo.gl/Y77E43
Slide from “Polymer and modern web APIs: In production at Google scale"
![Page 53: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/53.jpg)
We wanted to do better.
Slide from “Polymer and modern web APIs: In production at Google scale"
![Page 54: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/54.jpg)
Slide from “Polymer and modern web APIs: In production at Google scale"
![Page 55: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/55.jpg)
Learnings from Web Starter Kit, IO 2015 and Santa Tracker
Slide from “Polymer and modern web APIs: In production at Google scale"
![Page 56: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/56.jpg)
Polymer 1.0REALLY Quick reviewREALLY
![Page 57: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/57.jpg)
Slide from “Polymer and modern web APIs: In production at Google scale"
0
150
300
450
600
Time
0
750
1500
2250
3000
Time
mobile safari
4x FASTER
Chrome
3x FASTER
![Page 58: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/58.jpg)
Slide from “Polymer and modern web APIs: In production at Google scale"
0.51.0
35% LESS CODE42kb 19kb -
![Page 59: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/59.jpg)
Slide from “Polymer and modern web APIs: In production at Google scale"
1.0 Features
Shady DOMTheming with CSS custom prop.
![Page 60: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/60.jpg)
Slide from “Polymer and modern web APIs: In production at Google scale"
Existing Frameworks
Applications
Web Platform
Web Components Built with Polymer (or not)
![Page 61: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/61.jpg)
core paper
Slide from “Polymer and modern web APIs: In production at Google scale"
![Page 62: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/62.jpg)
core paper
Slide from “Polymer and modern web APIs: In production at Google scale"
![Page 63: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/63.jpg)
Slide from “Polymer and modern web APIs: In production at Google scale"
![Page 64: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/64.jpg)
Slide from “Polymer and modern web APIs: In production at Google scale"
![Page 65: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/65.jpg)
Slide from “Polymer and modern web APIs: In production at Google scale"
![Page 66: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/66.jpg)
<google-drive>
<google-calendar>
<google-hangout-button>
<google-cloud>
<google-castable-video>
<google-analytics>
<google-map>
<google-sheets>
<google-translate>
<google-youtube>
Slide from “Polymer and modern web APIs: In production at Google scale"
![Page 67: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/67.jpg)
Slide from “Polymer and modern web APIs: In production at Google scale"
![Page 68: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/68.jpg)
Slide from “Polymer and modern web APIs: In production at Google scale"
![Page 69: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/69.jpg)
<platinum-sw>
<platinum-sw-fetch>
<platinum-sw-cache><platinum-sw-register>
<platinum-push-messaging>
…
Slide from “Polymer and modern web APIs: In production at Google scale"
![Page 70: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/70.jpg)
Slide from “Polymer and modern web APIs: In production at Google scale"
![Page 71: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/71.jpg)
Slide from “Polymer and modern web APIs: In production at Google scale"
![Page 72: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/72.jpg)
<gold-cc-input>
<gold-zip-input>
<gold-cc-expiration-input>
<gold-cc-cvc-input>
<gold-phone-input><gold-email-input>
…
Slide from “Polymer and modern web APIs: In production at Google scale"
![Page 73: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/73.jpg)
elements.polymer-project.org
Slide from “Polymer and modern web APIs: In production at Google scale"
![Page 74: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/74.jpg)
There’s an element for that!
Slide from “Polymer and modern web APIs: In production at Google scale"
![Page 75: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/75.jpg)
Featured cases
![Page 76: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/76.jpg)
Slide from “Polymer and modern web APIs: In production at Google scale"
![Page 77: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/77.jpg)
Slide from “Polymer and modern web APIs: In production at Google scale"
![Page 78: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/78.jpg)
Slide from “Polymer and modern web APIs: In production at Google scale"
![Page 79: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/79.jpg)
+
Slide from “Polymer and modern web APIs: In production at Google scale"
![Page 80: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/80.jpg)
Slide from “Polymer and modern web APIs: In production at Google scale"
![Page 81: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/81.jpg)
Slide from “Polymer and modern web APIs: In production at Google scale"
![Page 82: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/82.jpg)
Slide from “Polymer and modern web APIs: In production at Google scale"
![Page 83: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/83.jpg)
Google Santa santatracker.googl
Slide from “Polymer and modern web APIs: In production at Google scale"
![Page 84: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/84.jpg)
Slide from “Polymer and modern web APIs: In production at Google scale"
![Page 85: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/85.jpg)
<santa-app> </santa-app>
github.com/google/santa-tracker-webSlide from “Polymer and modern web APIs: In production at Google scale"
![Page 86: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/86.jpg)
<santa-app>
</santa-app>github.com/google/santa-tracker-web
Slide from “Polymer and modern web APIs: In production at Google scale"
![Page 87: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/87.jpg)
<!-- route controller --> <santa-router route="{{route}}" autoHash></santa-router>
<!-- scenes elements are upgraded on demand --> <lazy-pages selected=“{{route}}” selectedItem=“{{selectedScene}}” valueattr=“route”> <!-- scenes elements inherit from base-scene.html --> <village-scene route=“village" path=“scenes/village_{{lang}}.html” hidden>…
<!-- scenes can specify their own loading image & background --> <santaselfie-scene route="santaselfie" path=“scenes/santaselfie-{{lang}}.html” loadingBgColor="#83D7F5" loadingSrc=“scenes/selfie_loading.svg” hidden>… </lazy-pages>
<santa-app>
</santa-app>
Slide from “Polymer and modern web APIs: In production at Google scale"
![Page 88: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/88.jpg)
<!-- route controller --> <santa-router route="{{route}}" autoHash></santa-router>
<!-- scenes elements are upgraded on demand --> <lazy-pages selected=“{{route}}” selectedItem=“{{selectedScene}}” valueattr=“route”> <!-- scenes elements inherit from base-scene.html --> <village-scene route=“village" path=“scenes/village_{{lang}}.html” hidden>…
<!-- scenes can specify their own loading image & background --> <santaselfie-scene route="santaselfie" path=“scenes/santaselfie-{{lang}}.html” loadingBgColor="#83D7F5" loadingSrc=“scenes/selfie_loading.svg” hidden>… </lazy-pages>
<santa-app>
</santa-app>
Slide from “Polymer and modern web APIs: In production at Google scale"
![Page 89: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/89.jpg)
ANY QUESTION?
![Page 90: Chrome enchanted 2015](https://reader034.vdocuments.us/reader034/viewer/2022042518/55c2bf25bb61ebc52d8b46ea/html5/thumbnails/90.jpg)
ROCK YOU!