velocityconf eu 2013 - turbocharge your mobile web apps by using offline
DESCRIPTION
Presentation I gave on November 14, 2013 during VelocityConf EU 2013. Offline is awesome. Overview of packaged apps, appcache, service workers, caching AJAX requests, two-way data syncing, etc.TRANSCRIPT
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