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