Frameworks for developing cross platform mobile apps (and why...
Transcript of Frameworks for developing cross platform mobile apps (and why...
![Page 1: Frameworks for developing cross platform mobile apps (and why …eqinfo.ucsd.edu/~rnewman/pdf/webheads_2011-05-20_JQM_rl... · 2011-05-20 · Frameworks for developing cross platform](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee1236aad6a402d666c2093/html5/thumbnails/1.jpg)
Frameworks for developing cross platform
mobile apps (and why I used jQueryMobile)
Rob Newman2011-05-20
1
![Page 2: Frameworks for developing cross platform mobile apps (and why …eqinfo.ucsd.edu/~rnewman/pdf/webheads_2011-05-20_JQM_rl... · 2011-05-20 · Frameworks for developing cross platform](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee1236aad6a402d666c2093/html5/thumbnails/2.jpg)
http://www.flickr.com/photos/oskay/365607662
2
![Page 3: Frameworks for developing cross platform mobile apps (and why …eqinfo.ucsd.edu/~rnewman/pdf/webheads_2011-05-20_JQM_rl... · 2011-05-20 · Frameworks for developing cross platform](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee1236aad6a402d666c2093/html5/thumbnails/3.jpg)
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
![Page 4: Frameworks for developing cross platform mobile apps (and why …eqinfo.ucsd.edu/~rnewman/pdf/webheads_2011-05-20_JQM_rl... · 2011-05-20 · Frameworks for developing cross platform](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee1236aad6a402d666c2093/html5/thumbnails/4.jpg)
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
![Page 5: Frameworks for developing cross platform mobile apps (and why …eqinfo.ucsd.edu/~rnewman/pdf/webheads_2011-05-20_JQM_rl... · 2011-05-20 · Frameworks for developing cross platform](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee1236aad6a402d666c2093/html5/thumbnails/5.jpg)
http://thenextweb.com/mobile/2011/01/06/the-great-rise-of-the-mobile-web/
5
![Page 6: Frameworks for developing cross platform mobile apps (and why …eqinfo.ucsd.edu/~rnewman/pdf/webheads_2011-05-20_JQM_rl... · 2011-05-20 · Frameworks for developing cross platform](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee1236aad6a402d666c2093/html5/thumbnails/6.jpg)
http://thenextweb.com/mobile/2011/01/06/the-great-rise-of-the-mobile-web/
6
![Page 7: Frameworks for developing cross platform mobile apps (and why …eqinfo.ucsd.edu/~rnewman/pdf/webheads_2011-05-20_JQM_rl... · 2011-05-20 · Frameworks for developing cross platform](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee1236aad6a402d666c2093/html5/thumbnails/7.jpg)
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
![Page 8: Frameworks for developing cross platform mobile apps (and why …eqinfo.ucsd.edu/~rnewman/pdf/webheads_2011-05-20_JQM_rl... · 2011-05-20 · Frameworks for developing cross platform](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee1236aad6a402d666c2093/html5/thumbnails/8.jpg)
Lots of similarities...
• Global CSS to control look & feel
• Global JS for functionality
• Semantic layout (body > div > ul > li)
8
![Page 9: Frameworks for developing cross platform mobile apps (and why …eqinfo.ucsd.edu/~rnewman/pdf/webheads_2011-05-20_JQM_rl... · 2011-05-20 · Frameworks for developing cross platform](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee1236aad6a402d666c2093/html5/thumbnails/9.jpg)
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
![Page 10: Frameworks for developing cross platform mobile apps (and why …eqinfo.ucsd.edu/~rnewman/pdf/webheads_2011-05-20_JQM_rl... · 2011-05-20 · Frameworks for developing cross platform](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee1236aad6a402d666c2093/html5/thumbnails/10.jpg)
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
![Page 11: Frameworks for developing cross platform mobile apps (and why …eqinfo.ucsd.edu/~rnewman/pdf/webheads_2011-05-20_JQM_rl... · 2011-05-20 · Frameworks for developing cross platform](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee1236aad6a402d666c2093/html5/thumbnails/11.jpg)
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
![Page 12: Frameworks for developing cross platform mobile apps (and why …eqinfo.ucsd.edu/~rnewman/pdf/webheads_2011-05-20_JQM_rl... · 2011-05-20 · Frameworks for developing cross platform](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee1236aad6a402d666c2093/html5/thumbnails/12.jpg)
Supported devices
• Android 1.6-2.3
• HTC Incredible (2.2)
• Motorola Droid (2.2)
• Nook Color (2.1)
• Google G1 (1.6)
12
![Page 13: Frameworks for developing cross platform mobile apps (and why …eqinfo.ucsd.edu/~rnewman/pdf/webheads_2011-05-20_JQM_rl... · 2011-05-20 · Frameworks for developing cross platform](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee1236aad6a402d666c2093/html5/thumbnails/13.jpg)
Supported devices cont.
• Blackberry 6
• Torch & Style
• Blackberry 5
• actively debugging this browser
• Firefox Mobile (Fennec)
13
![Page 14: Frameworks for developing cross platform mobile apps (and why …eqinfo.ucsd.edu/~rnewman/pdf/webheads_2011-05-20_JQM_rl... · 2011-05-20 · Frameworks for developing cross platform](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee1236aad6a402d666c2093/html5/thumbnails/14.jpg)
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
![Page 15: Frameworks for developing cross platform mobile apps (and why …eqinfo.ucsd.edu/~rnewman/pdf/webheads_2011-05-20_JQM_rl... · 2011-05-20 · Frameworks for developing cross platform](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee1236aad6a402d666c2093/html5/thumbnails/15.jpg)
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
![Page 16: Frameworks for developing cross platform mobile apps (and why …eqinfo.ucsd.edu/~rnewman/pdf/webheads_2011-05-20_JQM_rl... · 2011-05-20 · Frameworks for developing cross platform](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee1236aad6a402d666c2093/html5/thumbnails/16.jpg)
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
![Page 17: Frameworks for developing cross platform mobile apps (and why …eqinfo.ucsd.edu/~rnewman/pdf/webheads_2011-05-20_JQM_rl... · 2011-05-20 · Frameworks for developing cross platform](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee1236aad6a402d666c2093/html5/thumbnails/17.jpg)
Overview
• Clean, semantic HTML (uses HTML 5)
• Progressive enhancement:
• unobtrusively transform semantic page into rich, interactive experience
• Accessibility integrated (WAI-ARIA)
17
![Page 18: Frameworks for developing cross platform mobile apps (and why …eqinfo.ucsd.edu/~rnewman/pdf/webheads_2011-05-20_JQM_rl... · 2011-05-20 · Frameworks for developing cross platform](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee1236aad6a402d666c2093/html5/thumbnails/18.jpg)
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
![Page 19: Frameworks for developing cross platform mobile apps (and why …eqinfo.ucsd.edu/~rnewman/pdf/webheads_2011-05-20_JQM_rl... · 2011-05-20 · Frameworks for developing cross platform](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee1236aad6a402d666c2093/html5/thumbnails/19.jpg)
Anatomy of a page
19
![Page 20: Frameworks for developing cross platform mobile apps (and why …eqinfo.ucsd.edu/~rnewman/pdf/webheads_2011-05-20_JQM_rl... · 2011-05-20 · Frameworks for developing cross platform](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee1236aad6a402d666c2093/html5/thumbnails/20.jpg)
Theming
• Object oriented CSS framework
• Similar to jQueryUI
• Uses CSS3 properties:
• rounded corners, box & text shadows, gradients vs. images
• very lightweight, low overhead
20
![Page 21: Frameworks for developing cross platform mobile apps (and why …eqinfo.ucsd.edu/~rnewman/pdf/webheads_2011-05-20_JQM_rl... · 2011-05-20 · Frameworks for developing cross platform](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee1236aad6a402d666c2093/html5/thumbnails/21.jpg)
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
![Page 22: Frameworks for developing cross platform mobile apps (and why …eqinfo.ucsd.edu/~rnewman/pdf/webheads_2011-05-20_JQM_rl... · 2011-05-20 · Frameworks for developing cross platform](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee1236aad6a402d666c2093/html5/thumbnails/22.jpg)
Theming cont.
• Bars:
• Content Blocks:
22
![Page 23: Frameworks for developing cross platform mobile apps (and why …eqinfo.ucsd.edu/~rnewman/pdf/webheads_2011-05-20_JQM_rl... · 2011-05-20 · Frameworks for developing cross platform](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee1236aad6a402d666c2093/html5/thumbnails/23.jpg)
Theming cont.
• Lists:
23
![Page 24: Frameworks for developing cross platform mobile apps (and why …eqinfo.ucsd.edu/~rnewman/pdf/webheads_2011-05-20_JQM_rl... · 2011-05-20 · Frameworks for developing cross platform](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee1236aad6a402d666c2093/html5/thumbnails/24.jpg)
Theming cont.• Buttons:
• Buttons in bars: auto-match parent swatch
24
![Page 25: Frameworks for developing cross platform mobile apps (and why …eqinfo.ucsd.edu/~rnewman/pdf/webheads_2011-05-20_JQM_rl... · 2011-05-20 · Frameworks for developing cross platform](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee1236aad6a402d666c2093/html5/thumbnails/25.jpg)
Theming cont.• Putting it all together, includes:
• Global “Active” state for toggling buttons
• Standardized icon sets
25
![Page 26: Frameworks for developing cross platform mobile apps (and why …eqinfo.ucsd.edu/~rnewman/pdf/webheads_2011-05-20_JQM_rl... · 2011-05-20 · Frameworks for developing cross platform](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee1236aad6a402d666c2093/html5/thumbnails/26.jpg)
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
![Page 27: Frameworks for developing cross platform mobile apps (and why …eqinfo.ucsd.edu/~rnewman/pdf/webheads_2011-05-20_JQM_rl... · 2011-05-20 · Frameworks for developing cross platform](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee1236aad6a402d666c2093/html5/thumbnails/27.jpg)
27
![Page 28: Frameworks for developing cross platform mobile apps (and why …eqinfo.ucsd.edu/~rnewman/pdf/webheads_2011-05-20_JQM_rl... · 2011-05-20 · Frameworks for developing cross platform](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee1236aad6a402d666c2093/html5/thumbnails/28.jpg)
28
![Page 29: Frameworks for developing cross platform mobile apps (and why …eqinfo.ucsd.edu/~rnewman/pdf/webheads_2011-05-20_JQM_rl... · 2011-05-20 · Frameworks for developing cross platform](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee1236aad6a402d666c2093/html5/thumbnails/29.jpg)
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
![Page 30: Frameworks for developing cross platform mobile apps (and why …eqinfo.ucsd.edu/~rnewman/pdf/webheads_2011-05-20_JQM_rl... · 2011-05-20 · Frameworks for developing cross platform](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee1236aad6a402d666c2093/html5/thumbnails/30.jpg)
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
![Page 31: Frameworks for developing cross platform mobile apps (and why …eqinfo.ucsd.edu/~rnewman/pdf/webheads_2011-05-20_JQM_rl... · 2011-05-20 · Frameworks for developing cross platform](https://reader036.fdocuments.in/reader036/viewer/2022070720/5ee1236aad6a402d666c2093/html5/thumbnails/31.jpg)
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