SlideShare a Scribd company logo
1 of 78
Download to read offline
Building an Appier Web
@AndyDavies NCC Group Nov 2016
https://www.flickr.com/photos/alesimages/4215559895
We’re spending more and more time in apps…
© comScore, Inc. Propri
Digital media usage time is exploding right now, and it’s
predominantly being driven by mobile apps.
476,553 480,967 550,522
409,847
621,410
778,95477,081
97,440
118,299
0
200,000
400,000
600,000
800,000
1,000,000
1,200,000
1,400,000
1,600,000
Jun-2013 Jun-2014 Jun-2015
TotalMinutes(MM)
Desktop Mobile App Mobile Browser Over the past
years, total dig
media usage h
grown 49% wit
mobile apps ha
grown 90% an
contributing to
of the total incr
in time spent.
Mobile browse
also seeing ve
strong growth
53% and even
desktop is still
rising.
Growth in Digital Media Time Spent
Source: comScore Media Metrix Multi-Platform & Mobile Metrix, U.S., Total Audience
+53%
vs. 2013
+90%
vs. 2013
+16%
vs. 2013
© comScore, Inc. Prop
29%
15%
11%
6%
6%
4%
3%
3%
23%
Social Networking
Radio
Games
Multimedia
Instant Messengers
Music
Retail
News/Information
All Others
Social Networ
Radio and Ga
contribute mo
than half of to
time spent on
mobile apps.
strength of the
categories
highlights that
mobile device
more heavily
for entertainm
and communi
than their des
counterparts.
Share of Mobile App Time Spent
Source: comScore Media Metrix MP and Mobile Metrix, U.S., Total Audience, June 2015
Social media and entertainment account for the six top app
categories and drive two-thirds of total time spent on apps.But our usage can be very specific
What do we like about apps?
https://www.flickr.com/photos/jennicatpink/819741953
Launch from home screen
Splash screen on startup
A simple app…
(App reads data from
a monitoring API)
Works offline too
Works offline too
(Cached data, so
may be out of date)
Apps have their challenges too
https://www.flickr.com/photos/justinjovellanos/15340862812
“There’s an App for that”…
…but can you can find it?
To help we started with subtle buttons…
but that wasn’t enough…
“Please, please download our app”
“Download our app or else!”
Updates, updates and more updates…
https://www.flickr.com/photos/michigancommunities/4614847059
Installing apps consumes storage and data
https://www.flickr.com/photos/piper/6199548216
So what about the web?
© comScore, Inc. Pro
And mobile audience growth is being driven more by mobile we
properties, which are actually bigger and growing faster than ap
A comparison
Top 1000 App
the Top 1000
Web Propertie
shows a surp
result. Not on
mobile web
properties ha
audiences tha
more than 2.5
size, but thes
audiences are
growing twice
fast.
Average Monthly Audience: Top 1000 Mobile Apps vs. Top 1000 Mobile Web Properties
Source: comScore Mobile Metrix, U.S., Age 18+
-
1,000
2,000
3,000
4,000
5,000
6,000
7,000
8,000
9,000
10,000
Jun-2014 Sep-2014 Dec-2014 Mar-2015 Jun-2015
UniqueVisitors(000)
Apps Mobile Web +42%
y/y
+21%
y/y
The web has great reach…
and it’s due to the simple power of the URL
http://example.com
https://www.flickr.com/photos/aaronpk/5352508316
Makes the web linkable…
…indexable, searchable
And shareable
https://www.flickr.com/photos/thomashawk/8598744061
Web pages adapt to our diversity of devices
http://www.flickr.com/photos/adactio/12674230513
https://www.flickr.com/photos/protohiro/5769980863
And there are no gatekeepers
Or waiting for updates
https://www.flickr.com/photos/star-bellied-girl/8283340977
What if…
We could combine the richness of apps…
…with the low friction of the web?
https://www.flickr.com/photos/zedzap/13253676614
So what might we need to build it?
https://www.flickr.com/photos/aigle_dore/7912377858
We can already add pages to our home screen
Supported by most major mobile
operating systems and browsers



