How to improve
your App's performance (with Polymer)
#useThePlatform
Jorge del Casar
a.k.a JorgeCasar
Se busca
Desarrollador Javascript
Developer complexity
Working around the platform
User experience
Mobile matters
#UseThePlatform
Ideal user experience
New platform features
Pattern for use them
See it in action
Ideal user experience
Fast load from deep link
Fast response to user actions
Immersive app-like user experience
Reliable offline and on poor networks
Web 1.0
https://myapp/user
HTML
Server
User page
Web 1.0
https://myapp/user
HTML
Server
/messages
Messages page
Web 1.0
Fast load from deep link
Fast response to user actions
Immersive app-like user experience
Reliable offline and on poor networks
Single Page App (SPA)
https://myapp/user
JS app bundle
Server
User page
User page
Single Page App (SPA)
https://myapp/user
Server
User page
/messages
Messages page
Single Page App (SPA)
Fast load from deep link
Fast response to user actions
Immersive app-like user experience
Reliable offline and on poor networks
How do we get it?
Fast load from deep link
Fast response to user actions
Immersive app-like user experience
Reliable offline and on poor networks
Custom
elements
Imports
Service
Worker
HTTP/2
Custom
elements
Problem: Manage UI complexity
Workaround: Bring your own framework
Lied to: Payload, complexity, fragmentation
Solution: Custom elements
#useThePlatform
DOM is the framework
Imports
Problem: Need to load components
Workaround: Bring your javascript loader
Lied to: Complexity, prevents optimizations
Solution: HTML Imports
#useThePlatform
Browser knows dependencies tree
<!doctype html>
<html>
<head>
<link rel="import" href="my-app.html">
</head>
<body>
<my-app></my-app>
</body>
</html><link rel="import" href="my-pages.html">
<link rel="import" href="page-1.html">
<link rel="import" href="page-2.html">
<link rel="import" href="page-3.html">
<template>
<my-pages>
<page-1></page-1>
<page-2></page-2>
<page-3></page-3>
</my-pages>
</template>index.html
my-app.html
<template>
<content></content>
</template>
<script>
(function(){
'use strict';
class myElement extends HTMLElement {
}
}());
</script>my-pages.html
<link rel="import" href="my-list">
<template>
<my-list></my-list>
</template>page-1.html
<link rel="import" href="my-form">
<template>
<my-form></my-form>
</template>page-2.html
<link rel="import" href="my-map.html">
<template>
<my-map></my-map>
</template>page-3.html
HTTP/2
Problem: HTTP bad for granular resources
Workaround: Vulcanize, bundling
Lied to: Complex toolchain, ineficient bundles
Solution: HTTP/2 + Server Push
#useThePlatform
Granular resources
index.html
Client
Server
Service
Worker
Problem: Websites doesn't work offline
Workaround: Native app? AppCache?
Solution: Service Worker & pre-caching
#useThePlatform
Rich offline experiences
Intercept and handle requests
Intelillently cache responses
Serve cache offline
Background pre-caching
Custom
elements
Imports
Service
Worker
HTTP/2
1. Push components for initial route
https://myapp/page2
Push granular
components
Server
<my-pages>
<page-1></page-1>
<page-2></page-2>
<page-3></page-3>
</my-pages>
Network cache
page-2
my-form
my-app.html
my-input
my-button
2. Render initial route asap
https://myapp/page2
Server
<my-pages>
<page-1></page-1>
<page-2></page-2>
<page-3></page-3>
</my-pages>
<link rel="import" href="page-2.html">
<my-pages>
<page-1></page-1>
<page-2></page-2>
<page-3></page-3>
</my-pages>
my-app.html
Network cache
page-2
my-form
my-input
my-button
Page 2
3. Pre-cache remaining components
https://myapp/page2
Server
Network cache
page-1
page-3
my-list
my-form
Page 2
4. Lazy-load & create next routes
https://myapp/page2
Server
Network cache
page-1
page-3
my-list
my-form
Page 2
https://myapp/page1
Page 1
Progressive Web App
Fast load from deep link
Fast response to user actions
Immersive app-like user experience
Reliable offline and on poor networks
Push components for initial route
Render the inital route asap
Pre-cache remaining components
Lazy-load & create next routes
PRPL Pattern
Gracias
Jorge del Casar (@jorgecasar)
Live demo
How to improve your App's performance with Polymer
By Jorge del Casar
How to improve your App's performance with Polymer
How to improve your App's performance with Polymer