# 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?