The shorter version of my presentation on "iPhone Development: Web or SDK?" that I presented at eComm 2009. There is a video of this talk at http://fora.tv/2009/03/03/Christopher_Allen_iPhone_Web_Development_or_SDK

1. March 2009
iPhone in Action:
Web Development
or SDK?
Christopher Allen

2. Christopher Allen

3. manning.com/callen

4. iPhone in Action:
Web Development
or SDK?

5. iPhone in Action:
Web Development or SDK?

6. iPhone in Action:
Web Development or SDK?
There are two ways that you can
program for the iPhone, using web
development tools and using the
SDK

7. iPhone in Action:
Web Development or SDK?
There are two ways that you can
program for the iPhone, using web
development tools and using the
SDK
Web development leverages
internet technologies

8. iPhone in Action:
Web Development or SDK?
There are two ways that you can
program for the iPhone, using web
development tools and using the
SDK
Web development leverages
internet technologies
The iPhone SDK leverage the full
power of the iPhone and years of
Apple’s development experience

9. iPhone in Action:
Web Development or SDK?

10. iPhone in Action:
Web Development or SDK?
The iPhone’s Mobile Safari features:
HTML 4.01 and XHTML 1.0
CSS 2.1 and some CSS 3
Full DOM
Javascript 1.4
XMLHttpRequest
thus support for AJAX
Canvas
PDF & Quicktime
Up to 8 “tabs”
Many custom WebKit functions

11. iPhone in Action:
Web Development or SDK?
Additional Mobile Safari features:

12. turning it into a wackybox class:
-webkit-transform: rotate(30deg) translate(5%,5%);
iPhone in Action:
The result is that your news article appears at an angle, moved somewhat off the
Figure 4.2 shows this change, which you can compare to the nontransformed new
Web Development or SDK?
that appears a few pages back as figure 4.1. This particular transform isn’t that
you want people to read it, but it could be
a nice background for a news site or
something similar. There are many other
Additional Mobile Safarido with transforms,
things that you can features:
Webkit CSS Transforms
such as setting up banners, printing text
at a variety of sizes, and making similar
changes on static web pages. Some will be
gimmicks, but others can have func-
tional benefits.
Before we leave transforms behind,
we’ll note that they support one other
property, –webkit-transform-origin,
which can be used to move the origin for
scales and skews away from the center of
the object.
Although you can do quite a bit with
transforms all on their own, their real
power appears when you start working

13. Discussions on this topic are scattered across the internet, alongside individuals’
solutions for them. At the time of writing, none of the library solutions were compre-
hensive enough for us to recommend them here, but take a look around if you need
text in your Canvas object and you don’t want to write the routines yourself.
iPhone in Action:
With that disappointment behind us, we’re going to finish our look at Canvas by
seeing how to put it all together.
6.8 Putting it together
Web Development or SDK?
Having shown lots of stand-alone Canvas methods, we’ll now show how a variety of
shapes can be painted onto a single Canvas object. Figure 6.9 includes a pair of
screenshots that show off most of the Canvas functionality that we’ve discussed.
Additional Mobile Safari features:
Webkit CSS Transforms
Canvas - Scalable Vector Graphics
Figure 6.9 Canvas allows for a wide variety of shapes to be created from a small set of primitives, as

14. iPhone in Action:
Web Development or SDK? 69
Recognizing touches and gestures
The results are shown in figure 4.4, which as you
can Additional Mobile Safari the WebKit CSS ele-
see make good use of some of features:
ments that we highlighted earlier, showing off the great
Webkit CSS Transforms
functionality that the WebKit provides you with.
The JavaScript Scalable Vector Graphics
Canvas - database is the last WebKit element
that you can make use of on SQLite Storagecan also
Database - Local the iPhone, but it
be used more broadly. The last couple of items that
we’ll discuss are instead iPhone specific.
Adjusting the chrome
In the previous chapter we showed you some simple
methods for dealing with the iPhone chrome. We
explained how to scroll the URL bar and noted that the
status bar and the bottom bar could not be changed.
Using the WebKit, you have slightly more control over
things, provided that your user is using iPhone OS 2.1
or higher. All you need to do is enter a new metatag on

