The Future Of The Web: Does It Have One?

Slide 1

Slide 1 text

The Future of The Web +Alex Russell @slightlylate Does It Have One?

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

flickr.com/photos/frogman2212

Slide 5

Slide 5 text

flickr.com/photos/usoceangov

Slide 6

Slide 6 text

WE WON ON DESKTOP!

Slide 7

Slide 7 text

...JUST IN TIME FOR MOBILE TO EAT THE WORLD

Slide 8

Slide 8 text

Where Do We Stand?

Slide 9

Slide 9 text

86% 14% TIME SPENT ON SITES TIME SPENT ON APPS “Apps continued to cement their lead, and commanded 86% of the average US mobile consumer’s time” Flurry 2014/04/01

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

IT'S NOT THE TECH *: At least not the bits we fixate on. *

Slide 14

Slide 14 text

What's Actually Holding The Web Back On Mobile?

Slide 15

Slide 15 text

THIS S**T

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

IT'S 2015

Slide 18

Slide 18 text

No Other Platform Runs Desktop Apps On Phones

Slide 19

Slide 19 text

flickr.com/photos/monado/4405843023

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

The Web Has No App Model

Slide 22

Slide 22 text

Boring Browser Stuff: 1. The great GPU divide 2. Input metaphor retrofit 3. Chip architecture switch

Slide 23

Slide 23 text

So, What Explains All This E-Commerce Success?

Slide 24

Slide 24 text

86% 14% TIME SPENT ON SITES TIME SPENT ON APPS 14% 40% GAMING & ENT. 28% SOCIAL 20% OTHER 66% SITES 6% APPS 28% SITES & APPS PRIMARY CHANNEL FOR COMMERCIAL TASKS USER TIME SPENT ON MOBILE DEVICES

Slide 25

Slide 25 text

Native Isn't All Roses: $1-2 per install, $9 per signed-in user And it only gets worse

Slide 26

Slide 26 text

flickr.com/photos/dhollister

Slide 27

Slide 27 text

flickr.com/photos/marktee

Slide 28

Slide 28 text

More Advice We Actually Have To Give In 2015:

Slide 29

Slide 29 text

Users Use 12-20 Apps/month ...But Visit > 100 Sites/month

Slide 30

Slide 30 text

Distribution Is The Hardest Problem In Software

Slide 31

Slide 31 text

flickr.com/photos/blakespot/

Slide 32

Slide 32 text

IT'S THE FRICTION

Slide 33

Slide 33 text

App Developers Report 20% Drop In Conversions Per Action Source: blog.gaborcselle.com/2012/10/every-step-costs-you-20-of-users.html

Slide 34

Slide 34 text

flickr.com/photos/128220700@N05

Slide 35

Slide 35 text

So What's Missing? 1. Homescreen Access 2. Push Notifications 3. Offline

Slide 36

Slide 36 text

1. Homescreen Access Less typing, more tapping.

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

... Chrome Dev Summit 2014 ... Currently, On EVERY PAGE These are VERY VALUABLE bytes

Slide 45

Slide 45 text

HTML { "short_name": "PolyAir", "name": "Polymer Airlines", "start_url": "/", "display": "standalone", "icons": [{ "src": "icons/icon-192.png", "sizes": "192x192", "type": "image/png", "density": "4.0" }], "orientation": "portrait", "gcm_sender_id": "129757602160" } JSON Manifest With Manifests Metadata delegated to one file Extensible & crawlable

Slide 46

Slide 46 text

"PROGRESSIVE APPS"

Slide 47

Slide 47 text

2. Push Notifications Equal access to system UI matters

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

1. Works Even If Browser Closed 2. Requires Service Worker 3. Doesn't Require Install

Slide 50

Slide 50 text

3. Offline That Works™ It isn't an app if it doesn't start when you tap.

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

Gears Started in 2006 Browsers Have Failed at Offline for ~10 Years

Slide 54

Slide 54 text

example.com GET /app.html HTTP/1.1 HOST example.com ... HTTP/1.1 200 OK Date: Thu, 19 Feb 2015 05:21:56 GMT ...

Slide 55

Slide 55 text

example.com // sw.js onfetch = function(e) { if(e.request.url == "app.html") { e.respondWith( caches.match(e.request) ); } if(e.request.url == "content.json") { // go to the network for updates, // meanwhile, use cached content fetch(...).then(function(r) { r.asJSON().then(function(json) { e.client.postMessage(json); }); }); } }; GET /app.html HTTP/1.1 HOST example.com ... GET /content.json HTTP/1.1 HOST example.com ... GET /content.json HTTP/1.1 HOST example.com ... HTTP/1.1 200 OK Date: Thu, 19 Feb 2015... ...

Slide 56

Slide 56 text

Service Workers Are Network Progressive Enhancement Progressive Apps work without SW for first load & old browsers.

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

Photo: Pete LePage

Slide 59

Slide 59 text

Anatomy Of A Progressive App: The Airhorner

Slide 60

Slide 60 text

Getting Set Up For Success: TLS/HTTPS, Client & Server Render, Local Data + Sync

Slide 61

Slide 61 text

+Alex Russell @slightlylate Thank you!