Native+ Web = ?An Exploration (withDemos!)
Who We Are   Michael Anderson       PhD Student at Vanderbilt; Web Developer       GitHub: http://github.com/mandersond...
Some Definitions… Native   Applications    A software application that has been     developed for use with a specific ha...
Some Definitions…   Web Applications       A web application is an application that is        accessed by users over a n...
Native Advantages Access   to the system level Access   to the hard drive Speed    and efficiency The   opposite of a ...
Native Disadvantages Terrible-ish   UI Not   intrinsically platform independent Difficult   to update and iterate Slow...
Web App Advantages Fluid   and growing technology Easily       interchange and interconnect  technologies Beautiful-ish...
Web App Disadvantages Must   be served by a web server Anyone with a browser can use it.  (Different layout depending on...
Problem Summary Bad   Design = Bad Product
Problem Summary (let’s gettechnical) Noaccess to the system makes it hard to do something interesting on the desktop.
Solution! Native    + Web = Hybrid Application    Or: Hybrid Application = Native + Web    (Don’t worry, before you ask...
A Definition Hybrid     Application    “A hybrid application (hybrid app) is one     that combines elements of both nati...
A Better Definition   They are foundationally built to leverage the    hardware of the deployment platform.   They integ...
Hybrid App Advantages   Fusion of advantages of web apps and native    apps.   Run command line, hardware related calls...
Hybrid App Advantages    Allows the integration of tons of web     services and technologies with the desktop      Node....
Hybrid App Disadvantage Ifyou do it wrong, it has the  disadvantages of both approaches! Example:     Facebook’s IOS App...
Everyone’s Doing it!Be the peer pressure.
Spotify
Steam
BarCamp Hybrid Demo Built   using Qt C++ Framework Example     of basic techniques to get you  started Expose C++ Objec...
Current Project - GameWisp Hybrid  Application Syncing Game Saves to the Cloud Social, web app Features
GameWisp – Web App Built      with PHP using the CodeIgniter  Framework Running    on a LAMP stack Push    messaging ha...
Conclusion Most     applications are tending to be more and more hybrid in nature. Web services provide content to apps ...
Conclusion - Action Take     the first step and add some kind of web functionality to your application! We   put our dem...
You got Qs & We got As
Thanks Check   out GameWisp    http://gamewisp.com Apply   to test! Check   out our demo project on GitHub    http://...
Upcoming SlideShare
Loading in …5
×

Native App + Wep App = ? (Hybrid Applications)

1,705 views

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,705
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
19
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • http://searchsoftwarequality.techtarget.com/definition/native-application-native-app
  • http://searchsoftwarequality.techtarget.com/definition/native-application-native-app
  • http://searchsoftwarequality.techtarget.com/definition/native-application-native-app
  • http://searchsoftwarequality.techtarget.com/definition/native-application-native-app
  • http://searchsoftwarequality.techtarget.com/definition/native-application-native-app
  • http://searchsoftwarequality.techtarget.com/definition/native-application-native-app
  • http://searchsoftwarequality.techtarget.com/definition/native-application-native-app
  • http://searchsoftwarequality.techtarget.com/definition/native-application-native-app
  • Open Spotify here, play a tune
  • Open Spotify here, play a tuneOpen Steam, show game content and web content
  • http://searchsoftwarequality.techtarget.com/definition/native-application-native-app
  • http://searchsoftwarequality.techtarget.com/definition/native-application-native-app
  • http://searchsoftwarequality.techtarget.com/definition/native-application-native-app
  • http://searchsoftwarequality.techtarget.com/definition/native-application-native-app
  • http://searchsoftwarequality.techtarget.com/definition/native-application-native-app
  • http://searchsoftwarequality.techtarget.com/definition/native-application-native-app
  • Native App + Wep App = ? (Hybrid Applications)

    1. 1. Native+ Web = ?An Exploration (withDemos!)
    2. 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. 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. 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. 5. Native Advantages Access to the system level Access to the hard drive Speed and efficiency The opposite of a box of chocolates.
    6. 6. Native Disadvantages Terrible-ish UI Not intrinsically platform independent Difficult to update and iterate Slow moving standards
    7. 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. 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. 9. Problem Summary Bad Design = Bad Product
    10. 10. Problem Summary (let’s gettechnical) Noaccess to the system makes it hard to do something interesting on the desktop.
    11. 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. 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. 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. 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. 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. 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. 17. Everyone’s Doing it!Be the peer pressure.
    18. 18. Spotify
    19. 19. Steam
    20. 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. 21. Current Project - GameWisp Hybrid Application Syncing Game Saves to the Cloud Social, web app Features
    22. 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. 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. 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. 25. You got Qs & We got As
    26. 26. Thanks Check out GameWisp  http://gamewisp.com Apply to test! Check out our demo project on GitHub  http://github.com/hootener/BarCampHybrid

    ×