Presented at BarCamp CodeCamp Tampa 2012.

1. October 2012
Cross Platform Mobile
App Development
Manesh Lad
maneshlad@gmail.com
@maneshlad

2. About Me: Manesh Lad
• Local tech professional, mobile development for last few years
• Jquery Mobile sites & Native iOS iPhone & iPad apps
• Mobile Developer PSCU
• Mobile Instructor for Learning Tree:
• Designing Web Sites for Mobile Devices (2315)
• iPhone and iPad Programming: A Comprehensive Hands-On
Introduction (2761)
• Building iPhone® and iPad® Applications: Extended Features (2762)

3. Problem & Solution
Introduction

4. The Problem
• Multiple mobile platforms, devices, form
factors - smartphone & tablets
• Differing skillet for development
• Differing packaging requirement for app
stores
• Need to support many devices

5. Solution
• HTML based frameworks to build mobile app
• Jquery Mobile
• Sencha Touch
• PhoneGap
• Wrapping HTML into native app for app stores
• Access hardware/device capabilities from JavaScript

6. Solution benefits
• Allows you access to the mobile market
without writing native code.
• Build web apps that automatically scale for
different devices, desktop to mobile to tablet
• Range of pre-built UI components for touch
• Proven, and used by many large companies

7. JQuery Mob & Sencha
• Client side JavaScript frameworks for building
mobile web apps
• Framework is free tooling is not.
• HTML/CSS/JavaScript skills -easier than native
• Common code for multiple platforms/devices
• Each framework supports diff devices, evaluate
what you want to target.

8. Diff approaches
• JQM is a about styling HTML so its mobile /
touch friendly. Designer friendly
• Sencha uses JS/MVC to generate HTML -
pseudo OO approach
• JQM easier to learn
• Sencha has a steeper learning curve and does
well at organizing, cleanly separating code

9. Testing Tools + demo
• Opera Mobile Simulator
• Chrome plugins, yslow, blackberry ripple
• IPhone Simulator
• Android simulator
• Telerik TestStudio for iOS
• Demo JQM Sites in simulators
(www.oosharks.com, www.gadgetlad.com)

10. HTML Frameworks
jquery mobile

11. jquery mobile

13. • Tabs & lists controls
• Think of a list like a
uitableview
• Accordions -
expandable sections

14. • Data entry widgets
• Picker
• Pop-up menu
• Provides controls like UIKit does
in cocoa touch

15. Themeroller
• http://jquerymobile.com/themeroller/
• Allows you to create up to 26 color themes/
swatches for the UI components
• Lets you visually create CSS

16. What’s in it for Native
Developers?
• Maybe you want to integrate web content into you own app via
a UIWebView.
• Suggested uses of jQuery Mobile within your app:
• Help pages, organize pages into a single html file
• Access company info in your app
• Leader boards or other server side info
• Access a web page that links to your other apps for sale
• The html files can be included in your app or run off a server
• Demo DragonCoach in xcode

17. HTML Frameworks
Sencha Touch

18. Sencha Touch
• Used by over 50%
of the Fortune 100
and 8 of the top 10
financial
institutions
• iOS, Android,
Blackberry Touch
Source: sencha.com

19. UI

20. Sencha Touch
Demo Sencha
Architect
CityBars App

21. PhoneGap
Native Building

22. What is PhoneGap?
• http://phonegap.com/ - Open source wrapper
for compiling mobile web apps as native apps
• Access to hardware features on 7 major mobile
platforms
• Now owned by Adobe!
• https://build.phonegap.com - compile web
project for other platforms in the cloud!

23. Device Features via JS

24. build.phonegap.com
• Cloud based service for compile mobile web apps
• Allows you to compile for iOS w/o a Mac!

25. build.phonegap.com plans

26. Xcode
Demos

27. • Phonegap xcode - sencha / citybars
• Phonegap xcode - jqm / speechtimerz
• Phonegap eclipse - jqm / website
• Textwrangler - basic jQuery Mobile

28. Wrap-Up
Conclusion