This document discusses hybrid mobile apps, which are native apps that use an embedded browser to run some or all of their user interface. Hybrid apps combine the advantages of native apps like being downloaded from app stores with the advantages of web apps like being able to write code once and deploy to multiple platforms. Frameworks exist that allow hybrid apps to access native device capabilities like the camera from JavaScript. The document argues that with frameworks, hybrid apps can provide rich experiences comparable to native apps.

1. Hybrid Mobile Apps
Use the web, take advantage of hardware
Erik Paulsson
paulsson@gmail.com

2. What is a Hybrid mobile app?
● A hybrid app is a native, downloadable app,
that runs all or some of its user interface in an
embedded browser component.
● A hybrid app is almost indistinguishable from
a native one:
● it is downloaded from the app store or
marketplace
● it is stored on the device
● it is launched just like any other app

3. Tradeoff comparison: Native vs
Hybrid vs Web
Source: http://www.worklight.com

4. Advantages over 100% Native apps
● Don’t rewrite the entirety of an app for each mobile OS
● Write some or all of the app using HTML5, CSS, and Javascript and reuse it across Mobile
OS platforms/devices (UI and communication layer).
● Fix bugs and add new features in a single codebase instead of “N” codebases.
(maintenance nightmare)
● Much faster development cycle
● No compiling, just save file & reload app or browser
● No packaging (until wrapping in a native app)
● No reloading updated app on device every time an update needs testing
● No specialized development hardware (Mac HW for iOS, until wrapping in a native app)
● Push new updates (bug fixes and new features) without resubmitting to an app store
● ** Much of the same code can be reused to produce a desktop/laptop browser application
instead of rewriting the same app for the desktop.
● Still have access to native calls (camera, GPS, photo library, contacts, etc) since there is a
interface bridge between Javascript and native code for the mobile OS.
● http://developer.android.com/guide/webapps/webview.html#BindingJavaScript
● http://iphoneincubator.com/blog/windows-views/how-to-inject-javascript-functions-into-a-uiwebview
● http://www.phoboslab.org/log/2011/04/ios-and-javascript-for-real-this-time
● **Industry heavyweights have pointed to HTML/javascript as the only viable cross-
platform and cross-device technology.

5. Javascript Myths
● Writing javascript is hard b/c of browser inconsistencies
● False: If you’ve done any javascript programming in the last 5 years you know there are great
frameworks that handle browser inconsistencies automatically.
● http://jquery.com/ - jQuery
● http://www.sencha.com/products/extjs/ - ExtJS
● Most of the browsers which are gaining market share all adhere to the same web standards (exception is
MS Internet Explorer, but IE10 is taking standards seriously according to reports)
● HTML/Javascript apps aren’t interactive like a native or desktop app
● False: javascript & CSS3 provide many rich UX features like animations, 2D & 3D rendering, WebGL
(OpenGL), etc.
● WebGL example:
● http://lights.elliegoulding.com/
● A browser app won’t look and feel like a Native app
● False: Many of the mobile web app frameworks render their UI widgets to look and feel like their native
counterparts.
● Please try loading the Sencha frameworks “Kitchen Sink” demo app to see for yourself. Just load this link
in the browser of your mobile device:
http://dev.sencha.com/deploy/touch/examples/kitchensink/
● A browser based app won’t run if there is no network connection
● False: local browser caching of HTML, JS, CSS and local data storage provide the means for a hybrid app
to run and function without a network connection.
● Web and javascript apps have to continuously poll (AJAX) to receive new data:
● False: See Websockets discussed later

