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
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
Open source - MIT
Dart
Beta
Vapor
Server side swift
Spring boot
Server side kotlin
Questions?
Europe’s leading app development agency