Web+ What the web needs next

Bruce Lawson

Web+
what the web needs next

Bruce Lawson

bruce in front of 'HTML' sign

The Big Question

Can the Web compete with Native without losing its soul?
badge saying 'I love the web'
breakfast: a cup of tea, a boiled egg and the newspaper
'Download our app' advertisment for Birmingham Mail newspaper
tweet from Marc Reeves 'Users tend to read around five times as many stories via the app vs desktop site'

July 2011-12: US Mobile Web users up 82% from 52,435,000 to 95,176,000

Numbers from Nielsen State of the Media: the social media report 2012.

July 2011-12: US Mobile App users up 85% from 55,001,000 to 101,802,000

July 2011-12: Time spent using Mobile Web up 22% .

(PC use up 4%, although number of unique users down 4% from 213,253,000 to 204,721,000.

July 2011-12: Time spent using Mobile Apps up 120% .

It's an App World.
The Web Just Lives in It

Today, the U.S. consumer spends an average of 2 hours and 38 minutes per day on smartphones and tablets. 80% of that time (2 hours and 7 minutes) is spent inside apps and 20% (31 minutes) is spent on the mobile web.
blog.flurry.com April, 2013
breakdown of time spent: 80% apps, 20% browser (Safari 12%, Android 4%, Opera Mini 2%)
2013: 80% to 20% split between apps and web; 2014: 86% to 14%
mind the gap
series of tweets between me and Marc Reeves answering my question 'why do users read 5 times as much on an app with 'Can only speculate that portability and opportunity of the moment encourages engagement during what would otherwise be 'dead' time'
Page not found error message page

Appcache

man alone at party, surrounded by kissing couples
http://www.lollercoasterlab.com/2011/05/forever-alone-this-party-is-crp.html

SlapDache

The appcache API is another big mistake. It’s the best example of not understanding the problem before designing a solution, and I’m still trying to fix that mess.
Hixie

What's wrong with AppCache?

AppCache is declarative -- you give the browser a manifest and magic happens. This has well-documented limitations.
Alex Russell (sinister mastermind at Google)
screenshot of Jake Archibald's A List Apart article 'appcache is a douchebag'
Service Workers

Service Workers CheatSheet

cutaway diagram of Apollo lunar module
cartoon walrus in front of lunar module
cartoon leg with lampshade on top, next to walrus and lunar module
nnavigator.serviceWorker.register
  ("/*", "/assets/v1/wrkr.js").then(
    function(serviceWorker) {
		  console.log("success!");
		  // call window.location.reload()
		},
	  function(why) {
	    console.error("failed!:", why);
    }
);
browser shows nothing when not connected to web
browser shows site when connected to web worker, even though not connected to web

Service Workers + IndexedDB = Power

When combined with access to IndexedDB and a new form of Cache, the ability to respond with arbitrary content is incredibly powerful.
Service Workers Explained
this.addEventListener('fetch',
 	function(event) {
  if (event.request.context == 'image'
  	&& new Date().getDay() == 4) {
    event.respondWith(
      fetch('/kitten.jpg')
    ) // thx @jaffathecake
  } // more: http://youtu.be/4uQMl7mFB6g
});
cartoon of a disco, with 1970s-style fonts reading 'Extensible Web Manifesto'

Extensible Web Manifesto

Browser vendors should provide new low-level capabilities that expose the possibilities of the underlying platform as closely as possible. They should also seed the discussion of high-level APIs through JavaScript implementations of new features
extensiblewebmanifesto.org
2 superheroes: web component and shadow DOM

Web Components

Web Components enable Web application authors to define widgets with a level of visual richness and interactivity not possible with CSS alone, and ease of composition and reuse not possible with script libraries today.
Introduction to Web Components
mind the gap

More capabilities

User Experience Stack Exchange: Any Research on User Experience Perceptions of Native Apps vs Web or Hybrid Apps?

Geolocation

There's an app API for that

iOS8
Apple iOS Developer Library — Pre-Release: HealthKit Constants Reference
phonegap diagram and picture of Brian LeRoux

App store discoverability

Device APIs not so much anymore, now that many/most of what is needed is now there or soon to be. (Especially so with WebRTC.)

App Stores for discovery is big.

Brian "Bobbles Bon-Bon" LeRoux, PhoneGap

Monetizsation

I don't buy the monetization story, because if I did, that means I endorse $1 business models based on manufactured scarcity. ;P
Bobbles Bon-Bon

…but for Web Payments see web-payments.org

web-payments.org

unicode generic currency symbol

Web Payments

We're creating a set of universal payment technologies to make sending and receiving money over the Web as easy as sending an email.

The Web is going to play a key role in achieving a resilient financial infrastructure and creating a more equitable future for all of us.

Current work

Thanks Manu Sporny, Digital Bazaar

phonegap diagram and picture of Brian LeRoux

Engagement

Push Notifications for the engagement part of the story.
"Bobbles Bon-Bon"

Engagement

Push Notifications for the engagement part of the story.
"Bobbles Bon-Bon"

Superior interaction

Opera Coast download, developer info (iPad, iPhone)

Performance

Closing the gap

Some of the barriers that I've heard mentioned frequently include performance, in particular when it comes to user interfaces (e.g. scrolling), as it can affect the user experience dramatically
W3C: Closing the gap with native apps

<img lazyload…>

the User Agent MUST delay downloading the resource until after all other elements without the lazyload attribute that will be fetching a resource have started downloading
W3C Resource Priorities Spec

Not just <img>

img, SVG feImage, audio, video, script, link, embed, iframe, object

IE11 gives more optimized TCP connection if there is a choice between available connections to resources that don't have the "lazyload" attribute

Interaction

Usability

User Experience Stack Exchange

Scott Jenson

W3C: Enabling new types of web user experiences

screeshot of weight.aerotwist.com in Chrome for Android
weight.aerotwist.com with Chrome for Android's menu exposed
... scroll down the menu and see 'Add to homescreen' option
Android home screen with weight.aerotwist.com icon on it
Choosing icon starts weight.aerotwist.com with no browser chrome

Bookmarking = installing

<meta name="mobile-web-app-capable" content="yes"> (see Chrome docs)

<meta name="apple-mobile-web-app-capable" content="yes"> (Apple docs)

Web Manifest

w3c.github.io/manifest/ - Mozilla's Marvellous Mr Marcos' magical manifest

W3C Widgets

a packaging format and metadata for … full-fledged client-side applications that are authored using technologies such as HTML and then packaged for distribution. Examples range from simple clocks … to complex applications that pull data from multiple sources
W3C Widgets spec
old woodcut of woman throwing baby out with bathwater
photo of scary Stephen King clown staring out from a postbox slot
ballon from one of Google's Project Loon
internet.org logo
image of the world, with a circle encompassing India, Pakistan, China etc and text 'more people live inside this circle than outside of it

Africa

Internet use on mobile phones in Africa predicted to increase 20-fold.

Researchers say increase will take place in next five years and will be double the rate of growth in rest of world.

The Smartphone myth

Smartphone segment grew in sales by 75% last year, it still represented just 8.1% of overall mobile phone sales in India

Times of India, April 2013

list of obscure phones
Diagram showing how Opera Mini compresses Facebook from 3.5MB to 680K

What's so funny about Peace, Love and Progressive Enhancement?

Holy Grail App

we've launched our first Holy Grail app into production! … It looks exactly the same as the app it replaced, however initial pageload feels drastically quicker
AirBnB

Holy Grail App #2

because we serve up real HTML instead of waiting for the client to download JavaScript before rendering. Plus, it is fully crawlable by search engines. … It feels 5x faster.
AirBnB
screenshot of prerender.io

Stop emulating failure

advert: photo of phone with QR code and text 'scan to download timetables in PDF format

What the web needs

An increase in Internet maturity similar to the one experienced in mature countries over the past 5 years creates an increase in real GDP per capita of $500 on average during this period.

It took the Industrial Revolution of the 19th century fifty years to produce the same result.

McKinsey Global Institute
complex diagram of who's suing who in mobile

Thanks

Image acknowledgments