VelocityConf EU 2013 - Turbocharge your mobile web apps by using offline
Upcoming SlideShare
Loading in...5
×
 

VelocityConf EU 2013 - Turbocharge your mobile web apps by using offline

on

  • 1,139 views

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.

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.

Statistics

Views

Total Views
1,139
Views on SlideShare
1,128
Embed Views
11

Actions

Likes
2
Downloads
1
Comments
0

2 Embeds 11

https://twitter.com 10
http://janjongboom.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

VelocityConf EU 2013 - Turbocharge your mobile web apps by using offline VelocityConf EU 2013 - Turbocharge your mobile web apps by using offline Presentation Transcript

  • Turbocharge your mobile web apps Jan Jongboom VelocityConf 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 shell 2. 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 ms Empty cache
  • Performance metrics 820 ms Subsequent reload
  • Performance metrics 320 ms Reload with appcache
  • 250% speed bump Not 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
  • ServiceWorkers First request Grabbing jan.com/index.html
  • ServiceWorkers First request Grabbing jan.com/index.html For foo/* please consult me!
  • ServiceWorkers 2nd request I need foo/blah
  • ServiceWorkers 2nd request I need foo/blah
  • ServiceWorkers 2nd 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 around https://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 connection 2. Can do syncing client->server, server->client, or both ways 3. Con"ict resolution can be easily programmed out.
  • Why I like PouchDB 1. It stores data locally, syncs when there is connection 2. Can do syncing client->server, server->client, or both ways 3. 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
  • 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)