Your SlideShare is downloading. ×
Developing DownloadableMobile Apps Using HTML5 andPhoneGap “Apache Callback”Ron Perry, CTO, Worklight Inc.
Agenda Downloadable (native) apps vs. Web apps • HTML5 web apps vs. Downloadable apps Using HTML5 in downloadable apps: th...
Critical HTML5 features are supported on mobile           iOS5                    Android 2.2, 2.3              WinPhone 7...
HTML5 makes mobile web apps possible
Native apps can still do much more   VoIP                 Access Camera               Audio Processing     Video Processin...
Downloadable (Native) Apps              File System              Native App              (on Mobile            (Java/Obj-C...
Web Apps             Mobile Browser                Web App             (HTML, CSS, JS)Web Server                Mobile OS
Hybrid to the rescue    Combine HTML/CSS/JS with native code                                                       Special...
Hybrid Apps                                        Native Container              File System              (on Mobile      ...
App Development Comparison         Device                Development               Approval                     Speed     ...
Architecture of a hybrid app Native container: •   Creates instance of UIWebView / android.webkit.WebView / etc. •   Navig...
PhoneGap – Open Source Framework The de-facto standard for hybrid app development Now in transition into becoming “Apache ...
PhoneGap provides JS access to device APIs
PhoneGap run-time (native+JS) is part of the app
Example: raising a native alert from JS code
Example: getting device info
Example: accessing the camera
Worklight Platform: PhoneGap-based client-side The Worklight Platform provides an enterprise-grade infrastructure for mobi...
A couple of Worklight-based appsLotte Card (Korean credit card company):   RealNews (for iPad):• Combines 150 HTML5 screen...
For More InformationResource              LocationPhoneGap Site         http://www.phonegap.comApache Project Page   http:...
Upcoming SlideShare
Loading in...5
×

Developing Downloadable Mobile Apps Using HTML5 and PhoneGap

4,822

Published on

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,822
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
0
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide
  • So to summarize, let’s look at all 3 development approaches compared to each other.Native excels in performance and device access, but suffers in cost and updates.Web is much simpler, less expensive, easier to update, but is currently more limited.Hybrid provides a middle ground, which in many situations is the best of both worlds – especially if you’re targeting multiple operating systems.Which should you choose? That really depends on your specific needs. There isn’t a single approach that works for everyone.So to provide you with a few more tips that will help you decide, I’d like to transfer the microphone over to Jonathan - who will examine the approaches from a business perspective, and discuss how they fit into the bigger picture of defining the mobile strategy of your organization.
  • Transcript of "Developing Downloadable Mobile Apps Using HTML5 and PhoneGap"

    1. 1. Developing DownloadableMobile Apps Using HTML5 andPhoneGap “Apache Callback”Ron Perry, CTO, Worklight Inc.
    2. 2. Agenda Downloadable (native) apps vs. Web apps • HTML5 web apps vs. Downloadable apps Using HTML5 in downloadable apps: the hybrid model • How hybrid apps work • Advantages and disadvantages Writing an app with PhoneGap • The concept • Accessing device APIs Our experience with PhoneGap
    3. 3. Critical HTML5 features are supported on mobile iOS5 Android 2.2, 2.3 WinPhone 7.5• Canvas • SVG• Audio • Elements Desktop:• Local Storage • CSS3 position:fixed• Geolocation • Drag & Drop• Video • Files• CSS3 borders, anim • WebGL• Web Applications • IndexedDB, WebSQL
    4. 4. HTML5 makes mobile web apps possible
    5. 5. Native apps can still do much more VoIP Access Camera Audio Processing Video Processing App-Store Presence
    6. 6. Downloadable (Native) Apps File System Native App (on Mobile (Java/Obj-C/C#) Device) Mobile OS
    7. 7. Web Apps Mobile Browser Web App (HTML, CSS, JS)Web Server Mobile OS
    8. 8. Hybrid to the rescue Combine HTML/CSS/JS with native code Special functions User interface in Logic and interaction written in platform- HTML/CSS in JS specific native code Advantages Reuse of Access to App-store Portability existing skills device APIs presence
    9. 9. Hybrid Apps Native Container File System (on Mobile HTML, CSS, JS Device) Mobile OS
    10. 10. App Development Comparison Device Development Approval Speed App Store Access Cost ProcessNative Full Very Fast Expensive Available Mandatory Native LowHybrid Full Speed as Reasonable Available Overhead Necessary Not Web Partial Fast Reasonable Available None
    11. 11. Architecture of a hybrid app Native container: • Creates instance of UIWebView / android.webkit.WebView / etc. • Navigates to main html file • Implements listener/handler for requests coming from JS code • Activates JS code when necessary HTML5/CSS3/JS code: • Implements UI and app logic • Activates native handlers through OS-specific mechanism (custom URL scheme) • Receives responses through JS handlers HTML resources can be packaged into downloadable app for performance boost
    12. 12. PhoneGap – Open Source Framework The de-facto standard for hybrid app development Now in transition into becoming “Apache Callback” Provides: • A template implementation for the native container • Implementation of the JS<->Native bridge for 6 mobile OSs • OS-independent JS APIs for activating device functions
    13. 13. PhoneGap provides JS access to device APIs
    14. 14. PhoneGap run-time (native+JS) is part of the app
    15. 15. Example: raising a native alert from JS code
    16. 16. Example: getting device info
    17. 17. Example: accessing the camera
    18. 18. Worklight Platform: PhoneGap-based client-side The Worklight Platform provides an enterprise-grade infrastructure for mobile apps Includes features such as security, authentication, data-integration, push notifications, diagnostics, direct update and more We chose PhoneGap as the basis for our client-side technology, (while exposing the PhoneGap APIs) and are very happy with the result!
    19. 19. A couple of Worklight-based appsLotte Card (Korean credit card company): RealNews (for iPad):• Combines 150 HTML5 screens with a • Developed by RealCommerce, Worklight’s native augmented reality screen distributors in Israel• Developed very quickly for iPhone and • Lists “hot” Israeli news articles by # of likes Android • Freely available on the app store
    20. 20. For More InformationResource LocationPhoneGap Site http://www.phonegap.comApache Project Page http://incubator.apache.org/projects/callback.htmlWorklight Webinars http://www.worklight.com/resources/webinars-and-tools Thank You!

    ×