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

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

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

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

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