(Bookmarks page rather than site)
Can specify the icon etc. via meta tags
<link rel="apple-touch-icon" href="icons/logo/ncc-logo-120x120-ios.png">
<link rel="apple-touch-icon-precomposed" href="icons/logo/ncc-logo-120x120-ios.png">
<link rel="apple-touch-startup-image" href="/images/startup.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
(Minimal iOS set, ideally need more icon and splash screen sizes
and other mobile browsers prefer different meta data)
W3C App Manifest brings it all together
{
"lang": "en",
"dir": "ltr",
"name": "Monitoring",
"description": "Performance and Availability Monitoring by NCC Group",
"short_name": "Monitoring",
"icons": [
{
"src": "icons/logo/ncc-logo-144x144-white.png",
"sizes": "144x144",
"type": "image/png"
},
. . .
],
"scope": "/pwa",
"start_url": "/pwa/index.html",
"display": "standalone",
"orientation": "portrait",
"theme_color": "#c41230",
"background_color": "#fff",
}
https://www.w3.org/TR/appmanifest/
Homescreen Icon
{
"lang": "en",
"dir": "ltr",
"name": "Monitoring",
"description": "Performance and Availability Monitoring by NCC Group",
"short_name": "Monitoring",
"icons": [
{
"src": "icons/logo/ncc-logo-144x144-white.png",
"sizes": "144x144",
"type": "image/png"
},
. . .
],
"scope": "/pwa",
"start_url": "/pwa/index.html",
"display": "standalone",
"orientation": "portrait",
"theme_color": "#c41230",
"background_color": "#fff",
}
URL of the page that’s launched
{
"lang": "en",
"dir": "ltr",
"name": "Monitoring",
"description": "Performance and Availability Monitoring by NCC Group",
"short_name": "Monitoring",
"icons": [
{
"src": "icons/logo/ncc-logo-144x144-white.png",
"sizes": "144x144",
"type": "image/png"
},
. . .
],
"scope": "/pwa",
"start_url": "/pwa/index.html",
"display": "standalone",
"orientation": "portrait",
"theme_color": "#c41230",
"background_color": "#fff",
}
Splash screen
{
"lang": "en",
"dir": "ltr",
"name": "Monitoring",
"description": "Performance and Availability Monitoring by NCC Group",
"short_name": "Monitoring",
"icons": [
{
"src": "icons/logo/ncc-logo-144x144-white.png",
"sizes": "144x144",
"type": "image/png"
},
. . .
],
"scope": "/pwa",
"start_url": "/pwa/index.html",
"display": "standalone",
"orientation": "portrait",
"theme_color": "#c41230",
"background_color": "#fff",
}
Orientation and presence of browser controls
{
"lang": "en",
"dir": "ltr",
"name": "Monitoring",
"description": "Performance and Availability Monitoring by NCC Group",
"short_name": "Monitoring",
"icons": [
{
"src": "icons/logo/ncc-logo-144x144-white.png",
"sizes": "144x144",
"type": "image/png"
},
. . .
],
"scope": "/pwa",
"start_url": "/pwa/index.html",
"display": "standalone",
"orientation": "portrait",
"theme_color": "#c41230",
"background_color": "#fff",
}
And can even offer an install prompt
(Browsers use several heuristics before deciding to prompt)
Can listen for install event and track in analytics
window.addEventListener('beforeinstallprompt', function(e) {
e.userChoice.then(function(choiceResult) {
console.log(choiceResult.outcome);
if (choiceResult.outcome == 'dismissed') {
// Track not installed
} else {
// Track installation
}
});
});
(Chrome supports this but it’s not in AppManifest standard)
Can listen for install event and track in analytics
window.addEventListener('appinstalled', function(e) {
// Track installation
});
(AppManifest standard proposes this)
But how do we cope with a poor (or no) network?
https://www.flickr.com/photos/odaeus/3942500793
http://alistapart.com/article/application-cache-is-a-douchebag
Our first attempt had a few issues…
https://www.w3.org/TR/service-workers/
So we tried another approach
Service Worker is an in-browser network proxy
that can intercept requests and responses
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('serviceworker.js', {
scope: '/'
}).then(function(registration) {
// Anything else you want to do with registration
// e.g. subscribe to push messages
}).catch(function(err) {
console.log('Can't register service worker: ', err);
});
}
</script>
Register a Service Worker
Option to install via Link may be coming
<link rel="serviceworker" scope="/" href=“/serviceworker.js">
or
Link </serviceworker.js>; rel=serviceworker scope=/
(Origin trial in Chrome, under consideration in Firefox)
Service Worker Skeleton
self.addEventListener('install', function(event) {
self.skipWaiting();
});
self.addEventListener('activate', function(event) {
});
self.addEventListener('fetch', function(event) {
});
What are apps actually made of?
Shell Content
Many apps are made of a shell and the content
Going offline - caching assets on startup
var cacheVersion = "v1";
var cacheResources = [
"/pwa/index.html",
"/pwa/icons/logo/ncc-logo.svg",
"/pwa/icons/ui/sprite.svg"
// etc
];
self.addEventListener('install', function(event) {
self.skipWaiting();
event.waitUntil(
caches.open(cacheVersion).then(function(cache) {
return cache.addAll(cacheResources);
})
);
Going offline - retrieving from cache on fetch
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request).then(function(response) {
return response || fetch(event.request);
})
);
});
Try the cache first and go to the
network if there’s no match
Going offline - cleanup previous resources
self.addEventListener('activate', function(event) {
// Remove outdated caches, migrate data etc,
});
Caching as a fallback for network
• Make a request
• Succeeds - cache response and return it
• Fails - check cache and return cached response
• Network request fails and not in cache ¯_( )_/¯
(OK so you probably want to manage the users experience in the last case)
Caching patterns depend on use case, some very helpful resources
Mozilla https://serviceworke.rs/
Jake Archibald https://jakearchibald.com/2014/offline-cookbook/
ServiceWork Toolbox https://github.com/GoogleChrome/sw-toolbox
Service Worker also enables other features
https://www.w3.org/TR/push-api/
Push Notifications
When put together…
When put together…
(App reads data from
a monitoring API)
When put together…
When put together…
(Cached data, so
may be out of date)
When put together…
Powerful APIs (inc Service Worker) require HTTPS
https://www.flickr.com/photos/zebble/6080622
“The future is here, it’s just unevenly distributed”
✓ ✓ ✓ WiP ?✓
We’re getting better access to native features
• Camera
• Notifications
• Location
• Geofencing
• Alarms
• Vibration
• Sharing
• Battery
• and more…
(On some platforms)
background sync
https://wicg.github.io/BackgroundSync/spec/
Background Sync (draft)
Easier payment mechanisms
https://www.w3.org/TR/payment-request/
https://www.flickr.com/photos/acearchie/4369849179
“So how do we test this thing?”
Chrome DevTools
https://github.com/GoogleChrome/lighthouse
Lighthouse
https://speedcurve.com/blog/pwa-performance/
WebPageTest
WebPageTest
You can deploy them today
• 3x more time spent on site
• 40% higher re-engagement rate
• 70% greater conversion rate for
those arriving via Homescreen
• 3x lower data usage
https://flights.airberlin.com/en-US/progressive-web-app
AirBerlin demo at Google I/O
My current favourite…
Doesn’t support notifications yet…
…hopefully will do soon
These apps aren’t packaged and deployed through stores,
they’re just websites that took all the right vitamins
https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/
Alex Russell, Google
I still have questions…
• What might not be suitable as a progressive web app?
• Can we build PWAs that are as fast and frictionless as native?
• How can we sell our apps, will we need app stores?
• How do we avoid an uncanny UI valley?
• What happens to storage when every site is a PWA?
“Every step on the path to a PWA makes sense on it’s own”
Jason Grigsby
http://www.flickr.com/photos/auntiep/5024494612
@AndyDavies
andy.davies@nccgroup.trust
http://slideshare.net/andydavies

More Related Content

What's hot

Perf ug fastandbeautiful
Perf ug fastandbeautifulPerf ug fastandbeautiful
Perf ug fastandbeautifulDoug Sillars
 
Parisjs fastvideoandimages
Parisjs fastvideoandimagesParisjs fastvideoandimages
Parisjs fastvideoandimagesDoug Sillars
 
Mobile era fastandbeautiful
Mobile era fastandbeautifulMobile era fastandbeautiful
Mobile era fastandbeautifulDoug Sillars
 
Why Progressive Web Apps will transform your website
Why Progressive Web Apps will transform your websiteWhy Progressive Web Apps will transform your website
Why Progressive Web Apps will transform your websiteJason Grigsby
 
Speed is Essential for a Great Web Experience
Speed is Essential for a Great Web ExperienceSpeed is Essential for a Great Web Experience
Speed is Essential for a Great Web ExperienceAndy Davies
 
Progressive Web Apps for Education
Progressive Web Apps for EducationProgressive Web Apps for Education
Progressive Web Apps for EducationChris Love
 
Bordeaux js fastandbeautiful
Bordeaux js fastandbeautifulBordeaux js fastandbeautiful
Bordeaux js fastandbeautifulDoug Sillars
 
