Hybrid vs Native app development

Casper Rasmussen, CTO & Partner Nodes Agency

Casper Rasmussen

London / Copenhagen

MSc. Eng, Digital Media

CTO & Partner

Nodes Agency

First app 2009

Android since 1.5

PHP Cake / Laravel

Server side Swift - Vapor

Github: casperhr

3

300+ apps

- 634 in Hockey App

Native iOS / Android / Windows

Unity

Titanium

Xamarin Forms

Xamarin Native

Ionic

React Native

Nodes

What is hybrid

Amphibious Car Electric BikeElectric Car

A thing made by combining two

different elements

What is Native

Relating to or describing

someone or somethings

country or place of birth

Native Animals Native TongueNative Americans

Hybrid for mobile

Write once deploy to

several platforms

Native for mobile

Each platform have their own

eco-system

SDK

Supported language(s)

IDE

Best practices

Mobile platforms players

Two players left

97%+

Android

iOS

Hybrid options

TitaniumPhoneGapCordovaNative scriptXamarinIonicReact Native

FlutterRuby MotionOnsen UIJQuery MobileAnd more

Pure Native?Cross compiled Native?

JS Virtual machine with web views rending● PhoneGap● Cordova● Ionic● Onsen UI

Compiles to ARM / Native● Titanium, JS● Xamarin, C#● Flutter, Dart● Ruby Motion, Ruby

JS Virtual machine without web view rendering

● Native script● React Native

Focus

Ionic React NativeXamarin

Ionic

Introduction

2013

Open source - MIT

Java script / Type script,

HTML, CSS

iOS 8, Android 4.1, UWP

Angular JS & Cordova

CLI setup via NPM

Ionic

How does it work

Ionic

Top cases

Ionic

Research

Ionic

● Easy learning curve with Angular ● High reuse of code

○ Web <-> App - 80%+○ Android <-> iOS - 95%+

● Utilize our Frontend team● Free open source● New player, not owned by a big company● Not for big app projects, small projects & MVPs

Initial thoughts

Ionic

Learnings

6 apps

Around 5.000 hours

Pros● Easy to get going, especially with Angular background● It’s very rapid to develop simple things● Reuse numbers are correct

○ web <-> app - 80%+○ iOS <-> Android - 95%+

Cons● Missing a lot of APIs, limited customization● Very hard to extend on● Building custom view / components takes time● A lot of unreliable libraries in Cordova● Missing documentation● Build process for making ipa & apk is slow● Longer boot & boot required before routing● Performance, performance & performance

We spend more time building worse quality

Ionic

Development speed

Ionic

Recommendation ● Very simple apps - No/few native integrations● Utilize a frontend team● Website first and want to “test” mobile - if quality

is not important

We do NOT recommend Ionic for any project

Xamarin

Introduction

2011

Acquired by Microsoft 2016

Open source - MIT

C#

iOS & macOs, Android &

Windows

Xamarin

Up to 95% code reuse

Xamarin

How it works

Xamarin

Top cases

Xamarin

Research

Xamarin

Initial thoughts ● Access to all native APIs● C# is awesome● Visual studio is great● No licenses● Sounds awesome with Forms and 95% code reuse● Microsoft behind it● Use native libraries by rebinding● Option both for Native & Forms

Xamarin Pros● Shared code between 20-40% in Native● Xamarin is helpful and will help you

Cons● Forms are for very very small / simple things● New learning curve C# and Xamarin APIs● Xamarin has it’s own bugs (5300 open)● Missing libraries● Crashes with no / useful stack trace● Less community help● Visual studio enterprise is required, fx profiler● iOS 10 broke native back button some of our apps● iOS 32->64 Bit was also a major Xamarin update● Maintenance cost increased, another moving platform

We had no initial cost savings

Learnings

5 apps

Around 4.000 hours

Xamarin Native

Development speed

Xamarin

Visual studio enterprise

Enterprise 2.999$ / year

Xamarin

Recommendation

We do NOT recommend Xamarin

● C# as entire stack● One code base● Small / simple projects with Forms,

limited OS understanding required● Utilize C# team

React Native

Introduction

2013

Facebook

Open source - MIT, new!

Javascript, “HTML” & “CSS”

iOS, Android & Windows

Still in beta 0.56!

React Native

How it works

https://www.logicroom.co/react-native-architecture-explained/

https://tadeuzagallo.com/blog/react-native-bridge/

React Native

Top cases

React Native

Research

React Native

Initial thoughts ● Use native code when needed● Easy jump between shared and platform code● Can be used for a part of the app● All the power from javascript, JSX and EcmaScript 5, 6 and 7● Harder learning curve than for Angular <-> Ionic● Facebook is behind it

React native Pros● High shared code● Fast to develop● Easy to share some code and split other● Can use many existing javascript libraries

Cons● No storyboards / ui designer● Debugging can be very hard● A lot of updates, breaking changes (Beta)● Libraries are not updated (Beta)● Longer boot & boot required before routing● Android support is bad● Moving more and more code to native● Maintenance cost increased, another moving platform● Slow support for new features, iPhone X

High shared code & no performance issues

Learnings

3 apps

Around 1500 hours

React Native

Development speed

React native

Recommendation

We do NOT recommend React Native ambitious app projects

● Small / medium apps without senior native developers

● Web app <-> Mobile app without native developers

● Pick few parts of you medium / big app and develop them in React Native

React native

Tough summer

Conclusion

Question per platform

London Salaries for Senior

Number of requirements

advertised

1-5 (hard - easy)

Conclusion iOS Developer£57,000 (2) Android Developer£58,000 (2) Xamarin Developer£65,000 (1) Ionic£70,000 (1) React Native£65,000 (1)

Conclusion ● Native is the “safe” choice● Established native teams > Any current hybrid for ambitious big

projects● Small Angular site to Mobile app try Ionic● C# companies consider Xamarin● Start-ups with Web + mobile consider React / React Native● Ambitious app projects Native!

From a heavily designed / performed focused POV

Conclusion

Alternatives ● Reduce cost● Synergy in stack● Utilize team / developers

Flutter

2017

Google

Open source - MIT

Dart

Beta

Vapor

Server side swift

Spring boot

Server side kotlin

Questions?

Europe’s leading app development agency