Native, Cross Platform, Hybrid of PWA?

Binnen de (web)technieken is er altijd wel een, gelukkig geweldloze, strijd gaande. Wat is er beter? Wat gaat zeker ingehaald worden? Of wat wordt over 5 jaar al helemaal niet meer gebruikt? 

Mobile development is daar ook een goed voorbeeld van. Sinds de allereerste komst van PhoneGap , was men niet overtuigd. Er ging sowieso wel iets komen wat native development overbodig zou maken. Zelfs Steve Jobs was oorspronkelijk niet van plan om developers op het iPhone ecosysteem te laten ontwikkelen. Webapps zou de toekomst zijn volgens hem. Hier is hij later toch op teruggekomen.

Vooropgesteld, gezonde strijd is goed natuurlijk. Binnen sport en ook binnenin (nieuwe) technologieën. Het haalt uiteindelijk het beste in elkaar naar boven en laat je goed nadenken over wat bijdraagt aan de ontwikkeling ervan. Dit zien we dus ook binnen mobile development gebeuren. Er zijn inmiddels verschillende (goede) ontwikkelingsopties om uit te kiezen wanneer je een app laat maken. Omdat die keuzes niet voor iedereen even helder zijn, hoop ik met dit artikel overzicht te bieden. Ik ga in op de verschillen, de voor-en nadelen en hoe wij binnen het team van Unlock tot de beste keuzes komen. Hopelijk helpt het jou aan de juiste inzichten over mobile development, wanneer je ook voor belangrijke keuzes staat voor jouw app. Handig!

Er zijn verschillende manieren om een app te ontwikkelen. Even ter verduidelijking: waar hebben we het nu eigenlijk over?