Imagesandvideo voxxeddays
Imagesandvideo voxxeddaysImagesandvideo voxxeddays
Imagesandvideo voxxeddaysDoug Sillars
 
Web Performance Optimierung - DWX13
Web Performance Optimierung - DWX13Web Performance Optimierung - DWX13
Web Performance Optimierung - DWX13Walter Ebert
 
Fast Fashion… How Missguided revolutionised their approach to site performanc...
Fast Fashion… How Missguided revolutionised their approach to site performanc...Fast Fashion… How Missguided revolutionised their approach to site performanc...
Fast Fashion… How Missguided revolutionised their approach to site performanc...Andy Davies
 
Responsive images are here. Now what?
Responsive images are here. Now what?Responsive images are here. Now what?
Responsive images are here. Now what?Jason Grigsby
 
Responsive Images and Video
Responsive Images and VideoResponsive Images and Video
Responsive Images and VideoJason Grigsby
 
Its timetostopstalling barcelonajs
Its timetostopstalling barcelonajsIts timetostopstalling barcelonajs
Its timetostopstalling barcelonajsDoug Sillars
 
Adaptive Input — Breaking Development Conference, San Diego
Adaptive Input — Breaking Development Conference, San DiegoAdaptive Input — Breaking Development Conference, San Diego
Adaptive Input — Breaking Development Conference, San DiegoJason Grigsby
 
Fast Fashion… How Missguided revolutionised their approach to site performanc...
Fast Fashion… How Missguided revolutionised their approach to site performanc...Fast Fashion… How Missguided revolutionised their approach to site performanc...
Fast Fashion… How Missguided revolutionised their approach to site performanc...Andy Davies
 
PyconUK: Fast and Beautiful Images
PyconUK: Fast and Beautiful ImagesPyconUK: Fast and Beautiful Images
PyconUK: Fast and Beautiful ImagesDoug Sillars
 
Planning Your Progressive Web App
Planning Your Progressive Web AppPlanning Your Progressive Web App
Planning Your Progressive Web AppJason Grigsby
 
Fast and Beautiful Images: PyConWeb
Fast and Beautiful Images: PyConWebFast and Beautiful Images: PyConWeb
Fast and Beautiful Images: PyConWebDoug Sillars
 
Web Apps and more
Web Apps and moreWeb Apps and more
Web Apps and moreYan Shi
 

What's hot (20)

Perf ug fastandbeautiful
Perf ug fastandbeautifulPerf ug fastandbeautiful
Perf ug fastandbeautiful
 
Dublin Tech Talks
Dublin Tech TalksDublin Tech Talks
Dublin Tech Talks
 
Parisjs fastvideoandimages
Parisjs fastvideoandimagesParisjs fastvideoandimages
Parisjs fastvideoandimages
 
Mobile era fastandbeautiful
Mobile era fastandbeautifulMobile era fastandbeautiful
Mobile era fastandbeautiful
 
Why Progressive Web Apps will transform your website
Why Progressive Web Apps will transform your websiteWhy Progressive Web Apps will transform your website
Why Progressive Web Apps will transform your website
 
Speed is Essential for a Great Web Experience
Speed is Essential for a Great Web ExperienceSpeed is Essential for a Great Web Experience
Speed is Essential for a Great Web Experience
 
Progressive Web Apps for Education
Progressive Web Apps for EducationProgressive Web Apps for Education
Progressive Web Apps for Education
 
Bordeaux js fastandbeautiful
Bordeaux js fastandbeautifulBordeaux js fastandbeautiful
Bordeaux js fastandbeautiful
 
Imagesandvideo voxxeddays
Imagesandvideo voxxeddaysImagesandvideo voxxeddays
Imagesandvideo voxxeddays
 
Web Performance Optimierung - DWX13
Web Performance Optimierung - DWX13Web Performance Optimierung - DWX13
Web Performance Optimierung - DWX13
 
Fast Fashion… How Missguided revolutionised their approach to site performanc...
Fast Fashion… How Missguided revolutionised their approach to site performanc...Fast Fashion… How Missguided revolutionised their approach to site performanc...
Fast Fashion… How Missguided revolutionised their approach to site performanc...
 
Responsive images are here. Now what?
Responsive images are here. Now what?Responsive images are here. Now what?
Responsive images are here. Now what?
 
Responsive Images and Video
Responsive Images and VideoResponsive Images and Video
Responsive Images and Video
 
Its timetostopstalling barcelonajs
Its timetostopstalling barcelonajsIts timetostopstalling barcelonajs
Its timetostopstalling barcelonajs
 
Adaptive Input — Breaking Development Conference, San Diego
Adaptive Input — Breaking Development Conference, San DiegoAdaptive Input — Breaking Development Conference, San Diego
Adaptive Input — Breaking Development Conference, San Diego
 
Fast Fashion… How Missguided revolutionised their approach to site performanc...
Fast Fashion… How Missguided revolutionised their approach to site performanc...Fast Fashion… How Missguided revolutionised their approach to site performanc...
Fast Fashion… How Missguided revolutionised their approach to site performanc...
 
PyconUK: Fast and Beautiful Images
PyconUK: Fast and Beautiful ImagesPyconUK: Fast and Beautiful Images
PyconUK: Fast and Beautiful Images
 
Planning Your Progressive Web App
Planning Your Progressive Web AppPlanning Your Progressive Web App
Planning Your Progressive Web App
 
Fast and Beautiful Images: PyConWeb
Fast and Beautiful Images: PyConWebFast and Beautiful Images: PyConWeb
Fast and Beautiful Images: PyConWeb
 
Web Apps and more
Web Apps and moreWeb Apps and more
Web Apps and more
 

Viewers also liked

Discover how Adidas is using data science to deliver third-party governance
Discover how Adidas is using data science to deliver third-party governanceDiscover how Adidas is using data science to deliver third-party governance
Discover how Adidas is using data science to deliver third-party governanceKristian Sköld
 
Real world experiences with HTTP/2 (Michael Gooding, Javier Garza from Akamai)
Real world experiences with HTTP/2 (Michael Gooding, Javier Garza from Akamai)Real world experiences with HTTP/2 (Michael Gooding, Javier Garza from Akamai)
Real world experiences with HTTP/2 (Michael Gooding, Javier Garza from Akamai)💻 Javier Garza
 
O'Reilly Fluent Conference: HTTP/1.1 vs. HTTP/2
O'Reilly Fluent Conference: HTTP/1.1 vs. HTTP/2O'Reilly Fluent Conference: HTTP/1.1 vs. HTTP/2
O'Reilly Fluent Conference: HTTP/1.1 vs. HTTP/2Load Impact
 
