This document discusses hybrid app development for the iPhone and provides several case studies. It describes how hybrid apps combine both native and web development by using frameworks like PhoneGap or QuickConnect that allow hosting web content in a native container using UIWebView. This allows leveraging web skills for parts of an app while still having access to native functions. Case studies presented apps that took mostly native, mostly web, or mixed approaches for different parts of their apps.

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

2. 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

3. 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

4. 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

5. 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

6. 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

7. 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

8. 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

9. 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

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

11. 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

12. 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

13. 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

14. 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

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

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

17. 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

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

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

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

21. 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

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

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

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

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

26. 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

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

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

29. 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

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

31. 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

32. Human Atlas: Overview
Monday, April 6, 2009

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

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