#useThePlatform
a.k.a JorgeCasar
Fast load from deep link
Fast response to user actions
Immersive app-like user experience
Reliable offline and on poor networks
https://myapp/user
HTML
Server
User page
https://myapp/user
HTML
Server
/messages
Messages page
Fast load from deep link
Fast response to user actions
Immersive app-like user experience
Reliable offline and on poor networks
https://myapp/user
JS app bundle
Server
User page
User page
https://myapp/user
Server
User page
/messages
Messages page
Fast load from deep link
Fast response to user actions
Immersive app-like user experience
Reliable offline and on poor networks
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
Imports
<!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
index.html
Client
Server
Service
Worker
Custom
elements
Imports
Service
Worker
HTTP/2
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
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
https://myapp/page2
Server
Network cache
page-1
page-3
my-list
my-form
Page 2
https://myapp/page2
Server
Network cache
page-1
page-3
my-list
my-form
Page 2
https://myapp/page1
Page 1
Fast load from deep link
Fast response to user actions
Immersive app-like user experience
Reliable offline and on poor networks