6. Javascript Everywhere
● Javascript is the only true cross-platform and cross-device
language.
● The industry is moving to the web and javascript is the key:
● You might want to start taking javascript seriously:
● http://davybrion.com/blog/2011/06/you-might-want-to-start-taking-
javascript-seriously/
● The rise and rise of javascript:
● http://dannorth.net/2011/12/19/the-rise-and-rise-of-javascript/
● The future smells like javascript:
● http://blog.jonasbandi.net/2012/02/future-smells-like-javascript.html
● Windows 8 Metro applications developed using javascript:
● http://msdn.microsoft.com/en-us/library/windows/apps/hh465380.aspx
● Javascript on the server:
● http://nodejs.org/
● Used by Microsoft, Ebay, LinkedIn, Yahoo, many others…

7. Realtime Apps in browsers?
● Websockets: true data push for the web
● a full-duplex communication channel that operates
through a single socket over the Web
● not just another incremental enhancement to
conventional HTTP communications; it represents a
colossal advance, especially for real-time, event-
driven web applications
● "Reducing kilobytes of data to 2 bytes…and reducing
latency from 150ms to 50ms is far more than
marginal. In fact, these two factors alone are enough
to make Web Sockets seriously interesting to Google.“
http://websocket.org/quantum.html

8. BUT… Websockets aren’t
supported in all browsers
● True, but:
● More and more browsers are adding websocket
support, including mobile browsers!
● Frameworks exist providing one API with fallbacks
if Websockets aren’t supported in order to still
provide “real-time” communications for all
browsers:
● http://socket.io/ - Node.js module
● http://kaazing.com/ - Java based WebSocket server

9. Mobile Web & Hybrid App
Frameworks
● http://phonegap.com/
● http://www.sencha.com/
● http://jquerymobile.com/
● http://www.appcelerator.com/
● http://mulberry.toura.com/
● http://www.kendoui.com/
● http://www.winktoolkit.org/
● http://www.sproutcore.com/
● http://joapp.com
● http://the-m-project.net/
● http://joshfire.com/
● http://www.lungojs.com/
● http://www.mobl-lang.org/
● http://getskeleton.com/
● http://zeptojs.com/
● http://xuijs.com/
● Many others available

10. Logical Architecture of a Hybrid App
HTTP/S load:
Webserver HTML5, CSS, Native App
Native App
Javascript,
Web Services images, etc
SOAP/REST
Embedded
SOAP
REST Browser
(WebView)
Datastore Websockets (WS/S): ●Loads resources camera
pushing realtime data from web server
(XML, JSON, XMPP, etc) and caches them
if desired GPS
●Has javascript
hooks to access Microphone
native
functionality
Photo
Library
Cache, local datastore

11. Accessing native phone
functionality
● Frameworks and libraries exist that create a bridge
between javascript running in the browser and the native
APIs provided by the device/OS
● Single javascript API providing cross platform access to:
● Accelerometer
● Camera
● Compass
● Contacts
● File
● Geolocation
● Media
● Network
● Notifications (alert, sound, vibration)
● Storage

12. PhoneGap
● PhoneGap - http://phonegap.com/
● Build your app once with web-standards
● Wrap it with PhoneGap to create a native app container
● Deploy app to multiple app stores
● FREE
● PhoneGap does not provide a UI component library to build the
GUI of your mobile web app.
● It allows you to choose any of the existing mobile web UI
frameworks or to create your own.
● http://phonegap.com/tools/
● Use PhoneGap to package your mobile web app into a native
wrapper and to access native phone functionality.
● Commercial support:
● http://phonegap.com/support

13. PhoneGap Features
http://phonegap.com/about/features

14. PhoneGap’s Future
● Nitobi acquired by Adobe. PhoneGap contributed to
Apache Software Foundation:
● http://blogs.nitobi.com/andre/index.php/2011/10/04/nitobi-
and-phonegaps-new-home-at-adobe/
● http://wiki.phonegap.com/w/page/46311152/apache-callback-
proposal
● Adobe announced plans to no longer support Flash Mobile.
This means:
● Don’t count on Flash / Flex / Air based apps to keep working on
Android devices.
● Adobe has some big plans to support HTML5/javascript.
● http://www.adobe.com/solutions/html5.html
● Apps built using PhoneGap:
● http://phonegap.com/apps/?sort=all