• Native: De vanuit origine manier van app ontwikkeling, specifiek voor iOS en Android. Geschreven in Swift/Kotlin en maakt direct gebruik van de door Apple/Google ontwikkelde tools en Software Development Kits (SDK's).

• Cross platform: Dit zijn toepassingen zoals React-native of Flutter. Waarbij je vaak vanuit één codebase de mogelijkheid hebt om meerdere platformen (Web, iOS, Android) te bedienen.

• PWA: Progressive Web App. In essentie een webapplicatie. Maakt onderwater gebruik van web technieken als HTML, CSS, javascript en WebAssembly.

• Hybride: Een combinatie van verschillende van deze oplossingen.

Welke groep gebruikers kun je bereiken (iOS, Android, Web)?

Met een native app bereik je iOS en Android gebruikers. PWA's zijn vooral gericht op webgebruikers. Met Flutter bereik je zowel iOS, Android als webgebruikers. Want sinds enige tijd is het mogelijk om vanuit je Flutter codebase direct ook een webvariant te creëren. Logischerwijs heb je met het ondersteunen van een webplatform de mogelijkheid een breder publiek te benaderen. Er zijn tenslotte gebruikers die geen app willen of kunnen installeren en daardoor dus benadeeld worden met enkel een app approach.

Hoeveel tijd het kost (voor één developer) om de app te ontwikkelen?

Note: Hoe meer sterren, hoe korter de doorlooptijd, hoe lager de investering.

Voor het ontwikkelen van een native app heb je twee typen developers nodig, om zowel een iOS als een Android variant te ontwikkelen. In twee separate projecten dus. Voor Flutter werk je in één codebase, waaruit verschillende toepassingen uit kunnen ontstaan (iOS, Android en web). Een PWA wordt opgezet vanuit webtechniek, en dat gaat het snelst.

Een andere belangrijke constatering die van invloed is op de investering: de beschikbaarheid van developers. Webdevelopers zijn makkelijker te vinden dan Native of Flutter developers. Hierdoor is de investering bij Native en Flutter (cross platform) development hoger. 

Hoe veilig is de app? Als het gaat om het verwerken van gevoelige data, hoe veilig zijn de verschillende soorten apps dan?

• Native apps kunnen direct gebruik maken van de hardware opties als het gaat om het opslaan van versleutelde data. Bijvoorbeeld in de Keychain of Keystore. Hiernaast heb je ook mogelijkheden als biometrische beveiliging of Apple's Attest Service .

• Flutter applicaties kunnen ook gebruik maken van deze mogelijkheden, alleen zit er een extra laag tussen om vanuit die centrale codebase de native SDK's te benaderen. Hierdoor bestaat er een grotere kans op beveiligingslekken. Bij PWA’s heb je dezelfde veiligheid als bij klassieke websites. De extra beveiligingslaag hierbij is de browser zelf.

Daarnaast is er ook nog het goedkeuringsproces van Apple en Google. Je app (en updates) moeten eerst door Apple en Google worden goedgekeurd, voordat deze toegankelijk is in de appstore. PWA apps zijn zo installeren, zonder dat Apple of Google daar iets van vinden. Wanneer het gaat om snelheid, is dit natuurlijk een voordeel. Maar een security check is uiteraard ook veel waard.

Tot slot is het goed om ook te benoemen dat het van belang is hoe een developer omgaat met de (standaard) veiligheid van een platform. Dat een app veiliger is, wil tenslotte niet zeggen dat hij ook daadwerkelijk veilig is opgezet door de developer.

Hoe snel is en laadt de app? Denk hierbij aan zaken als:

• opstarttijd van de app;

• hoe lang het duurt voordat de UI zichtbaar is per scherm;

• de snelheid van het inladen van (dynamische) content.

PWA is hierbij duidelijk de verliezer. De toch wel gedateerde webtechnieken/scripts winnen het niet van gecompileerde programmeertalen. En dat merk je bijvoorbeeld aan de snelheid van (in)laden en het algemene gevoel van snelle responsiviteit.

Flutter apps zijn een stuk sneller dan PWA's, maar nog wel wat trager dan native apps. Omdat er een tussenlaag zit die alles moet vertalen.

Heeft de app ook echt een app-uiterlijk? En voelt het aan als een app?

Look

Als het gaat om gebruiksgemak en -beleving, wint een native app het eigenlijk altijd. (Flutter) apps kunnen er zonder al te veel moeite uitzien als een Native app. Webapplicaties daarentegen, hebben hier veel meer moeite mee. Hoewel er natuurlijk altijd geprobeerd wordt om in de buurt te komen van een native app, is dit vanwege de webtechnieken eigenlijk vaak niet haalbaar.

Feel

Het verschil tussen een native app en een PWA is goed voelbaar. Wanneer je een webpagina op je mobieltje gebruikt en daarna een (willekeurige) app opent en daar doorheen navigeert, merk je meteen de verschillen. Swipes, taps en andere gestures in een app voelen directer en reageren sneller. En je hebt minder het gevoel dat je moet corrigeren en minder twijfels of je interactie wel is doorgekomen. "Heb ik wel op die knop gedrukt? Er gebeurt niks..."

Bij Flutter apps is het verschil met native apps minder groot, vooral omdat Flutter apps onder water de code vertalen naar native componenten.

Hoeveel impact heeft het gebruik van het soort app op de batterij van je smartphone?

Note: Hoe meer sterren, hoe lager het batterijverbruik, hoe beter het is voor het toestel.

Je batterijpercentage neemt bij native apps minder af dan bij PWA's. Ditzelfde lage batterijgebruik geldt ook voor Flutter apps. Native apps gaan namelijk beter om met hergebruik van data, geheugen allocatie, screen rendering.

Deze constatering wordt overigens ook ondersteund door een onderzoek over batterijgebruik van de twitter app vs twitter web-app.

Hoe stabiel is het ecosysteem waar de app op is ontwikkeld? Of anders gezegd: Hoe zal de support van Apple en Google zijn in de toekomst en wat is de kans op crashes of onvoorziene bugs? Je wil tenslotte weten als je een app laat ontwikkelen, of deze over vijf jaar nog wel te gebruiken/onderhouden is. 

• Native: Dit ecosysteem is erg stabiel. Uiteraard zijn er wel iOS en Android updates. Maar deze zorgen over het algemeen voor kleine aanpassingen. Daarnaast kunnen de apps met tussentijdse kleine updates prima meerdere jaren blijven werken.

• Flutter: Flutter wordt beheerd door Google en is nog een relatief jonge speler. De kinderziektes zijn er ondertussen al wel uit. Maar 'breaking changes' zijn niet uitgesloten.

• PWA: Qua community is dit de grootste. Er zijn voldoende webdevelopers, in vergelijking met native- en flutter developers. Maar webapplicaties zijn wel afhankelijk van hoe Google en vooral Apple browserondersteuning benadert. Als Apple besluit om een bepaalde weg in te gaan of vanwege veiligheid bepaalde zaken te schrappen, kan dit bijvoorbeeld een grote impact hebben.

Is de app makkelijk te vinden en te benaderen? En zijn de gebruikers bekend met de methode?.

De App store bestaat al sinds de zomer van 2008. Mensen zijn ondertussen dus wel gewend aan hoe ze apps moeten installeren. Ook al is het een drempel, over het algemeen wordt deze drempel vrij soepel genomen. Het installeren van een PWA app is nog niet helemaal ingeburgerd bij de gebruikers. Gebruikers moeten hiervoor eerst naar een URL gaan en vanuit daar, vaak via prompts, de PWA installeren op hun home-screen. Bij deze stappen ontstaat nogal eens het gevoel: "Is dit eigenlijk wel een app? Want apps komen toch uit de appstore?"

Bij native- en flutter applicaties kun je het gebruikers zelfs nog makkelijker maken. Want bij deze apps is het zelfs zo dat je gebruikers automatisch naar de geïnstalleerde app kunt  sturen. Een goed voorbeeld is de Plein app . Als je in Google een product vindt die verwijst naar de plein.nl website, zal deze automatisch de Plein app openen en direct de product-detailpagina laten zien.

Als je aanpassingen wil in je app, hoeveel tijd gaat hier overheen?

Ik heb het hier niet over content-updates. Want in 99% van de gevallen zijn apps zo opgezet dat ze via een API of een ander bron hun data at runtime kunnen aanpassen. Maar wat als je nu een nieuwe functionaliteit in je app wil toevoegen?

• Native apps: Nadat de nieuwe feature is ontwikkeld zal de app aangeboden moeten worden bij de desbetreffende stores. Zodat Apple en Google hem kunnen reviewen. Dit kan een paar uur duren tot een paar dagen.

• Flutter: Voor de appstore apps geldt hetzelfde als native apps. Alleen de web-build, kan net zoals PWA naar een web server geupload worden en direct inzetbaar.

• PWA: Zodra je nieuwe feature afgerond is, kun je deze deployen richting je webserver. En zo zijn die gelijk te gebruiken door je gebruikersgroep.

Een bijkomend voordeel van web applicaties (PWA of flutter-web) boven (appstore) apps is dat je geen rekening hoeft te houden met backwards compatibiliteit. Het kan namelijk voorkomen dat je API een update krijgt, maar je app (nog) niet geupdatet is. Dit kan komen door een gefaseerde release of dat de gebruikers automatische updates uit hebben staan. Hoe dan ook, je native app en API zullen altijd ontwikkeld moeten worden met backwards compatibiliteit in je achterhoofd. Bij PWA heb je hier minder last van.

Is de app te downloaden via de App store?

Native apps vinden gebruikers terug in de App Store (iOS) en Playstore apps (Android) . Een PWA is uiteindelijk ook om te zetten naar app- en playstore apps, door het ontwikkelen van een native wrapper om de PWA heen. Maar dit is eigenlijk niks anders dan een full-screen browserscherm die je PWA inlaadt. Apple is hier over het algemeen niet erg enthousiast over en kan hierdoor je app (update) afkeuren.

Wordt de app met moderne technieken / ontwikkeltalen opgezet? Dit punt heeft vooral betrekking op de ontwikkelaars, die vaak een voorkeur hebben voor een moderne(re) programmeertaal.

• Native: Hedendaagse apps worden opgezet in Swift / SwiftUI en Kotlin / Compose. Dit zijn relatief nieuwe programmeertalen en zijn daardoor ook modern qua opzet. Wat uiteindelijk voor developers ook als prettig wordt ervaren. Ook is het op een native platform eenvoudiger om watchOS, App clips, Carplay of andere soorten extensies te ontwikkelen naast je native app.

• Flutter: Ook Dart is een moderne programmeertaal. Een andere syntax dan Swift of Kotlin.

• PWA: Opgezet vaak in frameworks als Angular, Vue of React. Is het onder water nog steeds html, css en javascript.

Is de techniek afhankelijk van third parties (door andere partijen uitgegeven software/technologie)?

Note: Hoe meer sterren, hoe minder afhankelijkheden, hoe sneller de development gaat

• Native: Omdat je direct gebruik maakt van de platform SDK's zal, zolang apps bestaan, die ook worden ondersteund.

• Flutter: Ondanks dat Flutter open source is, is het afhankelijk van Google. Google onderhoudt deze tool en je bent dus bij iOS en/of Android updates afhankelijk van Google of en wanneer ze Flutter updaten.

• PWA: Hierin schuilt vooral de afhankelijkheid van een browser.

Het mag duidelijk zijn: er is geen 'one size fits all' oplossing. Elke situatie en project vereist een uitgebreide kijk op 'your weapon of choice'. Maar er zijn wel een aantal interessante punten die je helpen om tot een bepaalde afweging te komen:

Hoewel native apps dus vaak de hoogste kosten hebben (maar ook de hoogste kwaliteit als het gaat om beleving), zijn native apps zijn niet altijd twee keer zo duur als hybride of cross-platform apps. De initiële investering zal ongeveer anderhalf keer meer zijn. Wat vaak ook vergeten of niet vermeld wordt, is dat er bij updates voor cross platform apps of PWA’s vaak extra tijd nodig is. Bijvoorbeeld doordat Flutter of React-Native met updates komen die je app (of je third party dependencies) ‘kapot’ maken. Meestal neemt zulk onderhoud veel tijd in beslag. Dit is vaak het moment waarop je ziet dat de initiële investering in een native app zijn vruchten begint af te werpen.

Budgettechnisch zijn Flutter en PWA interessante opties. Vooral als het product zich nog een vroeg stadium begeeft. Waarbij de initiële investering dus lager is dan een native aanpak.

De doorlooptijd van een project is afhankelijk van het aantal developers dat je tot je beschikking hebt. Doorlooptijd staat uiteraard los van de investering. Met een team van vier native ontwikkelaars is je app uiteraard sneller klaar dan met één flutter developer.

Niet alleen een native app, maar ook een PWA kun je uiteindelijk in de App- en Playstore zetten. Maar wel met een iOS kanttekening: je app moet meer zijn dan een kopie van je webapp. Het moet dus meer bieden voor je gebruikers. We hebben apps al meerdere malen afgekeurd zien worden omdat het niks anders is dan een schilletje om je webapp. Onderschat dit dus niet. 

Voor cross platform apps zijn er ook mogelijkheden. Flutter heeft bijvoorbeeld de Flutter web optie, waarbij je app store apps kan maken en tegelijk ook een webomgeving kan wegzetten uit dezelfde codebase.

Je hebt ook na een keuze nog volop mogelijkheden qua doorontwikkeling. Wanneer je een native of cross platform app laat maken, is het bijvoorbeeld altijd nog mogelijk om daar later crossplatform en/of native componenten aan toe te voegen. Dit geldt zelfs voor PWA applicaties. Dat laatste is alleen wel een stuk arbeidsintensiever, iets om rekening mee te houden in je afweging.

De beste keuzes voor apps liggen bij ons vaak ergens in het PWA en Native spectrum. Al onze projecten zijn eigenlijk hybride opgezet, maar elk project positioneert zich weer ergens anders op dat spectrum.

Even wat eigen voorbeelden:

• De Plein , VI , Boerschappen en XXImo app hebben een native basis, maar hebben PWA functionaliteit die naadloos aansluiten op de app. Zoals het checkout proces van de Plein app .

• De apps die we ontwikkelden voor PSV en KNVB bevatten zelfs embedded Unity projecten om AR toepassingen in te laden.

• Op dit moment zijn we bezig met een drietal projecten waar Flutter de basis vormt. Maar waaraan dan weer maatwerk native componenten en PWA pagina's zijn toegevoegd.

• Ook komt het voor dat we gaan voor een native basis, voor optimaal gebruik van SwiftUI en Compose. Maar dat we de business logica laten regelen door Flutter libraries.

We zien wel steeds meer een verschuiving richting vooral Flutter apps. De gezamenlijke codebase en de mogelijkheid om ook direct een web-app te ontwikkelen zijn toch voordelen die we niet kunnen laten liggen.  

En voor ons biedt dit mooie kansen, juist omdat we veel ervaring hebben in native development. Zo zijn we ook niet afhankelijk van derden voor maatwerk Android en/of iOS specifieke componenten en integraties. 

Collega Thomas legt in een ander artikel uit waarom Flutter een mooie toevoeging voor Unlock is op het development landschap.