15. iPhone in Action:
Web Development or SDK?
touchStart
Additional Mobile Safari features:
touchMove
Webkit CSS Transforms
touchEnd
Canvas - Scalable Vector Graphics touchCancel
Database - Local SQLite Storage gestureStart
Touch Events gestureChange
gestureEnd
changedTouches
targetTouches
touches
orientation
rotation
scale

16. iPhone in Action:
Web Development or SDK? 69
Recognizing touches and gestures
The results are shown in figure 4.4, which as you
can Additional Mobile Safari the WebKit CSS ele-
see make good use of some of features:
ments that we highlighted earlier, showing off the great
Webkit CSS Transforms
functionality that the WebKit provides you with.
The JavaScript Scalable Vector Graphics
Canvas - database is the last WebKit element
that you can make use of on SQLite Storagecan also
Database - Local the iPhone, but it
be used more broadly. The last couple of items that
Touch Events
we’ll discuss are instead iPhone specific.
Hide Mobile Safari’s Chrome
Adjusting the chrome
In the previous chapter we showed you some simple
methods for dealing with the iPhone chrome. We
explained how to scroll the URL bar and noted that the
status bar and the bottom bar could not be changed.
Using the WebKit, you have slightly more control over
things, provided that your user is using iPhone OS 2.1
or higher. All you need to do is enter a new metatag on

17. iPhone in Action:
Web Development or SDK?
The iPhone SDK features:
Same Mach kernel and Core OS as
Macintosh

18. iPhone in Action:
Web Development or SDK?
The iPhone SDK features:
Same Mach kernel and Core OS as
Macintosh
Most of the same Core Services as
Macintosh

19. iPhone in Action:
Web Development or SDK?
The iPhone SDK features:
Same Mach kernel and Core OS as
Macintosh
Most of the same Core Services as
Macintosh
Most of functionality available to
Apple’s iPhone apps

20. iPhone in Action:
Web Development or SDK?
The iPhone SDK features:
Same Mach kernel and Core OS as
Macintosh
Most of the same Core Services as
Macintosh
Most of functionality available to
Apple’s iPhone apps
Cocoa Touch with UIKit

21. iPhone in Action:
Web Development or SDK?
The iPhone SDK features:
Same Mach kernel and Core OS as
Macintosh
Most of the same Core Services as
Macintosh
Most of functionality available to
Apple’s iPhone apps
Cocoa Touch with UIKit
Objective C and C++ compiler

22. iPhone in Action:
Web Development or SDK?
The iPhone SDK features:
Same Mach kernel and Core OS as
Macintosh
Most of the same Core Services as
Macintosh
Most of functionality available to
Apple’s iPhone apps
Cocoa Touch with UIKit
Objective C and C++ compiler
Interface Builder with UIKit
templates

23. iPhone in Action:
Web Development or SDK?
The iPhone SDK features:
Same Mach kernel and Core OS as
Macintosh
Most of the same Core Services as
Macintosh
Most of functionality available to
Apple’s iPhone apps
Cocoa Touch with UIKit
Objective C and C++ compiler
Interface Builder with UIKit
templates
Great debugging and profiling

24. iPhone in Action:
Web Development or SDK?

25. iPhone in Action:
Web Development or SDK?
Web Development Advantages

26. iPhone in
Action:
Web
Development
or SDK?
Same Advantages as in 2007

27. iPhone in Action:
Web Development or SDK?
Web Development Advantages
Simplicity

28. iPhone in Action:
Web Development or SDK?
Web Development Advantages
Simplicity
Easier then using low-level C

29. iPhone in Action:
Web Development or SDK?
Web Development Advantages
Simplicity
Easier then using low-level C
Languages are dynamic

30. iPhone in Action:
Web Development or SDK?
Web Development Advantages
Simplicity
Easier then using low-level C
Languages are dynamic
No memory management

31. iPhone in Action:
Web Development or SDK?
Web Development Advantages
Simplicity
Easier then using low-level C
Languages are dynamic
No memory management
Display of data is easy

