Native vs Hybrid vs een React Native app

 

Ik krijg geregeld de vraag wat ik vind van Hybride of React Native apps ten opzichte van Native apps. Daarom wil ik in dit artikel uitleggen wat het verschil is, waar winst valt te behalen en wanneer je voor welke keuze moet gaan.

Stel, je hebt de wens om een app te publiceren in zowel de Google Play Store als in de App Store. Dan zul je twee verschillende apps moeten bouwen, één voor Apple in Swift of Objective-C en één voor Android in Java of Kotlin. Naast deze methode kun je ook gebruik maken van een framework om je app in te ontwikkelen. Er zijn op dit moment 3 grote frameworks. Namelijk Cordova, Ionic (wat eigenlijk een laag boven op Cordova is) en React Native.

 

De technieken kort uitgelegd

 

Hybrid App 

Cordova

Ionic

Cordova en Ionic zijn web apps die in een native WebView component, een wrapper, draaien. In de app draait een server die deze webpagina’s kan laten zien waardoor de eindgebruiker het gevoel heeft dat hij een app gebruikt. Voor het schrijven van deze apps kun je gebruik maken van HTML, CSS en JavaScript.

 

React Native

React Native

Apps gebouwd met React Native worden gecompileerd naar native (Swift of Java) code. Om apps hiermee te kunnen bouwen zul je een HTML/CSS achtige code moeten gebruiken. Voor de logica kun je JavaScript gebruiken.

 

Native App

Een native app is specifiek voor het platform waarop het device draait gemaakt. Hierbij kun je denken aan iOS, watchOS, tvOS en Android. Zowel Apple als Android hebben hun eigen programmeertalen waarin apps gebouwd worden.

 

Nu je een idee hebt hoe ze technisch in elkaar zitten kunnen we ze met elkaar gaan vergelijken.

 

Herbruikbare code

Wanneer je native bouwt zul je de apps twee keer moeten bouwen, één specifiek voor iOS, watchOS, tvOS en één specifiek voor Android. De andere kant van het spectrum is Cordova en Ionic. Omdat zij een ‘wrapped web app’ zijn kun je over het algemeen alles hergebruiken. Er zijn wat specifieke functionaliteiten die bijvoorbeeld voor Android wel beschikbaar zijn maar voor iOS niet waardoor je een klein gedeelte in de app hiervoor moet aanpassen.

React Native zit hier tussen in, leunend naar de Native kant. React Native heeft een hoop verschillende componenten voor de verschillende native platformen. Hierdoor zul je een gedeelte in je app specifiek voor een platform moeten bouwen.

Grafisch weergegeven zal dat er zo uit zien.

Herbruikbare code

 

Platform gestijlde componenten

Gebruikers zijn gewend aan de stijl van het besturingssysteem van hun toestel. Zo heeft Android Material Design en iOS Design voor iOS apps.  Ionic beschik over een uitgebreide bibliotheek aan vooraf gestijlde, platform afhankelijke, componenten. Cordova heeft dat ook maar alleen in combinatie met Ionic. React Native komt met heel weinig gestijlde componenten. Dat betekend in de praktijk dat je voor alle platformen je eigen componenten moet stijlen.

 

Gestijlde componenten

 

Third-Party Libraries

Als ontwikkelaar maak je vaak gebruik van libraries die een specifieke taak in de app op zich kunnen nemen. Een veel gebruikte networking library voor Swift is bijvoorbeeld Alamofire. Het scheelt tijd en de kans op fouten (omdat vaak veel mensen de library onderhouden) is vaak kleiner. Ionic en Cordova hebben het voordeel dat ze JavaScript libraries kunnen gebruiken die ook in normale web apps worden gebruikt. Daarnaast zijn er ook Cordova specifieke libraries. React Native is meer afhankelijk van third-party libraries. Dit komt met name omdat het vanuit de basis met maar enkele componenten beschikbaar wordt gesteld. De kans is groot dat je externe library moet embedden. Daarmee komt het risico dat ze mogelijk niet goed ondersteund of onderhouden worden. Omdat React Native geen HTML/CSS gebruikt (maar er wel sterk op lijkt) kun je geen JavaScript web libraries gebruiken.

Swift is zeer populair om libraries voor te bouwen op GitHub kun en een goed overzicht van trending repo’s vinden.

 

Third-Party Libraries

 

Populariteit

Hoe populair zijn deze frameworks om apps mee te bouwen? Dit beïnvloed indirect de hoeveelheid third-party libraries het aantal tutorials en andere hulpmiddelen om apps mee te bouwen. Voor Ionic en Cordova zijn redelijk veel hulpmiddelen te vinden, het is immers JavaScript. React Native is iets populairder. Je vindt de laatste tijd iets meer apps in de store die hiermee gebouwd zijn. iOS en Android worden breed omarmt. Er zijn extreem veel third-party libraries, tutorials en third-party apps die je kunt implementeren.

Populariteit

 

Performance

De prestatie van de app is vaak afhankelijk van de grote. Wil je een app bouwen die een database moet kunnen inladen dan is prestatie een aandachtspunt. Wil je alleen wat informatie weergeven dan is dit minder van belang. Ionic en Cordova maken verbeteringen ten opzichte van een Native app, maar het blijft een ‘gewrapte web’ app, en dat merk je qua prestaties. Ik zou het dan ook ten zeerste afraden om hier grote apps in te bouwen. React Native komt aardig in de buurt van een Native app, dit omdat het gecompileerd wordt naar een Native app. Helaas zijn er op dit moment niet zo veel benchmarks beschikbaar om ze echt naast elkaar te kunnen leggen.

Performance

 

Beschikking over Native Features

Wanneer je een app bouwt wil je natuurlijk de hardware aan kunnen aanspreken, mogelijk zelfs device specifieke hardware. Zo beschikt Android bijvoorbeeld over lezen/schrijven NFC en kan iOS alleen NFC lezen. Voor Ionic en Cordova is het lastigst en soms zelfs onmogelijk om bepaalde features aan te spreken of te gebruiken. Als developer ben je sterk afhankelijk wat Cordova aan functionaliteiten heeft geïmplementeerd, hierdoor loop je vrijwal altijd achter. React Native heeft meer de beschikking over Native features, je kunt ze zelfs zelf bouwen. Alleen moet je bijna altijd een ‘bridge’ bouwen waar waarschijnlijk veel tijd in gaat zitten.

Native Features

 

Voorbeeld apps

De prettigste manier om apps te ervaren is door ze in het echt te gebruiken. Ionic heeft een overzichtelijke showcase van apps die op dat platform zijn gebouwd. De bekendste is waarschijnlijk Untappd. Ook React Native beschikt over een showcase waar ze trots over hun product vertellen. Wat er wel bij verteld moet worden is dat deze apps vaak maar voor een gedeelte uit React Native bestaan.

 

Conclusie

Wil je gebruik maken van (complexe) achtergrond processen of ingewikkelde animaties dan is React Native niet de juiste keuze. Facebook heeft React Native ontwikkeld, daardoor is er een onzekerheid over de duurzaamheid ervan, omdat het nog steeds het recht heeft om het project op elk moment te sluiten. Ionic of Cordova zou je kunnen gebruiken wanneer je een eenvoudige app wil laten bouwen die weinig het device of de ervaring van de gebruiker vraagt.

Wil je zekerheid in de toekomst, geen performance problemen, de beschikking over alle native features of (complexe) third-party libraries aan je app toevoegen dan zou ik voor een Native app gaan.

Mocht je na het lezen van dit artikel nog vragen hebben dan kun je altijd bij me terecht.