Prioritizing site performance improvements
Prioritizing site performance improvementsPrioritizing site performance improvements
Prioritizing site performance improvementsIris Lieuw
 
Fluent: Making Sense of the New CSS Layout
Fluent: Making Sense of the New CSS LayoutFluent: Making Sense of the New CSS Layout
Fluent: Making Sense of the New CSS LayoutRachel Andrew
 
Front-End Single Point of Failure - Velocity 2016 Training
Front-End Single Point of Failure - Velocity 2016 TrainingFront-End Single Point of Failure - Velocity 2016 Training
Front-End Single Point of Failure - Velocity 2016 TrainingPatrick Meenan
 
Debugging Distributed Systems - Velocity Santa Clara 2016
Debugging Distributed Systems - Velocity Santa Clara 2016Debugging Distributed Systems - Velocity Santa Clara 2016
Debugging Distributed Systems - Velocity Santa Clara 2016Donny Nadolny
 
Measuring performance - Velocity 2016 Training
Measuring performance - Velocity 2016 TrainingMeasuring performance - Velocity 2016 Training
Measuring performance - Velocity 2016 TrainingPatrick Meenan
 
How slow load times hurt UX (and what you can do about it) [FluentConf 2016]
How slow load times hurt UX (and what you can do about it) [FluentConf 2016]How slow load times hurt UX (and what you can do about it) [FluentConf 2016]
How slow load times hurt UX (and what you can do about it) [FluentConf 2016]Tammy Everts
 
Service workers - Velocity 2016 Training
Service workers - Velocity 2016 TrainingService workers - Velocity 2016 Training
Service workers - Velocity 2016 TrainingPatrick Meenan
 
Scaling Front-End Performance - Velocity 2016
Scaling Front-End Performance - Velocity 2016Scaling Front-End Performance - Velocity 2016
Scaling Front-End Performance - Velocity 2016Patrick Meenan
 
TLS - 2016 Velocity Training
TLS - 2016 Velocity TrainingTLS - 2016 Velocity Training
TLS - 2016 Velocity TrainingPatrick Meenan
 
Using machine learning to determine drivers of bounce and conversion
Using machine learning to determine drivers of bounce and conversionUsing machine learning to determine drivers of bounce and conversion
Using machine learning to determine drivers of bounce and conversionTammy Everts
 
Container Orchestration Wars
Container Orchestration WarsContainer Orchestration Wars
Container Orchestration WarsKarl Isenberg
 
Reorganizing Website Architecture for HTTP/2 and Beyond
Reorganizing Website Architecture for HTTP/2 and BeyondReorganizing Website Architecture for HTTP/2 and Beyond
Reorganizing Website Architecture for HTTP/2 and BeyondKazuho Oku
 

Viewers also liked (17)

Discover how Adidas is using data science to deliver third-party governance
Discover how Adidas is using data science to deliver third-party governanceDiscover how Adidas is using data science to deliver third-party governance
Discover how Adidas is using data science to deliver third-party governance
 
Real world experiences with HTTP/2 (Michael Gooding, Javier Garza from Akamai)
Real world experiences with HTTP/2 (Michael Gooding, Javier Garza from Akamai)Real world experiences with HTTP/2 (Michael Gooding, Javier Garza from Akamai)
Real world experiences with HTTP/2 (Michael Gooding, Javier Garza from Akamai)
 
O'Reilly Fluent Conference: HTTP/1.1 vs. HTTP/2
O'Reilly Fluent Conference: HTTP/1.1 vs. HTTP/2O'Reilly Fluent Conference: HTTP/1.1 vs. HTTP/2
O'Reilly Fluent Conference: HTTP/1.1 vs. HTTP/2
 
Prioritizing site performance improvements
Prioritizing site performance improvementsPrioritizing site performance improvements
Prioritizing site performance improvements
 
Fluent: Making Sense of the New CSS Layout
Fluent: Making Sense of the New CSS LayoutFluent: Making Sense of the New CSS Layout
Fluent: Making Sense of the New CSS Layout
 
Front-End Single Point of Failure - Velocity 2016 Training
Front-End Single Point of Failure - Velocity 2016 TrainingFront-End Single Point of Failure - Velocity 2016 Training
Front-End Single Point of Failure - Velocity 2016 Training
 
Debugging Distributed Systems - Velocity Santa Clara 2016
Debugging Distributed Systems - Velocity Santa Clara 2016Debugging Distributed Systems - Velocity Santa Clara 2016
Debugging Distributed Systems - Velocity Santa Clara 2016
 
Fail Well
Fail WellFail Well
Fail Well
 
Measuring performance - Velocity 2016 Training
Measuring performance - Velocity 2016 TrainingMeasuring performance - Velocity 2016 Training
Measuring performance - Velocity 2016 Training
 
How slow load times hurt UX (and what you can do about it) [FluentConf 2016]
How slow load times hurt UX (and what you can do about it) [FluentConf 2016]How slow load times hurt UX (and what you can do about it) [FluentConf 2016]
How slow load times hurt UX (and what you can do about it) [FluentConf 2016]
 
Service workers - Velocity 2016 Training
Service workers - Velocity 2016 TrainingService workers - Velocity 2016 Training
Service workers - Velocity 2016 Training
 
Scaling Front-End Performance - Velocity 2016
Scaling Front-End Performance - Velocity 2016Scaling Front-End Performance - Velocity 2016
Scaling Front-End Performance - Velocity 2016
 
TLS - 2016 Velocity Training
TLS - 2016 Velocity TrainingTLS - 2016 Velocity Training
TLS - 2016 Velocity Training
 
Measuring Continuity
Measuring ContinuityMeasuring Continuity
Measuring Continuity
 
Using machine learning to determine drivers of bounce and conversion
Using machine learning to determine drivers of bounce and conversionUsing machine learning to determine drivers of bounce and conversion
Using machine learning to determine drivers of bounce and conversion
 
Container Orchestration Wars
Container Orchestration WarsContainer Orchestration Wars
Container Orchestration Wars
 
Reorganizing Website Architecture for HTTP/2 and Beyond
Reorganizing Website Architecture for HTTP/2 and BeyondReorganizing Website Architecture for HTTP/2 and Beyond
Reorganizing Website Architecture for HTTP/2 and Beyond
 

Similar to Building an Appier Web - Velocity Amsterdam 2016

The Case for Progressive Web Apps
The Case for Progressive Web AppsThe Case for Progressive Web Apps
The Case for Progressive Web AppsJason Grigsby
 