32. iPhone in Action:
Web Development or SDK?
Web Development Advantages
Simplicity
Easier then using low-level C
Languages are dynamic
No memory management
Display of data is easy
Deployment is an upload

33. iPhone in Action:
Web Development or SDK?
Web Development Advantages
Simplicity
Easier then using low-level C
Languages are dynamic
No memory management
Display of data is easy
Deployment is an upload
Easy to use

34. iPhone in Action:
Web Development or SDK?
Web Development Advantages
Simplicity
Dynamism

35. iPhone in Action:
Web Development or SDK?
Web Development Advantages
Simplicity
Dynamism
Update functionality anytime

36. iPhone in Action:
Web Development or SDK?
Web Development Advantages
Simplicity
Dynamism
Update functionality anytime
Easy to fix bugs

37. iPhone in Action:
Web Development or SDK?
Web Development Advantages
Simplicity
Dynamism
Update functionality anytime
Easy to fix bugs
Give users the latest data

38. iPhone in Action:
Web Development or SDK?
Web Development Advantages
Simplicity
Dynamism
Globalized

39. iPhone in Action:
Web Development or SDK?
Web Development Advantages
Simplicity
Dynamism
Globalized
Part of global network

40. iPhone in Action:
Web Development or SDK?
Web Development Advantages
Simplicity
Dynamism
Globalized
Part of global network
One program for iPhone and
desktop

41. iPhone in Action:
Web Development or SDK?
Web Development Advantages
Simplicity
Dynamism
Globalized
Part of global network
One program for iPhone and
desktop
Access to rest of web

42. iPhone in Action:
Web Development or SDK?
Web Development Advantages
Simplicity
Dynamism
Globalized
Part of global network
One program for iPhone and
desktop
Access to rest of web
Connected to everyone

43. iPhone in
Action:
Web
Development
or SDK?
Multiple Platforms

44. iPhone in Action:
Web Development or SDK?
SDK Development Advantages
Sophistication

45. iPhone in Action:
Web Development or SDK?
SDK Development Advantages
Sophistication
Great depth of functionality

46. iPhone in Action:
Web Development or SDK?
SDK Development Advantages
Sophistication
Great depth of functionality
Superior development
environment

47. iPhone in Action:
Web Development or SDK?
SDK Development Advantages
Sophistication
Great depth of functionality
Superior development
environment
Deeper access to internals

48. iPhone in Action:
Web Development or SDK?
SDK Development Advantages
Sophistication
Great depth of functionality
Superior development
environment
Deeper access to internals
Camera, accelerometers, GPS,
gestures, contacts, photos

49. iPhone in Action:
Web Development or SDK?
SDK Development Advantages
Sophistication
Great depth of functionality
Superior development
environment
Deeper access to internals
Camera, accelerometers, GPS,
gestures, contacts, photos
Better graphics and 3D

50. iPhone in Action:
Web Development or SDK?
SDK Development Advantages
Sophistication
Accessibility

51. iPhone in Action:
Web Development or SDK?
SDK Development Advantages
Sophistication
Accessibility
Always available

52. iPhone in Action:
Web Development or SDK?
SDK Development Advantages
Sophistication
Accessibility
Always available
Functions without net

53. iPhone in Action:
Web Development or SDK?
SDK Development Advantages
Sophistication
Accessibility
Always available
Functions without net
Cache data

54. iPhone in Action:
Web Development or SDK?
SDK Development Advantages
Sophistication
Accessibility
Always available
Functions without net
Cache data
Native speed

55. iPhone in Action:
Web Development or SDK?
SDK Development Advantages
Sophistication
Accessibility
Always available
Functions without net
Cache data
Native speed
Private

56. iPhone in Action:
Web Development or SDK?
SDK Development Advantages
Sophistication
Accessibility
Monetization

57. iPhone in Action:
Web Development or SDK?
SDK Development Advantages
Sophistication
Accessibility
Monetization
Easy to sell through App Store

58. iPhone in Action:
Web Development or SDK?
SDK Development Advantages
Sophistication
Accessibility
Monetization
Easy to sell through App Store
Does not depend on
advertisements or subscriptions

59. iPhone in Action:
Web Development or SDK?

