Hybrid mobile apps combine native and web technologies by wrapping web-based apps in a native container. They allow developers to write code once using HTML, CSS, and JavaScript that can be deployed across platforms without rewriting. While not entirely native, hybrid apps can access native device capabilities and have advantages over purely web-based or native apps in terms of cross-platform support and faster development cycles. Frameworks like PhoneGap and Sencha Touch facilitate the creation of hybrid mobile 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
Native AppWebserver
Datastore
Embedded
Browser
(WebView)
●Loads resources
from web server
and caches them
if desired
●Has javascript
hooks to access
native
functionality
camera
GPS
Microphone
Photo
Library
HTTP/S load:
HTML5, CSS,
Javascript,
images, etc
Websockets (WS/S):
pushing realtime data
(XML, JSON, XMPP, etc)
Native App
Web Services
SOAP/REST
SOAP
REST
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
● HP
● IBM
● SAP
● EMC
● CNN
● Direct TV
● Visa
● HSBC
● Merrill Lynch
● T-Mobile
● Verizon
● Motorola
● NATO
● US Army
● Lockheed Martin
● General Dynamics AIS
● Northrop Grumman
● SAIC
● GE
● GE Healthcare
● Samsung
● Cisco
● Juniper Networks
http://www.sencha.com/company/customers

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