Basic Understanding of Progressive Web Apps
Basic Understanding of Progressive Web AppsBasic Understanding of Progressive Web Apps
Basic Understanding of Progressive Web AppsAnjaliTanpure1
 
Go for Progressive Web Apps. Get a Better, Low Cost, Mobile Presence
Go for Progressive Web Apps. Get a Better, Low Cost, Mobile PresenceGo for Progressive Web Apps. Get a Better, Low Cost, Mobile Presence
Go for Progressive Web Apps. Get a Better, Low Cost, Mobile PresenceMagic Software
 
IRJET-Garbage Monitoring and Management using Internet of things
IRJET-Garbage Monitoring and Management using Internet of thingsIRJET-Garbage Monitoring and Management using Internet of things
IRJET-Garbage Monitoring and Management using Internet of thingsIRJET Journal
 
From AMP to PWA
From AMP to PWAFrom AMP to PWA
From AMP to PWAIdo Green
 
Service workers are your best friends
Service workers are your best friendsService workers are your best friends
Service workers are your best friendsAntonio Peric-Mazar
 
Cloud web applications: the new perspective of sproutcore
Cloud web applications: the new perspective of sproutcoreCloud web applications: the new perspective of sproutcore
Cloud web applications: the new perspective of sproutcoreDavid Saitta
 
Andriy Vandakurov about "Frontend. Global domination"
Andriy Vandakurov about  "Frontend. Global domination" Andriy Vandakurov about  "Frontend. Global domination"
Andriy Vandakurov about "Frontend. Global domination" Pivorak MeetUp
 
A year with progressive web apps! #DevConMU
A year with progressive web apps! #DevConMUA year with progressive web apps! #DevConMU
A year with progressive web apps! #DevConMUAntonio Peric-Mazar
 
Progressive Web Apps - Intro & Learnings
Progressive Web Apps - Intro & LearningsProgressive Web Apps - Intro & Learnings
Progressive Web Apps - Intro & LearningsJohannes Weber
 
Building Mobile Optimized Websites
Building Mobile Optimized WebsitesBuilding Mobile Optimized Websites
Building Mobile Optimized Websiteshaxorize
 
“Building Mobile Optimized Websites,” Nick Bourgeois / Ray Villares
“Building Mobile Optimized Websites,” Nick Bourgeois / Ray Villares“Building Mobile Optimized Websites,” Nick Bourgeois / Ray Villares
“Building Mobile Optimized Websites,” Nick Bourgeois / Ray Villaresrayvillares
 
Creating an Effective Mobile API
Creating an Effective Mobile API Creating an Effective Mobile API
Creating an Effective Mobile API Nick DeNardis
 
Bootstrapping an App for Launch
Bootstrapping an App for LaunchBootstrapping an App for Launch
Bootstrapping an App for LaunchCraig Phares
 
Make your PWA feel more like an app
Make your PWA feel more like an appMake your PWA feel more like an app
Make your PWA feel more like an appÖnder Ceylan
 
Web application development full &amp; detailed guide for 2022
Web application development  full &amp; detailed guide for 2022Web application development  full &amp; detailed guide for 2022
Web application development full &amp; detailed guide for 2022Metricoid Technology
 
The web - What it has, what it lacks and where it must go - keynote at Riga D...
The web - What it has, what it lacks and where it must go - keynote at Riga D...The web - What it has, what it lacks and where it must go - keynote at Riga D...
The web - What it has, what it lacks and where it must go - keynote at Riga D...Robert Nyman
 
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...Robert Nyman
 

Similar to Building an Appier Web - Velocity Amsterdam 2016 (20)

The Case for Progressive Web Apps
The Case for Progressive Web AppsThe Case for Progressive Web Apps
The Case for Progressive Web Apps
 
Basic Understanding of Progressive Web Apps
Basic Understanding of Progressive Web AppsBasic Understanding of Progressive Web Apps
Basic Understanding of Progressive Web Apps
 
Go for Progressive Web Apps. Get a Better, Low Cost, Mobile Presence
Go for Progressive Web Apps. Get a Better, Low Cost, Mobile PresenceGo for Progressive Web Apps. Get a Better, Low Cost, Mobile Presence
Go for Progressive Web Apps. Get a Better, Low Cost, Mobile Presence
 
IRJET-Garbage Monitoring and Management using Internet of things
IRJET-Garbage Monitoring and Management using Internet of thingsIRJET-Garbage Monitoring and Management using Internet of things
IRJET-Garbage Monitoring and Management using Internet of things
 
From AMP to PWA
From AMP to PWAFrom AMP to PWA
From AMP to PWA
 
Service workers are your best friends
Service workers are your best friendsService workers are your best friends
Service workers are your best friends
 
Progressive Web Apps - NPD Meet
Progressive Web Apps - NPD MeetProgressive Web Apps - NPD Meet
Progressive Web Apps - NPD Meet
 
Cloud web applications: the new perspective of sproutcore
Cloud web applications: the new perspective of sproutcoreCloud web applications: the new perspective of sproutcore
Cloud web applications: the new perspective of sproutcore
 
Andriy Vandakurov about "Frontend. Global domination"
Andriy Vandakurov about  "Frontend. Global domination" Andriy Vandakurov about  "Frontend. Global domination"
Andriy Vandakurov about "Frontend. Global domination"
 
Pivorak.javascript.global domination
Pivorak.javascript.global dominationPivorak.javascript.global domination
Pivorak.javascript.global domination
 
A year with progressive web apps! #DevConMU
A year with progressive web apps! #DevConMUA year with progressive web apps! #DevConMU
A year with progressive web apps! #DevConMU
 
Progressive Web Apps - Intro & Learnings
Progressive Web Apps - Intro & LearningsProgressive Web Apps - Intro & Learnings
Progressive Web Apps - Intro & Learnings
 
Building Mobile Optimized Websites
Building Mobile Optimized WebsitesBuilding Mobile Optimized Websites
Building Mobile Optimized Websites
 
“Building Mobile Optimized Websites,” Nick Bourgeois / Ray Villares
“Building Mobile Optimized Websites,” Nick Bourgeois / Ray Villares“Building Mobile Optimized Websites,” Nick Bourgeois / Ray Villares
“Building Mobile Optimized Websites,” Nick Bourgeois / Ray Villares
 
Creating an Effective Mobile API
Creating an Effective Mobile API Creating an Effective Mobile API
Creating an Effective Mobile API
 
Bootstrapping an App for Launch
Bootstrapping an App for LaunchBootstrapping an App for Launch
Bootstrapping an App for Launch
 
Make your PWA feel more like an app
Make your PWA feel more like an appMake your PWA feel more like an app
Make your PWA feel more like an app
 
