Native App + Wep App = ? (Hybrid Applications)

Uploaded on

An exploration of advantages vs disadvantages of Hybrid Applications. Given at Bar Camp Nashville on 10/20/2012 Visit us at:

An exploration of advantages vs disadvantages of Hybrid Applications. Given at Bar Camp Nashville on 10/20/2012 Visit us at:

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide
  • Open Spotify here, play a tune
  • Open Spotify here, play a tuneOpen Steam, show game content and web content


  • 1. Native+ Web = ?An Exploration (withDemos!)
  • 2. Who We Are Michael Anderson  PhD Student at Vanderbilt; Web Developer  GitHub:  @mdanderson Eli Hooten  PhD Student at Vanderbilt; Roboticist; C++/Web Developer; Human- Computer Interaction/UI/UX researcher  GitHub:  Protip: You’ll find the demo code here  @hootener GameWisp @gamewisp
  • 3. Some Definitions… Native Applications  A software application that has been developed for use with a specific hardware or operating system.  Leverages details, hooks, and/or weird properties of the deployment device.
  • 4. Some Definitions… Web Applications  A web application is an application that is accessed by users over a network such as the Internet or an intranet.[1] The term may also mean a computer software application that is coded in a browser-supported programming language (such as JavaScript, combined with a browser-rendered markup language like HTML) and reliant on a common web browser to render the application executable. (Wikipedia)
  • 5. Native Advantages Access to the system level Access to the hard drive Speed and efficiency The opposite of a box of chocolates.
  • 6. Native Disadvantages Terrible-ish UI Not intrinsically platform independent Difficult to update and iterate Slow moving standards
  • 7. Web App Advantages Fluid and growing technology Easily interchange and interconnect technologies Beautiful-ish, easy interface design Anyone with a browser can use it
  • 8. Web App Disadvantages Must be served by a web server Anyone with a browser can use it. (Different layout depending on what browser you have) Stateless No (or little) access to the system hardware
  • 9. Problem Summary Bad Design = Bad Product
  • 10. Problem Summary (let’s gettechnical) Noaccess to the system makes it hard to do something interesting on the desktop.
  • 11. Solution! Native + Web = Hybrid Application  Or: Hybrid Application = Native + Web  (Don’t worry, before you ask, I overloaded the operators) So….What are they?
  • 12. A Definition Hybrid Application  “A hybrid application (hybrid app) is one that combines elements of both native and Web applications. ”  Source: ( application-hybrid-app)
  • 13. A Better Definition They are foundationally built to leverage the hardware of the deployment platform. They integrate with web services for most or all of the major functions of the application. Most use web based rendering engines to leverage the interface design methods of web based technologies.
  • 14. Hybrid App Advantages Fusion of advantages of web apps and native apps. Run command line, hardware related calls Can be designed to work offline, as well as online. Beautiful UI and efficient foundational code!
  • 15. Hybrid App Advantages  Allows the integration of tons of web services and technologies with the desktop  Node.js  jQuery & jQuery UI  Web App Tech (ie: php, rails, python, MySQL)  Easy Streaming Video
  • 16. Hybrid App Disadvantage Ifyou do it wrong, it has the disadvantages of both approaches! Example: Facebook’s IOS App  Native -> Hybrid  Slowest App Of All Time  They went back to Native. And Apologized!
  • 17. Everyone’s Doing it!Be the peer pressure.
  • 18. Spotify
  • 19. Steam
  • 20. BarCamp Hybrid Demo Built using Qt C++ Framework Example of basic techniques to get you started Expose C++ Objects to JS to get system info and pass information to OS.  Handled using Signals and Slots; Qt’s fancy callbacks.
  • 21. Current Project - GameWisp Hybrid Application Syncing Game Saves to the Cloud Social, web app Features
  • 22. GameWisp – Web App Built with PHP using the CodeIgniter Framework Running on a LAMP stack Push messaging handled by Node.js RESTful API handles Data Exchange
  • 23. Conclusion Most applications are tending to be more and more hybrid in nature. Web services provide content to apps that would otherwise be completely static TrueHybrid Applications can really open your project up for awesome interfaces
  • 24. Conclusion - Action Take the first step and add some kind of web functionality to your application! We put our demo application on GitHub There are tons of other easy options!  Add a Twitter feed  Add a Blog feed  Add some HTML5 interface elements
  • 25. You got Qs & We got As
  • 26. Thanks Check out GameWisp  Apply to test! Check out our demo project on GitHub 