Effectief mobiel ontwikkelen doe je zo

Mobiele apps zijn booming. Er is bijna geen enkel product meer te bedenken waar geen mobiele app bij zit. Zelfs tandenborstels hebben tegenwoordig apps! Als je zelf een app gaat (laten) ontwikkelen dan is het belangrijk goed te letten op de technologie waarmee de app ontwikkeld wordt. In deze post wil ik je meenemen in de wereld van cross-platform mobiel ontwikkelen: een methode waarmee ontwikkelkosten en time to market tot wel 50% gereduceerd kunnen worden.

Als je een app gaat ontwikkelen zijn er veel zaken om rekening mee te houden. Waar het in het begin van het app-tijdperk nog acceptabel was om enkel iOS (Apple) of Android (Google) telefoons te ondersteunen, is dat nu niet meer denkbaar. iOS en Android hebben beide een significant marktaandeel dat niet genegeerd kan worden. Kortom; als je een app ontwikkelt dan is een iOS én Android versie een must.

Hiermee sta je meteen voor een cruciale keuze: ga je een aparte app ontwikkelen voor iOS en Android, of kies je voor een zogenaamde cross-platform oplossing?

Het apart ontwikkelen van een iOS en Android versie, gebruikmakende van de tools die Apple en Google daarvoor beschikbaar stellen, wordt ook wel native ontwikkelen genoemd. Native ontwikkelen heeft als voordeel dat je app het beste aan kan sluiten bij het platform; je gebruikt immers de tools die Apple en Google zelf beschikbaar stellen.

Het grote nadeel van native ontwikkelen is het feit dat de tools van Apple en Google compleet anders zijn. Je wordt dus gedwongen om echt twee afzonderlijke apps te bouwen, met elk hun eigen ontwerp en code. Code delen tussen iOS en Android is praktisch niet mogelijk, dus veel functionaliteit moet echt twee keer ontwikkeld worden. Ook zul je de kennis van zowel de iOS als Android tools op peil moeten houden en zul je bij nieuwe versies van iOS en Android onderhoudswerkzaamheden moeten verrichten.

Cross-platform ontwikkelen biedt hier een uitkomst. Met cross-platform ontwikkelen worden ontwikkel- en onderhoudskosten tot wel 50% gereduceerd en je time to market neemt drastisch af. Er wordt vanuit één codebase ontwikkeld dus je hoeft niet langer twee aparte versies van je app te maken en onderhouden, kennis van twee ontwikkeltools op peil te houden, twee designs te maken etc. Cross-platform ontwikkelen kan dus erg effectief zijn, maar er zijn veel verschillende oplossingen met elk zijn eigen voor- en nadelen, dus het is belangrijk je goed hierin te verdiepen.

De voor- en nadelen van cross-platform apps

Cross-platform ontwikkelen heeft veel voordelen, maar zeker ook een aantal nadelen. Hieronder begin ik met de algemene voor- en nadelen, gevolgd door informatie over de meest gangbare oplossingen op dit moment.

Voordeel: time to market

Een belangrijk voordeel van cross platform ontwikkelen is de kortere time to market. Doordat je maar één keer hoeft te ontwikkelen, in plaats van één keer per platform dat je wilt ondersteunen, ben je simpelweg minder tijd kwijt aan de ontwikkeling. Developers hoeven niet alle code voor elk platform opnieuw te schrijven en je kunt ontwikkelen met één team (minder overhead).

Dit klinkt natuurlijk erg mooi, maar in de praktijk zien we dat het nooit helemaal zo werkt dat je 100% code kunt delen over alle platforms en zonder extra moeite meerdere platforms kunt ondersteunen. Je zult altijd moeten testen op elk platform dat je ondersteunt en bepaalde zaken zoals de schermformaten en het proces om de app in de App Store (iOS) dan wel Play Store (Android) te krijgen is gewoon anders.

Als rule of thumb kun je het volgende aanhouden:

Het ondersteunen van een extra platform voor een cross-platform ontwikkelde app kost zo’n 25% extra effort.

Dat wil zeggen: waar bij native ontwikkeling het ondersteunen van twee platforms 200% effort zou kosten, is dat bij een cross-platform app +/- 125% (100% voor het eerste platform, 25% voor het tweede platform). Het exacte percentage is afhankelijk van de gekozen cross-platform oplossing en design aanpak.

Voordeel: kostenbesparing bij ontwikkeling & onderhoud

Dit volgt vanzelf uit het vorige punt; tijd = geld dus minder tijd hoeven te besteden aan ontwikkeling bespaart geld.

Ook op lange termijn is de total cost of ownership van cross-platform apps lager dan bij native apps. Bugfixes, onderhoud en kleine wijzigingen hoeven namelijk ook slechts één keer gedaan te worden.

