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