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)
Problem & Solution Introduction
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
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
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
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.
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
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)
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 components
• Lets you visually create CSS
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
HTML Frameworks 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
Sencha Touch
UI
Demo Sencha Architect
CityBars App
Sencha Touch
PhoneGap Native Building
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!
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
Xcode Demos
• Phonegap xcode - sencha / citybars
• Phonegap xcode - jqm / speechtimerz
• Phonegap eclipse - jqm / website
• Textwrangler - basic jQuery Mobile
Wrap-Up Conclusion
