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, minify...
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
...
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 da...
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 dea...
Why I like PouchDB
1. It stores data locally, syncs when there is connection
2. Can do syncing client->server, server->cli...
Why I like PouchDB
1. It stores data locally, syncs when there is connection
2. Can do syncing client->server, server->cli...
Part III: Lessons learned
Lessons learned
Lessons learned
• Of"ine is awesome, speed is awesome!
• Cache shell: packaging, appcache or ServiceWorkers
• Cache conten...
Thank you!

slideshare.net/janjongboom
slideshare.net/janjongboom

Questions?
Wanna chat about Firefox OS; Of!ine; Mobile
landscape; What beer you should buy Dut...
VelocityConf EU 2013 - Turbocharge your mobile web apps by using offline
VelocityConf EU 2013 - Turbocharge your mobile web apps by using offline
VelocityConf EU 2013 - Turbocharge your mobile web apps by using offline
VelocityConf EU 2013 - Turbocharge your mobile web apps by using offline
VelocityConf EU 2013 - Turbocharge your mobile web apps by using offline
VelocityConf EU 2013 - Turbocharge your mobile web apps by using offline
VelocityConf EU 2013 - Turbocharge your mobile web apps by using offline
VelocityConf EU 2013 - Turbocharge your mobile web apps by using offline
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

1,185 views

Published on

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.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,286
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
2
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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

  1. 1. Turbocharge your mobile web apps Jan Jongboom VelocityConf EU 2013
  2. 2. Fast websites are awesome!
  3. 3. blah, blah, blah, caching, blah, expiration headers, blah, blah, image maps, blah, blah, combining css, blah, blah, minifying, blah, blah, blah
  4. 4. New tricks! Didn’t even exist when “High Performance Websites” came out
  5. 5. @janjongboom
  6. 6. 37%
  7. 7. Part 0: Core concepts
  8. 8. 1. The shell 2. App content
  9. 9. The shell • All assets • Distribution through: • App store • Publish on web server • Changes are costly
  10. 10. The shell • All assets • Distribution through: • App store • Publish on web server • Changes are costly
  11. 11. App content • Everything your app serves up • Pushed down from server • Highly volatile • Changes are cheap
  12. 12. App content • Everything your app serves up • Pushed down from server • Highly volatile • Changes are cheap
  13. 13. Part I: The shell
  14. 14. Packaging
  15. 15. Packaging
  16. 16. Publishing on the web = awesome
  17. 17. AppCache: a more web’y approach
  18. 18. example.appcache Serve as text/cache-manifest
  19. 19. example.appcache Serve as text/cache-manifest
  20. 20. example.appcache Serve as text/cache-manifest
  21. 21. How AppCache works
  22. 22. 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)
  23. 23. http://comoyo.github.io/ffos-list-detail
  24. 24. Performance metrics 1500 ms Empty cache
  25. 25. Performance metrics 820 ms Subsequent reload
  26. 26. Performance metrics 320 ms Reload with appcache
  27. 27. 250% speed bump Not just for of!ine
  28. 28. Sounds perfect, right?
  29. 29. 1. It breaks the web
  30. 30. 2. You’re not in control about caching
  31. 31. 3. You’re not in control about of!ine behavior
  32. 32. 4. Responsive design is hard
  33. 33. Give developers "ne-grained control about caching, without breaking the web
  34. 34. ServiceWorkers First request Grabbing jan.com/index.html
  35. 35. ServiceWorkers First request Grabbing jan.com/index.html For foo/* please consult me!
  36. 36. ServiceWorkers 2nd request I need foo/blah
  37. 37. ServiceWorkers 2nd request I need foo/blah
  38. 38. ServiceWorkers 2nd request I need foo/blah 200 OK!
  39. 39. Example: registering
  40. 40. Example: registering
  41. 41. Example: registering
  42. 42. Example: use cache
  43. 43. Example: use cache
  44. 44. Example: use cache
  45. 45. Ongoing work in Gecko / Blink
  46. 46. Spec & playing around https://github.com/slightlyoff/ServiceWorker
  47. 47. Part II: App content
  48. 48. A simple AJAX request
  49. 49. A simple AJAX request
  50. 50. A simple AJAX request
  51. 51. Naive caching with localStorage
  52. 52. Naive caching with localStorage
  53. 53. Naive caching with localStorage
  54. 54. Making it less naive • Use indexedDB: http://nparashuram.com/IndexedDBShim/ • Wrap around current AJAX lib • Expiration dates • Of"ine -> ignore expiration date
  55. 55. Example: AngularJS/indexedDB https://github.com/comoyo/ffos-list-detail/ blob/master/www/js/services/http-cache.js
  56. 56. Part III: Keeping in sync
  57. 57. Two way syncing is hard!
  58. 58. It all depends • Operational transform library. F.e. ShareJS • Objects? F.e. https://github.com/codeparty/racer • Real deal? PouchDB
  59. 59. 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.
  60. 60. 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
  61. 61. Part III: Lessons learned
  62. 62. Lessons learned
  63. 63. 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
  64. 64. Thank you! slideshare.net/janjongboom
  65. 65. 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)

×