Mobile JavaScript
                              Development

                              or HTML5 apps
                 ...
Hi all
                         @nonken | @uxebu




Monday, March 15, 2010
We open the mobile web



Monday, March 15, 2010
Agenda




Monday, March 15, 2010
Agenda


                   • Timetravel




Monday, March 15, 2010
Agenda


                   • Timetravel
                   • Why mobile JavaScript development?




Monday, March 15, 2010
Agenda


                   • Timetravel
                   • Why mobile JavaScript development?
                   • Tale...
Agenda


                   • Timetravel
                   • Why mobile JavaScript development?
                   • Tale...
Experiment
                         An ECG written in JavaScript/HTML/CSS




Monday, March 15, 2010
Pulse check




                         j K
                           a




                                            ...
Agenda


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




Monday, March 15, 2010
2010

            • Eric Schmidt (CEO Google Inc.): “Mobile first”




Monday, March 15, 2010
2010

            • Eric Schmidt (CEO Google Inc.): “Mobile first”
            • Steve Jobs (CEO Apple Inc.): “Apple is a m...
Mobile browsing?




              h                                   K
                                                 ...
Mobile browsing?




              h                             K
                                            $
         ...
The past


                             h
                               O

                         KKKKKKKKK

Monday, Ma...
The future


                            K
                             O

          hhhhhhhhh


Monday, March 15, 2010
Lets look at some very cool stuff




                               http://bit.ly/bqvQIG

Monday, March 15, 2010
Pulse check




                         j K
                           a




                                            ...
Agenda

                   • Timetravel
                   • Why mobile JavaScript development?
                   • Tales...
Mobile market
                                                 2% 5%
                                               3%
   ...
Smartphone market

                                       20%


                                                          ...
Is this our (developers) world?




                 d                   == 2%


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




Monday, March 15, 2010
How open platforms really are




                         ƒ a       ==


Monday, March 15, 2010
Reality check:

    “you're prohibited from distributing it (the app) through
     competing app stores like Cydia or Rock...
Everybody wants his/her share




                             7
                                http://bit.ly/dgmJvN

Mon...
Some things you actually don’t
                    have to share, weird huh?




Monday, March 15, 2010
Showtime - a strong
                          case for JavaScript
                          http://yourappshop.com - NSFW
...
a




q                        What companies like Apple don’t like
                                                      ...
a




                                  qw
                         What companies like Apple don’t like


Monday, March 1...
a


                                  qw
                         What companies like Apple don’t like


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


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


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


Monday, March 15, 2010
Your Appshop facts




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




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




Monday, March 15, 2010
Your Appshop facts
                   • 100% HTML5
                   • Apps work offline
                   • 12.000.000 d...
Your Appshop facts
                   • 100% HTML5
                   • Apps work offline
                   • 12.000.000 d...
Your Appshop facts
                   • 100% HTML5
                   • Apps work offline
                   • 12.000.000 d...
Device APIs
                    What else is happening in the mobile world?




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


Monday, March 15, 2010
S
                         Calendar APIs


Monday, March 15, 2010
v
                         Access to local data


Monday, March 15, 2010
Payment integration


Monday, March 15, 2010
K
                         Payment integration


Monday, March 15, 2010
F q0
                         More device APIs


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




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

                   • JIL - http://jil.org
                         Vodafone, Verizon Wireless, Chin...
It’s all in the works

                   • JIL - http://jil.org
                         Vodafone, Verizon Wireless, Chin...
It’s all in the works

                   • JIL - http://jil.org
                         Vodafone, Verizon Wireless, Chin...
Pulse check




                         j K
                           a




                                            ...
Agenda


                   • Timetravel
                   • Why mobile JavaScript development?
                   • Tale...
Tales of a mobile dev



                         EventNinja


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



Monday, March 15, 2010
Monday, March 15, 2010
Monday, March 15, 2010
Mobile prototyping



Monday, March 15, 2010
The cloud



Monday, March 15, 2010
Google Calendar



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


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




Monday, March 15, 2010
Dojo



Monday, March 15, 2010
Performance



