Wat voor techniek wil ik voor mijn app? Een vraag die niet altijd even makkelijk te beantwoorden is. Met de nieuwkomer Flutter is er wederom een framework om te overwegen. Maar wat brengt Flutter ten opzichte van de andere opties die er liggen?

Het ontwikkelen van een app in de native talen van Android en iOS biedt de meeste functionaliteiten en is meestal de eerste keuze. Er zijn echter meerdere frameworks ontwikkeld waarin een app geschreven kan worden die vervolgens op allebei deze platformen werkt. Elk van deze frameworks heeft zijn eigen kenmerken, voordelen en nadelen. In deze blog zullen de grootste opties voor het ontwikkelen van apps voor Android en iOS onder de loep gelegd worden, om er achter te komen wat de beste optie is voor de meest voorkomende situaties.

Introductie:

Allereerst, een korte uitleg over elke optie. Zo zal het duidelijk worden wat elk framework inhoudt en wat er mee mogelijk is.

Native

Een native app is de meest voorkomende optie wanneer er gesproken wordt over app development. Native houdt in dat er gewerkt wordt met de techniek en programmeertaal die ontwikkeld is specifiek voor dát platform.

Android

Een Android native app is geschreven in Java of Kotlin, waarbij er gewerkt wordt met Android Studio als ontwikkelomgeving. Android Studio heeft een hoop handige ingebouwde functionaliteiten om het testen van de app en het ontwerpen van user interfaces binnen de app makkelijker te maken. Sommige technieken die gebruikt worden binnen de werkingen van een Android app kunnen wat ingewikkeld zijn, maar als Java kennis al aanwezig is is de ontwikkeling over het algemeen goed te doen.

Voorbeelden van bekende apps met deze techniek: Netflix, LinkedIn, Whatsapp

iOS

Een iOS native app is geschreven in Swift of ObjectiveC. Hierbij wordt er gewerkt met XCode op iOS. XCode heeft, net als Android Studio, een hele hoop ingebouwde functionaliteiten die het ontwikkelen van een app versnellen en makkelijk maken. Zo heeft XCode een erg prettige ingebouwde simulator voor verschillende platformen en verschillende versies van iOS. Om te beginnen met het werken aan een iOS app is een Mac met OSX echter een vereiste, aangezien XCode niet op een makkelijke manier beschikbaar is op Windows of Linux.

Voorbeelden van bekende apps met deze techniek: Firefox, WordPress, Pinterest

Flutter

Flutter is een van the new kids on the block qua frameworks wat bestaat uit twee componenten, namelijk een SDK (Software Development Kit) en een framework voor Dart, de programmeertaal die gebruikt wordt binnen Flutter. Dit geheel is ontwikkeld door Google. Flutter is een framework waarbij apps opgebouwd worden uit kleinere ‘widgets’. Flutter heeft een standaard selectie aan voorgebouwde widgets, maar er kunnen natuurlijk ook custom widgets gemaakt worden. Hiernaast wordt het SDK-gedeelte van flutter gebruikt om extra functionaliteiten te bieden tijdens het ontwikkelen, zoals extensies voor de ontwikkelomgeving, een ontwikkelserver, direct updaten van de app na veranderingen en nog veel meer.

Voorbeelden van bekende apps met deze techniek: Google Ads, Alibaba, Birch Finance

React Native

React Native is een framework, ontwikkeld door Facebook, waarbij React componenten gebruikt kunnen worden om user interfaces te maken. De gebruikte programmeertaal is Javascript, in combinatie met de React library. Waar de ‘standaard’ React HTML tags gebruikt, wordt er hier gebruik gemaakt van voorgebouwde componenten die omgezet worden naar een native app. Er kunnen packages gebruikt worden, zoals Redux.

Voorbeelden van bekende apps met deze techniek: Facebook, Instagram, Skype

NativeScript

NativeScript maakt gebruik van Javascript en is beschikbaar in een aantal varianten: met puur Javascript/Typescript, in combinatie met Angular of in combinatie met Vue.js. NativeScript biedt de optie om met verschillende frameworks samen te werken. Al deze opties zijn echter wel apart van elkaar ontwikkeld, waardoor het mogelijk is dat de ene optie meer voorgebouwde componenten of tools heeft dan de ander. De beschikbare opties zijn allemaal nog in ontwikkeling. NativeScript heeft een hoop voorgebouwde componenten en werkt puur hiermee, net zoals React Native.

