7. Chrome version 43
// Check for Geolocation API permissions
navigator
.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);
};
});
57. 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
58. Slide from âPolymer and modern web APIs: In production at Google scale"
0.51.0
35% LESS CODE
42kb19kb -
59. Slide from âPolymer and modern web APIs: In production at Google scale"
1.0 Features
Shady DOM
Theming with CSS custom prop.
60. Slide from âPolymer and modern web APIs: In production at Google scale"
Existing Frameworks
Applications
Web Platform
Web Components Built with Polymer (or not)
61. core paper
Slide from âPolymer and modern web APIs: In production at Google scale"
62. core paper
Slide from âPolymer and modern web APIs: In production at Google scale"
87. <!-- 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 -->
<santaselïŹe-scene route="santaselïŹe"
path=âscenes/santaselïŹe-{{lang}}.htmlâ
loadingBgColor="#83D7F5"
loadingSrc=âscenes/selïŹe_loading.svgâ hidden>âŠ
</lazy-pages>
<santa-app>
</santa-app>
Slide from âPolymer and modern web APIs: In production at Google scale"
88. <!-- 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 -->
<santaselïŹe-scene route="santaselïŹe"
path=âscenes/santaselïŹe-{{lang}}.htmlâ
loadingBgColor="#83D7F5"
loadingSrc=âscenes/selïŹe_loading.svgâ hidden>âŠ
</lazy-pages>
<santa-app>
</santa-app>
Slide from âPolymer and modern web APIs: In production at Google scale"