Hybrid App
Development for the
iPhone
Bill Heyman
Damon Allison
CodeMorphic
www.codemorphic.com
Monday, April 6, 2009

What makes an iPhone App?
A iPhone app package is:
➡ built using Apple’s IDE: XCode
➡ written in Objective C
➡ using frameworks in iPhone SDK
➡ signed with a developer’s certificate
➡ distributed via iTunes (or Ad Hoc)
Monday, April 6, 2009

Native iPhone Apps Can Use...
• Sqlite Database / File System
• Location / GPS services
• Camera / Photo Library
• Accelerometer
• OpenGL / Quartz / Animation / Audio
• Socket communication, custom protocols
➡ Web apps can’t (or are limited...)
Monday, April 6, 2009

Web = Mobile Safari
• Built on WebKit (525.20)
• HTML 4.01, XHTML 1.0
• DOM 2, ECMAScript 3
• CSS 2.1, partial CSS 3
• SVG, Canvas
• 320 x 416 Screen Size
Monday, April 6, 2009

Native Web View
• Mobile Safari sans “chrome”
(up to 480 visible pixels high)
• Load HTML via URL or string
• Native side can:
• run JavaScript on Web page
• receive events when links
are clicked
Monday, April 6, 2009

So, what’s a web developer
to do?
• Learn Objective C?
• Learn Cocoa Framework?
• Become a native iPhone app developer?
➡ Fortunately, it can be a bit easier...
Monday, April 6, 2009

Hybrid iPhone App Spectrum
Hybrid
Native Web
A whole range of possibilities
for mixing and matching
web and native development
on the iPhone
Monday, April 6, 2009

Hybrid iPhone App Spectrum
Hybrid
Native Web
More Native, Less Web
Selectively use UIWebView controls within
your app for custom formatting.
Monday, April 6, 2009

Hybrid iPhone App Spectrum
Hybrid
Native Web
Less Native, More Web
Host your web content on the iPhone in a
native UIWebView container.
Monday, April 6, 2009

Hybrid Containers
Hybrid
A few options...
1. PhoneGap
2. Quick Connect
3. Roll Your Own
Monday, April 6, 2009

Hybrid: PhoneGap
• www.phonegap.com
• Open source, developed by sintaxi
• Is a native shell for hosting web pages
• Uses JavaScript and custom URL schemes
to interact with the hardware
• Supports: iPhone, Android, and Blackberry
Monday, April 6, 2009

Hybrid: QCiPhone
• quickconnect.sourceforge.net
• Open source web app hosting framework
• Interface can be developed in DashCode
• Uses JavaScript calls to interface with iPhone
• Supports: iPhone, Android, Linux, Mac
Monday, April 6, 2009

Hybrid: Roll Your Own
Sometimes, you need:
• improved user experience
• better performance
• more hardware access and graphics
• custom protocols
➡So, you’ll need more native code...
Monday, April 6, 2009

Case Study: My Health
• CodeMorphic prototype for health care
industry
• Native container for navigation and tabs
• All screen content is HTML/CSS, styled
with iUI CSS framework
Monday, April 6, 2009

MyHealth: Calendar
All HTML in a Web View
Monday, April 6, 2009

MyHealth: Account/Network
HTML with images, iUI styled
Monday, April 6, 2009

Case Study: Mobile Cookbook
• Betty Crocker Mobile Cookbook
developed January 2009
• Mostly native, all data on phone:
• Sqlite database contains 4000+ recipes
• Uses HTML formatting for dynamic recipe
view
Monday, April 6, 2009

Mobile Cookbook: Search
native screens
Monday, April 6, 2009

Mobile Cookbook: Recipe
HTML-based, catches add favorites link
Monday, April 6, 2009

Mobile Cookbook: e-mail
HTML is used to format e-mail
Monday, April 6, 2009

Case Study: Real Estate
• Smarter Agent Mobile Real Estate Search
• Mostly native, but web used for:
• Maps
• Property Details
• Picture Display (CoverFlow !?!)
Monday, April 6, 2009

Real Estate: Search
native screens
Monday, April 6, 2009

Real Estate: Maps
Web-based Google map,
catches arrow click for property details
Monday, April 6, 2009

Real Estate: Property Details
HTML/CSS presentation + JavaScript actions
Monday, April 6, 2009

Real Estate: CoverFlow
UIWebView with zflow
http://code.google.com/p/css-vfx/
Monday, April 6, 2009

Case Study: Public Radio Tuner
• Originally: Minnesota Public Radio app
• Transferred to Public Radio Exchange to
fashion into the iPhone app for Public Radio
• Version 1.1 released January 2009,
1.6M downloads (According to Doc Searls
as of this AM)
• Version 2.0 to be released Summer 2009
Monday, April 6, 2009

PRT 1.1: Overview
native screens
Monday, April 6, 2009

PRT 1.1: About Screen
HTML-based, inline (Base64) images
Monday, April 6, 2009

Public Radio Tuner 2.0
• Planned availability June 2009
• UI developed with DashCode
• Will use QuickConnect iPhone
• Backend audio streaming will use an
updated version of the 1.x engine
Monday, April 6, 2009

Public Radio Tuner 2.0
Sneak Peek
Monday, April 6, 2009

Case Study: Human Atlas
• Blausen develops high resolution graphics,
videos, and 3-D models for the medical and
legal industries.
• Human Atlas makes use of the video
playback capabilities of the UIWebView.
Monday, April 6, 2009

Human Atlas: Overview
Monday, April 6, 2009

Human Atlas: Video Playback
Web View Used for Video Playback
Monday, April 6, 2009

Ask CodeMorphic
Q&A with Bill and Damon
Monday, April 6, 2009