Slides of talk I gave at appworks in Oslo

1. HTML5 Apps
Appworks 2010 Oslo
Nikolai Onken
uxebu
Friday, October 29, 2010

2. Friday, October 29, 2010

3. @nonken
Friday, October 29, 2010

4. Friday, October 29, 2010

5. We open the mobile web.
Friday, October 29, 2010

6. Friday, October 29, 2010

7. JavaScript AJAX
CSS
dojo
Browser
OpenSource
Web2.0
FrontEnd
Usability UserExperience
mobile
TouchScroll
Friday, October 29, 2010

8. Friday, October 29, 2010

9. Landscape
http://www.flickr.com/photos/tillwe/146242691/
Friday, October 29, 2010

10. Landscape
http://www.flickr.com/photos/tillwe/146242691/
Friday, October 29, 2010

11. http://bit.ly/distimo-appstores
30th July 2009
14 Stores
Friday, October 29, 2010

12. http://bit.ly/distimo-appstores
30th July 2009
14 Stores23rd September 2009
23 Stores
Friday, October 29, 2010

13. http://bit.ly/distimo-appstores
30th July 2009
14 Stores23rd September 2009
23 Stores
2nd December 2009
26 Stores
Friday, October 29, 2010

14. October 2010
96 Apptores - WOA
http://www.wipconnector.com/appstores
Friday, October 29, 2010

15. Cross Platform
Friday, October 29, 2010

16. Friday, October 29, 2010

17. Objective-C
Friday, October 29, 2010

18. Objective-C Symbian C
Friday, October 29, 2010

19. Objective-C JavaSymbian C
Friday, October 29, 2010

20. Objective-C JavaSymbian C
Java
Friday, October 29, 2010

21. Objective-C JavaSymbian C
.NETJava
Friday, October 29, 2010

22. Objective-C JavaSymbian C
.NETJava ...
Friday, October 29, 2010

23. HTML
Friday, October 29, 2010

24. http://www.flickr.com/photos/robadob/88901885/
Engine of the web
Friday, October 29, 2010

25. http://www.flickr.com/photos/chris_radcliff/2947219465/
iPhone - First usable mobile browser
Friday, October 29, 2010

26. http://uxebu.com/blog/2010/04/27/touchscroll-a-scrolling-layer-for-webkit-mobile/
Friday, October 29, 2010

27. Friday, October 29, 2010

28. http://bit.ly/tomiahonen-2010-almanac
Friday, October 29, 2010

29. http://bit.ly/tomiahonen-2010-almanac
71% of all phones
have a modern xTML web browser.
Friday, October 29, 2010

30. App Store
without Apple!
Friday, October 29, 2010

31. Your Appshop facts
Friday, October 29, 2010

32. Your Appshop facts
• 100% HTML5
Friday, October 29, 2010

33. Your Appshop facts
• 100% HTML5
• Apps work offline
Friday, October 29, 2010

34. Your Appshop facts
• 100% HTML5
• Apps work offline
• 43.000.000 downloads since december 2009
Friday, October 29, 2010

35. Your Appshop facts
• 100% HTML5
• Apps work offline
• 43.000.000 downloads since december 2009
• Payment gateway
Friday, October 29, 2010

36. Your Appshop facts
• 100% HTML5
• Apps work offline
• 43.000.000 downloads since december 2009
• Payment gateway
• It feels native
Friday, October 29, 2010

37. Friday, October 29, 2010

38. Friday, October 29, 2010

39. Friday, October 29, 2010

40. What is a HTML5 App?
Friday, October 29, 2010

41. Friday, October 29, 2010

42. Friday, October 29, 2010

43. Friday, October 29, 2010

44. }
Friday, October 29, 2010

45. }?
Friday, October 29, 2010

46. Types of "Apps"
Friday, October 29, 2010

47. Types of "Apps"
•Preinstalled
Friday, October 29, 2010

48. Types of "Apps"
•Preinstalled
•Native App (from "some" app store)
Friday, October 29, 2010

49. Types of "Apps"
•Preinstalled
•Native App (from "some" app store)
•Website
limited access to phone resources
Friday, October 29, 2010

50. Types of "Apps"
•Preinstalled
•Native App (from "some" app store)
•Website
limited access to phone resources
•HTML5 App
access by a capable runtime
Friday, October 29, 2010

51. Friday, October 29, 2010

52. Layout
index.html
Friday, October 29, 2010

53. Design
style.css
Layout
index.html
Friday, October 29, 2010

54. Design
style.css
Layout
index.html
AJAX Library
Friday, October 29, 2010

