1. HTML5 aims to allow developers to write applications once that can run across different device platforms like desktops, tablets, phones, and game consoles. However, differences in APIs, languages, and app stores between platforms make this challenging. 2. The presenter argues that building mobile apps with HTML5 and related web technologies has advantages over native apps, including lower development costs, the ability to update apps by changing web content rather than resubmitting to app stores, and leveraging capabilities of the underlying device hardware through the browser. 3. Firefox OS is an example of a mobile operating system built entirely on open web standards like HTML5, allowing the phone interface and apps to be updated quickly

1. HTML5 for mobile
@janjongboom

2. @janjongboom

3. @janjongboom

4. @janjongboom

8. SO MANY PLATFORMS

9. SO MANY PLATFORMS
Gotta catch them all!

10. The world is divided

11. The world is divided
Desktop computers, tablets, laptops,
game consoles, mobile phones, etc.

13. Write once, run.. er, once?
Different APIs
Different languages
Different stores

14. Application platform

16. Apabila masa
yang ketat, saya
memilih web

17. New tech available
every day

18. New libraries available
every day

19. But HTML5 is SLOOOW

21. HTML5 version
on 60 euro phone

24. If performance isn’t an
issue, then what is?

25. The web is kinda broken...

27. We’re back in 1999

28. We’re back in 1999

29. No AJAX?!

31. The web is bad at leveraging
phone capabilities

32. And it’s also bad in of!ine

33. This does not live up
to my expectation!

34. mobile

36. 4,500,000,000

38. All the info is on the web

39. All the info is on the web

40. Browser engine on
top of hardware
=
Less overhead
=
Cheaper devices

44. Firefox OS can’t take shortcuts
Even the phone UI is built in HTML

45. From javascript to chipset

46. From javascript to chipset
Gecko

47. From javascript to chipset
Gecko
Gonk

48. From javascript to chipset
Gecko
Gonk

49. http://wiki.mozilla.org/WebAPI

54. Adoption = Slow
Completely built on top
of HTML5

57. Of!ine

58. 1. The shell
2. App content

59. The shell
• All assets
• Distribution through:
• App store
• Publish on web
server
• Changes are costly

60. The shell
• All assets
• Distribution through:
• App store
• Publish on web
server
• Changes are costly

61. App content
• Everything your app
serves up
• Pushed down from
server
• Highly volatile
• Changes are cheap

62. App content
• Everything your app
serves up
• Pushed down from
server
• Highly volatile
• Changes are cheap

63. Part I: The shell

64. Packaging

65. Packaging

66. AppCache: a more web’y approach

71. example.appcache
Serve as text/cache-manifest

72. example.appcache
Serve as text/cache-manifest

73. example.appcache
Serve as text/cache-manifest

74. How AppCache works

76. I NEED AN ADULT!

77. 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)

78. Part II: App content

79. A simple AJAX request

80. A simple AJAX request

81. A simple AJAX request

82. Naive caching with
localStorage

83. Naive caching with
localStorage

84. Naive caching with
localStorage

85. Making it less naive
• Use localForage: https://github.com/mozilla/
localForage
• Wrap around current AJAX lib
• Expiration dates
• Of!ine -> ignore expiration date

86. It’s awesome!
Every person in the audience today

87. WebRTC
Peer to Peer communication
between web browsers

88. Real time communication
No server connection
No plugins required
Stream data

89. https://appear.in/digi

90. getUserMedia
Access to webcam and
microphone stream

92. Live green screen
bit.ly/1k8tEvM

93. https://github.com/auduno/
headtrackr

94. Fun with device light and WebAudio
http://js!ddle.net/ucgq7/

95. I’m here all weekend(ish)
I also have some Firefox OS devices

96. Thank you!
slideshare.net/janjongboom

97. Questions?
slideshare.net/janjongboom