Voorbeelden van bekende apps met deze techniek: Sennheiser, MyPUMA, Regelneef

Ionic

Ionic heeft een andere aanpak dan de voorgaande opties: de code die geschreven wordt, wordt omgezet in een web app en vervolgens gewrapped in een native app. Deze native app laat alleen de web app zien in een soort verborgen browser. Aangezien het eindproduct een webpagina is, is Ionic een makkelijk framework om mee te beginnen voor webdevelopers. Ionic heeft een erg grote verzameling aan voorgebouwde componenten die te gebruiken zijn met elk ander front end framework. Voor een hoop gevallen is Ionic dus een goede keuze!

Voorbeelden van bekende apps met deze techniek: Untappd, McDonald’s Türkiye, MarketWatch

Pluspunten en minpunten:

Nu dat elke optie wat duidelijker is, wordt elke optie gedetailleerd bekeken om te bekijken wat de voor- en nadelen zijn van elke optie.

Native

Native apps hebben een erg sterke reputatie en populariteit. Schrijven in de native taal sluit het allerbeste aan op het platform. Dit zorgt er ook voor dat er geen problemen kunnen ontstaan in de vertaalslag die de meeste frameworks moeten maken wanneer code omgezet wordt naar native code voor het desbetreffende platform.

Het grote nadeel van native is het feit dat er constant twee aparte apps bijhouden moeten worden qua ontwikkeling, bug fixes en updates. Voor kleinere development teams kan dit erg veel tijd innemen, waar deze tijd bij een andere optie gestoken had kunnen worden in één app.

Voordelen

Toegang tot alle beschikbare native functionaliteiten
Uitvoerige documentatie
Groeiend, actief ecosysteem qua online kennis en bugfixes
Meest veilige optie door overslaan vertaalslag framework code naar native code

Nadelen

Twee keer zoveel werk door twee aparte apps
Kennis nodig van beide ontwikkelmethoden en programmeertalen
Niet alle functionaliteiten beschikbaar op allebei de platformen

Flutter

Flutter is ideaal als sterke styling zonder teveel moeite een vereiste zijn. Flutter heeft erg veel voorgebouwde widgets met bijbehorende styling, waardoor er maar weinig handmatig gestyled hoeft te worden. Flutter is ook een sterke keus als de Material Design van Android in de smaak valt bij het team. Flutter past zichzelf qua styling namelijk niet aan op het onderliggende platform, maar gebruikt in plaats daarvan Material Design voor allebei de platformen. iOS-gestylede componenten worden echter steeds populairder voor Flutter. Flutter heeft tevens ook makkelijke toegang tot native functionaliteiten op allebei de platformen, waarbij bestaande code hergebruikt kan worden. Ook wordt Flutter steeds bekender binnen online cirkels en groeit het enorm snel.

Een groot nadeel is echter dat Flutter mobile only is, wat inhoudt dat de app niet gebruikt zou kunnen worden op een web browser. Ook is Flutter nog jong en nog steeds in ontwikkeling, wat ook weer de nodige problemen veroorzaakt. Zo zijn nog niet alle functionaliteiten beschikbaar voor ontwikkeling en zijn een hoop libraries voor Flutter ook nog in ontwikkeling.

Voordelen

Material Design als standaard styling op beide platformen
Snel groeiend ecosysteem qua online kennis
Makkelijke toegang tot native functionaliteiten

Nadelen

Jong en nog altijd in ontwikkeling, waardoor veel dingen nog kunnen veranderen in de toekomst
Alleen beschikbaar voor mobile, waardoor Flutter apps niet beschikbaar zijn voor web browsers
Niet elke functionaliteit beschikbaar door libraries die nog in ontwikkeling zijn

React Native

Het framework van Facebook is een populaire keuze, met goede redenen. Door een groot scala aan voorgebouwde componenten is een korte ontwikkeltijd een garantie. Afhankelijk van hoeveel native functionaliteiten de app gebruikt, is een React Native app bijna volledig cross-platform. Sommige functionaliteiten zijn beschikbaar in npm packages, maar andere functionaliteiten zullen mogelijk zelf geschreven moeten worden. Ook React Native wordt steeds populairder en heeft een groeiende community, waardoor het dus ook steeds meer packages en libraries zal krijgen.

