Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Hybrid mobile apps

9.092 Aufrufe

Veröffentlicht am

  • pure native. Animations are slow as compared to native. Hybrid is cool for reaching many phones, but not a product to bring in new customers.
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Web app is not fast as compared to a native app. Moderate would be the actual speed. Javascript is hard because of browser consistencies. False you should be doing animations with CSS3/Javascript in hybrid apps because it is slow. It would take more work to get a hybrid app to feel native.

    Phone Gap has so many security holes and they control your code.

    Facebook went pure because of thew bad HTML5.
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

Hybrid mobile apps

  1. 1. Hybrid Mobile AppsUse the web, take advantage of hardware Erik Paulsson paulsson@gmail.com
  2. 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. 3. Tradeoff comparison: Native vs Hybrid vs WebSource: http://www.worklight.com
  4. 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. 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. 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. 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. 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. 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. 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. 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. 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. 13. PhoneGap Featureshttp://phonegap.com/about/features
  14. 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. 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. 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. 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. 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. 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