Web application development full &amp; detailed guide for 2022
Web application development  full &amp; detailed guide for 2022Web application development  full &amp; detailed guide for 2022
Web application development full &amp; detailed guide for 2022
 
The web - What it has, what it lacks and where it must go - keynote at Riga D...
The web - What it has, what it lacks and where it must go - keynote at Riga D...The web - What it has, what it lacks and where it must go - keynote at Riga D...
The web - What it has, what it lacks and where it must go - keynote at Riga D...
 
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...
 

More from Andy Davies

AB Testing, Ads and other 3rd party tags - London WebPerf - March 2018
AB Testing, Ads and other 3rd party tags - London WebPerf - March 2018AB Testing, Ads and other 3rd party tags - London WebPerf - March 2018
AB Testing, Ads and other 3rd party tags - London WebPerf - March 2018Andy Davies
 
AB Testing, Ads and other 3rd party tags - SmashingConf London - 2018
AB Testing, Ads and other 3rd party tags - SmashingConf London - 2018AB Testing, Ads and other 3rd party tags - SmashingConf London - 2018
AB Testing, Ads and other 3rd party tags - SmashingConf London - 2018Andy Davies
 
Inspecting iOS App Traffic with JavaScript - JSOxford - Jan 2018
Inspecting iOS App Traffic with JavaScript - JSOxford - Jan 2018Inspecting iOS App Traffic with JavaScript - JSOxford - Jan 2018
Inspecting iOS App Traffic with JavaScript - JSOxford - Jan 2018Andy Davies
 
Selling Performance - Bristol WebPerf Meetup 2017-07-20
Selling Performance - Bristol WebPerf Meetup 2017-07-20Selling Performance - Bristol WebPerf Meetup 2017-07-20
Selling Performance - Bristol WebPerf Meetup 2017-07-20Andy Davies
 
Speed: The 'Forgotten' Conversion Factor
Speed: The 'Forgotten' Conversion FactorSpeed: The 'Forgotten' Conversion Factor
Speed: The 'Forgotten' Conversion FactorAndy Davies
 
Building an Appier Web - London Web Standards - Nov 2016
Building an Appier Web -  London Web Standards - Nov 2016Building an Appier Web -  London Web Standards - Nov 2016
Building an Appier Web - London Web Standards - Nov 2016Andy Davies
 
The Case for HTTP/2 - Internetdagarna 2015 - Stockholm
The Case for HTTP/2  - Internetdagarna 2015 - StockholmThe Case for HTTP/2  - Internetdagarna 2015 - Stockholm
The Case for HTTP/2 - Internetdagarna 2015 - StockholmAndy Davies
 
Making Mobile Sites Faster
Making Mobile Sites FasterMaking Mobile Sites Faster
Making Mobile Sites FasterAndy Davies
 
The Case for HTTP/2 - EpicFEL Sept 2015
The Case for HTTP/2 - EpicFEL Sept 2015The Case for HTTP/2 - EpicFEL Sept 2015
The Case for HTTP/2 - EpicFEL Sept 2015Andy Davies
 
Speed matters, So why is your site so slow?
Speed matters, So why is your site so slow?Speed matters, So why is your site so slow?
Speed matters, So why is your site so slow?Andy Davies
 
The Case for HTTP/2
The Case for HTTP/2The Case for HTTP/2
The Case for HTTP/2Andy Davies
 
The web is too slow
The web is too slow The web is too slow
The web is too slow Andy Davies
 
Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?
Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?
Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?Andy Davies
 
Http/2 - What's it all about?
Http/2  - What's it all about?Http/2  - What's it all about?
Http/2 - What's it all about?Andy Davies
 
What does the browser pre-loader do?
What does the browser pre-loader do?What does the browser pre-loader do?
What does the browser pre-loader do?Andy Davies
 
EdgeConf - Page Load Performance Opening Talk
EdgeConf - Page Load Performance Opening TalkEdgeConf - Page Load Performance Opening Talk
EdgeConf - Page Load Performance Opening TalkAndy Davies
 
Mobile Web Performance - Getting and Staying Fast
Mobile Web Performance -  Getting and Staying FastMobile Web Performance -  Getting and Staying Fast
Mobile Web Performance - Getting and Staying FastAndy Davies
 
Making Mobile Sites Faster
Making Mobile Sites FasterMaking Mobile Sites Faster
Making Mobile Sites FasterAndy Davies
 

More from Andy Davies (20)

AB Testing, Ads and other 3rd party tags - London WebPerf - March 2018
AB Testing, Ads and other 3rd party tags - London WebPerf - March 2018AB Testing, Ads and other 3rd party tags - London WebPerf - March 2018
AB Testing, Ads and other 3rd party tags - London WebPerf - March 2018
 
AB Testing, Ads and other 3rd party tags - SmashingConf London - 2018
AB Testing, Ads and other 3rd party tags - SmashingConf London - 2018AB Testing, Ads and other 3rd party tags - SmashingConf London - 2018
AB Testing, Ads and other 3rd party tags - SmashingConf London - 2018
 
Inspecting iOS App Traffic with JavaScript - JSOxford - Jan 2018
Inspecting iOS App Traffic with JavaScript - JSOxford - Jan 2018Inspecting iOS App Traffic with JavaScript - JSOxford - Jan 2018
Inspecting iOS App Traffic with JavaScript - JSOxford - Jan 2018
 
Selling Performance - Bristol WebPerf Meetup 2017-07-20
Selling Performance - Bristol WebPerf Meetup 2017-07-20Selling Performance - Bristol WebPerf Meetup 2017-07-20
Selling Performance - Bristol WebPerf Meetup 2017-07-20
 
Speed: The 'Forgotten' Conversion Factor
Speed: The 'Forgotten' Conversion FactorSpeed: The 'Forgotten' Conversion Factor
Speed: The 'Forgotten' Conversion Factor
 
Building an Appier Web - London Web Standards - Nov 2016
Building an Appier Web -  London Web Standards - Nov 2016Building an Appier Web -  London Web Standards - Nov 2016
Building an Appier Web - London Web Standards - Nov 2016
 
The Case for HTTP/2 - Internetdagarna 2015 - Stockholm
The Case for HTTP/2  - Internetdagarna 2015 - StockholmThe Case for HTTP/2  - Internetdagarna 2015 - Stockholm
The Case for HTTP/2 - Internetdagarna 2015 - Stockholm
 
Making Mobile Sites Faster
Making Mobile Sites FasterMaking Mobile Sites Faster
Making Mobile Sites Faster
 