Bovendien is het vaak zo dat het updaten van apps naar nieuwe versies van de mobiele platforms minder werk is dan het updaten van native apps. De tools waarmee cross-platform apps ontwikkeld worden nemen de technische wijzigingen die nodig zijn bij platform updates in veel gevallen (grotendeels) voor hun rekening.

Nadeel: aansluiting bij het platform

Als je cross-platform gaat ontwikkelen, dan werk je met één codebase. Het is zeker mogelijk om functionaliteit er anders uit te laten zien of anders te laten werken op de verschillende platforms. Denk bijvoorbeeld aan het gebruik van een Tab Bar op iOS en een Hamburger Menu op Android. Het spreekt echter voor zich dat als je dit vaak doet, je een deel van het voordeel van cross-platform ontwikkeling verliest.

Echter, in de praktijk zien we dat dit vaak niet nodig is. iOS en Android zijn qua design aan het convergeren en veel grote merken kiezen ervoor om, ook als ze native ontwikkelen, de user interface van hun app zoveel mogelijk gelijk te houden op de verschillende platforms. Kijk bijvoorbeeld maar naar Spotify, Philips Hue Bluetooth, Gmail, Facebook etc.

Wel is het zo dat, ook weer afhankelijk van de gekozen cross-platform oplossing, de user interface elementen waarmee de applicatie opgebouwd wordt niet dezelfde zijn als in native apps. Zo kunnen bijvoorbeeld de transities waarmee de app van het ene naar het andere scherm navigeert net iets anders zijn, alsook de looks van een date picker, tabel of button.

Dit kan een nadeel zijn, maar uit mijn ervaring is het vooral belangrijk dat een app ‘goed’ aanvoelt en in gedrag consistent is met andere apps op je telefoon. Denk bijvoorbeeld aan het kunnen gebruiken van de back button op Android, het kunnen swipen om terug te gaan naar de vorige pagina op iOS, bounce scrolling op iOS, etc. Als je dit voor elkaar hebt dan zullen de meeste gebruikers van je app het verschil niet of nauwelijks merken.

Nadeel: performance

Een cross-platform app wordt met andere technologie ontwikkeld dan native apps. Het gaat te ver voor deze post om dit in detail uit te leggen, maar de bottom-line is dat de technologie waarmee cross-platform apps ontwikkeld worden in veel gevallen niet dezelfde performance kunnen halen als een native app. Dit speelt met name bij interactieve features zoals pinch-to-zoom, draggen en (3D) animaties.

In hoeverre die performance minder is dan die van een native app hangt sterk af van de gekozen cross-platform oplossing en de kennis en kunde van de app ontwikkelaar. In de meeste gevallen is de performance acceptabel. In sommige gevallen zullen gebruikers van je app dit wel kunnen merken, met name op oudere, low-end toestellen.

De meest gangbare oplossingen voor cross-platform mobiel ontwikkelen

Goed, we hebben het nu gehad over de algemene voor- en nadelen van cross-platform ontwikkelen. Hieronder vind je een overzicht van de meest gangbare oplossingen van dit moment.

HTML5 / Cordova

HTML5 applicaties zijn mobiele apps die gebouwd worden met web-technologie. Deze apps worden opgebouwd met dezelfde bouwblokken als waarmee webapplicaties / websites gebouwd worden: namelijk HTML, JavaScript en CSS.

Deze applicaties worden vaak gebouwd in combinatie met Cordova. Cordova vormt in feite een brug tussen deze web-technologieën en het mobiele platform, waardoor er gebruik gemaakt kan worden van platform functionaliteit zoals de camera, GPS, Bluetooth, etc.

Het grootste voordeel van deze applicaties is dat je de code maar één keer hoeft te schrijven, je de applicatie ook via een browser kunt bedienen (als mobile web-app, of Progressive Web App) en je gebruik kunt maken van de web bouwblokken.

Het belangrijkste nadeel van dit soort applicaties is dat het lastig is om de performance op het niveau van native apps te krijgen. Het is zeker mogelijk, maar vergt veel ervaring en kunde.

Ionic

Ionic is een commerciële variant van de HTML / Cordova apps die hierboven beschreven zijn. Ionic apps werken op dezelfde manier en hebben dezelfde fundamentele voor- en nadelen als Cordova apps. Ionic biedt als voordeel een hele bibliotheek aan bouwstenen om mobiele user interfaces te maken die lijken op de native user interface elementen.

Performance van Ionic apps was in het verleden een pijnpunt, maar de nieuwste versies van Ionic beloven hier verbetering in. Daarmee wordt de performance vergelijkbaar met die van Cordova apps.