55. Database
Design
style.css
Layout
index.html
AJAX Library
Friday, October 29, 2010

56. PhoneGap
Friday, October 29, 2010

57. PhoneGap
"An express goal of the PhoneGap project
is for the project to not exist."
Friday, October 29, 2010

58. PhoneGap
"An express goal of the PhoneGap project
is for the project to not exist."
Open Source
Friday, October 29, 2010

59. PhoneGap
"An express goal of the PhoneGap project
is for the project to not exist."
Open Source
Friday, October 29, 2010

60. http://phonegap.pbworks.com/Roadmap
Friday, October 29, 2010

61. Low level APIs
Camera Accelerometer Push Notifications...
Chromeless Browser
PhoneGap
browser.eval(“document.geolocation...”)
Friday, October 29, 2010

62. Low level APIs
Camera Accelerometer Push Notifications...
Chromeless Browser
PhoneGap
browser.eval(“document.geolocation...”)
Friday, October 29, 2010

63. Device support
Friday, October 29, 2010

64. Pros
Cons
Friday, October 29, 2010

65. Pros
•Not a standard (but based on standards)
Cons
Friday, October 29, 2010

66. Pros
•Not a standard (but based on standards)
•Good browsers
Cons
Friday, October 29, 2010

67. Pros
•Not a standard (but based on standards)
•Good browsers
•Many device APIs
Cons
Friday, October 29, 2010

68. Pros
•Not a standard (but based on standards)
•Good browsers
•Many device APIs
•Extendable webview in most cases
Cons
Friday, October 29, 2010

69. Pros
•Not a standard (but based on standards)
•Good browsers
•Many device APIs
•Extendable webview in most cases
•Open source
Cons
Friday, October 29, 2010

70. W3C Widgets
Friday, October 29, 2010

71. Layout
index.html
Design
style.css
Database
AJAX Library
Friday, October 29, 2010

72. Layout
index.html
Design
style.css
Database
AJAX Library
Friday, October 29, 2010

73. Layout
index.html
Design
style.css
Database
AJAX Library
Configuration
config.xml
Friday, October 29, 2010

74. Layout
index.html
Design
style.css
Database
AJAX Library
Configuration
config.xml
Icon
Friday, October 29, 2010

75. Layout
index.html
Design
style.css
Database
AJAX Library
Configuration
config.xml
=
Icon
Friday, October 29, 2010

76. Layout
index.html
Design
style.css
Database
AJAX Library
Configuration
config.xml
W3C Widget =
Icon
Friday, October 29, 2010

77. What is a W3C Widget?
Friday, October 29, 2010

78. What is a W3C Widget?
Friday, October 29, 2010

79. What is a W3C Widget?
•HTML
•CSS
•JavaScript
•config.xml
•zip it
•rename to *.wgt
Friday, October 29, 2010

80. Devices?
...yes
Friday, October 29, 2010

81. Pros
Cons
Friday, October 29, 2010

82. Pros
•Only few device APIs
Cons
Friday, October 29, 2010

83. Pros
•Only few device APIs
•No possibility to introduce custom APIs
Cons
Friday, October 29, 2010

84. Pros
•Only few device APIs
•No possibility to introduce custom APIs
•Sometimes annoying browser quirks
Cons
Friday, October 29, 2010

85. Pros
•Only few device APIs
•No possibility to introduce custom APIs
•Sometimes annoying browser quirks
•Very simple to create
Cons
Friday, October 29, 2010

86. Pros
•Only few device APIs
•No possibility to introduce custom APIs
•Sometimes annoying browser quirks
•Very simple to create
•Easy to test
Cons
Friday, October 29, 2010

87. Pros
•Only few device APIs
•No possibility to introduce custom APIs
•Sometimes annoying browser quirks
•Very simple to create
•Easy to test
•For certain application usecaes the
Cons
Friday, October 29, 2010

88. Other runtimes?
Friday, October 29, 2010

89. Runtimes
•JIL Spec http://www.jil.org/
•BONDI Spec http://bondi.omtp.org/
•W3C Spec http://w3.org/2009/dap/
•PhoneGap http://phonegap.pbworks.com/
•Nokia WRT http://bit.ly/nokia-WRT-APIs
•Appcelerator http://www.codestrong.com/timobile/api/
Nokia S60
iPhone
Android
Blackberry
Windows
Mobile
Friday, October 29, 2010

