Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

iPhone Development: Web or SDK? (eComm 2009)

6,206 views

Published on

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

Published in: Technology, News & Politics
  • Just try out here to feel the difference...https://goo.gl/ooysyw
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Learning Web App Development --- http://amzn.to/22qAQ00
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics --- http://amzn.to/1Mvq2RM
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Web Design with HTML, CSS, JavaScript and jQuery Set --- http://amzn.to/1R7Illl
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

iPhone Development: Web or SDK? (eComm 2009)

  1. 1. March 2009 iPhone in Action: Web Development or SDK? Christopher Allen
  2. 2. Christopher Allen
  3. 3. manning.com/callen
  4. 4. iPhone in Action: Web Development or SDK?
  5. 5. iPhone in Action: Web Development or SDK?
  6. 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. 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. 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. 9. iPhone in Action: Web Development or SDK?
  10. 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. 11. iPhone in Action: Web Development or SDK? Additional Mobile Safari features:
  12. 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. 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. 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. 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. 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. 17. iPhone in Action: Web Development or SDK? The iPhone SDK features: Same Mach kernel and Core OS as Macintosh
  18. 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. 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. 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. 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. 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. 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. 24. iPhone in Action: Web Development or SDK?
  25. 25. iPhone in Action: Web Development or SDK? Web Development Advantages
  26. 26. iPhone in Action: Web Development or SDK? Same Advantages as in 2007
  27. 27. iPhone in Action: Web Development or SDK? Web Development Advantages Simplicity
  28. 28. iPhone in Action: Web Development or SDK? Web Development Advantages Simplicity Easier then using low-level C
  29. 29. iPhone in Action: Web Development or SDK? Web Development Advantages Simplicity Easier then using low-level C Languages are dynamic
  30. 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. 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. 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. 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. 34. iPhone in Action: Web Development or SDK? Web Development Advantages Simplicity Dynamism
  35. 35. iPhone in Action: Web Development or SDK? Web Development Advantages Simplicity Dynamism Update functionality anytime
  36. 36. iPhone in Action: Web Development or SDK? Web Development Advantages Simplicity Dynamism Update functionality anytime Easy to fix bugs
  37. 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. 38. iPhone in Action: Web Development or SDK? Web Development Advantages Simplicity Dynamism Globalized
  39. 39. iPhone in Action: Web Development or SDK? Web Development Advantages Simplicity Dynamism Globalized Part of global network
  40. 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. 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. 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. 43. iPhone in Action: Web Development or SDK? Multiple Platforms
  44. 44. iPhone in Action: Web Development or SDK? SDK Development Advantages Sophistication
  45. 45. iPhone in Action: Web Development or SDK? SDK Development Advantages Sophistication Great depth of functionality
  46. 46. iPhone in Action: Web Development or SDK? SDK Development Advantages Sophistication Great depth of functionality Superior development environment
  47. 47. iPhone in Action: Web Development or SDK? SDK Development Advantages Sophistication Great depth of functionality Superior development environment Deeper access to internals
  48. 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. 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. 50. iPhone in Action: Web Development or SDK? SDK Development Advantages Sophistication Accessibility
  51. 51. iPhone in Action: Web Development or SDK? SDK Development Advantages Sophistication Accessibility Always available
  52. 52. iPhone in Action: Web Development or SDK? SDK Development Advantages Sophistication Accessibility Always available Functions without net
  53. 53. iPhone in Action: Web Development or SDK? SDK Development Advantages Sophistication Accessibility Always available Functions without net Cache data
  54. 54. iPhone in Action: Web Development or SDK? SDK Development Advantages Sophistication Accessibility Always available Functions without net Cache data Native speed
  55. 55. iPhone in Action: Web Development or SDK? SDK Development Advantages Sophistication Accessibility Always available Functions without net Cache data Native speed Private
  56. 56. iPhone in Action: Web Development or SDK? SDK Development Advantages Sophistication Accessibility Monetization
  57. 57. iPhone in Action: Web Development or SDK? SDK Development Advantages Sophistication Accessibility Monetization Easy to sell through App Store
  58. 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. 59. iPhone in Action: Web Development or SDK?
  60. 60. iPhone in Action: Web Development or SDK? Both development approaches have their advantages.
  61. 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. 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. 63. iPhone in Action: Web Development or SDK?
  64. 64. iPhone in Action: Web Development or SDK? There are options to combine both approaches and thus play to their strengths
  65. 65. iPhone in Action: Web Development or SDK? There are options to combine both approaches and thus play to their strengths Mirrored Development
  66. 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. 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. 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. 69. iPhone in Action: Web Development or SDK?
  70. 70. iPhone in Action: Web Development or SDK? Mirrored Development Write a free web version as well a more fully featured SDK version
  71. 71. iPhone in Action: Web Development or SDK? Mirrored Development apnews.com & Mobile News App
  72. 72. iPhone in Action: Web Development or SDK?
  73. 73. iPhone in Action: Web Development or SDK? Mixed Development Write different parts of a program suite via different means
  74. 74. iPhone in Action: Web Development or SDK? Mixed Development google.com/reader & Maps App
  75. 75. iPhone in Action: Web Development or SDK?
  76. 76. iPhone in Action: Web Development or SDK? Client-Server Development Link in to web software through the SDK
  77. 77. iPhone in Action: Web Development or SDK? Client-Server Development Showtimes App & Gifts App
  78. 78. iPhone in Action: Web Development or SDK?
  79. 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. 80. iPhone in Action: Web Development or SDK? Hybrid Development Inside Trader & It’s On My iPhone
  81. 81. Resources
  82. 82. iPhone in Action: Web Development or SDK?
  83. 83. iPhone in Action: Web Development or SDK? iPhone In Action: Introduction to Web & SDK Development manning.com/iphoneinaction
  84. 84. iPhone in Action: Web Development or SDK? iPhone In Action: Introduction to Web & SDK Development manning.com/iphoneinaction Oriented for web developers
  85. 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. 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. 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. 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. 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. 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. 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. 92. iPhone in Action: Web Development or SDK? iPhoneWebDev iPhoneWebDev.com
  93. 93. iPhone in Action: Web Development or SDK?
  94. 94. iPhone in Action: Web Development or SDK? iUI Framework iui.googlecode.com
  95. 95. iPhone in Action: Web Development or SDK? iUI Framework iui.googlecode.com Navigation windows from JSON objects
  96. 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. 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. 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. 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. 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. 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. 102. iPhone in Action: Web Development or SDK? moviesapp.com using iUI
  103. 103. iPhone in Action: Web Development or SDK? SQLite Safari tinyurl.com/sqlitesafari
  104. 104. iPhone in Action: Web Development or SDK? DashCode
  105. 105. iPhone in Action: Web Development or SDK? Dashcode Development
  106. 106. iPhone in Action: Web Development or SDK? PhoneGap phonegap.com
  107. 107. iPhone in Action: Web Development or SDK? TouchCode (json,xml,rss,...) touchcode.googlecode.com
  108. 108. <mailto:ChristopherA@manning.com>

×