• Like
Develop:BBC 2013 - Turbocharge your mobile web apps by using offline
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Develop:BBC 2013 - Turbocharge your mobile web apps by using offline

  • 792 views
Published

Offline is awesome. Overview of packaged apps, appcache, service workers, caching AJAX requests, etc.

Offline is awesome. Overview of packaged apps, appcache, service workers, caching AJAX requests, etc.

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
792
On SlideShare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
5
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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