Cross Platform Mobile Development


Published on

Presented at BarCamp CodeCamp Tampa 2012.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Cross Platform Mobile Development

  1. 1. October 2012Cross Platform Mobile App Development Manesh Lad @maneshlad
  2. 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. 3. Problem & Solution Introduction
  4. 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. 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. 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. 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. 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. 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 (,
  10. 10. HTML Frameworks jquery mobile
  11. 11. jquery mobile
  12. 12. • Tabs & lists controls• Think of a list like a uitableview• Accordions - expandable sections
  13. 13. • Data entry widgets• Picker• Pop-up menu• Provides controls like UIKit does in cocoa touch
  14. 14. Themeroller•• Allows you to create up to 26 color themes/ swatches for the UI components• Lets you visually create CSS
  15. 15. 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
  16. 16. HTML Frameworks Sencha Touch
  17. 17. Sencha Touch • Used by over 50% of the Fortune 100 and 8 of the top 10 financial institutions • iOS, Android, Blackberry Touch Source:
  18. 18. UI
  19. 19. Sencha Touch Demo Sencha Architect CityBars App
  20. 20. PhoneGapNative Building
  21. 21. What is PhoneGap?• - Open source wrapper for compiling mobile web apps as native apps• Access to hardware features on 7 major mobile platforms• Now owned by Adobe!• - compile web project for other platforms in the cloud!
  22. 22. Device Features via JS
  23. 23.• Cloud based service for compile mobile web apps• Allows you to compile for iOS w/o a Mac!
  24. 24. plans
  25. 25. XcodeDemos
  26. 26. • Phonegap xcode - sencha / citybars• Phonegap xcode - jqm / speechtimerz• Phonegap eclipse - jqm / website• Textwrangler - basic jQuery Mobile
  27. 27. Wrap-UpConclusion