Turbocharge your mobile web apps

Jan JongboomVelocityConf EU 2013

Fast websites are awesome!

blah, blah, blah, caching, blah, expiration headers, blah, blah,

image maps, blah, blah, combining css, blah, blah, minifying, blah, blah,

blah

New tricks!Didn’t even exist when “High Performance Websites” came out

@janjongboom

37%

Part 0: Core concepts

1. The shell2. App content

The shell

• All assets• Distribution through:

• App store• Publish on web server

• Changes are costly

The shell

• All assets• Distribution through:

• App store• Publish on web server

• Changes are costly

App content

• Everything your app serves up• Pushed down from server• Highly volatile• Changes are cheap

App content

• Everything your app serves up• Pushed down from server• Highly volatile• Changes are cheap

Part I: The shell

Packaging

Packaging

Publishing on the web = awesome

AppCache: a more web’y approach

example.appcache

Serve as text/cache-manifest

example.appcache

Serve as text/cache-manifest

example.appcache

Serve as text/cache-manifest

How AppCache works

Shit you will do wrong

• Setting wrong MIME type• Have one !le 404• Not realizing user will always see old

version !rst• Expiration headers on appcache• Develop with appcache enabled

(tip: set wrong MIME type in dev)

http://comoyo.github.io/ffos-list-detail

Performance metrics

1500 msEmpty cache

Performance metrics

820 msSubsequent reload

Performance metrics

320 msReload with appcache

250% speed bumpNot just for of!ine

Sounds perfect, right?

1. It breaks the web

2. You’re not in control about caching

3. You’re not in control about of!ine behavior

4. Responsive design is hard

Give developers "ne-grained control about caching, without

breaking the web

ServiceWorkersFirst request

Grabbing jan.com/index.html

ServiceWorkersFirst request

Grabbing jan.com/index.html

For foo/* please consult me!

ServiceWorkers2nd request

I need foo/blah

ServiceWorkers2nd request

I need foo/blah

ServiceWorkers2nd request

I need foo/blah

200 OK!

Example: registering

Example: registering

Example: registering

Example: use cache

Example: use cache

Example: use cache

Ongoing work in Gecko / Blink

Spec & playing aroundhttps://github.com/slightlyoff/ServiceWorker

Part II: App content

A simple AJAX request

A simple AJAX request

A simple AJAX request

Naive caching with localStorage

Naive caching with localStorage

Naive caching with localStorage

Making it less naive

• Use indexedDB: http://nparashuram.com/IndexedDBShim/• Wrap around current AJAX lib• Expiration dates• Of"ine -> ignore expiration date

Example: AngularJS/indexedDB

https://github.com/comoyo/ffos-list-detail/blob/master/www/js/services/http-cache.js

Part III: Keeping in sync

Two way syncing is hard!

It all depends

• Operational transform library. F.e. ShareJS• Objects? F.e. https://github.com/codeparty/racer• Real deal? PouchDB

Why I like PouchDB

1. It stores data locally, syncs when there is connection2. Can do syncing client->server, server->client, or both ways3. Con"ict resolution can be easily programmed out.

Why I like PouchDB

1. It stores data locally, syncs when there is connection2. Can do syncing client->server, server->client, or both ways3. Con"ict resolution can be easily programmed out.

4. Dale Harvey is gonna buy me beer when I show him this slide

Part III: Lessons learned

Lessons learned

Lessons learned

• Of"ine is awesome, speed is awesome!• Cache shell: packaging, appcache or ServiceWorkers• Cache content: localStorage, indexedDB, write cache logic that

suits you• Data syncing: hard, take something off the shelf

Thank you!

slideshare.net/janjongboom

Questions?Wanna chat about Firefox OS; Of!ine; Mobile landscape; What beer you should buy Dutch

speakers; etc.?

Of"ce hours with me at 14:45 (Table 3)

slideshare.net/janjongboom