Qua nadelen heeft React Native zeker wat punten die overwogen moeten worden. Zo is het, net als Flutter en de andere frameworks op deze lijst, nog altijd in ontwikkeling. Dit kan mogelijk voor bugs zorgen tijdens de ontwikkeling van de app. Ook zijn er nog altijd componenten die React Native mist, al is dit vaker het geval voor apps met erg specifieke doeleinden. Algemenere apps zullen hier geen probleem aan ondervinden. Als laatste is er, in veel gevallen, nog altijd een native developer nodig naast de React Native developer(s) aangezien sommige native functionaliteiten kennis vereisen van het relevante platform. Voor kleinere teams is dit dus een belangrijk punt om te overwegen.

Voordelen

Snel om te ontwikkelen
Sterke support voor cross-platform ontwikkeling
Steeds populairder met een groeiende community

Nadelen

Nog altijd in ontwikkeling, dus soms last van framework bugs
Sommige native functionaliteiten niet makkelijk te gebruiken
Apps met specifieke doeleinden vereisen een native developer

NativeScript

NativeScript is een wat minder bekende, maar zeker niet minder sterke optie dan de andere opties in deze lijst. Een van de grote voordelen van NativeScript is het feit dat er een makkelijke toegang is tot de native API van allebei de platformen. Ook biedt NativeScript ondersteuning voor de native iOS en Android libraries, waardoor NativeScript een ideale optie is voor apps die veel native functionaliteiten gebruiken. NativeScript heeft ook veel voorgebouwde componenten die te gebruiken zijn. Verder is NativeScript makkelijk om mee te beginnen voor web developers, aangezien NativeScript standaard gebruik maakt van JavaScript en TypeScript. NativeScript is echter in meerdere varianten verkrijgbaar: puur JavaScript/TypeScript, gecombineerd met Angular of gecombineerd met Vue.js. Zo is er voor elke webdeveloper een geschikte optie.

Deze varianten brengen echter ook wel meteen een nadeel met zich mee. Al deze varianten zijn apart van elkaar ontwikkeld, wat ervoor kan zorgen dat een variatie A meer ingebouwde componenten of tools heeft als variatie B. Omdat al deze varianten apart worden ontwikkeld en nog altijd in ontwikkeling zijn, is het een vereiste om de documentatie in te duiken voor sommige niche functionaliteiten of vereisten. Als laatste nadeel is NativeScript wat minder bekend dan de andere opties in deze lijst. Dit zorgt ervoor dat er een klein online ecosysteem is voor de app met minder support en coverage op websites zoals StackOverflow.

Voordelen

Erg veel standaard ondersteuning voor native API’s en libraries
Veel voorgebouwde componenten voor snellere ontwikkeling
Meerdere varianten verkrijgbaar om mee te werken

Nadelen

Varianten apart ontwikkeld, wat verschil in componenten/tools veroorzaakt
Documentatie raadplegen geregeld vereist
Kleiner, minder actief online ecosysteem op bijv. StackOverflow

Ionic

Met Ionic is het mogelijk om een echte native app te maken door middel van een web app, die vervolgens in een native app ingepakt wordt. Dit zorgt ervoor dat Ionic makkelijk is om op te pakken voor webdevelopers. Ionic heeft van zichzelf een enorm grote verzameling aan voorgebouwde componenten, waardoor het bouwen van een mooie app in no-time gedaan is. Verder heeft Ionic veel handige tooling waarmee het ontwikkelen van de app makkelijker wordt, zoals een development server, emulator en live updates. Een ander belangrijk positief punt is Capacitor, waarmee er een scala aan JavaScript packages gebruikt kunnen worden met Ionic voor toegang tot native functionaliteiten, zoals de camera.

Een van de nadelen van Ionic is dat de performance niet het allerbeste is voor zware apps. Dit komt door het feit dat grafische elementen via een browser in de app ingeladen worden. Dit zorgt ervoor dat laadtijden erg lang kunnen worden. Voor de meeste apps zal dit dus geen probleem zijn, maar voor grotere apps of games met 3D-modellen is dit een probleem. Verder is Ionic erg afhankelijk van plugins: voor alle native functionaliteiten die worden gebruikt, is er een plugin nodig. Deze plugins zijn vaak ook continu in ontwikkeling. In sommige gevallen is het zelf zo dat plugins niet meer geüpdate worden, waardoor sommige functionaliteiten niet meer te realiseren zijn binnen Ionic.