The Case for HTTP/2 - EpicFEL Sept 2015
The Case for HTTP/2 - EpicFEL Sept 2015The Case for HTTP/2 - EpicFEL Sept 2015
The Case for HTTP/2 - EpicFEL Sept 2015
 
Speed matters, So why is your site so slow?
Speed matters, So why is your site so slow?Speed matters, So why is your site so slow?
Speed matters, So why is your site so slow?
 
The Case for HTTP/2
The Case for HTTP/2The Case for HTTP/2
The Case for HTTP/2
 
HTTP2 is Here!
HTTP2 is Here!HTTP2 is Here!
HTTP2 is Here!
 
Speed Matters!
Speed Matters!Speed Matters!
Speed Matters!
 
The web is too slow
The web is too slow The web is too slow
The web is too slow
 
Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?
Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?
Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?
 
Http/2 - What's it all about?
Http/2  - What's it all about?Http/2  - What's it all about?
Http/2 - What's it all about?
 
What does the browser pre-loader do?
What does the browser pre-loader do?What does the browser pre-loader do?
What does the browser pre-loader do?
 
EdgeConf - Page Load Performance Opening Talk
EdgeConf - Page Load Performance Opening TalkEdgeConf - Page Load Performance Opening Talk
EdgeConf - Page Load Performance Opening Talk
 
Mobile Web Performance - Getting and Staying Fast
Mobile Web Performance -  Getting and Staying FastMobile Web Performance -  Getting and Staying Fast
Mobile Web Performance - Getting and Staying Fast
 
Making Mobile Sites Faster
Making Mobile Sites FasterMaking Mobile Sites Faster
Making Mobile Sites Faster
 

Recently uploaded

unit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxunit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxBkGupta21
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLScyllaDB
 
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .Alan Dix
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxLoriGlavin3
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfAlex Barbosa Coqueiro
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brandgvaughan
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxLoriGlavin3
 
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICESSALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICESmohitsingh558521
 
Time Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsTime Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsNathaniel Shimoni
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr BaganFwdays
 
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rick Flair
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebUiPathCommunity
 
Sample pptx for embedding into website for demo
Sample pptx for embedding into website for demoSample pptx for embedding into website for demo
Sample pptx for embedding into website for demoHarshalMandlekar2
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningLars Bell
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenHervé Boutemy
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxLoriGlavin3
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii SoldatenkoFwdays
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfLoriGlavin3
 

Recently uploaded (20)

unit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxunit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptx
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
 
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptx
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
 
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICESSALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
 
Time Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsTime Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directions
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
 
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
 
Sample pptx for embedding into website for demo
Sample pptx for embedding into website for demoSample pptx for embedding into website for demo
Sample pptx for embedding into website for demo
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine Tuning
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdf
 

