Frameworks for developing cross platform

mobile apps (and why I used jQueryMobile)

Rob Newman2011-05-20

1

http://www.flickr.com/photos/oskay/365607662

2

Web or Native Apps?Web App Native App

Pros

Cons

Simpler deployment & updates; known tech; cheaper to maintain; access to GPS; cross

platform

Faster execution; access to address book,

accelerometer, audio & camera; App Store

Slower to execute; debugging difficult; limited

access to hardware; no app store

App Store review process; more complex;

higher cost of dev process

http://www.slideshare.net/akosma/mobile-web-rising

3

Market stats

• In March 2010, 1.96% of all web traffic worldwide was using mobile browsers

• As of February 2011, this had increased to 4.7%

• Now > 5 billion mobile web users, of which 31% access the web on their phone

4

http://thenextweb.com/mobile/2011/01/06/the-great-rise-of-the-mobile-web/

5

http://thenextweb.com/mobile/2011/01/06/the-great-rise-of-the-mobile-web/

6

Frameworks• iUI

• jQTouch *

• WebApp.net

• iWebKit

• SproutCore/Cappuccino

• Yahoo! Blueprint

• Ext *

• Sencha Touch *

• jQueryMobile

• Mobile Web Framework (MWF)

• Quickconnect

• Dojo Mobile

• Zepto.js

• Xui

• Jo

• BaseJS

• LimeJS

• Mobl

• etc, etc...

* Sencha: http://www.sencha.com/

7

Lots of similarities...

• Global CSS to control look & feel

• Global JS for functionality

• Semantic layout (body > div > ul > li)

8

But some differences...

• Different handsets have different features

• e.g. the iOS ‘pinch-zoom’

• Hard to have a high-end ‘write once, run everywhere’ library for mobile devices

9

jQueryMobile (JQM)

http://jquerymobile.com

“Delivering top-of-the-line JavaScript in a unified User

Interface that works across the most-used smartphone web browsers and tablet form

factors.”

10

Why I picked jQueryMobile

• Documentation

• Supports maximum number of handsets

• Seamless integration with jQuery

• Excellent online support

• Solid AJAX API for JSON parsing

• Tie in with Python’s Django:

• http://code.google.com/p/django-jqmobile/

11

Supported devices

• Android 1.6-2.3

• HTC Incredible (2.2)

• Motorola Droid (2.2)

• Nook Color (2.1)

• Google G1 (1.6)

12

Supported devices cont.

• Blackberry 6

• Torch & Style

• Blackberry 5

• actively debugging this browser

• Firefox Mobile (Fennec)

13

Supported devices cont.

• iOS 3.x-4.x

• All iOS test devices, including iPhone, iPod touch & iPad

• MeeGo: No test devices for this platform

• Opera Mobile/Mini

• Opera Mobile 10.1 & Opera Mini on Android

14

Supported devices cont.

• Palm/HP WebOS

• Palm Pixi, Pre & test devices running 1.4

• Samsung Bada: No test devices for platform

• Symbian (Nokia S60): actively debugging this browser

15

Supported devices cont.

• Windows Phone 7

• support WP7 and testing on a HTC Surround phone.

• Basic, baseline experience

• functional on any device that understands HTML, e.g. the Amazon Kindle supports most features

16

Overview

• Clean, semantic HTML (uses HTML 5)

• Progressive enhancement:

• unobtrusively transform semantic page into rich, interactive experience

• Accessibility integrated (WAI-ARIA)

17

Overview cont.

• Lightweight (12k)

• Automatic initialization:

• HTML5 data-role attributes in the markup trigger page widgets

• New events to streamline input (touch, mouse, or cursor focus-based input)

• Built-in theming and ThemeRoller app

18

Anatomy of a page

19

Theming

• Object oriented CSS framework

• Similar to jQueryUI

• Uses CSS3 properties:

• rounded corners, box & text shadows, gradients vs. images

• very lightweight, low overhead

20

Theming cont.

• 5 default themes:

• a - Black (1st level)

• b - Blue (2nd level)

• c - Snow (baseline level)

• d - Gray (alt 2nd level)

• e - Yellow (accent swatch)

• Very structured semantic layouts/widgets:

21

Theming cont.

• Bars:

• Content Blocks:

22

Theming cont.

• Lists:

23

Theming cont.• Buttons:

• Buttons in bars: auto-match parent swatch

24

Theming cont.• Putting it all together, includes:

• Global “Active” state for toggling buttons

• Standardized icon sets

25

My first “app”

• http://m.anf.ucsd.edu

• Target audience: station engineers

• Displays near-realtime datalogger & sensor stats from > 400 deployed stations

• Integration with Google Maps v3 (geolocation)

26

27

28

Bridging the web/native gap

• Build your app once with HTML5, CSS & JS

• ‘Wrap it’

• Deploy to multiple platforms

• Or use their ‘build’ service: write app, upload, returned app-store ready for iOS, Android, Palm, Symbian, Blackberrry & more...

• PhoneGap, RhoMobile, Appcelerator

29

Take homes...

• Test in multiple devices

• Use a bug database

• Know your audience

• Scope your target

• http://www.opera.com/smw/

http://www.slideshare.net/akosma/mobile-web-rising

30

What now?• June 4th

AT&T Developer ProgramMobile App Hackathon(Sponsored by Qualcomm)http://www.eventbrite.com/event/1602911351

• Focus on networking, learning, and hacking

• Reps from Sencha, Apigee, PhoneGap & AppMobi will be there to help you code (plus Amazon)

• Dev phones provided

31