Mobile JavaScript Development - QCon 2010

2,180 views
2,092 views

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
2,180
On SlideShare
0
From Embeds
0
Number of Embeds
20
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

×