90. Runtimes
•JIL Spec http://www.jil.org/
•BONDI Spec http://bondi.omtp.org/
•W3C Spec http://w3.org/2009/dap/
•PhoneGap http://phonegap.pbworks.com/
•Nokia WRT http://bit.ly/nokia-WRT-APIs
•Appcelerator http://www.codestrong.com/timobile/api/
Nokia S60
iPhone
Android
Blackberry
Windows
Mobile
Friday, October 29, 2010

91. Runtimes
•JIL Spec http://www.jil.org/
•BONDI Spec http://bondi.omtp.org/
•W3C Spec http://w3.org/2009/dap/
•PhoneGap http://phonegap.pbworks.com/
•Nokia WRT http://bit.ly/nokia-WRT-APIs
•Appcelerator http://www.codestrong.com/timobile/api/
Nokia S60
iPhone
Android
Blackberry
Windows
Mobile
Friday, October 29, 2010

92. Runtimes
•JIL Spec http://www.jil.org/
•BONDI Spec http://bondi.omtp.org/
•W3C Spec http://w3.org/2009/dap/
•PhoneGap http://phonegap.pbworks.com/
•Nokia WRT http://bit.ly/nokia-WRT-APIs
•Appcelerator http://www.codestrong.com/timobile/api/
Nokia S60
iPhone
Android
Blackberry
Windows
Mobile
Friday, October 29, 2010

93. Runtimes
•JIL Spec http://www.jil.org/
•BONDI Spec http://bondi.omtp.org/
•W3C Spec http://w3.org/2009/dap/
•PhoneGap http://phonegap.pbworks.com/
•Nokia WRT http://bit.ly/nokia-WRT-APIs
•Appcelerator http://www.codestrong.com/timobile/api/
Nokia S60
iPhone
Android
Blackberry
Windows
Mobile
Friday, October 29, 2010

94. Almost for free
Friday, October 29, 2010

95. Almost for free
•Facebook widget
Friday, October 29, 2010

96. Almost for free
•Facebook widget
•Dashboard widget
Friday, October 29, 2010

97. Almost for free
•Facebook widget
•Dashboard widget
•Website widget
Friday, October 29, 2010

98. Almost for free
•Facebook widget
•Dashboard widget
•Website widget
•TV Widget
Friday, October 29, 2010

99. Almost for free
•Facebook widget
•Dashboard widget
•Website widget
•TV Widget
•...
Friday, October 29, 2010

100. Almost for free
•Facebook widget
•Dashboard widget
•Website widget
•TV Widget
•...
Friday, October 29, 2010

101. Almost for free
•Facebook widget
•Dashboard widget
•Website widget
•TV Widget
•...
Friday, October 29, 2010

102. Almost for free
•Facebook widget
•Dashboard widget
•Website widget
•TV Widget
•...
Friday, October 29, 2010

103. Almost for free
•Facebook widget
•Dashboard widget
•Website widget
•TV Widget
•...
Friday, October 29, 2010

104. A Phone is ...
Friday, October 29, 2010

105. http://www.flickr.com/photos/kratz/1984004945/
Friday, October 29, 2010

106. http://www.flickr.com/photos/mbiddulph/3087388964/
Friday, October 29, 2010

107. http://www.flickr.com/photos/redstamp/4222841946/
Friday, October 29, 2010

108. • Camera
• Compass
• GPS
• Accelerometer
• Calendar
• Email
• Address book
• Watch
• Alarm clock
• ...
Friday, October 29, 2010

109. Multiple Ways
• W3C Spec
http://w3.org/2009/dap/
• JIL Spec
http://www.jil.org/
• BONDI Spec
http://bondi.omtp.org/
• Your own Spec :)
http://phonegap.com/
Friday, October 29, 2010

110. Cross Platform?
Friday, October 29, 2010

111. EventNinja
Friday, October 29, 2010

112. Database
Layout
index.html
Design
style.css
AJAX Library
Configuration
config.xml
Icon
Friday, October 29, 2010

113. Database
Layout
index.html
Design
style.css
AJAX Library
Configuration
config.xml
Icon
Friday, October 29, 2010

114. Database
Layout
index.html
Design
style.css
AJAX Library
Configuration
config.xml
Icon
Events,
a Calendar
Friday, October 29, 2010

115. http://bit.ly/webdev-events
Friday, October 29, 2010

116. http://bit.ly/webdev-events
Friday, October 29, 2010

117. http://bit.ly/webdev-events
Friday, October 29, 2010

118. Friday, October 29, 2010

119. Friday, October 29, 2010

120. Friday, October 29, 2010

121. Friday, October 29, 2010

122. Friday, October 29, 2010

123. Friday, October 29, 2010

