Inleiding
Inleiding
Tijdens deze inleiding worden de verschillen tussen de meest gangbare tools voor mobile development besproken. Deze leerstof wordt niet ondervraagd op het examen, maar dient als een inleiding op de cursus.
Mobile development
Toen smartphones relatief nieuw waren, was het nodig om een app specifiek te ontwikkelen voor een bepaald platform (iOS, Android, Windows Phone, BlackBerry OS, ...). Elk besturingssysteem gebruikte hun eigen programmeertaal, zo werd Java gebruikt voor Android en Objective-C voor iOS. Vandaag de dag zijn er nog maar twee relevante platformen, Android en iOS, de programmeertalen die gebruikt worden op deze twee platformen zijn ook geëvolueerd. Voor Android kan naast Java nu ook Kotlin (een superset van Java) gebruikt worden, voor iOS gebruik je Swift in de plaats van Objective-C.
De programmeertalen zijn geëvolueerd, maar om native apps te ontwikkelen moet je nog steeds twee talen kennen en twee aparte codebases onderhouden. Dit is natuurlijk niet ideaal. Twee codebases betekent twee keer zoveel werk. Daarbovenop is de kans groot dat iemand die gespecialiseerd is in Java weinig tot geen kennis heeft van Swift en omgekeerd. Hoogstwaarschijnlijk zijn er dus verschillende programmeurs nodig voor beide versies van de app.
Naast deze nadelen zijn er natuurlijk ook voordelen verbonden aan het gebruikt van Swift, Java en Kotlin. De nieuwste SDK (Software Development Kit) kan altijd gebruikt worden, je hebt toegang tot de nieuwste features zodra Google of Apple deze vrijgeven en daarbovenop is een app geschreven in Java of Swift performanter dan de alternatieven. In de meeste gevallen is het verschil nauwelijks of niet merkbaar, maar voor grafisch intensieve applicaties of andere zware applicaties bouw je best een aparte applicatie per platform. Tenslotte is het voor native applicaties ook eenvoudiger om correct te integreren met de UI van je gekozen platform.
Hybrid-webview & Hybrid-native
Twee codebases onderhouden is niet altijd praktisch of nodig. Er zijn verschillende tools beschikbaar waarmee mobiele applicaties, in één taal, geschreven kunnen worden voor zowel iOS als Android. We spreken in dat geval van hybrid applicaties. Hybrid apps kunnen geschreven worden in JavaScript, C#, Dart, Python, Kotlin ... Je kan dus de taal kiezen waar je als ontwikkelaar het bekendst mee bent. Natuurlijk zijn er aan dit soort applicaties ook nadelen verbonden. Je bent afhankelijk van een derde partij, je gebruikt frameworks en plug-ins die niet altijd up-to-date zijn en meestal niet de allerlaatste features van Android of iOS kunnen gebruiken en daarbovenop is er een (zeer) kleine performantie-kost gekoppeld aan een hybrid applicatie. Hoe groot deze kost is, hangt af van de gekozen technologie.
Er zijn twee soorten hybrid apps te onderscheiden. De eerste soort worden verpakt in een iOS en Android app die niets anders doet dan een website laden in een webview, een browser met andere woorden. De tweede soort applicaties worden geschreven in één taal naar keuze, maar wordt (deels) gecompileerd naar native Java of Swift code. Dit soort apps zijn (bijna) even performant als echte native apps.
React Native
React Native is een React framework om hybrid native apps te schrijven. React Native projecten worden geschreven in JavaScript en maken gebruik van een 100% gedeelde codebase. React Native biedt enkele basiscomponenten aan die gebruikt kunnen worden om een UI op te bouwen. Deze basiscomponenten worden vertaald naar native UI-elementen op Android of iOS.
Omdat de componenten vertaald moeten worden, zijn er slechts enkele basis componenten beschikbaar, op het moment van schrijven zijn dit er 23 (waarvan er 4 platform specifiek zijn). Als je complexere componenten wilt gebruiken, zul je deze zelf moeten bouwen via de aangeboden core components. Omwille van de kleine hoeveelheid componenten is moeilijker om complexe UI's te bouwen, maar de UI gaat wel (een beetje) sneller zijn dan in een hybrid webview applicatie. Natuurlijk zijn er wel verschillende UI libraries die gebruikt kunnen worden om snel een UI te bouwen. De ontwikkeling van deze libraries is echter niet altijd betrouwbaar en zijn niet eenvoudig te upgraden naar nieuwe versies van React Native.
Alhoewel de UI-elementen gecompileerd worden naar echte native code, betekent dit niet dat de volledige applicatie gecompileerd wordt naar native code. React Native gebruikt twee verschillende threads. Op het eerste thread wordt de native UI-code uitgevoerd, op het andere thread wordt JavaScript code uitgevoerd, deze JavaScript code wordt echt als JavaScript code uitgevoerd via de Hermes engine. Omdat er verschillende threads zijn, zijn er enkele verschillen tussen React en React Native is het aanpassen en updaten van de UI en moeten libraries zoals react-native-reanimated gebruikt worden.
Expo
Expo is een framework, gebouwd is rond React Native, dat verschillende functionaliteiten toevoegt. Zo bied Expo veel betere ondersteuning voor webprojecten, is er een ingebouwde router, kan de app eenvoudiger getest worden via de Expo Go app en is er een build service waarmee een applicatie gecompileerd en gepubliceerd kan worden.
NativeScript
NativeScript is een framework dat ongeveer op dezelfde manier werkt als React Native. Het voordeel van NativeScript is dat dit framework het mogelijk maakt om een mobiele applicatie te bouwen met Angular of Vue. Daarnaast heeft NativeScript een grotere componenten-library dan React Native, maar het aantal ontwikkelaars die gebruik maken van NativeScript is veel kleiner. NativeScript is een goede keuze als je React niet beheerst, maar wel bekend bent met Angular of Vue. Als je React kent, ben je betere met React Native, zoals aangetoond door onderstaande grafiek.
Bron: https://npmtrends.com/@nativescript/core-vs-react-native
Flutter
Flutter is een relatief nieuw framework ontwikkeld door Google. Flutter apps worden geschreven in Dart, één codebase kan gecompileerd worden naar een mobiele, web of desktop (Linux, Windows, macOS) applicatie. Flutter code wordt gecompileerd naar een library met native ARM-code, deze library wordt dan aangesproken vanuit een Android- of iOS-applicatie
De gecompileerde ARM-code is niet hetzelfde als een echte native applicatie omdat de UI-widgets die gebruikt worden door Flutter niet overeen komen met native UI-componenten. In de plaats daarvan gebruikt Flutter UI-componenten die geschreven zijn in C of C++.
Omdat er een extra library ingeladen moet worden en omdat de UI-componenten niet echt native zijn is een Flutter app net niet even snel als echte native applicatie. Toch is een Flutter applicatie (theoretisch) wel de snelste hybrid-applicatie omwille van de zeer performante C/C++ library.
Ondanks de snelheid van Flutter, heeft React Native nog steeds een groter marktaandeel omdat JavaScript nu eenmaal door veel meer developers gebruikt wordt dan Dart.
Ionic & Capacitor
Ionic is een hybrid webview framework. Ionic applicaties worden dus niet gecompileerd naar native code, in plaats daarvan wordt een klassieke website geladen in een webview.
Een webview is natuurlijk trager dan een applicatie die native code gebruikt, maar zolang de applicatie geen grafisch intensieve dingen doet, is dit verschil nauwelijks merkbaar. We spreken dan over een verschil van enkele frames per seconde op 100+ frames per seconde.
Omdat dit soort applicaties een gewone website is, kan elk CSS-framework en elke componenten library gebruikt worden. Een ander pluspunt zijn de door Ionic voorziene componenten, deze zijn adaptive, wat wil zeggen dat de componenten zich automatisch aanpassen aan het besturingssysteem van de gebruiker. De componenten zullen dus een material design of _ cupertino_ opmaak krijgen afhankelijk van het toestel van de gebruiker.
Ionic apps kunnen ontwikkeld worden in Angular, React, Vue of klassieke JavaScript. Aan deze laatste opties zijn er wel wat nadelen verbonden.
Via Capacitor wordt de applicatie geconverteerd tot een hybrid-webview applicatie die, voor de gebruiker, niet te onderscheiden is van een native app. Ionic apps kunnen tenslotte ook eenvoudig gepubliceerd worden als progressive web apps of desktop applicaties via Electron (net zoals elke website).
Progressive Web Apps
Progressive Web Apps (PWAs) zijn webapplicaties waaraan service workers en een web manifest toegevoegd worden. Deze technologieën zorgen ervoor dat de applicatie vanuit een browser geïnstalleerd kan worden op een smartphone of desktop computer.
De service workers bieden offline functionaliteit. Gegevens worden in een cache bewaard, als de applicatie offline gebruikt wordt, zal de data uit de cache geladen worden. Indien het toestel met het internet verbonden is zal de applicatie draaien als een website en dus automatisch de laatste versie downloaden.
PWAs bieden, net zoals browsers, ondersteuning voor zaken zoals notifications, geo-location, camera, ... maar enkel als deze functionaliteit ook in een browser beschikbaar is. Het is dus onmogelijk om bijvoorbeeld de Bluetooth radio te gebruiken, wat wel kan op een hybrid app. Een volledig overzicht (per browser) is te vinden op https://whatwebcando.today/.
PWAs kunnen geïnstalleerd worden vanuit een browser, of vanuit de App Store op macOS toestellen en de Windows Store op Windows 11 toestellen. De meest gebruikte mobiele browsers bieden eveneens ondersteuning voor PWAs, op desktop computers is dit echter niet altijd het geval. Enkel Chromium gebaseerde browsers en Safari bieden ondersteuning voor PWAs op desktop computers, Firefox heeft besloten om deze functionaliteit niet langer te ondersteunen. Via een extensie als Progressive Web Apps for Firefox kan je de mogelijkheid om PWAs te installeren wel toevoegen aan Firefox.
Omdat een PWA gevonden kan worden door een zoekmachine (Google, Bing, Yahoo, Yandex, ...) is de kans dat je applicatie gevonden wordt door een gebruiker veel groter dan in een app store.
Onderstaande video demonstreert hoe de PWA-versie van de cursuswebsite offline geïnstalleerd kan worden via Google Chrome op een desktopcomputer. Als je dit zelf wil proberen, weet dat het even kan duren voordat de installatieknop verschijnt. De PWA is geconfigureerd om deze optie pas weer te geven wanneer alle video's en afbeeldingen lokaal gecachet zijn. Aangezien deze website zeer veel video's bevat, kan dit even duren.