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.
Native, Web or Hybrid MobileApp Development?WorkLight Webinar Series
AgendaIntroductionUnderstanding the different approaches• Native apps• Web apps and HTML5• Hybrid appsThe business context...
Introduction3Native AppsNative Apps Web AppsWeb Apps Hybrid AppsHybrid Apps10110110101101111011011011011011011011011010110...
Examples of Purely-Native Mobile Apps4
Characteristics of a Purely-Native Mobile AppA binary “executable image”, that is explicitly downloadedand stored on the f...
Native App Development6SDK ToolsApplication Source CodeApplication Source CodeResources(e.g. images)Resources(e.g. images)...
iOS – Native App Development7SDK ToolsApplication Source CodeApplication Source CodeResources(e.g. images)Resources(e.g. i...
Android – Native App Development8SDK ToolsApplication Source CodeApplication Source CodeResources(e.g. images)Resources(e....
BlackBerry – Native App Development9SDK ToolsApplication Source CodeApplication Source CodeResources(e.g. images)Resources...
Windows Phone – Native App Development10SDK ToolsApplication Source CodeApplication Source CodeResources(e.g. images)Resou...
Native App Development Summary11Languages Obj-C, C, C++Java(Some C, C++)Java C#, VB.NET, etcTools Xcode Android SDKBB Java...
Characteristics of a Purely-Native Mobile AppA binary “executable image”, that is explicitly downloadedand stored on the f...
Native App – Interaction with Mobile Device13Touch Screen,KeyboardTouch Screen,KeyboardGraphicsTouch EventsGPSGPSLocationM...
Native App – High-level APIs and Built-in Apps14FileSystemNetwork Graphics CameraLow-LevelAPIsMulti-taskingMoreHigh-LevelA...
GUI Toolkit Provides App With “Native” Look15GUIToolkitAppsAPIsBrowserAPIBuilt-in AppsDownloaded Apps
Mobile Web Apps and Mobile Browsing16High-LevelAPIsGUIToolkitCalendarAPIPushAPIContacts,Email APIBrowserAPIMore…AppsAPIsRe...
Mobile Browsing and Mobile Web Apps17Google, Wikipedia:Mobile-optimizedwebsitesDremel:Launch usingQR-Codes2B: Web AppYouTu...
Mobile Browsing vs. Mobile Web Apps18Pure Mobile Web Sites• Visited by browsing• Static, navigational UI• Generic look & f...
JavaScript Toolkits for Mobile Web App UI19SenchaTouch Example:Crossword Puzzles for iPadjQuery Mobile:Boston Event App
HTML5 and related technologies20Static Pages Dynamic Pages Web Applicationsw3c.orgwhatwg.orgMain HTML5/CSS3 features on mo...
Characteristics of Mobile Web AppsEntirely written using web technologies• HTML, CSS and JavaScriptCode is executed by the...
Native App – Interaction with Mobile DeviceTouch Screen,KeyboardTouch Screen,KeyboardGraphicsTouch EventsGPSGPSLocationMic...
Web App – Interaction with Mobile DeviceBrowserBrowserTouch Screen,KeyboardTouch Screen,KeyboardGPSGPSMicrophoneMicrophone...
Native vs. Web24NativeDeviceAccessSpeed App StoreDevelopmentCostApprovalProcessFull Very Fast AvailableExpensive Mandatory...
HybridIntroducing Hybrid Apps25NativeDeviceAccessSpeed App Store ApprovalProcessFull Very Fast Available MandatoryPartial ...
Characteristics of Hybrid AppsA Hybrid App is a native app with embedded HTMLIt has all the benefits of native apps: full ...
Hybrid App – Interaction with Mobile Device27Hybrid AppHybrid AppWeb Portionof AppWeb Portionof AppNative Portionof AppTou...
Hybrid App Examples28Bank of AmericaMorgan StanleyLotte Card (Korea)Facebook
Hybrid App Development29SDK ToolsApplication Source CodeApplication Source Code Resources(e.g. images)Resources(e.g. image...
FullNativeSpeed asNecessaryReasonable AvailableLowOverheadHybridApp Development Comparison30NativeDeviceAccessSpeed App St...
No Single Approach Is Right For Everyone31Target AudienceTarget Audience App FunctionApp FunctionTime and BudgetTime and B...
An Inherent Tradeoff32NativeAppUserExperienceCost and Time-to-MarketHybridAppWeb AppMobileWeb Site
Choosing What’s Right For You33• Existing in-housenative skills• Targeting a singlemobile OS• Dominant nativefunctionality...
Future TrendsFuture device fragmentationAccelerated enterprise adoptionNew features and complementing technologiesNew dist...
Mobile is Strategic. Not Tactical.Flexible DevelopmentSecure and Scalable IntegrationOngoing Monitoring and Control35
For More Information36Contact me at http://ibm.co/RvM7pY
Upcoming SlideShare
Loading in …5
×

Native, Web or Hybrid Mobile App Development?

5,130 views

Published on

Differences between native, web and hybrid mobile apps - and how these apply to enterprise mobile initiatives.

Published in: Technology
  • ♣♣ 10 Easy Ways to Improve Your Performance in Bed... ●●● http://ishbv.com/rockhardx/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Native, Web or Hybrid Mobile App Development?

  1. 1. Native, Web or Hybrid MobileApp Development?WorkLight Webinar Series
  2. 2. AgendaIntroductionUnderstanding the different approaches• Native apps• Web apps and HTML5• Hybrid appsThe business contextQ&A2
  3. 3. Introduction3Native AppsNative Apps Web AppsWeb Apps Hybrid AppsHybrid Apps101101101011011110110110110110110110110110101101101011011011011011011011011011101011101111110110110110101101000001101011101101101011011110110110110110110110110110101101101011011011011011011011011011101011101111110110110110101101000001101011<!DOCTYPE html PUBLIC<html><! - - created 2003-12-12 - - ><head><title>XYZ</title></head><body><p>Voluptatem accusantium doTotam rem aperiam eaque</p></body></html><!DOCTYPE html PUBLIC<html><! - - created 2003-12-12 - - ><head><title>XYZ</title></head><body><p>Voluptatem accusantium doTotam rem aperiam eaque</p></body></html>
  4. 4. Examples of Purely-Native Mobile Apps4
  5. 5. Characteristics of a Purely-Native Mobile AppA binary “executable image”, that is explicitly downloadedand stored on the file system of the mobile deviceDistributed through the popular app store or marketplace ofthe device, or via an enterprise distribution mechanismExecuted directly by the operating system• Launched from the home screen• Does not require another “container app” to run itMakes explicit use of operating-system APIs5
  6. 6. Native App Development6SDK ToolsApplication Source CodeApplication Source CodeResources(e.g. images)Resources(e.g. images)Software SourceCodeSoftware SourceCodeCompiler, LinkerCompiler, Linker Executable(Binary)Executable(Binary) PackagerPackagerDistributablePackageDistributablePackageApp Stores
  7. 7. iOS – Native App Development7SDK ToolsApplication Source CodeApplication Source CodeResources(e.g. images)Resources(e.g. images)Software SourceCodeSoftware SourceCodeExecutable(Binary)Executable(Binary) PackagerPackagerDistributablePackageDistributablePackageApp StoresXcodeXcodeObjective-C,C++, CObjective-C,C++, C.app.appCompiler, LinkerCompiler, Linker
  8. 8. Android – Native App Development8SDK ToolsApplication Source CodeApplication Source CodeResources(e.g. images)Resources(e.g. images)Software SourceCodeSoftware SourceCodeExecutable(Binary)Executable(Binary) PackagerPackagerDistributablePackageDistributablePackageApp StoresJava(some C, C++)Java(some C, C++).apk.apkAndroid SDKAndroid SDKCompiler, LinkerCompiler, Linker
  9. 9. BlackBerry – Native App Development9SDK ToolsApplication Source CodeApplication Source CodeResources(e.g. images)Resources(e.g. images)Software SourceCodeSoftware SourceCodeExecutable(Binary)Executable(Binary) PackagerPackagerDistributablePackageDistributablePackageApp StoresBlackBerry JavaPlug-in forEclipseBlackBerry JavaPlug-in forEclipseJavaJava.cod.codCompiler, LinkerCompiler, Linker
  10. 10. Windows Phone – Native App Development10SDK ToolsApplication Source CodeApplication Source CodeResources(e.g. images)Resources(e.g. images)Software SourceCodeSoftware SourceCodeExecutable(Binary)Executable(Binary) PackagerPackagerDistributablePackageDistributablePackageApp StoresVisual Studio,Windows PhoneDeveloper ToolsVisual Studio,Windows PhoneDeveloper ToolsC#, VB.NET,etc.C#, VB.NET,etc..xap.xapCompiler, LinkerCompiler, Linker(Sliverlight)
  11. 11. Native App Development Summary11Languages Obj-C, C, C++Java(Some C, C++)Java C#, VB.NET, etcTools Xcode Android SDKBB Java EclipsePlug-InVisual Studio,Windows PhoneDev ToolsExecutable Files .app .apk .cod .xapApplication Stores Apple iTunes Android MarketBlackBerry AppWorldWindows PhoneMarketSimilar approach, but different source code and expertiseresults in expensive development and maintenance
  12. 12. Characteristics of a Purely-Native Mobile AppA binary “executable image”, that is explicitly downloadedand stored on the file system of the mobile device.Distributed through the popular app store or marketplace ofthe device, or via an enterprise distribution mechanism.Executed directly by the operating system• Launched from the home screen• Does not require another “container app” to run it.Makes explicit use of operating-system APIs12
  13. 13. Native App – Interaction with Mobile Device13Touch Screen,KeyboardTouch Screen,KeyboardGraphicsTouch EventsGPSGPSLocationMicrophoneMicrophoneAudioSpeakerSpeakerGSM NetworkGSM NetworkCalls, DataVibrationVibrationActivationAccelerometer,CompassAccelerometer,CompassOrientationCameraCameraWiFiWiFiDataImages, VideoStorageStorageMobile OperatingSystemMobile OperatingSystemDataNativeAppNativeAppOS-SpecificAPIsWide Range ofServicesAudioAPI Calls
  14. 14. Native App – High-level APIs and Built-in Apps14FileSystemNetwork Graphics CameraLow-LevelAPIsMulti-taskingMoreHigh-LevelAPIsGUIToolkitCalendarAPIPushAPIContacts,Email APIBrowserAPIMoreAudioBuilt-in AppsDownloaded AppsAppsAPIs
  15. 15. GUI Toolkit Provides App With “Native” Look15GUIToolkitAppsAPIsBrowserAPIBuilt-in AppsDownloaded Apps
  16. 16. Mobile Web Apps and Mobile Browsing16High-LevelAPIsGUIToolkitCalendarAPIPushAPIContacts,Email APIBrowserAPIMore…AppsAPIsRendering Engine(e.g., Webkit)Built-in AppsDownloaded AppsAPI CallsAPICalls
  17. 17. Mobile Browsing and Mobile Web Apps17Google, Wikipedia:Mobile-optimizedwebsitesDremel:Launch usingQR-Codes2B: Web AppYouTube: Web App
  18. 18. Mobile Browsing vs. Mobile Web Apps18Pure Mobile Web Sites• Visited by browsing• Static, navigational UI• Generic look & feel• Server-side rendering• Require connectivityPure Mobile Web Apps• Installed and launched• Interactive UI• Touch optimized• Client-side rendering• Available offline
  19. 19. JavaScript Toolkits for Mobile Web App UI19SenchaTouch Example:Crossword Puzzles for iPadjQuery Mobile:Boston Event App
  20. 20. HTML5 and related technologies20Static Pages Dynamic Pages Web Applicationsw3c.orgwhatwg.orgMain HTML5/CSS3 features on mobile•Bitmapped and vector graphics, including animations•Offline support and data URLs•Geolocation•Video and Audio•Continuous communications with the server•More…
  21. 21. Characteristics of Mobile Web AppsEntirely written using web technologies• HTML, CSS and JavaScriptCode is executed by the browser, not by the OSVarious launch mechanisms• Typing URL, clicking hyperlink, scanning QR Code or clicking home-screen shortcutInstallation is optionalCombine cross-platform HTML5 and device-specific features optimize apps• Touch-optimized look & feel• No address bar• Suggestion to pin to home screen• Offline availability21
  22. 22. Native App – Interaction with Mobile DeviceTouch Screen,KeyboardTouch Screen,KeyboardGraphicsTouch EventsGPSGPSLocationMicrophoneMicrophoneAudioSpeakerSpeakerGSM NetworkGSM NetworkCalls, DataVibrationVibrationActivationAccelerometer,CompassAccelerometer,CompassOrientationCameraCameraWiFiWiFiDataImages, VideoStorageStorageMobile OperatingSystemMobile OperatingSystemDataNativeAppNativeAppOS-SpecificAPIsWide Range ofServicesAudioAPI Calls22
  23. 23. Web App – Interaction with Mobile DeviceBrowserBrowserTouch Screen,KeyboardTouch Screen,KeyboardGPSGPSMicrophoneMicrophoneSpeakerSpeakerGSM NetworkGSM NetworkVibrationVibrationAccelerometer,CompassAccelerometer,CompassCameraCameraWiFiWiFiStorageStorageMobile OperatingSystemMobile OperatingSystemOS-SpecificAPIsWide Range ofServicesWebApp(HTML, CSS, JS)WebApp(HTML, CSS, JS)RenderingEngineRenderingEngineAPI CallsGraphicsTouch EventsLocationAudioCalls, DataActivationOrientationDataImages, VideoDataAudio23
  24. 24. Native vs. Web24NativeDeviceAccessSpeed App StoreDevelopmentCostApprovalProcessFull Very Fast AvailableExpensive MandatoryPartial Fast NotReasonable NoneWeb
  25. 25. HybridIntroducing Hybrid Apps25NativeDeviceAccessSpeed App Store ApprovalProcessFull Very Fast Available MandatoryPartial Fast Not NoneWebDevelopmentCostExpensiveReasonablePartial Fast NotReasonable NoneWeb
  26. 26. Characteristics of Hybrid AppsA Hybrid App is a native app with embedded HTMLIt has all the benefits of native apps: full access to APIs, app-store presence, etc.Selected portions of the app are written using webtechnologiesThe web portions of the app can either be downloaded fromthe web or packaged within the app26
  27. 27. Hybrid App – Interaction with Mobile Device27Hybrid AppHybrid AppWeb Portionof AppWeb Portionof AppNative Portionof AppTouch Screen,KeyboardTouch Screen,KeyboardGraphicsTouch EventsGPSGPSLocationMicrophoneMicrophoneAudioSpeakerSpeakerGSM NetworkGSM NetworkCalls, DataVibrationVibrationActivationAccelerometer,CompassAccelerometer,CompassOrientationCameraCameraWiFiWiFiDataImages, VideoStorageStorageDataAudioWeb Portionof AppHTML, CSS, JSRendering EngineRendering EngineMobile OperatingSystemMobile OperatingSystemOS-SpecificAPIsWide Rangeof ServicesAPI CallsAPI CallsPhoneGapPhoneGapAPI CallsAPI Calls
  28. 28. Hybrid App Examples28Bank of AmericaMorgan StanleyLotte Card (Korea)Facebook
  29. 29. Hybrid App Development29SDK ToolsApplication Source CodeApplication Source Code Resources(e.g. images)Resources(e.g. images)Software SourceCodeSoftware SourceCodeCompiler, LinkerCompiler, Linker Executable(Binary)Executable(Binary) PackagerPackagerDistributablePackageDistributablePackageApp StoresNative SourcesNative Sources HTML SourcesHTML Sources Server
  30. 30. FullNativeSpeed asNecessaryReasonable AvailableLowOverheadHybridApp Development Comparison30NativeDeviceAccessSpeed App Store ApprovalProcessFull Very Fast Available MandatoryDevelopmentCostExpensivePartial Fast NotAvailableReasonable NoneWeb
  31. 31. No Single Approach Is Right For Everyone31Target AudienceTarget Audience App FunctionApp FunctionTime and BudgetTime and Budget IT ResourcesIT Resources
  32. 32. An Inherent Tradeoff32NativeAppUserExperienceCost and Time-to-MarketHybridAppWeb AppMobileWeb Site
  33. 33. Choosing What’s Right For You33• Existing in-housenative skills• Targeting a singlemobile OS• Dominant nativefunctionality• Rich UI requirementsNative• Direct distribution tothe hands of users• Pilot application• Out-of-store visibilityvia search enginesWeb• Breaking thedevelopment tradeoff• Existing in-house webdevelopment skills• Taking the future intoconsiderationHybrid
  34. 34. Future TrendsFuture device fragmentationAccelerated enterprise adoptionNew features and complementing technologiesNew distribution channels34
  35. 35. Mobile is Strategic. Not Tactical.Flexible DevelopmentSecure and Scalable IntegrationOngoing Monitoring and Control35
  36. 36. For More Information36Contact me at http://ibm.co/RvM7pY

×