Hybrid App Development

from the Trenches

Who are we?

Andreas Hassellöf

Tech Lead, Nordnet

@hassellof

Gustaf Nilsson Kotte

Architect and Developer, Jayway

@gustaf_nk

Demo

What did we see?

  • Mostly web

  • Native navigation

  • Multiple WebViews approach

  • Message bus between WebViews

  • OAuth2 based authentication and new customer process

Business case

THE VISION

 

  • Mobile a first class citizen, not second to web

  • Code reuse between mobile and web interfaces

  • Distribute responsibilities to the proper teams

  • One set of tools for analytics and A/B testing

  • Instant updates, continuous integration (DevOps)
     

We need to establish and maintain a mobile presence
 that is just as good as our web presence

OUR APPROACH

A mobile app that feels native, but
has all the benefits of a web app
 

  • One Web Core, three Native wrappers

  • All content and logic in Web layer

  • Navigation in Native wrappers

UX

THE platforms are different

  • What feels natural on different mobile platforms?

  • Navigation patterns?

  • What about transitions and gestures?

The insight

  • Not possible to have “natural native” transitions with only one web view
  • Scrolling performance, full WebView vs. overflow:auto
  • Navigation patterns are different

 

  • Therefore, we need multiple web views
  • Let native handle navigation

The struggle

If we only had one WebView for everything, things would be so much easier

architecture

WebView differences

  • iOS: +Best in class.

  • Android 4.4: +Awesome. -Rendering performance.

  • Windows 8/8.1: +Good performance. -Slightly less compliant.
     

  • Android <= 4.3: -Horrible. +Solved with Crosswalk.

THE Message bus

  • Multiple views needs inter-communication

  • Authentication events and state

  • Storageservice, pub/sub for localstorage

  • Caching of API requests

  • Notifications 

Message bus, implementation

  • Development mode: Shared WebWorker bridges communication between tabs and windows

  • App mode: Using web-to-native and native-to-web bridges

native-to-web BRIDGE

  • All platforms can easily execute Javascript in WebView
     

  • Error prone due to race conditions.
     

  • Solution: 2 layer queueing of incoming messages.

web-to-native BRIDGE

  • A challenge to get it right

 

  • Android: Easy
  • iOS: Not available as a public API until iOS 7.1
  • Windows Phone: Only window.external.notify(str)

 

  • Solution: Keep It Simple™.
    Use same interface for all platforms, window.external.notify(str)

nordnet:// protocol

  • Easy to bind to "start loading" event in native layer

  • nordnet://[viewtype]/page.html?title=[title]#[hash]

  • Viewtypes

    • Main ​tabs by ID

    • Action

    • Cover

    • Coverland

    • Dialog

  • Platform specific mapping of view type to transition

New skills for developers

  • Knowledge of limitations and differences of three platforms

  • WebView debugging, Safari / Chrome / Visual Studio

  • Requires great documentation and open communication

Summary

key takeaways

 

  • One year ago, this project would not have been possible

  • Big challenge & High learning curve

  • Great result

VISION ACCOMPLISHED

 

  • Mobile a first class citizen, not second to web

  • Code reuse between mobile and web interfaces

  • Distribute responsibilities to the proper teams

  • One set of tools for analytics and A/B testing

  • Instant updates, continuous integration (DevOps)
     

We need to establish and maintain a mobile presence
 that is just as good as our web presence

Thank you! :)

Andreas Hassellöf

Tech Lead, Nordnet

@hassellof

Gustaf Nilsson Kotte

Architect and Developer, Jayway

@gustaf_nk

Made with Slides.com