React Native

React Native is een oplossing voor cross-platform mobiele apps die wordt ontwikkeld door Facebook.

React Native is fundamenteel anders dan Ionic/Cordova. Het React Native platform stelt ontwikkelaars in staat om gebruik makend van web technologie, native user interfaces te maken.

React Native apps kunnen er dus 100% identiek uitzien als native apps. In de praktijk zie je echter dat er vaak voor gekozen wordt om toch user interface elementen te delen tussen iOS en Android om ontwikkeltijd te besparen, waarmee de applicatie uiteindelijk weer minder native aanvoelt.

Ook moet de performance van React Native apps het afleggen tegen native apps. Toch is de performance vaak wel beter dan die van Cordova en Ionic apps.

Flutter

Flutter is een van de nieuwste manieren om cross platform mobiele apps te bouwen, ontwikkeld door Google.

Flutter gebruikt een unieke aanpak waarbij de user interface van de app op het scherm getekend wordt door een systeem dat lijkt op een game engine. Met 60 of 120 beelden per seconde (afhankelijk van de refresh rate van het scherm) tekent Flutter user interface elementen op het scherm. Door deze aanpak is de performance van Flutter uitstekend en vergelijkbaar met die van native apps.

Flutter apps gebruiken niet de native user interface elementen, maar de user interface elementen van Flutter zijn nauwelijks ‘van echt’ te onderscheiden.

Flutter heeft bijzonder goede ondersteuning voor animaties en transities, waardoor het relatief eenvoudig is om Flutter apps veel leuke, speelse user interface effecten te geven.

Op dit moment ondersteunt Flutter iOS en Android. Google werkt aan ondersteuning voor het web en desktop.

Xamarin

Xamarin is een oplossing voor cross-platform mobiele apps die ontwikkeld wordt door Microsoft.

In Xamarin zijn er twee keuzes: Xamarin.Native en Xamarin.Forms. In beide gevallen worden de applicaties geschreven in C# en kan de business logic gedeeld worden tussen de verschillende platforms.

Bij Xamarin.Native kan er (veel) minder code gedeeld worden tussen de verschillende platforms, doordat de user interface code voor elk platform afzonderlijk geschreven dient te worden. Hiermee sluiten deze apps goed aan bij het platform en is de performance vergelijkbaar met die van native apps, maar dit alles gaat ten koste van de ontwikkelsnelheid. Slechts zo’n 60% van de code kan gedeeld worden tussen verschillende platforms.

Bij Xamarin.Forms kan er veel meer code gedeeld worden (ruim 95%), helaas ten koste van de performance. Deze aanpak lijkt sterk op React Native.

Interessant, maar welke oplossing moet ik nu kiezen?

Goede vraag, maar zoals je wellicht al tussen de regels door hebt kunnen lezen is er niet één antwoord op deze vraag.

Er zijn vele factoren die van invloed kunnen zijn op je beslissing: technische kennis, grootte van je organisatie, omvang van je budget, welke platforms je wilt ondersteunen, etc.

Elke situatie is uniek en heeft andere afwegingen. Als stelregel hanteren we echter het volgende:

• Is de user experience en performance uitermate belangrijk voor je concept of doelgroep? → Kies dan voor een Flutter app.
• Wil je naast iOS en Android dezelfde functionaliteit ook als mobile web-app aanbieden en heb je een beperkt budget? → Kies dan voor een Cordova of Ionic app. Met Cordova kan praktisch alle code gedeeld worden tussen iOS, Android én web. Met onze ruime ervaring in het ontwikkelen van dit soort apps weten we de performance in de meeste gevallen prima acceptabel te krijgen.

Is er dan helemaal geen ruimte meer voor native development?

Jawel hoor. Er zijn zeker nog situaties waar een native app passender of zelfs nodig is:

• Als je het design van je app precies op het platform aan wilt laten sluiten.
• Als je veel specifieke features van het mobiele systeem wil gebruiken die niet (goed) ondersteund zijn in cross-platform oplossingen. Denk daarbij aan zaken zoals Android Widgets en iOS Today Widgets.
• Als het noodzakelijk of wenselijk is om nieuwe systeem features te gebruiken zodra deze beschikbaar komen. Het duurt vaak even voordat cross-platform systemen gebruik kunnen maken van de nieuwste features beschikbaar in iOS en Android.

Als één van deze situaties voor je van toepassing is dan is het verstandig om ook native ontwikkeling te overwegen. Hieronder vind je een schematisch overzicht van de verschillende oplossingen die we in deze post besproken hebben.

Over de auteur: Pascal Widdershoven is technology & innovation manager bij Kabisa.