hybrid mobile apps

19
Hybrid Mobile Apps Use the web, take advantage of hardware Erik Paulsson [email protected]

Upload: erik-paulsson

Post on 06-May-2015

5.129 views

Category:

Documents


4 download

TRANSCRIPT

Page 1: Hybrid mobile apps

Hybrid Mobile AppsUse the web, take advantage of hardware

Erik Paulsson

[email protected]

Page 2: Hybrid mobile apps

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

Page 3: Hybrid mobile apps

Tradeoff comparison: Native vs Hybrid vs Web

Source: http://www.worklight.com

Page 4: Hybrid mobile apps

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.

Page 5: Hybrid mobile apps

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

Page 6: Hybrid mobile apps

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…

Page 7: Hybrid mobile apps

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

Page 8: Hybrid mobile apps

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

Page 9: Hybrid mobile apps

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

Page 10: Hybrid mobile apps

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

Page 11: Hybrid mobile apps

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

Page 12: Hybrid mobile apps

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

Page 13: Hybrid mobile apps

PhoneGap Features

http://phonegap.com/about/features

Page 14: Hybrid mobile apps

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

Page 15: Hybrid mobile apps

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.

Page 16: Hybrid mobile apps

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.

Page 17: Hybrid mobile apps

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

Page 18: Hybrid mobile apps

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/

Page 19: Hybrid mobile apps

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