In this talk I am giving an overview of the current mobile landscape in regards to mobile JavaScript development.

1. Mobile JavaScript
Development
or HTML5 apps
Nikolai Onken - uxebu Consulting Ltd. & Co. KG
Monday, March 15, 2010

2. Hi all
@nonken | @uxebu
Monday, March 15, 2010

3. We open the mobile web
Monday, March 15, 2010

4. Agenda
Monday, March 15, 2010

5. Agenda
• Timetravel
Monday, March 15, 2010

6. Agenda
• Timetravel
• Why mobile JavaScript development?
Monday, March 15, 2010

7. Agenda
• Timetravel
• Why mobile JavaScript development?
• Tales of a mobile dev (EventNinja)
Monday, March 15, 2010

8. Agenda
• Timetravel
• Why mobile JavaScript development?
• Tales of a mobile dev (EventNinja)
• Outlook
Monday, March 15, 2010

9. Experiment
An ECG written in JavaScript/HTML/CSS
Monday, March 15, 2010

10. Pulse check
j K
a
a
HumanApi - http://bit.ly/92lpyR
Monday, March 15, 2010

11. Agenda
• Timetravel
• Why mobile JavaScript development?
• Tales of a mobile dev (EventNinja)
• Outlook
Monday, March 15, 2010

12. Monday, March 15, 2010

13. Monday, March 15, 2010

14. Monday, March 15, 2010

15. Monday, March 15, 2010

16. 2010
Monday, March 15, 2010

17. 2010
• Eric Schmidt (CEO Google Inc.): “Mobile first”
Monday, March 15, 2010

18. 2010
• Eric Schmidt (CEO Google Inc.): “Mobile first”
• Steve Jobs (CEO Apple Inc.): “Apple is a mobile
devices company.”
Monday, March 15, 2010

19. Mobile browsing?
h K
$
WWW
Monday, March 15, 2010

20. Mobile browsing?
h K
$
WWW
Monday, March 15, 2010

21. The past
h
O
KKKKKKKKK
Monday, March 15, 2010

22. The future
K
O
hhhhhhhhh
Monday, March 15, 2010

23. Lets look at some very cool stuff
http://bit.ly/bqvQIG
Monday, March 15, 2010

24. Pulse check
j K
a
a
HumanApi - http://bit.ly/92lpyR
Monday, March 15, 2010

25. Agenda
• Timetravel
• Why mobile JavaScript development?
• Tales of a mobile developmentev
(EventNinja)
• Outlook
Monday, March 15, 2010

26. Mobile market
2% 5%
3%
3%
4%
4% 38%
5%
5%
10%
20%
Nokia Samsung LG Sony Ericsson Motorola ZTE
Kyocera RIM Sharp Apple Other
http://bit.ly/bPDn5b
Monday, March 15, 2010

27. Smartphone market
20%
40%
5%
15%
20%
Nokia RIM Apple HTC Others
http://bit.ly/bPDn5b
Monday, March 15, 2010

28. Is this our (developers) world?
d == 2%
Monday, March 15, 2010

29. Seriously?
Are we happy with a 2% market share?
Monday, March 15, 2010

30. How open platforms really are
ƒ a ==
Monday, March 15, 2010

31. Reality check:
“you're prohibited from distributing it (the app) through
competing app stores like Cydia or Rock Your Phone”
http://bit.ly/dgmJvN
Monday, March 15, 2010

32. Everybody wants his/her share
7
http://bit.ly/dgmJvN
Monday, March 15, 2010

33. Some things you actually don’t
have to share, weird huh?
Monday, March 15, 2010

34. Showtime - a strong
case for JavaScript
http://yourappshop.com - NSFW
App store without Apple
Monday, March 15, 2010

35. a
q What companies like Apple don’t like
w
Monday, March 15, 2010

36. a
qw
What companies like Apple don’t like
Monday, March 15, 2010

37. a
qw
What companies like Apple don’t like
Monday, March 15, 2010

38. What companies like Apple don’t like
Monday, March 15, 2010

39. w
What companies like Apple don’t like
Monday, March 15, 2010

40. What companies like Apple don’t like
Monday, March 15, 2010

41. Your Appshop facts
Monday, March 15, 2010

42. Your Appshop facts
• 100% HTML5
Monday, March 15, 2010

43. Your Appshop facts
• 100% HTML5
• Apps work offline
Monday, March 15, 2010

44. Your Appshop facts
• 100% HTML5
• Apps work offline
• 12.000.000 downloads since december 2009
Monday, March 15, 2010

45. Your Appshop facts
• 100% HTML5
• Apps work offline
• 12.000.000 downloads since december 2009
• Payment gateway
Monday, March 15, 2010

46. Your Appshop facts
• 100% HTML5
• Apps work offline
• 12.000.000 downloads since december 2009
• Payment gateway
• It feels native
Monday, March 15, 2010

47. Device APIs
What else is happening in the mobile world?
Monday, March 15, 2010

48. m
Camera APIs (AR anyone?)
Monday, March 15, 2010

49. S
Calendar APIs
Monday, March 15, 2010

50. v
Access to local data
Monday, March 15, 2010

51. Payment integration
Monday, March 15, 2010

52. K
Payment integration
Monday, March 15, 2010

53. F q0
More device APIs
Monday, March 15, 2010

54. It’s all in the works
Monday, March 15, 2010

55. It’s all in the works
• JIL - http://jil.org
Vodafone, Verizon Wireless, China Mobile and Softbank Mobile (1.1 billion customers)
Monday, March 15, 2010

56. It’s all in the works
• JIL - http://jil.org
Vodafone, Verizon Wireless, China Mobile and Softbank Mobile (1.1 billion customers)
• BONDI - http://bondi.omtp.org
Monday, March 15, 2010