60. iPhone in Action:
Web Development or SDK?
Both development approaches have
their advantages.

61. iPhone in Action:
Web Development or SDK?
Both development approaches have
their advantages.
You want to take advantage of each
programming methods strengths and
use it when appropriate.

62. iPhone in Action:
Web Development or SDK?
Both development approaches have
their advantages.
You want to take advantage of each
programming methods strengths and
use it when appropriate.
Don’t blindly just use the SDK or the
Web because you're more
comfortable with it.

63. iPhone in Action:
Web Development or SDK?

64. iPhone in Action:
Web Development or SDK?
There are options to combine both
approaches and thus play to their
strengths

65. iPhone in Action:
Web Development or SDK?
There are options to combine both
approaches and thus play to their
strengths
Mirrored Development

66. iPhone in Action:
Web Development or SDK?
There are options to combine both
approaches and thus play to their
strengths
Mirrored Development
Mixed Development

67. iPhone in Action:
Web Development or SDK?
There are options to combine both
approaches and thus play to their
strengths
Mirrored Development
Mixed Development
Client-Server Development

68. iPhone in Action:
Web Development or SDK?
There are options to combine both
approaches and thus play to their
strengths
Mirrored Development
Mixed Development
Client-Server Development
Hybrid Development

69. iPhone in Action:
Web Development or SDK?

70. iPhone in Action:
Web Development or SDK?
Mirrored Development
Write a free web version as well a
more fully featured SDK version

71. iPhone in
Action:
Web
Development
or SDK?
Mirrored Development
apnews.com & Mobile News App

72. iPhone in Action:
Web Development or SDK?

73. iPhone in Action:
Web Development or SDK?
Mixed Development
Write different parts of a program
suite via different means

74. iPhone in
Action:
Web
Development
or SDK?
Mixed Development
google.com/reader & Maps App

75. iPhone in Action:
Web Development or SDK?

76. iPhone in Action:
Web Development or SDK?
Client-Server Development
Link in to web software through
the SDK

77. iPhone in
Action:
Web
Development
or SDK?
Client-Server Development
Showtimes App & Gifts App

78. iPhone in Action:
Web Development or SDK?

79. iPhone in Action:
Web Development or SDK?
Hybrid Development
Use PhoneGap plus native-looking
iPhone Javascript libraries
Result is app that can be submitted
to iPhone AppStore
You can now charge for your
webapp
Cross-Platform for Android,
Blackberry, more to come
http://phonegap.com/

80. iPhone in
Action:
Web
Development
or SDK?
Hybrid Development
Inside Trader & It’s On My iPhone

81. Resources

82. iPhone in Action:
Web Development or SDK?

83. iPhone in Action:
Web Development or SDK?
iPhone In Action:
Introduction to Web & SDK Development
manning.com/iphoneinaction

84. iPhone in Action:
Web Development or SDK?
iPhone In Action:
Introduction to Web & SDK Development
manning.com/iphoneinaction
Oriented for web developers

85. iPhone in Action:
Web Development or SDK?
iPhone In Action:
Introduction to Web & SDK Development
manning.com/iphoneinaction
Oriented for web developers
Topics:
Creating web apps optimized for the
iPhone with Canvas, WebKit, and iUI

86. iPhone in Action:
Web Development or SDK?
iPhone In Action:
Introduction to Web & SDK Development
manning.com/iphoneinaction
Oriented for web developers
Topics:
Creating web apps optimized for the
iPhone with Canvas, WebKit, and iUI
Learning about the iPhone native SDK

87. iPhone in Action:
Web Development or SDK?
iPhone In Action:
Introduction to Web & SDK Development
manning.com/iphoneinaction
Oriented for web developers
Topics:
Creating web apps optimized for the
iPhone with Canvas, WebKit, and iUI
Learning about the iPhone native SDK
Programming with Cocoa Touch's UIKit

88. iPhone in Action:
Web Development or SDK?
iPhone In Action:
Introduction to Web & SDK Development
manning.com/iphoneinaction
Oriented for web developers
Topics:
Creating web apps optimized for the
iPhone with Canvas, WebKit, and iUI
Learning about the iPhone native SDK
Programming with Cocoa Touch's UIKit
Building apps that delve into the iPhone's
toolbox

