1 / 20

Developing downloadable mobile apps using HTML5 and PhoneGap “Apache Callback”

Developing downloadable mobile apps using HTML5 and PhoneGap “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: the hybrid model How hybrid apps work

booker
Download Presentation

Developing downloadable mobile apps using HTML5 and PhoneGap “Apache Callback”

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Developing downloadable mobile apps using HTML5 and PhoneGap “Apache Callback” Ron Perry, CTO, Worklight Inc.

  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. Critical HTML5 features are supported on mobile iOS5 Android 2.2, 2.3 WinPhone 7.5 • Canvas • Audio • Local Storage • Geolocation • Video • CSS3 borders, anim • Web Applications • SVG • Elements • CSS3 position:fixed • Drag & Drop • Files • WebGL • IndexedDB, WebSQL Desktop:

  4. HTML5 makes mobile web apps possible

  5. Native apps can still do much more VoIP Access Camera Audio Processing App-Store Presence Video Processing

  6. Downloadable (Native) Apps File System (on Mobile Device) Native App (Java/Obj-C/C#) Mobile OS

  7. Web Apps Mobile Browser Web App (HTML, CSS, JS) Web Server Mobile OS

  8. Hybrid to the rescue

  9. Hybrid Apps Native Container File System (on Mobile Device) HTML, CSS, JS Mobile OS

  10. App Development Comparison Device Access Speed Development Cost App Store Approval Process Native Full Very Fast Expensive Available Mandatory Hybrid Full Native Speed as Necessary Reasonable Available Low Overhead Web Partial Fast Reasonable Not Available None

  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. 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. PhoneGap provides JS access to device APIs

  14. PhoneGap run-time (native+JS) is part of the app

  15. Example: raising a native alert from JS code

  16. Example: getting device info

  17. Example: accessing the camera

  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 PhoneGapas the basis for our client-side technology, (while exposing the PhoneGap APIs) and are very happy with the result!

  19. A couple of Worklight-based apps • RealNews (for iPad): • Developed by RealCommerce, Worklight’s distributors in Israel • Lists “hot” Israeli news articles by # of likes • Freely available on the app store • Lotte Card (Korean credit card company): • Combines 150 HTML5 screens with a native augmented reality screen • Developed very quickly for iPhone and Android

  20. For More Information Thank You!

More Related