cross platform mobile development
DESCRIPTION
Presented at BarCamp CodeCamp Tampa 2012.TRANSCRIPT
![Page 2: Cross Platform Mobile Development](https://reader034.vdocuments.site/reader034/viewer/2022052504/54b6efd24a7959fd508b4682/html5/thumbnails/2.jpg)
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)
![Page 3: Cross Platform Mobile Development](https://reader034.vdocuments.site/reader034/viewer/2022052504/54b6efd24a7959fd508b4682/html5/thumbnails/3.jpg)
Problem & Solution Introduction
![Page 4: Cross Platform Mobile Development](https://reader034.vdocuments.site/reader034/viewer/2022052504/54b6efd24a7959fd508b4682/html5/thumbnails/4.jpg)
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
![Page 5: Cross Platform Mobile Development](https://reader034.vdocuments.site/reader034/viewer/2022052504/54b6efd24a7959fd508b4682/html5/thumbnails/5.jpg)
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
![Page 6: Cross Platform Mobile Development](https://reader034.vdocuments.site/reader034/viewer/2022052504/54b6efd24a7959fd508b4682/html5/thumbnails/6.jpg)
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
![Page 7: Cross Platform Mobile Development](https://reader034.vdocuments.site/reader034/viewer/2022052504/54b6efd24a7959fd508b4682/html5/thumbnails/7.jpg)
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.
![Page 8: Cross Platform Mobile Development](https://reader034.vdocuments.site/reader034/viewer/2022052504/54b6efd24a7959fd508b4682/html5/thumbnails/8.jpg)
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
![Page 9: Cross Platform Mobile Development](https://reader034.vdocuments.site/reader034/viewer/2022052504/54b6efd24a7959fd508b4682/html5/thumbnails/9.jpg)
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)
![Page 10: Cross Platform Mobile Development](https://reader034.vdocuments.site/reader034/viewer/2022052504/54b6efd24a7959fd508b4682/html5/thumbnails/10.jpg)
HTML Frameworks jquery mobile
![Page 11: Cross Platform Mobile Development](https://reader034.vdocuments.site/reader034/viewer/2022052504/54b6efd24a7959fd508b4682/html5/thumbnails/11.jpg)
jquery mobile
![Page 12: Cross Platform Mobile Development](https://reader034.vdocuments.site/reader034/viewer/2022052504/54b6efd24a7959fd508b4682/html5/thumbnails/12.jpg)
![Page 13: Cross Platform Mobile Development](https://reader034.vdocuments.site/reader034/viewer/2022052504/54b6efd24a7959fd508b4682/html5/thumbnails/13.jpg)
• Tabs & lists controls
• Think of a list like a uitableview
• Accordions - expandable sections
![Page 14: Cross Platform Mobile Development](https://reader034.vdocuments.site/reader034/viewer/2022052504/54b6efd24a7959fd508b4682/html5/thumbnails/14.jpg)
• Data entry widgets
• Picker
• Pop-up menu
• Provides controls like UIKit does in cocoa touch
![Page 15: Cross Platform Mobile Development](https://reader034.vdocuments.site/reader034/viewer/2022052504/54b6efd24a7959fd508b4682/html5/thumbnails/15.jpg)
Themeroller• http://jquerymobile.com/themeroller/
• Allows you to create up to 26 color themes/swatches for the UI components
• Lets you visually create CSS
![Page 16: Cross Platform Mobile Development](https://reader034.vdocuments.site/reader034/viewer/2022052504/54b6efd24a7959fd508b4682/html5/thumbnails/16.jpg)
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
![Page 17: Cross Platform Mobile Development](https://reader034.vdocuments.site/reader034/viewer/2022052504/54b6efd24a7959fd508b4682/html5/thumbnails/17.jpg)
HTML Frameworks Sencha Touch
![Page 18: Cross Platform Mobile Development](https://reader034.vdocuments.site/reader034/viewer/2022052504/54b6efd24a7959fd508b4682/html5/thumbnails/18.jpg)
• Used by over 50% of the Fortune 100 and 8 of the top 10 financial institutions
• iOS, Android, Blackberry Touch
Source: sencha.com
Sencha Touch
![Page 19: Cross Platform Mobile Development](https://reader034.vdocuments.site/reader034/viewer/2022052504/54b6efd24a7959fd508b4682/html5/thumbnails/19.jpg)
UI
![Page 20: Cross Platform Mobile Development](https://reader034.vdocuments.site/reader034/viewer/2022052504/54b6efd24a7959fd508b4682/html5/thumbnails/20.jpg)
Demo Sencha Architect
CityBars App
Sencha Touch
![Page 21: Cross Platform Mobile Development](https://reader034.vdocuments.site/reader034/viewer/2022052504/54b6efd24a7959fd508b4682/html5/thumbnails/21.jpg)
PhoneGap Native Building
![Page 22: Cross Platform Mobile Development](https://reader034.vdocuments.site/reader034/viewer/2022052504/54b6efd24a7959fd508b4682/html5/thumbnails/22.jpg)
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!
![Page 23: Cross Platform Mobile Development](https://reader034.vdocuments.site/reader034/viewer/2022052504/54b6efd24a7959fd508b4682/html5/thumbnails/23.jpg)
Device Features via JS
![Page 24: Cross Platform Mobile Development](https://reader034.vdocuments.site/reader034/viewer/2022052504/54b6efd24a7959fd508b4682/html5/thumbnails/24.jpg)
build.phonegap.com• Cloud based service for compile mobile web apps
• Allows you to compile for iOS w/o a Mac!
![Page 25: Cross Platform Mobile Development](https://reader034.vdocuments.site/reader034/viewer/2022052504/54b6efd24a7959fd508b4682/html5/thumbnails/25.jpg)
build.phonegap.com plans
![Page 26: Cross Platform Mobile Development](https://reader034.vdocuments.site/reader034/viewer/2022052504/54b6efd24a7959fd508b4682/html5/thumbnails/26.jpg)
Xcode Demos
![Page 27: Cross Platform Mobile Development](https://reader034.vdocuments.site/reader034/viewer/2022052504/54b6efd24a7959fd508b4682/html5/thumbnails/27.jpg)
• Phonegap xcode - sencha / citybars
• Phonegap xcode - jqm / speechtimerz
• Phonegap eclipse - jqm / website
• Textwrangler - basic jQuery Mobile
![Page 28: Cross Platform Mobile Development](https://reader034.vdocuments.site/reader034/viewer/2022052504/54b6efd24a7959fd508b4682/html5/thumbnails/28.jpg)
Wrap-Up Conclusion