1. PhoneGap
Nikolai Onken
uxebu
Tuesday, June 8, 2010

2. Tuesday, June 8, 2010

3. We open the mobile web.
Tuesday, June 8, 2010

4. Tuesday, June 8, 2010

5. JavaScript AJAX
FrontEnd
Usability UserExperience
CSS mobile
Browser Web2.0
dojo
TouchScroll OpenSource
Tuesday, June 8, 2010

6. 3.3.1
Tuesday, June 8, 2010

7. Problem
• Native apps fragmentation
Tuesday, June 8, 2010

8. Solution
Tuesday, June 8, 2010

9. Solution
• PhoneGap
Tuesday, June 8, 2010

10. Solution
• PhoneGap
• W3C Widgets
Tuesday, June 8, 2010

11. Solution
• PhoneGap
• W3C Widgets
• Palm webOS
Tuesday, June 8, 2010

12. Solution
• PhoneGap
• W3C Widgets
• Palm webOS
• ...
Tuesday, June 8, 2010

13. Simple huh?
Tuesday, June 8, 2010

14. Support
Tuesday, June 8, 2010

15. Support
• Apple iPhone
Tuesday, June 8, 2010

16. Support
• Apple iPhone
• Google Android
Tuesday, June 8, 2010

17. Support
• Apple iPhone
• Google Android
• RIM Blackberry
Tuesday, June 8, 2010

18. Support
• Apple iPhone
• Google Android
• RIM Blackberry
• Palm webOS
Tuesday, June 8, 2010

19. Support
• Apple iPhone
• Google Android
• RIM Blackberry
• Palm webOS
• Symbian
Tuesday, June 8, 2010

20. Support
• Apple iPhone
• Google Android
• RIM Blackberry
• Palm webOS
• Symbian
• Maemo
Tuesday, June 8, 2010

21. Support
• Apple iPhone
• Google Android
• RIM Blackberry
• Palm webOS
• Symbian
• Maemo
• Windows Mobile
Tuesday, June 8, 2010

22. Device APIs
Tuesday, June 8, 2010

23. Device APIs
• Geo
Tuesday, June 8, 2010

24. Device APIs
• Geo
• Accelerometer
Tuesday, June 8, 2010

25. Device APIs
• Geo
• Accelerometer
• Camera
Tuesday, June 8, 2010

26. Device APIs
• Geo
• Accelerometer
• Camera
• Vibration
Tuesday, June 8, 2010

27. Device APIs
• Geo
• Accelerometer
• Camera
• Vibration
• Contacts
Tuesday, June 8, 2010

28. Device APIs
• Geo
• Accelerometer
• Camera
• Vibration
• Contacts
• SMS
Tuesday, June 8, 2010

29. Device APIs
• Geo
• Accelerometer
• Camera
• Vibration
• Contacts
• SMS
• ...
Tuesday, June 8, 2010

30. Augment the
browser, hell yea
Tuesday, June 8, 2010

31. HumanAPI
Tuesday, June 8, 2010

32. Any other native
feature
Tuesday, June 8, 2010

33. Project structure
Tuesday, June 8, 2010

34. Project structure
• www folder
Tuesday, June 8, 2010

35. Project structure
• www folder
• index.html
Tuesday, June 8, 2010

36. Project structure
• www folder
• index.html
• phonegap.js
Tuesday, June 8, 2010

37. How the magic happens
Tuesday, June 8, 2010

38. How the magic happens
Low level APIs
Camera Accelerometer Push Notifications
Tuesday, June 8, 2010

39. How the magic happens
Chromeless Browser
Low level APIs
Camera Accelerometer Push Notifications
Tuesday, June 8, 2010

40. How the magic happens
Chromeless Browser
browser.eval(“alert(1);”)
Low level APIs
Camera Accelerometer Push Notifications
Tuesday, June 8, 2010

41. How the magic happens
gap://customurl
Tuesday, June 8, 2010

42. How the magic happens
gap://customurl
Low level APIs
Camera Accelerometer Push Notifications
Tuesday, June 8, 2010

43. How the magic happens
Chromeless Browser
gap://customurl
Low level APIs
Camera Accelerometer Push Notifications
Tuesday, June 8, 2010

44. JS Libraries
Tuesday, June 8, 2010

45. JS Libraries
• Use them but use them with care
• Most have been designed for desktop
• Desktop performance vs. Mobile
performance are apples vs. oranges
Tuesday, June 8, 2010

46. Dojo mobile
• http://github.com/klipstein/dojo-mobile
• http://github.com/wolframkriesing/dojo-mobile
Tuesday, June 8, 2010

47. Dojo mobile
• blackberry.js
• webkit.js
• yourplatform.js
Tuesday, June 8, 2010

48. Device APIs
• GSOC - Kelly Smith
• http://gsocblog.innobdesign.com/
Tuesday, June 8, 2010

49. Lets build an app
Tuesday, June 8, 2010

50. Mobile secrets
Tuesday, June 8, 2010

51. Drop your baggage
• We actually have good browsers
• CSS3 (flex box anyone?)
Tuesday, June 8, 2010

52. IE anyone?
Tuesday, June 8, 2010

53. IE anyone?
Tuesday, June 8, 2010

54. IE anyone?
Tuesday, June 8, 2010

55. Do what your runtime
can to - not more not
less
Tuesday, June 8, 2010

56. Test on the desktop
• Firefox - Fennec (Nokia N900)
• Opera - W3C
• Webkit - iPhone / Palm
Tuesday, June 8, 2010

57. Test in the Simulator
Tuesday, June 8, 2010

58. And only then - test
on device
Tuesday, June 8, 2010

59. Desktop browser
consoles are still the
best debugging tools
Tuesday, June 8, 2010

60. Optimize code
• JS - compress, shrinksafe
• CSS - one file!
• Images - sprites
Tuesday, June 8, 2010

61. Challenge
Tuesday, June 8, 2010

62. Raphaël can do this!
Tuesday, June 8, 2010

63. Getting started
• PhoneGap - http://phonegap.com
• http://blog.uxebu.com
• TouchScroll - http://bit.ly/cV27RD
Tuesday, June 8, 2010

64. Questions?
@nonken
Tuesday, June 8, 2010