Look at how to write for mobile in JavaScript using jQTouch and/or Titanium. Exploring the benefits of mobile web versus native mobile applications.

1. jQTouch and Titanium
by Marc Grabanski

2. Mobile Web Development

3. Native Apps in JavaScript

4. Ah, choices!

5. Native Apps

6. Native Apps
• High Performance

7. Native Apps
• High Performance
• Findable in App Store

8. Native Apps
• High Performance
• Findable in App Store
• Native UI, Media API,

9. Native Apps
• High Performance
• Findable in App Store
• Native UI, Media API,
File System, Accelerometer

10. Native Apps
• High Performance
• Findable in App Store
• Native UI, Media API,
File System, Accelerometer
• Monetization

11. Web App Features

12. Web App Features
• Instant Updates (no app store)

13. Web App Features
• Instant Updates (no app store)
• HTML5 Offline, Local Storage

14. Web App Features
• Instant Updates (no app store)
• HTML5 Offline, Local Storage
• Save to Home Icon

15. Web App Features
• Instant Updates (no app store)
• HTML5 Offline, Local Storage
• Save to Home Icon
• Touch Events

16. Web App Features
• Instant Updates (no app store)
• HTML5 Offline, Local Storage
• Save to Home Icon
• Touch Events
• Geolocation

17. Web App Features
• Instant Updates (no app store)
• HTML5 Offline, Local Storage
• Save to Home Icon
• Touch Events
• Geolocation
• Canvas

18. Web App Features
• Instant Updates (no app store)
• HTML5 Offline, Local Storage
• Save to Home Icon
• Touch Events
• Geolocation
• Canvas
• CSS Transforms

19. Web App Features
• Instant Updates (no app store)
• HTML5 Offline, Local Storage
• Save to Home Icon
• Touch Events
• Geolocation
• Canvas
• CSS Transforms
• 100% revenue

20. jQTouch

21. jQTouch
• Themes

22. jQTouch
• Themes
• Automatic Navigation

23. jQTouch
• Themes
• Automatic Navigation
• CSS Animations (fast)

24. jQTouch
• Themes
• Automatic Navigation
• CSS Animations (fast)
• Save Icon to Home

25. jQTouch
• Themes
• Automatic Navigation
• CSS Animations (fast)
• Save Icon to Home
• Ajax

26. jQTouch
• Themes
• Automatic Navigation
• CSS Animations (fast)
• Save Icon to Home
• Ajax
• Touch Events

27. Can’t jQTouch this!

28. jQTouch is markup driven
HTML and CSS

29. Pages
<div id=”home”>
<div class=”toolbar”>
<h1>My Page</h1>
<a class=”back”>Back</a>
</div>
<ul>
<li><a href=”#mypage”>link</a></li>
</ul>
</div>
<div id=”mypage”>
<div class=”toolbar”>
<h1>My Page</h1>
<a class=”back”>Back</a>
</div>

30. CSS transforms are
hardware accelerated

31. Animation
• slide • swap
• flip • cube
• fade • pop
• slideup • dissolve

32. Animation
• slide • swap
• flip • cube
• fade • pop
• slideup • dissolve
<a href=”#page” class=”swap”>

33. Animation
• slide • swap
• flip • cube
• fade • pop
• slideup • dissolve
<a href=”#page” class=”swap”>
clicking back will auto-reverse animation

34. Events

35. Events
• tap - touch version of click

36. Events
• tap - touch version of click
• pageAnimationStart

37. Events
• tap - touch version of click
• pageAnimationStart
• pageAnimationEnd

38. Events
• tap - touch version of click
• pageAnimationStart
• pageAnimationEnd
• turn - orientation turned

39. Events
• tap - touch version of click
• pageAnimationStart
• pageAnimationEnd
• turn - orientation turned
• swipe

40. Themes
jQT and Apple

41. Web App.. Plus Native
+
+= native app

42. PhoneGap + jQTouch

43. PhoneGap + jQTouch
• Accellorometer

44. PhoneGap + jQTouch
• Accellorometer
• Magnometer

45. PhoneGap + jQTouch
• Accellorometer
• Magnometer
• Camera

46. PhoneGap + jQTouch
• Accellorometer
• Magnometer
• Camera
• Sound

47. PhoneGap + jQTouch
• Accellorometer
• Magnometer
• Camera
• Sound
• Get in the App Store!

48. Thank you!
Marc Grabanski:
http://marcgrabanski.com
Twitter: @1Marc