# Hybrid Apps
### How to alienate your co-workers,
### steal all cred and die alone
[Daniel Saidi](http://danielsaidi.com) / [@danielsaidi](http://twitter.com/danielsaidi)
## About me
35 years old, married, two kids
MSc. Media Technology, Linköpings Universitet
- - -
System Developer
- - -
Web / Backend
Mobile since 2005
iOS since 2012
![Apps](static/apps.png "Apps")
## Agenda
What is a hybrid app?
Native vs. web vs. hybrid
Case study - Tradera
Demo
- - -
Sounds ok?
In 2007...
## Then...
![App Store](static/appstore_money.jpg "App Store")
## In 2014...
![Mobile Platforms](static/platforms.png "Mobile Platforms")
## Well...
![Mobile Platforms](static/platforms_2.png "Mobile Platforms")
## Well... ;)
![Mobile Platforms](static/platforms_3.png "Mobile Platforms")
### But given the device fragmentation
##it's still pretty damn much!
# so...
## what about hybrid apps?
## What is a hybrid app?
### (according to me)
- - -
Installs on the device
Mixes native and web
Native can interact with web
Web can interact with native
HTML is embedded or requested
Possible to mix native UI and HTML UI
## Native apps
- - -
### Pros
**Required** for some apps
Fast, reliable & responsive
Ideal, if your budget allows it
- - -
### Cons
Platform specific *
Increased organizational complexity
Development, developers, releases etc.
## Web apps
- - -
### Pros
HTML5
Updates on the fly
Platform independent
- - -
### Cons
Slow, unresponsive
Uncanny valley
Internet connection is (often) a must
## Native vs. hybrid vs. web
![Comparison](static/native_hybrid_web.jpg "Comparison")
## Hybrid apps should
### embrace the good stuff of both
### and minimize the bad stuff of both
# Case Study
## Tradera Labs
## Background
I joined Tradera in May 2013
Apps by an external agency
Slow implementation process
Frequent crashes, bugs, missing features
Bad reviews on the App Store
## Enter: A-Team
Tradera took over the apps in August 2013
Me on iOS, one on Android, a product owner
Fix critical bugs, add requested features
Challenging, but worked quite well
App Store reviews improved
## However...
Intense work on tradera.com
The apps had miles to go to catch up
The A-Team had to focus on other stuff
No app development since December 2013
## Discussions
Should the apps evolve...
...or should we replace them?
Should we have an inhouse team...
...or an external partner?
Should Tradera even have apps?
# Wait!
## What about a hybrid app?
## The hybrid experiment
In May, we decided to give it a try
I had 6 weeks to build a hybrid PoC
Wrap the new, responsive web site
Make the app as simple as possible
Ideally, a web developer should be able to work on it
Every line of native code must have a reason to exist
## Questions to answer
Can't we just wrap the web site?
What do we get by wrapping the site in an app?
What risks are involved with such an approach?
How much code and complexity will it introduce?
How fast and responsive can we make a hybrid app?
How much future work will this approach require?
- - -
**Deliberate tradeoff** - what will our users think?
## Project focus
Ensure loose coupling!
The app must have little knowledge of the web
The web must be able to fully configure the app
The web must be able to customize itself for the app
The app must be able to have a slower release cycle
The app and web must be able to scale independently
# Results
## and learnings
## How did it go?
First App Store release after 3 weeks
Tradera Labs - a new app alongside the old
Many flaws and missing features
Memory problems, frequent crashes
- - -
Most problems fixed during autumn
In-app feedback is mostly positive
App Store reviews are terrible
## How does it work?
Native navigation bar and side menu
Each has a separate web view instance
The app identifies itself with **custom headers**
The web attaches **configuration data** to the app
New web views are pushed to the **navigation stack**
The web communicates events through **url schemes**
## Custom headers
Sent with **each request**, if not config says otherwise
(Headers must **not** be sent to certain external pages)
Include **OS, app version, build number** and **device type**
- - -
**All the web it needs to know about the app**
## Configuration data
Attached as a data blob to **every response**
Includes **behaviors, scripts, user id, login status** etc.
Also includes **platform specific info** like **stack cache size**
- - -
**All the app needs to know about the web**
Also configurable properties for native functionality
The app should be **configured** rather than **developed**
## Navigation
Much effort put on the **navigation experience**
Much effort put on **memory management** as well
Creating a web view for each new view is expensive
Configurable stack cache in case of memory warnings
Return to previously displayed views whenever possible
## Conclusion
### The good
Fast and responsive (for a hybrid)
The loose coupling works really well
The configuration data works great
Notifications, badges, extensions etc.
- - -
People are generally happy with the app...
## Conclusion
### The bad
The navigation stack is **memory intensive**
**Heap related crashes** are hard to solve
Some parts **still** displays the **old Tradera site**
- - -
**Organizational challenges**
When do we prioritize an experiment?
How involve developers during the experiment?
And what about cred, problems, bugs, ownership?
## Conclusion
### Old app vs. hybrid
The old app is really simple
Still, it has a lot of bugs
Also, it lacks a lot of features
- - -
The hybrid app has a lot of features
Still, key features are harder to access
Still...doesn't that concern the web as well?
# So...
## Go or no go?
![Secret](static/secret.jpg "Secret")
# Demo
#Thanks!
[Daniel Saidi](http://danielsaidi.com) / [@danielsaidi](http://twitter.com/danielsaidi)
![Thank you](static/thankyou.jpg "Thank you")
# Questions?