HTML5 for mobile - DiGi Challenge for Change

1,353
-1

Published on

Or why HTML5 is more awesome than 2 years ago. Presented during DiGi's Challenge for Change in Kuala Lumpur on February 28, 2014.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,353
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
18
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

HTML5 for mobile - DiGi Challenge for Change

  1. 1. HTML5 for mobile @janjongboom
  2. 2. @janjongboom
  3. 3. @janjongboom
  4. 4. @janjongboom
  5. 5. SO MANY PLATFORMS
  6. 6. SO MANY PLATFORMS Gotta catch them all!
  7. 7. The world is divided
  8. 8. The world is divided Desktop computers, tablets, laptops, game consoles, mobile phones, etc.
  9. 9. Write once, run.. er, once? Different APIs Different languages Different stores
  10. 10. Application platform
  11. 11. Apabila masa yang ketat, saya memilih web
  12. 12. New tech available every day
  13. 13. New libraries available every day
  14. 14. But HTML5 is SLOOOW
  15. 15. HTML5 version on 60 euro phone
  16. 16. If performance isn’t an issue, then what is?
  17. 17. The web is kinda broken...
  18. 18. We’re back in 1999
  19. 19. We’re back in 1999
  20. 20. No AJAX?!
  21. 21. The web is bad at leveraging phone capabilities
  22. 22. And it’s also bad in of!ine
  23. 23. This does not live up to my expectation!
  24. 24. mobile
  25. 25. 4,500,000,000
  26. 26. All the info is on the web
  27. 27. All the info is on the web
  28. 28. Browser engine on top of hardware = Less overhead = Cheaper devices
  29. 29. Firefox OS can’t take shortcuts Even the phone UI is built in HTML
  30. 30. From javascript to chipset
  31. 31. From javascript to chipset Gecko
  32. 32. From javascript to chipset Gecko Gonk
  33. 33. From javascript to chipset Gecko Gonk
  34. 34. http://wiki.mozilla.org/WebAPI
  35. 35. Adoption = Slow Completely built on top of HTML5
  36. 36. Of!ine
  37. 37. 1. The shell 2. App content
  38. 38. The shell • All assets • Distribution through: • App store • Publish on web server • Changes are costly
  39. 39. The shell • All assets • Distribution through: • App store • Publish on web server • Changes are costly
  40. 40. App content • Everything your app serves up • Pushed down from server • Highly volatile • Changes are cheap
  41. 41. App content • Everything your app serves up • Pushed down from server • Highly volatile • Changes are cheap
  42. 42. Part I: The shell
  43. 43. Packaging
  44. 44. Packaging
  45. 45. AppCache: a more web’y approach
  46. 46. example.appcache Serve as text/cache-manifest
  47. 47. example.appcache Serve as text/cache-manifest
  48. 48. example.appcache Serve as text/cache-manifest
  49. 49. How AppCache works
  50. 50. I NEED AN ADULT!
  51. 51. 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)
  52. 52. Part II: App content
  53. 53. A simple AJAX request
  54. 54. A simple AJAX request
  55. 55. A simple AJAX request
  56. 56. Naive caching with localStorage
  57. 57. Naive caching with localStorage
  58. 58. Naive caching with localStorage
  59. 59. Making it less naive • Use localForage: https://github.com/mozilla/ localForage • Wrap around current AJAX lib • Expiration dates • Of!ine -> ignore expiration date
  60. 60. It’s awesome! Every person in the audience today
  61. 61. WebRTC Peer to Peer communication between web browsers
  62. 62. Real time communication No server connection No plugins required Stream data
  63. 63. https://appear.in/digi
  64. 64. getUserMedia Access to webcam and microphone stream
  65. 65. Live green screen bit.ly/1k8tEvM
  66. 66. https://github.com/auduno/ headtrackr
  67. 67. Fun with device light and WebAudio http://js!ddle.net/ucgq7/
  68. 68. I’m here all weekend(ish) I also have some Firefox OS devices
  69. 69. Thank you! slideshare.net/janjongboom
  70. 70. Questions? slideshare.net/janjongboom

×