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 • SVG
• Audio • Elements Desktop:
• Local Storage • CSS3 position:fixed
• Geolocation • Drag & Drop
• Video • Files
• CSS3 borders, anim • WebGL
• Web Applications • IndexedDB, WebSQL
7. Web Apps
Mobile Browser
Web App
(HTML, CSS, JS)
Web Server
Mobile OS
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. Hybrid Apps
Native Container
File System
(on Mobile HTML, CSS, JS
Device)
Mobile OS
10. App Development Comparison
Device Development Approval
Speed App Store
Access Cost Process
Native Full Very Fast Expensive Available Mandatory
Native
Low
Hybrid Full Speed as Reasonable Available
Overhead
Necessary
Not
Web Partial Fast Reasonable
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
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. A couple of Worklight-based apps
Lotte 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. For More Information
Resource Location
PhoneGap Site http://www.phonegap.com
Apache Project Page http://incubator.apache.org/projects/callback.html
Worklight Webinars http://www.worklight.com/resources/webinars-and-tools
Thank You!
Editor's Notes
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.
