Skip to main content

De app ontwikkelingsspecialisten van Brthrs zitten niet stil. Naast de apps die wij voor opdrachtgevers ontwikkelen, zoals de Stopcoach en Geweldige Wijk wordt er ook aan eigen projecten gewerkt. Een goed voorbeeld van zo’n project is Scheduled, de app die het mogelijk maakt om geschreven berichten in te plannen.

Voor het ontwikkelen van het nieuwe Scheduled willen we cross-platform gaan. Dit betekent dat de app hybride ontwikkeld wordt, zodat deze op alle smartphones gebruikt kan worden. Dit brengt voor ons als developers twee grote voordelen, namelijk:

  • Updates kunnen voor alle platformen tegelijk gemaakt worden.
  • Er zijn geen gespecialiseerde developers nodig voor Android en iOS.

In het verleden is hier React Native voor gebruikt. React Native is een zeer handig framework om met één codebase apps te schrijven voor meerdere platformen, maar het framework komt vaak uit met nieuwe updates die oudere versies onbruikbaar maken. Hiervoor zijn we op zoek gegaan naar een alternatief dat makkelijker te onderhouden is en dat toch voor gebruikers nog steeds een goede ervaring levert. De oplossing voor updates voor hybride apps is beschreven in dit artikel.

Introduceren van mogelijkheden

De eerste stap in dit proces was het verzamelen van een lijst met mogelijke oplossingen. Iedere potentiële optie is vervolgens geanalyseerd op specificaties. De volgende mogelijkheden hebben deze lijst gehaald.

  • React Native
  • Xamarin
  • Qt
  • Cordova
  • Flutter
  • Progressive Web App
  • NativeScript

Framework en programmeertaal

Vervolgens is per optie bekeken wat voor soort framework het is en in welke talen dit geschreven wordt. Wat betreft het soort framework wordt onderscheid gemaakt tussen verschillende ontwikkelmethoden, met name:

  • Native, waar de code direct bedoeld is voor een platform en hierdoor standaard uitvoerbaar is (Java/Kotlin voor Android en Objective-C/Swift voor iOS).
  • Hybrid, waar apps eigenlijk websites zijn die in een native app worden verpakt zodat deze ook als app geïnstalleerd kunnen worden.
  • Compiled, waar de code ‘vertaald’ wordt naar de native code of UI componenten van het platform.
  • Progressive Web Apps, zijn vergelijkbaar met Hybrid, maar dan bestaan in dit geval als website die in de browser geopend wordt, maar, missen kenmerkende browseronderdelen zoals een URL balk.

Per mogelijkheid staan hieronder de frameworks, methodes en programmeertalen vermeld.

  • React Native
    • Methode: Compiled
    • Taal: XML/JS/CSS
  • Xamarin
    • Methode: Compiled
    • Taal: XML/C#
  • Qt
    • Methode: Compiled
    • Taal: XML/JS/C++/CSS
  • Cordova
    • Methode: Hybrid
    • Taal: HTML/JS/CSS
  • Flutter
    • Methode: Compiled
    • Taal: Dart
  • Progressive Web App
    • Methode: PWA
    • Taal: HTML/JS/CSS
  • NativeScript
    • Methode: Compiled
    • Taal: XML/JS/CSS

Met deze frameworks is verder onderzocht of deze beschikken over de functionele eisen die aan de app gesteld worden. Zo moet het framework onder andere de mogelijkheid bieden om contacten te lezen van de telefoon en het moet kunnen werken met Firebase, onze databaseoplossing. Ook is onderzocht of er met het framework uit de kalender gelezen kan worden voor mogelijke uitbreidingen in de toekomst.

Uit de lijst met mogelijke opties is besloten om de frameworks Xamarin, Qt en Flutter te laten vallen. Xamarin, omdat het geen ondersteuning biedt voor Firebase en omdat de contacten en kalender niet geïntegreerd konen worden. Qt, omdat het geen ondersteuning heeft voor Firebase en de kalender. De laatste optie die de selectie niet gemaakt heeft is Flutter, omdat er binnen de organisatie weinig ervaring is met de programmeertaal Dart.

App prototyping

De eerste ronde van de test heeft redelijk algemene kenmerken van de frameworks getest. Het maken van een prototype biedt meer inzichten in de mogelijkheden die een framework kan bieden.

De overgebleven items uit de lijst: React Native, Cordova, PWA’s en NativeScript, zijn daarom onderzocht aan de hand van prototypes. Deze prototypes zijn gebaseerd op een functionele basis van de Scheduled app. Hierbij is met name het lezen en schrijven van taken naar de database én het importeren en scoren van contacten meegenomen.

Deze prototypes zijn getest op de functionele eisen. Deze eisen waren de snelheidsprestaties van de app, de hoeveelheid tijd die het heeft gekost om het prototype te ontwikkelen en de hoeveelheid code die tussen verschillende platformen gedeeld kan worden. Verder is er online onderzoek gedaan naar het aantal componenten waarmee gewerkt kan worden, hoe vaak er brekende updates worden doorgevoerd en hoe groot de community is rond elk framework.