Building an Appier Web - Velocity Amsterdam 2016

  • 1. Building an Appier Web @AndyDavies NCC Group Nov 2016 https://www.flickr.com/photos/alesimages/4215559895
  • 2. We’re spending more and more time in apps… © comScore, Inc. Propri Digital media usage time is exploding right now, and it’s predominantly being driven by mobile apps. 476,553 480,967 550,522 409,847 621,410 778,95477,081 97,440 118,299 0 200,000 400,000 600,000 800,000 1,000,000 1,200,000 1,400,000 1,600,000 Jun-2013 Jun-2014 Jun-2015 TotalMinutes(MM) Desktop Mobile App Mobile Browser Over the past years, total dig media usage h grown 49% wit mobile apps ha grown 90% an contributing to of the total incr in time spent. Mobile browse also seeing ve strong growth 53% and even desktop is still rising. Growth in Digital Media Time Spent Source: comScore Media Metrix Multi-Platform & Mobile Metrix, U.S., Total Audience +53% vs. 2013 +90% vs. 2013 +16% vs. 2013
  • 3. © comScore, Inc. Prop 29% 15% 11% 6% 6% 4% 3% 3% 23% Social Networking Radio Games Multimedia Instant Messengers Music Retail News/Information All Others Social Networ Radio and Ga contribute mo than half of to time spent on mobile apps. strength of the categories highlights that mobile device more heavily for entertainm and communi than their des counterparts. Share of Mobile App Time Spent Source: comScore Media Metrix MP and Mobile Metrix, U.S., Total Audience, June 2015 Social media and entertainment account for the six top app categories and drive two-thirds of total time spent on apps.But our usage can be very specific
  • 4. What do we like about apps? https://www.flickr.com/photos/jennicatpink/819741953
  • 7. A simple app… (App reads data from a monitoring API)
  • 9. Works offline too (Cached data, so may be out of date)
  • 10. Apps have their challenges too https://www.flickr.com/photos/justinjovellanos/15340862812
  • 11. “There’s an App for that”… …but can you can find it?
  • 12. To help we started with subtle buttons… but that wasn’t enough…
  • 14. “Download our app or else!”
  • 15. Updates, updates and more updates…
  • 18. © comScore, Inc. Pro And mobile audience growth is being driven more by mobile we properties, which are actually bigger and growing faster than ap A comparison Top 1000 App the Top 1000 Web Propertie shows a surp result. Not on mobile web properties ha audiences tha more than 2.5 size, but thes audiences are growing twice fast. Average Monthly Audience: Top 1000 Mobile Apps vs. Top 1000 Mobile Web Properties Source: comScore Mobile Metrix, U.S., Age 18+ - 1,000 2,000 3,000 4,000 5,000 6,000 7,000 8,000 9,000 10,000 Jun-2014 Sep-2014 Dec-2014 Mar-2015 Jun-2015 UniqueVisitors(000) Apps Mobile Web +42% y/y +21% y/y The web has great reach…
  • 19. and it’s due to the simple power of the URL http://example.com
  • 23. Web pages adapt to our diversity of devices http://www.flickr.com/photos/adactio/12674230513
  • 25. Or waiting for updates https://www.flickr.com/photos/star-bellied-girl/8283340977
  • 27. We could combine the richness of apps… …with the low friction of the web?
  • 29. So what might we need to build it? https://www.flickr.com/photos/aigle_dore/7912377858
  • 30. We can already add pages to our home screen Supported by most major mobile operating systems and browsers
 
 (Bookmarks page rather than site)
  • 31. Can specify the icon etc. via meta tags <link rel="apple-touch-icon" href="icons/logo/ncc-logo-120x120-ios.png"> <link rel="apple-touch-icon-precomposed" href="icons/logo/ncc-logo-120x120-ios.png"> <link rel="apple-touch-startup-image" href="/images/startup.png"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> (Minimal iOS set, ideally need more icon and splash screen sizes and other mobile browsers prefer different meta data)
  • 32. W3C App Manifest brings it all together { "lang": "en", "dir": "ltr", "name": "Monitoring", "description": "Performance and Availability Monitoring by NCC Group", "short_name": "Monitoring", "icons": [ { "src": "icons/logo/ncc-logo-144x144-white.png", "sizes": "144x144", "type": "image/png" }, . . . ], "scope": "/pwa", "start_url": "/pwa/index.html", "display": "standalone", "orientation": "portrait", "theme_color": "#c41230", "background_color": "#fff", } https://www.w3.org/TR/appmanifest/
  • 33. Homescreen Icon { "lang": "en", "dir": "ltr", "name": "Monitoring", "description": "Performance and Availability Monitoring by NCC Group", "short_name": "Monitoring", "icons": [ { "src": "icons/logo/ncc-logo-144x144-white.png", "sizes": "144x144", "type": "image/png" }, . . . ], "scope": "/pwa", "start_url": "/pwa/index.html", "display": "standalone", "orientation": "portrait", "theme_color": "#c41230", "background_color": "#fff", }
  • 34. URL of the page that’s launched { "lang": "en", "dir": "ltr", "name": "Monitoring", "description": "Performance and Availability Monitoring by NCC Group", "short_name": "Monitoring", "icons": [ { "src": "icons/logo/ncc-logo-144x144-white.png", "sizes": "144x144", "type": "image/png" }, . . . ], "scope": "/pwa", "start_url": "/pwa/index.html", "display": "standalone", "orientation": "portrait", "theme_color": "#c41230", "background_color": "#fff", }
  • 35. Splash screen { "lang": "en", "dir": "ltr", "name": "Monitoring", "description": "Performance and Availability Monitoring by NCC Group", "short_name": "Monitoring", "icons": [ { "src": "icons/logo/ncc-logo-144x144-white.png", "sizes": "144x144", "type": "image/png" }, . . . ], "scope": "/pwa", "start_url": "/pwa/index.html", "display": "standalone", "orientation": "portrait", "theme_color": "#c41230", "background_color": "#fff", }
  • 36. Orientation and presence of browser controls { "lang": "en", "dir": "ltr", "name": "Monitoring", "description": "Performance and Availability Monitoring by NCC Group", "short_name": "Monitoring", "icons": [ { "src": "icons/logo/ncc-logo-144x144-white.png", "sizes": "144x144", "type": "image/png" }, . . . ], "scope": "/pwa", "start_url": "/pwa/index.html", "display": "standalone", "orientation": "portrait", "theme_color": "#c41230", "background_color": "#fff", }
  • 37. And can even offer an install prompt (Browsers use several heuristics before deciding to prompt)
  • 38. Can listen for install event and track in analytics window.addEventListener('beforeinstallprompt', function(e) { e.userChoice.then(function(choiceResult) { console.log(choiceResult.outcome); if (choiceResult.outcome == 'dismissed') { // Track not installed } else { // Track installation } }); }); (Chrome supports this but it’s not in AppManifest standard)
  • 39. Can listen for install event and track in analytics window.addEventListener('appinstalled', function(e) { // Track installation }); (AppManifest standard proposes this)
  • 40. But how do we cope with a poor (or no) network? https://www.flickr.com/photos/odaeus/3942500793
  • 43.
  • 44. Service Worker is an in-browser network proxy that can intercept requests and responses
  • 45. <script> if ('serviceWorker' in navigator) { navigator.serviceWorker.register('serviceworker.js', { scope: '/' }).then(function(registration) { // Anything else you want to do with registration // e.g. subscribe to push messages }).catch(function(err) { console.log('Can't register service worker: ', err); }); } </script> Register a Service Worker
  • 46. Option to install via Link may be coming <link rel="serviceworker" scope="/" href=“/serviceworker.js"> or Link </serviceworker.js>; rel=serviceworker scope=/ (Origin trial in Chrome, under consideration in Firefox)
  • 47. Service Worker Skeleton self.addEventListener('install', function(event) { self.skipWaiting(); }); self.addEventListener('activate', function(event) { }); self.addEventListener('fetch', function(event) { });
  • 48. What are apps actually made of?
  • 49. Shell Content Many apps are made of a shell and the content
  • 50. Going offline - caching assets on startup var cacheVersion = "v1"; var cacheResources = [ "/pwa/index.html", "/pwa/icons/logo/ncc-logo.svg", "/pwa/icons/ui/sprite.svg" // etc ]; self.addEventListener('install', function(event) { self.skipWaiting(); event.waitUntil( caches.open(cacheVersion).then(function(cache) { return cache.addAll(cacheResources); }) );
  • 51. Going offline - retrieving from cache on fetch self.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request).then(function(response) { return response || fetch(event.request); }) ); }); Try the cache first and go to the network if there’s no match
  • 52. Going offline - cleanup previous resources self.addEventListener('activate', function(event) { // Remove outdated caches, migrate data etc, });
  • 53. Caching as a fallback for network • Make a request • Succeeds - cache response and return it • Fails - check cache and return cached response • Network request fails and not in cache ¯_( )_/¯ (OK so you probably want to manage the users experience in the last case)
  • 54. Caching patterns depend on use case, some very helpful resources Mozilla https://serviceworke.rs/ Jake Archibald https://jakearchibald.com/2014/offline-cookbook/ ServiceWork Toolbox https://github.com/GoogleChrome/sw-toolbox
  • 55. Service Worker also enables other features
  • 59. (App reads data from a monitoring API) When put together…
  • 61. (Cached data, so may be out of date) When put together…
  • 62. Powerful APIs (inc Service Worker) require HTTPS https://www.flickr.com/photos/zebble/6080622
  • 63. “The future is here, it’s just unevenly distributed” ✓ ✓ ✓ WiP ?✓
  • 64. We’re getting better access to native features • Camera • Notifications • Location • Geofencing • Alarms • Vibration • Sharing • Battery • and more… (On some platforms)
  • 72. You can deploy them today • 3x more time spent on site • 40% higher re-engagement rate • 70% greater conversion rate for those arriving via Homescreen • 3x lower data usage
  • 74. My current favourite… Doesn’t support notifications yet… …hopefully will do soon
  • 75. These apps aren’t packaged and deployed through stores, they’re just websites that took all the right vitamins https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/ Alex Russell, Google
  • 76. I still have questions… • What might not be suitable as a progressive web app? • Can we build PWAs that are as fast and frictionless as native? • How can we sell our apps, will we need app stores? • How do we avoid an uncanny UI valley? • What happens to storage when every site is a PWA?
  • 77. “Every step on the path to a PWA makes sense on it’s own” Jason Grigsby