Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

1,375 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
  • Be the first to comment

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)

×