89. iPhone in Action:
Web Development or SDK?
iPhone In Action:
Introduction to Web & SDK Development
manning.com/iphoneinaction
Oriented for web developers
Topics:
Creating web apps optimized for the
iPhone with Canvas, WebKit, and iUI
Learning about the iPhone native SDK
Programming with Cocoa Touch's UIKit
Building apps that delve into the iPhone's
toolbox
Blending web & iPhone SDK development

90. iPhone in Action:
Web Development or SDK?
iPhone In Action:
Introduction to Web & SDK Development
manning.com/iphoneinaction
Oriented for web developers
Topics:
Creating web apps optimized for the
iPhone with Canvas, WebKit, and iUI
Learning about the iPhone native SDK
Programming with Cocoa Touch's UIKit
Building apps that delve into the iPhone's
toolbox
Blending web & iPhone SDK development
Available Now in Print & PDF

91. iPhone in Action:
Web Development or SDK?
iPhone In Action:
Introduction to Web & SDK Development
manning.com/iphoneinaction
Oriented for web developers
Topics:
Creating web apps optimized for the
iPhone with Canvas, WebKit, and iUI
Learning about the iPhone native SDK
Programming with Cocoa Touch's UIKit
Building apps that delve into the iPhone's
toolbox
Blending web & iPhone SDK development
Available Now in Print & PDF
Updates and Blog at
iphoneinaction.manning.com

92. iPhone in
Action:
Web
Development
or SDK?
iPhoneWebDev
iPhoneWebDev.com

93. iPhone in Action:
Web Development or SDK?

94. iPhone in Action:
Web Development or SDK?
iUI Framework
iui.googlecode.com

95. iPhone in Action:
Web Development or SDK?
iUI Framework
iui.googlecode.com
Navigation windows from JSON
objects

96. iPhone in Action:
Web Development or SDK?
iUI Framework
iui.googlecode.com
Navigation windows from JSON
objects
Navigational objects using canvas UI
tags for speed

97. iPhone in Action:
Web Development or SDK?
iUI Framework
iui.googlecode.com
Navigation windows from JSON
objects
Navigational objects using canvas UI
tags for speed
Handles phone rotation events

98. iPhone in Action:
Web Development or SDK?
iUI Framework
iui.googlecode.com
Navigation windows from JSON
objects
Navigational objects using canvas UI
tags for speed
Handles phone rotation events
Supports XmlHttpRequest

99. iPhone in Action:
Web Development or SDK?
iUI Framework
iui.googlecode.com
Navigation windows from JSON
objects
Navigational objects using canvas UI
tags for speed
Handles phone rotation events
Supports XmlHttpRequest
A great iPhone user experience

100. iPhone in Action:
Web Development or SDK?
iUI Framework
iui.googlecode.com
Navigation windows from JSON
objects
Navigational objects using canvas UI
tags for speed
Handles phone rotation events
Supports XmlHttpRequest
A great iPhone user experience
1.8KB with gzip and Dojo shrinksafe

101. iPhone in Action:
Web Development or SDK?
iUI Framework
iui.googlecode.com
Navigation windows from JSON
objects
Navigational objects using canvas UI
tags for speed
Handles phone rotation events
Supports XmlHttpRequest
A great iPhone user experience
1.8KB with gzip and Dojo shrinksafe
Moviesapp.com written in 5 hours...

102. iPhone in
Action:
Web
Development
or SDK?
moviesapp.com using iUI

103. iPhone in
Action:
Web
Development
or SDK?
SQLite Safari
tinyurl.com/sqlitesafari

104. iPhone in
Action:
Web
Development
or SDK?
DashCode

105. iPhone in
Action:
Web
Development
or SDK?
Dashcode Development

106. iPhone in
Action:
Web
Development
or SDK?
PhoneGap
phonegap.com

107. iPhone in
Action:
Web
Development
or SDK?
TouchCode (json,xml,rss,...)
touchcode.googlecode.com

108. <mailto:ChristopherA@manning.com>