Hybrid Mobile AppsUse the web, take advantage of hardware Erik Paulsson firstname.lastname@example.org
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 WebSource: http://www.worklight.com
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
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
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 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
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/
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? Its 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
A particular slide catching your eye?
Clipping is a handy way to collect important slides you want to go back to later.