Native + Web = ?An Exploration (with Demos!)
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
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.
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)
Native Advantages Access to the system level
Access to the hard drive
Speed and efficiency
The opposite of a box of chocolates.
Native Disadvantages Terrible-ish UI
Not intrinsically platform independent
Difficult to update and iterate
Slow moving standards
Web App Advantages Fluid and growing technology
Easily interchange and interconnect technologies
Beautiful-ish, easy interface design
Anyone with a browser can use it
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
Problem Summary Bad Design = Bad Product
Problem Summary (let’s get technical) No access 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, I overloaded the operators)
So….What are they?
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)
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.
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!
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
Hybrid App Disadvantage
If you 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!
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++ Objects to JS to get system info and pass information to OS. Handled using Signals and Slots; Qt’s
fancy callbacks.
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 handled by Node.js
RESTful API handles Data Exchange
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
True Hybrid Applications can really open your project up for awesome interfaces
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
You got Qs & We got As
Thanks
Check out GameWisp http://gamewisp.com
Apply to test!
Check out our demo project on GitHub http://github.com/hootener/BarCampHybrid