This document discusses hybrid applications, which combine elements of native applications and web applications. Hybrid apps run foundationally like native apps but integrate web services and technologies for major functions. This allows access to hardware while incorporating beautiful web-based interfaces. Examples given are Spotify, Steam, and the authors' project GameWisp, which syncs game saves to the cloud with social features. Attendees are encouraged to add web functionality to make applications more powerful and interconnected.

1. Native
+ Web = ?
An Exploration (with
Demos!)

2. Who We Are
 Michael Anderson
 PhD Student at Vanderbilt; Web Developer
 GitHub: http://github.com/mandersondesign
 @mdanderson
 Eli Hooten
 PhD Student at Vanderbilt; Roboticist; C++/Web Developer; Human-
Computer Interaction/UI/UX researcher
 GitHub: http://github.com/hootener
 Protip: You’ll find the demo code here
 @hootener
 GameWisp
 @gamewisp
 http://gamewisp.com

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 get
technical)
 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:
(http://searchsoftwarequality.techtarget.com/definition/hybrid-
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
 http://gamewisp.com
 Apply to test!
 Check out our demo project on GitHub
 http://github.com/hootener/BarCampHybrid