57. It’s all in the works
• JIL - http://jil.org
Vodafone, Verizon Wireless, China Mobile and Softbank Mobile (1.1 billion customers)
• BONDI - http://bondi.omtp.org
• W3C (Device APIs) - http://bit.ly/bdm4wv
Monday, March 15, 2010

58. Pulse check
j K
a
a
HumanApi - http://bit.ly/92lpyR
Monday, March 15, 2010

59. Agenda
• Timetravel
• Why mobile JavaScript development?
• Tales of a mobile dev (EventNinja)
• Outlook
Monday, March 15, 2010

60. Tales of a mobile dev
EventNinja
Monday, March 15, 2010

61. Monday, March 15, 2010

62. Monday, March 15, 2010

63. http://www.eventninja.net
Monday, March 15, 2010

64. Monday, March 15, 2010

65. Monday, March 15, 2010

66. Mobile prototyping
Monday, March 15, 2010

67. The cloud
Monday, March 15, 2010

68. Google Calendar
Monday, March 15, 2010

69. Monday, March 15, 2010

70. Monday, March 15, 2010

71. The architecture of
EventNinja
Monday, March 15, 2010

72. Runtimes used
• PhoneGap (http://phonegap.com)
• W3C Widgets (Opera)
• (Others) Palm
Monday, March 15, 2010

73. Appstore coverage
Monday, March 15, 2010

74. Dojo
Monday, March 15, 2010

75. Performance
Monday, March 15, 2010

76. Why performance?
What we do has direct Impact!
• Datavolume (Someone has to pay for it)
• Like or Dislike - mobile apps get thrown
away very quickly
Monday, March 15, 2010

77. Dojo’s toolchain
Monday, March 15, 2010

78. Dojos Buildsystem
Monday, March 15, 2010

79. • Minify and shrink JavaScript
• Build into single or several files
• Build and concatenate CSS
• Optimize images
Monday, March 15, 2010

80. Monday, March 15, 2010

81. Monday, March 15, 2010

82. Other Dojo goodness
Monday, March 15, 2010

83. Other Dojo goodness
• Class inheritance - dojo.declare
Monday, March 15, 2010

84. Other Dojo goodness
• Class inheritance - dojo.declare
• Dojos event system - dojo.connect
Monday, March 15, 2010

85. Other Dojo goodness
• Class inheritance - dojo.declare
• Dojos event system - dojo.connect
• Powerful extendable query engine -
dojo.query
Monday, March 15, 2010

86. Other Dojo goodness
• Class inheritance - dojo.declare
• Dojos event system - dojo.connect
• Powerful extendable query engine -
dojo.query
• Much much more (See Dylans talk today)
Monday, March 15, 2010

87. But!
document.getElement...
Don’t forget about “real” JavaScript
Monday, March 15, 2010

88. What we have learned
Monday, March 15, 2010

89. Code simple!
Monday, March 15, 2010

90. Step back!
Especially if the desktop browser was your
runtime of the past
Monday, March 15, 2010

91. Semantics?
A short story
Monday, March 15, 2010

92. Monday, March 15, 2010

93. <ul>
<li>Hi</li>
</ul>
Monday, March 15, 2010

94. <ul>
<li>Hi</li>
</ul>
<ul>
<li><a href=””>Hi</a></li>
</ul>
Monday, March 15, 2010

95. <ul>
<li>Hi</li>
</ul>
<ul>
<li><a href=””>Hi</a></li>
</ul>
<a href=””>Hi</a>
Monday, March 15, 2010

96. IE anyone?
Monday, March 15, 2010

97. IE anyone?
Monday, March 15, 2010

98. IE anyone?
Monday, March 15, 2010

99. Do what your runtime
can do
Not more
Monday, March 15, 2010

100. Communications
Monday, March 15, 2010

101. Communications
• XMLHttpRequest?
Monday, March 15, 2010

102. Communications
• XMLHttpRequest?
• JSONP / JSON?
Monday, March 15, 2010

103. Monday, March 15, 2010

104. Look ahead
Monday, March 15, 2010

105. Look ahead
But don’t implement
everything
Monday, March 15, 2010

106. Scaling and ppi
Be aware
Monday, March 15, 2010

107. Testing
Monday, March 15, 2010

108. The browser is your
friend
Monday, March 15, 2010

109. The browser is your
friend
Really
Monday, March 15, 2010

110. The browser is your
friend
Really
Really
Monday, March 15, 2010

111. The browser is your
friend
Really
Really
Really
Monday, March 15, 2010

112. The browser is your
friend
Really
Really
Really
Really
Monday, March 15, 2010

113. The browser is your
friend
Really
Really
Really
Really
Really
Monday, March 15, 2010

114. Set headers... and steal
Send iPhone headers from within Firefox for example
Monday, March 15, 2010

115. Hmmmm, alert(“Hi”);
Monday, March 15, 2010

116. Automate
Create routines
Monday, March 15, 2010

117. Agenda
• Timetravel
• Why mobile JavaScript development?
• Tales of a mobile dev (EventNinja)
• Outlook
Monday, March 15, 2010

118. Better browsers
Monday, March 15, 2010

119. Faster devices
Monday, March 15, 2010

120. More market coverage
Monday, March 15, 2010

121. Richer device APIs
Monday, March 15, 2010

122. Pulse check
j K
a
a
HumanApi - http://bit.ly/92lpyR
Monday, March 15, 2010

123. Other advantages of mobile development
thx to @wolframkriesing for the link
Monday, March 15, 2010

124. Other advantages of mobile development
thx to @wolframkriesing for the link
Monday, March 15, 2010

125. Share your knowledge
Mobile JavaScript development is young
Monday, March 15, 2010

126. @nonken | @uxebu
@dojo | @dojocampus
Monday, March 15, 2010