124. Friday, October 29, 2010

125. Friday, October 29, 2010

126. Friday, October 29, 2010

127. Friday, October 29, 2010

128. Testing
Friday, October 29, 2010

129. Best Practices
Friday, October 29, 2010

130. Best Practices
• test on the desktop
Friday, October 29, 2010

131. Best Practices
• test on the desktop
• test on the desktop
Friday, October 29, 2010

132. Best Practices
• test on the desktop
• test on the desktop
• test on the desktop
Friday, October 29, 2010

133. Best Practices
• test on the desktop
• test on the desktop
• test on the desktop
• try-catch a lot
Friday, October 29, 2010

134. Best Practices
• test on the desktop
• test on the desktop
• test on the desktop
• try-catch a lot
• alert() IS your friend!
Friday, October 29, 2010

135. Best Practices
• test on the desktop
• test on the desktop
• test on the desktop
• try-catch a lot
• alert() IS your friend!
• simplify your CSS
Friday, October 29, 2010

136. Ripple
Friday, October 29, 2010

137. Libraries
Friday, October 29, 2010

138. What is out there?
Friday, October 29, 2010

139. What is out there?
•XUI
Friday, October 29, 2010

140. What is out there?
•XUI
•Sencha Touch
Friday, October 29, 2010

141. What is out there?
•XUI
•Sencha Touch
•jQuery Mobile (coming)
Friday, October 29, 2010

142. What is out there?
•XUI
•Sencha Touch
•jQuery Mobile (coming)
•Dojo mobile
Friday, October 29, 2010

143. What is out there?
•XUI
•Sencha Touch
•jQuery Mobile (coming)
•Dojo mobile
•EmbedJS
Friday, October 29, 2010

144. What is out there?
•XUI
•Sencha Touch
•jQuery Mobile (coming)
•Dojo mobile
•EmbedJS
•...
Friday, October 29, 2010

145. EmbedJS
an approach to cross platform development
Friday, October 29, 2010

146. Friday, October 29, 2010

147. Friday, October 29, 2010

148. Friday, October 29, 2010

149. The Supported Devices
... and there will be more
to embed JavaScript on
Friday, October 29, 2010

150. http://www.flickr.com/photos/tacoekkel/25538919/
Friday, October 29, 2010

151. http://www.flickr.com/photos/hugo90/3916794427/
Friday, October 29, 2010

152. Shrink Your API
20kB 8kB
Friday, October 29, 2010

153. Simple queries > simple library function
Only ".class" and "#id" queries
Friday, October 29, 2010

154. vs.
Simple queries > simple library function
Only ".class" and "#id" queries
Friday, October 29, 2010

155. vs.
Simple queries > simple library function
Only ".class" and "#id" queries
Full fledged queries > Full blown library function
Friday, October 29, 2010

156. vs.
Simple queries > simple library function
Only ".class" and "#id" queries
Full fledged queries > Full blown library function
13 LOC
~200 LOC
Friday, October 29, 2010

157. Friday, October 29, 2010

158. At Runtime
At Build Time
Friday, October 29, 2010

159. dojo-blackberry.js
dojo-blackberry46.js
dojo-nokia-wrt.js
dojo-opera.js
dojo-webkit-mobile.js
dojo-windows-mobile.js
Friday, October 29, 2010

160. Tooling
Friday, October 29, 2010

161. Friday, October 29, 2010

162. Friday, October 29, 2010

163. Friday, October 29, 2010

164. Friday, October 29, 2010

165. Friday, October 29, 2010

166. Friday, October 29, 2010

167. Friday, October 29, 2010

168. The future
Friday, October 29, 2010

169. HumanApi
Friday, October 29, 2010

170. HumanApi
•The browser accessing hardware
Friday, October 29, 2010

171. HumanApi
•The browser accessing hardware
•Reading your heartrate
Friday, October 29, 2010

172. HumanApi
•The browser accessing hardware
•Reading your heartrate
•All JavaScript/HTML/CSS
Friday, October 29, 2010

173. http://uxebu.com/blog/2010/01/25/humanapi-the-browser-in-the-real-world/
Friday, October 29, 2010

174. http://uxebu.com/blog/2010/01/25/humanapi-the-browser-in-the-real-world/
Friday, October 29, 2010

175. Turn on the lights
Friday, October 29, 2010

176. Turn on the lights
•http://github.com/nonken/arduinojs
Friday, October 29, 2010

177. thank you
http://uxebu.com
Nikolai Onken, uxebu
nikolai@uxebu.com
@uxebu
@nonken
Friday, October 29, 2010