Hybrid mobile apps

Download Hybrid mobile apps

Post on 06-May-2015




4 download

Embed Size (px)


<ul><li>1.Hybrid Mobile AppsUse the web, take advantage of hardware Erik Paulssonpaulsson@gmail.com</li></ul> <p>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 anembedded browser component. A hybrid app is almost indistinguishable froma native one: it is downloaded from the app store ormarketplace it is stored on the device it is launched just like any other app 3. Tradeoff comparison: Native vsHybrid vs WebSource: http://www.worklight.com 4. Advantages over 100% Native apps Dont 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 MobileOS 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 &amp; 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 applicationinstead of rewriting the same app for the desktop. Still have access to native calls (camera, GPS, photo library, contacts, etc) since there is ainterface 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 youve 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 arent interactive like a native or desktop app False: javascript &amp; CSS3 provide many rich UX features like animations, 2D &amp; 3D rendering, WebGL (OpenGL), etc. WebGL example: http://lights.elliegoulding.com/ A browser app wont 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 wont 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-devicelanguage. 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 operatesthrough a single socket over the Web not just another incremental enhancement toconventional HTTP communications; it represents acolossal advance, especially for real-time, event-driven web applications "Reducing kilobytes of data to 2 bytesand reducinglatency from 150ms to 50ms is far more thanmarginal. In fact, these two factors alone are enoughto make Web Sockets seriously interesting to Google.http://websocket.org/quantum.html 8. BUT Websockets arent supported in all browsers True, but: More and more browsers are adding websocketsupport, including mobile browsers! Frameworks exist providing one API with fallbacksif Websockets arent supported in order to stillprovide real-time communications for allbrowsers: http://socket.io/ - Node.js module http://kaazing.com/ - Java based WebSocket server 9. Mobile Web &amp; 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 AppHTTP/S load:Webserver HTML5, CSS, Native App Native AppJavascript,Web Servicesimages, etcSOAP/REST EmbeddedSOAPREST Browser (WebView)DatastoreWebsockets (WS/S):Loads resourcescamera pushing realtime data from web server (XML, JSON, XMPP, etc)and caches them if desiredGPS Has javascript hooks to access Microphone native functionality Photo LibraryCache, local datastore 11. Accessing native phone functionality Frameworks and libraries exist that create a bridgebetween javascript running in the browser and the nativeAPIs 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 theGUI of your mobile web app. It allows you to choose any of the existing mobile web UIframeworks or to create your own. http://phonegap.com/tools/ Use PhoneGap to package your mobile web app into a nativewrapper and to access native phone functionality. Commercial support: http://phonegap.com/support 13. PhoneGap Featureshttp://phonegap.com/about/features 14. PhoneGaps Future Nitobi acquired by Adobe. PhoneGap contributed toApache 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: Dont count on Flash / Flex / Air based apps to keep working onAndroid 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 samecommunication mechanisms as a desktop or laptop you can take advantage of allthe 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. Dont get caught by vendors trying to convince you to buy their proprietarymiddleware mobile technology, you dont need it! No vendor lock in Build web services (REST /SOAP) that deliver data that can be used by anyapplication whether its running on a phone, tablet, desktop, laptop, or anotherserver. Make your services capable of delivering data in different formats: JSON,XML, etc. Dont duplicate your backend server applications for mobile! Add new services ifnecessary 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 theDOM. 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 MobileApps and dont 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&amp;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/ 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? 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 </p>