hybrid mobile apps
TRANSCRIPT
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
Tradeoff comparison: Native vs Hybrid vs Web
Source: http://www.worklight.com
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.
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
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…
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
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
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
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 ServicesSOAP/REST
SOAPREST
Cache, local datastore
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
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
PhoneGap Features
http://phonegap.com/about/features
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
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.
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.
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
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/id433062854http://playbiolab.com/
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