October 2012Cross Platform Mobile App Development         Manesh Lad                     maneshlad@gmail.com              ...
About Me: Manesh Lad• Local tech professional, mobile development for last few years• Jquery Mobile sites & Native iOS iPh...
Problem & Solution   Introduction
The Problem• Multiple mobile platforms, devices, form  factors - smartphone & tablets• Differing skillet for development• ...
Solution• HTML based frameworks to build mobile app • Jquery Mobile • Sencha Touch• PhoneGap • Wrapping HTML into native a...
Solution benefits• Allows you access to the mobile market  without writing native code.• Build web apps that automatically...
JQuery Mob & Sencha• Client side JavaScript frameworks for building  mobile web apps• Framework is free tooling is not.• H...
Diff approaches• JQM is a about styling HTML so its mobile /  touch friendly. Designer friendly• Sencha uses JS/MVC to gen...
Testing Tools + demo• Opera Mobile Simulator• Chrome plugins, yslow, blackberry ripple• IPhone Simulator• Android simulato...
HTML Frameworks jquery mobile
jquery mobile
• Tabs & lists controls• Think of a list like a  uitableview• Accordions -  expandable sections
• Data entry widgets• Picker• Pop-up menu• Provides controls like UIKit does  in cocoa touch
Themeroller• http://jquerymobile.com/themeroller/• Allows you to create up to 26 color themes/  swatches for the UI compon...
What’s in it for Native      Developers?• Maybe you want to integrate web content into you own app via  a UIWebView.• Sugg...
HTML Frameworks Sencha Touch
Sencha Touch • Used by over 50%   of the Fortune 100   and 8 of the top 10   financial   institutions • iOS, Android,   Bl...
UI
Sencha Touch               Demo Sencha                 Architect                  CityBars App
PhoneGapNative Building
What is PhoneGap?• http://phonegap.com/ - Open source wrapper  for compiling mobile web apps as native apps• Access to har...
Device Features via JS
build.phonegap.com• Cloud based service for compile mobile web apps• Allows you to compile for iOS w/o a Mac!
build.phonegap.com plans
XcodeDemos
• Phonegap xcode - sencha / citybars• Phonegap xcode - jqm / speechtimerz• Phonegap eclipse - jqm / website• Textwrangler ...
Wrap-UpConclusion
Cross Platform Mobile Development
Upcoming SlideShare
Loading in...5
×

Cross Platform Mobile Development

366

Published on

Presented at BarCamp CodeCamp Tampa 2012.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
366
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Cross Platform Mobile Development"

  1. 1. October 2012Cross Platform Mobile App Development Manesh Lad maneshlad@gmail.com @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 (www.oosharks.com, www.gadgetlad.com)
  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• http://jquerymobile.com/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: sencha.com
  18. 18. UI
  19. 19. Sencha Touch Demo Sencha Architect CityBars App
  20. 20. PhoneGapNative Building
  21. 21. 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!
  22. 22. Device Features via JS
  23. 23. build.phonegap.com• Cloud based service for compile mobile web apps• Allows you to compile for iOS w/o a Mac!
  24. 24. build.phonegap.com 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×