Hybrid App DevelopmentLigers vs Tigons

Who am I

• Dmitry Demyankov • Frontend Tech Lead @ Nordnet • @dimchez • https://github.com/dimchez • https://github.com/nordnet

• Nordnet’s mobile apps are hybrid • Share pain & joy of building a hybrid

Why am I here

Why Hybrid?

• Mobile as first class citizen • Code reuse between different platforms • Instant updates, no review delays

Demo

What was that

• Mostly web code • Native navigation, multiple WebViews • Streaming data via native (TCP sockets)

Still, why Hybrid?

We'll go our way

• Native "shells" - one per platform • Single Web core

We are all different

• Not possible to have “natural native” transitions with one WebView

• Differences between WebViews • Differences between platforms

• Navigation patterns • Gestures • Transitions

Native to the rescue

• Multiple WebViews • Let native handle navigation • Better scrolling performance

Native to the rescue

There is always a but..

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

Challenges

• Differences in WebViews between platforms • Sync data between multiple WebViews

Message Bus

• Communication between multiple WebViews • Authentication state changes • Realtime feed updates

Native-to-Web

• Execute JS in a WebView • Receive data/events from native in WebViews • Potential race conditions

Web-to-Native

• Different support between platforms

• Keep it Simple ™ • Same interface for all platforms:

• window.external.notify(str)

nordnet://

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

• Platform specific view type mappings for native transitions

Not all that awesome

• Differences and limitations between platforms • Debugging different platforms

• Communication, communication, communication

What’s next

• Migration to Cordova • Native shells as Cordova plugins • Integration of new Web tech into Web core

What could be different

• React Native • React vs Angular2 • Cordova plugins from the start

Lessons learned

• Hybrid is a valid approach

• Coding style guidelines are important

• Multiple WebViews and native navigation for native look and feel

• Update your tech stack in a timely manner

Thank you!