Monday, March 15, 2010
Why performance?
                               What we do has direct Impact!



                   • Datavolume (Someone ...
Dojo’s toolchain




Monday, March 15, 2010
Dojos Buildsystem



Monday, March 15, 2010
• Minify and shrink JavaScript
                   • Build into single or several files
                   • Build and conca...
Monday, March 15, 2010
Monday, March 15, 2010
Other Dojo goodness




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




Monday, March 15, 2010
Other Dojo goodness
                   • Class inheritance - dojo.declare
                   • Dojos event system - dojo.c...
Other Dojo goodness
                   • Class inheritance - dojo.declare
                   • Dojos event system - dojo.c...
Other Dojo goodness
                   • Class inheritance - dojo.declare
                   • Dojos event system - dojo.c...
But!

                         document.getElement...

                          Don’t forget about “real” JavaScript




...
What we have learned



Monday, March 15, 2010
Code simple!



Monday, March 15, 2010
Step back!

                         Especially if the desktop browser was your
                                       run...
Semantics?
                           A short story




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




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

         <ul>
           <li><a href=””>Hi</a></li>
         </ul>


Monday, M...
<ul>
           <li>Hi</li>
         </ul>

         <ul>
           <li><a href=””>Hi</a></li>
         </ul>

         <...
IE anyone?




Monday, March 15, 2010
IE anyone?




Monday, March 15, 2010
IE anyone?




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




Monday, March 15, 2010
Communications




Monday, March 15, 2010
Communications


                   • XMLHttpRequest?



Monday, March 15, 2010
Communications


                   • XMLHttpRequest?
                   • JSONP / JSON?


Monday, March 15, 2010
Monday, March 15, 2010
Look ahead




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


Monday, March 15, 2010
Scaling and ppi
                              Be aware




Monday, March 15, 2010
Testing



Monday, March 15, 2010
The browser is your
                               friend



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




Monday, March 15, 20...
The browser is your
                               friend
                                 Really
                        ...
The browser is your
                               friend
                                 Really
                        ...
The browser is your
                               friend
                                 Really
                        ...
The browser is your
                               friend
                                 Really
                        ...
Set headers... and steal




       Send iPhone headers from within Firefox for example
Monday, March 15, 2010
Hmmmm, alert(“Hi”);



Monday, March 15, 2010
Automate

                         Create routines


Monday, March 15, 2010
Agenda


                   • Timetravel
                   • Why mobile JavaScript development?
                   • Tale...
Better browsers



Monday, March 15, 2010
Faster devices



Monday, March 15, 2010
More market coverage



Monday, March 15, 2010
Richer device APIs



Monday, March 15, 2010
Pulse check




                         j K
                           a




                                            ...
Other advantages of mobile development




                                    thx to @wolframkriesing for the link




Mo...
Other advantages of mobile development




                                    thx to @wolframkriesing for the link




Mo...
Share your knowledge
                         Mobile JavaScript development is young




Monday, March 15, 2010
@nonken | @uxebu

                         @dojo | @dojocampus

Monday, March 15, 2010
Upcoming SlideShare
Loading in...5
×

Mobile JavaScript Development - QCon 2010

1,943

Published on

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

Published in: Technology, Business
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,943
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
96
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Mobile JavaScript Development - QCon 2010

  1. 1. Mobile JavaScript Development or HTML5 apps Nikolai Onken - uxebu Consulting Ltd. & Co. KG Monday, March 15, 2010
  2. 2. Hi all @nonken | @uxebu Monday, March 15, 2010
  3. 3. We open the mobile web Monday, March 15, 2010
  4. 4. Agenda Monday, March 15, 2010
  5. 5. Agenda • Timetravel Monday, March 15, 2010
  6. 6. Agenda • Timetravel • Why mobile JavaScript development? Monday, March 15, 2010
  7. 7. Agenda • Timetravel • Why mobile JavaScript development? • Tales of a mobile dev (EventNinja) Monday, March 15, 2010
  8. 8. Agenda • Timetravel • Why mobile JavaScript development? • Tales of a mobile dev (EventNinja) • Outlook Monday, March 15, 2010
  9. 9. Experiment An ECG written in JavaScript/HTML/CSS Monday, March 15, 2010
  10. 10. Pulse check j K a a HumanApi - http://bit.ly/92lpyR Monday, March 15, 2010
  11. 11. Agenda • Timetravel • Why mobile JavaScript development? • Tales of a mobile dev (EventNinja) • Outlook Monday, March 15, 2010
  12. 12. Monday, March 15, 2010
  13. 13. Monday, March 15, 2010
  14. 14. Monday, March 15, 2010
  15. 15. Monday, March 15, 2010
  16. 16. 2010 Monday, March 15, 2010
  17. 17. 2010 • Eric Schmidt (CEO Google Inc.): “Mobile first” Monday, March 15, 2010
  18. 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. 19. Mobile browsing? h K $ WWW Monday, March 15, 2010
  20. 20. Mobile browsing? h K $ WWW Monday, March 15, 2010
  21. 21. The past h O KKKKKKKKK Monday, March 15, 2010
  22. 22. The future K O hhhhhhhhh Monday, March 15, 2010
  23. 23. Lets look at some very cool stuff http://bit.ly/bqvQIG Monday, March 15, 2010
  24. 24. Pulse check j K a a HumanApi - http://bit.ly/92lpyR Monday, March 15, 2010
  25. 25. Agenda • Timetravel • Why mobile JavaScript development? • Tales of a mobile developmentev (EventNinja) • Outlook Monday, March 15, 2010
  26. 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. 27. Smartphone market 20% 40% 5% 15% 20% Nokia RIM Apple HTC Others http://bit.ly/bPDn5b Monday, March 15, 2010
  28. 28. Is this our (developers) world? d == 2% Monday, March 15, 2010
  29. 29. Seriously? Are we happy with a 2% market share? Monday, March 15, 2010
  30. 30. How open platforms really are ƒ a == Monday, March 15, 2010
  31. 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. 32. Everybody wants his/her share 7 http://bit.ly/dgmJvN Monday, March 15, 2010
  33. 33. Some things you actually don’t have to share, weird huh? Monday, March 15, 2010
  34. 34. Showtime - a strong case for JavaScript http://yourappshop.com - NSFW App store without Apple Monday, March 15, 2010
  35. 35. a q What companies like Apple don’t like w Monday, March 15, 2010
  36. 36. a qw What companies like Apple don’t like Monday, March 15, 2010
  37. 37. a qw What companies like Apple don’t like Monday, March 15, 2010
  38. 38. What companies like Apple don’t like Monday, March 15, 2010
  39. 39. w What companies like Apple don’t like Monday, March 15, 2010
  40. 40. What companies like Apple don’t like Monday, March 15, 2010
  41. 41. Your Appshop facts Monday, March 15, 2010
  42. 42. Your Appshop facts • 100% HTML5 Monday, March 15, 2010
  43. 43. Your Appshop facts • 100% HTML5 • Apps work offline Monday, March 15, 2010
  44. 44. Your Appshop facts • 100% HTML5 • Apps work offline • 12.000.000 downloads since december 2009 Monday, March 15, 2010
  45. 45. Your Appshop facts • 100% HTML5 • Apps work offline • 12.000.000 downloads since december 2009 • Payment gateway Monday, March 15, 2010
  46. 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. 47. Device APIs What else is happening in the mobile world? Monday, March 15, 2010
  48. 48. m Camera APIs (AR anyone?) Monday, March 15, 2010
  49. 49. S Calendar APIs Monday, March 15, 2010
  50. 50. v Access to local data Monday, March 15, 2010
  51. 51. Payment integration Monday, March 15, 2010
  52. 52. K Payment integration Monday, March 15, 2010
  53. 53. F q0 More device APIs Monday, March 15, 2010
  54. 54. It’s all in the works Monday, March 15, 2010
  55. 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. 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. 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. 58. Pulse check j K a a HumanApi - http://bit.ly/92lpyR Monday, March 15, 2010
  59. 59. Agenda • Timetravel • Why mobile JavaScript development? • Tales of a mobile dev (EventNinja) • Outlook Monday, March 15, 2010
  60. 60. Tales of a mobile dev EventNinja Monday, March 15, 2010
  61. 61. Monday, March 15, 2010
  62. 62. Monday, March 15, 2010
  63. 63. http://www.eventninja.net Monday, March 15, 2010
  64. 64. Monday, March 15, 2010
  65. 65. Monday, March 15, 2010
  66. 66. Mobile prototyping Monday, March 15, 2010
  67. 67. The cloud Monday, March 15, 2010
  68. 68. Google Calendar Monday, March 15, 2010
  69. 69. Monday, March 15, 2010
  70. 70. Monday, March 15, 2010
  71. 71. The architecture of EventNinja Monday, March 15, 2010
  72. 72. Runtimes used • PhoneGap (http://phonegap.com) • W3C Widgets (Opera) • (Others) Palm Monday, March 15, 2010
  73. 73. Appstore coverage Monday, March 15, 2010
  74. 74. Dojo Monday, March 15, 2010
  75. 75. Performance Monday, March 15, 2010
  76. 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. 77. Dojo’s toolchain Monday, March 15, 2010
  78. 78. Dojos Buildsystem Monday, March 15, 2010
  79. 79. • Minify and shrink JavaScript • Build into single or several files • Build and concatenate CSS • Optimize images Monday, March 15, 2010
  80. 80. Monday, March 15, 2010
  81. 81. Monday, March 15, 2010
  82. 82. Other Dojo goodness Monday, March 15, 2010
  83. 83. Other Dojo goodness • Class inheritance - dojo.declare Monday, March 15, 2010
  84. 84. Other Dojo goodness • Class inheritance - dojo.declare • Dojos event system - dojo.connect Monday, March 15, 2010
  85. 85. Other Dojo goodness • Class inheritance - dojo.declare • Dojos event system - dojo.connect • Powerful extendable query engine - dojo.query Monday, March 15, 2010
  86. 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. 87. But! document.getElement... Don’t forget about “real” JavaScript Monday, March 15, 2010
  88. 88. What we have learned Monday, March 15, 2010
  89. 89. Code simple! Monday, March 15, 2010
  90. 90. Step back! Especially if the desktop browser was your runtime of the past Monday, March 15, 2010
  91. 91. Semantics? A short story Monday, March 15, 2010
  92. 92. Monday, March 15, 2010
  93. 93. <ul> <li>Hi</li> </ul> Monday, March 15, 2010
  94. 94. <ul> <li>Hi</li> </ul> <ul> <li><a href=””>Hi</a></li> </ul> Monday, March 15, 2010
  95. 95. <ul> <li>Hi</li> </ul> <ul> <li><a href=””>Hi</a></li> </ul> <a href=””>Hi</a> Monday, March 15, 2010
  96. 96. IE anyone? Monday, March 15, 2010
  97. 97. IE anyone? Monday, March 15, 2010
  98. 98. IE anyone? Monday, March 15, 2010
  99. 99. Do what your runtime can do Not more Monday, March 15, 2010
  100. 100. Communications Monday, March 15, 2010
  101. 101. Communications • XMLHttpRequest? Monday, March 15, 2010
  102. 102. Communications • XMLHttpRequest? • JSONP / JSON? Monday, March 15, 2010
  103. 103. Monday, March 15, 2010
  104. 104. Look ahead Monday, March 15, 2010
  105. 105. Look ahead But don’t implement everything Monday, March 15, 2010
  106. 106. Scaling and ppi Be aware Monday, March 15, 2010
  107. 107. Testing Monday, March 15, 2010
  108. 108. The browser is your friend Monday, March 15, 2010
  109. 109. The browser is your friend Really Monday, March 15, 2010
  110. 110. The browser is your friend Really Really Monday, March 15, 2010
  111. 111. The browser is your friend Really Really Really Monday, March 15, 2010
  112. 112. The browser is your friend Really Really Really Really Monday, March 15, 2010
  113. 113. The browser is your friend Really Really Really Really Really Monday, March 15, 2010
  114. 114. Set headers... and steal Send iPhone headers from within Firefox for example Monday, March 15, 2010
  115. 115. Hmmmm, alert(“Hi”); Monday, March 15, 2010
  116. 116. Automate Create routines Monday, March 15, 2010
  117. 117. Agenda • Timetravel • Why mobile JavaScript development? • Tales of a mobile dev (EventNinja) • Outlook Monday, March 15, 2010
  118. 118. Better browsers Monday, March 15, 2010
  119. 119. Faster devices Monday, March 15, 2010
  120. 120. More market coverage Monday, March 15, 2010
  121. 121. Richer device APIs Monday, March 15, 2010
  122. 122. Pulse check j K a a HumanApi - http://bit.ly/92lpyR Monday, March 15, 2010
  123. 123. Other advantages of mobile development thx to @wolframkriesing for the link Monday, March 15, 2010
  124. 124. Other advantages of mobile development thx to @wolframkriesing for the link Monday, March 15, 2010
  125. 125. Share your knowledge Mobile JavaScript development is young Monday, March 15, 2010
  126. 126. @nonken | @uxebu @dojo | @dojocampus Monday, March 15, 2010
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×