Functioneel hebben React Native en Cordova aan alle eisen kunnen voldoen. Met NativeScript is het niet gelukt om contacten te importeren en PWA’s kunnen alleen contacten importeren via een beveiligde, gecertificeerde verbinding op Chrome voor Android, wat het hybride aspect onmogelijk maakt. De uitkomsten van de verschillende tests zijn hieronder gedetailleerder beschreven.

Snelheidsprestaties meten

De eerste test die uitgebreid beschreven is, is de snelheidstest. De resultaten van de snelheid zijn gemeten in een Android emulator. De resultaten zelf zijn gemeten aan de hand van frametimes, met als eenheid het aantal milliseconden die het de grafische processor heeft gekost om een beeld te tonen. Omdat er duizenden frames getoond worden tijdens het gebruik van de app zijn de resultaten opgesplitst in het 50e , 90e , 95e en 99e percentiel van alle frametimes.

Hieronder is de grafiek van deze resultaten weergegeven. Lagere getallen betekenen dat er meer frames getoond worden per seconde, waardoor het voor de gebruiker voelt als een vloeiende app.Resultaten van de perfomance test

Aantal componenten tellen

De tweede test bestond uit het het meten van de hoeveel native of native lijkende componenten, per framework. Dit soort componenten volgen de designrichtlijnen van het platform en geven de gebruikers het gevoel dat ze een app gebruiken die speciaal voor het platform gemaakt is. Compiled apps vertalen de native-componenten waarbij direct het aantal componenten geteld kan worden. Hybrid apps zijn eigenlijk webapps en gebruiken dus standaard HTML-componenten.

Hiervoor kan een extra framework gebruikt worden. Ionic staat onder developers bijna synoniem voor Cordova, omdat deze twee vaak in combinatie gebruikt worden. Ionic controleert het platform waar het op draait en toont de componenten die de designregels van dat platform volgen. Voor de Cordova en PWA-oplossingen zal dus het aantal Ionic componenten geteld worden. Dit allemaal resulteert in de volgende aantallen:

Visualisatie van het aantal native componenten

Cross-platform code meten, werktijd meten en brekende updates opzoeken

De resultaten van de tests voor cross-platform code, werktijd en brekende updates zijn gebundeld in een tabel. Per prototype is vastgesteld hoeveel code gedeeld kon worden tussen verschillende platformen en hoe lang het heeft geduurd om het prototype op te zetten. Verder is het aantal brekende updates per framework onderzocht, over een periode van twee jaar.

 

  • React Native
    • Percentage gedeelde code: 80%
    • Werktijd (dagen): 8
    • Aantal breaking changes: 10
  • NativeScript
    • Percentage gedeelde code: 90%
    • Werktijd (dagen): 8
    • Aantal breaking changes: 1
  • Cordova
    • Percentage gedeelde code: 95%
    • Werktijd (dagen): 6
    • Aantal breaking changes: 0
  • PWA
    • Percentage gedeelde code: 100%
    • Werktijd (dagen): 5
    • Aantal breaking changes: 0

Community grootte per framework meten

Als laatste is online de grootte van de community van ieder framework gemeten. Hoe groter de community, des de groter de kans dat problemen waar je als developer tegenaanloopt al door iemand anders opgelost zijn. Mogelijke oplossingen zijn dan al bekend en hoeven alleen opgezocht te worden.

Via GitHub is gemeten hoeveel developers geïnteresseerd zijn in de technologie. En via NPM, de package manager waarmee deze frameworks gedownload kunnen worden, is gemeten hoeveel elk framework ongeveer gebruikt wordt.Resultaten Github per framework

Resultaten wekelijkse NPM test

Conclusie

De tests die uitgevoerd zijn, bieden een belangrijk inzicht in de mogelijkheden van de frameworks. Aangezien NativeScript en PWA’s functioneel niet geschikt zijn voor Scheduled, blijven alleen React Native en Cordova over.

De gebruikservaring die React Native levert, is aanzienlijk vloeiender dan voor Cordova. Het beschikt over minder componenten, maar ook over een hogere mogelijkheid tot maatwerk dan bij Ionic, wat meer richt op thematisering van de componenten. Voor de Scheduled app hebben we daarom besloten om React Native te blijven gebruiken.

Alternatieven voor andere projecten

Wel zijn PWA’s een interessante mogelijkheid om in gedachten te houden voor toekomstige projecten. Voor Scheduled biedt het framework niet alle functionaliteiten die nodig zijn, maar kwalitatief is het een sterke optie. Het voordeel, maar ook het nadeel van PWA’s, is dat de app marktplaatsen als de Apple App Store en Google Play kunnen worden omzeild. Dit betekent dat het voor publieke apps niet handig is, omdat de meeste mensen via een marktplaats hun apps installeren. Aan de andere hand zou het voor privé apps, zoals in-huis oplossingen voor externe partijen, zeer geschikt zijn wanneer alle vereiste functionaliteiten ondersteund worden door de browser.

Meer te weten komen over het ontwikkelen van apps in samenwerking met Brthrs? Lees meer over het ontwikkelen van een hybride app, een iOS app, een Android app, een web app of neem direct contact op met de specialisten van Brthrs.

Ga naar de inhoud