Cross Platform Mobile Development

Cross Platform Mobile App Development

Manesh Lad

[email protected]

@maneshlad

October 2012

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