15. Networked Mobile Apps
● Since all mobile devices are essentially mini computers and have all the same
communication mechanisms as a desktop or laptop you can take advantage of all
the backend technologies you are already using and familiar with:
● TCP/IP, UDP
● HTTP/S and AJAX, WS/S WebSockets
● Any server stack that handles the above communication mechanisms and the databases your servers
already talk to.
● Apache, Tomcat, Nginx, Glassfish, JBoss, IIS, Node.js, etc.
● Java, .Net, PHP, Ruby, Python, etc.
● PostgreSQL, MySQL, Oracle, SQL Server, Cassandra, MongoDB, Redis, etc.
● Don’t get caught by vendors trying to convince you to buy their proprietary
“middleware” mobile technology, you don’t need it! No vendor lock in…
● Build web services (REST /SOAP) that deliver data that can be used by any
application whether its running on a phone, tablet, desktop, laptop, or another
server. Make your services capable of delivering data in different formats: JSON,
XML, etc.
● Don’t duplicate your backend server applications for mobile! Add new services if
necessary to handle new features or datasets.

16. Sencha Touch
● Develop mobile web apps that look and feel native on iPhone, Android,
and BlackBerry touch devices. Adding support for Windows Phone 7.
● http://www.sencha.com/products/touch/
● Develop using HTML5, CSS3, and Javascript.
● OO Javascript API which creates the HTML and appends it to the
DOM.
● Themeable/skinnable with custom CSS.
● MVC architecture and project structure.
● Use any backend server stack you like.
● Free for commercial use: http://www.sencha.com/legal/touch-
commercial-license
● IDE and visual designer (not free): http://www.sencha.com/blog/sencha-
designer-2-beta-announcement/
● Commercial support and training available.

17. Sencha Customers
http://www.sencha.com/company/customers
● NATO ● HP
● US Army ● IBM
● Lockheed Martin ● SAP
● General Dynamics AIS ● EMC
● Northrop Grumman ● CNN
● Direct TV
● SAIC
● Visa
● GE
● HSBC
● GE Healthcare ● Merrill Lynch
● Samsung ● T-Mobile
● Cisco ● Verizon
● Juniper Networks ● Motorola

18. You already use Hybrid Mobile
Apps and don’t realize it
● Facebook mobile:
● Facebook Project Spartan
● Load http://m.facebook.com on your mobile browser.
● http://techcrunch.com/2011/09/28/this-sure-looks-a-lot-like-facebooks-
project-spartan-screenshots/
● http://www.bgr.com/2011/09/30/facebooks-project-spartan-html5-based-
client-revealed/
● LinkedIn mobile: http://venturebeat.com/2011/08/16/linkedin-
node/
● Yelp: http://itunes.apple.com/us/app/yelp/id284910350?
mt=8&ign-mpt=uo%3D2
● BoA: http://itunes.apple.com/us/app/bank-america-mobile-
banking/id284847138
● Game - Biolab Disaster:
http://itunes.apple.com/us/app/biolab-disaster/id433062854
http://playbiolab.com/

19. Good Links
● Hybrid mobile apps take off as HTML5 vs. native
debate continues:
● http://venturebeat.com/2011/07/08/hybrid-mobile-apps-take-off-as-
html5-vs-native-debate-continues/
● Mobile Web App vs. Native App? It's Complicated:
● http://www.forbes.com/sites/fredcavazza/2011/09/27/mobile-web-
app-vs-native-app-its-complicated/
● MIT Technology Review - War Between Apps and Web:
● http://www.technologyreview.com/blog/mimssbits/27419/?p1=blogs
● Apple on web standards and Flash:
● http://www.apple.com/hotnews/thoughts-on-flash/
● Why apps are not the future:
● http://scripting.com/stories/2011/12/13/whyAppsAreNotTheFuture.
html
● http://scripting.com/stories/2011/12/14/enoughWithTheAppsAlready.
html