Voordelen

Makkelijk op te pakken voor webdevelopers
Erg grote verzameling aan mooi gestylede, voorgebouwde componenten
Veel handige tooling voor ontwikkeling
Capacitor biedt JavaScript packages voor toegang tot native functionaliteiten

Nadelen

Performance is niet erg goed voor hele zware apps
Erg afhankelijk van plugins

Concluderend:

Als laatste onderdeel van deze vergelijking, is het verstandig om te kijken naar welke optie de beste keuze is voor een aantal scenario’s. Ook hier wordt weer per optie naar de plus- en minpunten gekeken.

Native

Als de performance en stabiliteit van een app de belangrijkste punten zijn, is er niks beter dan een native app. Native code werkt perfect samen met alle hardware API’s en zorgen ervoor dat het ontwikkelteam het meeste uit een app kan halen. Met het oog op lange termijn ontwikkeling kunnen twee native codebases zelfs makkelijker zijn dan één codebase van bijvoorbeeld Ionic.

Flutter

Flutter lijkt in een hoop manieren op React Native, maar ook op de andere opties in deze lijst. Er zijn echter een aantal details die Flutter mogelijk een betere optie maken voor het ontwikkelteam. Als er al kennis is van Dart binnen het ontwikkelteam, is Flutter een erg verstandige keuze. Ook is Flutter een goede keus als brand-first design een prioriteit is. Als zekerheid echter een probleem is, is Flutter niet het beste idee, aangezien Flutter net een jaar uit is en het nog niet zeker is hoe lang Flutter relevant zal blijven. Over het algemeen deelt Flutter een hoop van de andere pluspunten die andere opties ook hebben.

React Native

Ionic en React Native maken allebei gebruik van JavaScript, maar hebben een andere aanpak voor het renderen van de applicatie. Hierbij komt ook nog het feit dat er niet met één codebase gewerkt kan worden: er zijn twee aparte apps nodig voor elk platform. React Native gebruikt React components in plaats van HTML, die vervolgens weer gerenderd worden aan de hand van de native API van het platform. Dit maakt de performance dus beter, maar zorgt er wel voor dat het ontwikkeling van de app mogelijk wat langer duurt, afhankelijk van de beschikbare JavaScript kennis binnen het ontwikkelteam. Als performance van belang is en twee aparte apps hebben geen probleem is, is React Native een sterke keuze. Naast dit alles is het succes van React Native te zien aan de hoeveelheid grote, populaire apps die gemaakt zijn in React Native.

NativeScript

Als een app veel vrijheid en flexibiliteit vereist, is NativeScript een goede keuze. NativeScript biedt namelijk de mogelijkheid om met een erg grote verzameling aan libraries en native API’s te werken. Dit zorgt ervoor dat een app, gemaakt met NativeScript, alle kanten op kan gaan. NativeScript is echter wel een stuk minder bekend dan de andere opties in deze lijst. Als het ontwikkelteam dus nog niet veel ervaring heeft met NativeScript of een gerelateerd framework, is het dus niet de beste keuze.

Ionic

Ionic is een verstandige keuze om mee te werken als het team al ervaring heeft met webontwikkeling, zoals met Angular en werken met JavaScript libraries. Door de snelle ontwikkeltijd is Ionic ook een erg verstandige keus voor MVP’s en prototypes. Het is wel belangrijk om goed te kijken naar beveiliging en optimalisatie qua performance, aangezien dit mogelijk zwakke punten kunnen zijn later in het ontwikkelproces. Ionic zou geen goede keus zijn voor games of apps die intensief gebruik maken van de hardware van de telefoon.

In conclusie is de keuze voor de optie grotendeels afhankelijk van meerdere factoren, zoals: wat moet de app kunnen, waar moet de app toegang tot hebben, hoeveel mensen kunnen er aan de app werken, wat voor ervaring hebben de mensen die er aan werken, hoeveel moet de app kunnen doen, enzovoort. Elke optie heeft zijn voor- en nadelen, die meer of minder meetellen aan de hand van de situatie. Wanneer de antwoorden op bovenstaande vragen duidelijk zijn, wordt het vanzelf duidelijk welke optie het meeste geschikt is voor de ontwikkeling van de app.

About Teamcoda