Backend Frameworks
Dev Tools
Tijdens het ontwikkelen van een mobiele applicatie is het natuurlijk belangrijk
om de applicatie te testen op een mobiele viewport
o Chrome of Firefox dev tools F12
de dev tools bieden de optie om mobiele applicaties te bekijken op verschillende
mobiele toestellen
o zowel Android als iOS
Als de mobiele view geactiveerd is, kan via de device toolbox, het toestel waarop
de app draait ingesteld worden
o Via een dropdown-menu kunnen verschillende andere toestellen
toegevoegd worden
Na het wijzigen van het toestel is et nodig om de pagina te
herladen, anders zijn de CSS wijzigingen niet zichtbaar
Prefers-color-scheme
o Ionic voorziet zowel lichte als donkere thema’s
Beiden thema’s kunnen testen
Zowel Chrome als Firefox voorzien de optie om het thema
aan te passen
o Chrome
Als de dev tools open zijn kan je de shortcut
ctrl+shift+p gebruiken om het command venter
te openen
Hier kan je de tekst ‘emulate’ intypen en
vervolgens kan hier het gewenste thema
geselecteerd worden
o Firefox
De optie om het thema te manipuleren staat
standaard niet aan
Navigeer naar about:config via de
adresbalk
o Zoek vervolgens naar
devtools.inspector.color-scheme-
, simulation en druk op de add (+)
knop
Het mobiele landschap
Hybrid-webview & hybrid-native
o 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
Android als iOS
Hybrid applicaties
o Hybrid apps kunnen geschreven worden in JavaScript,
C#, Dart, Python, Kotlin
De taal kan je dus kiezen
o Nadelen
Afhankelijk van een derde partij
Gebruikt frameworks en plug-ins die niet altijd
up-to-date zijn en meestal niet de allerlaatste
features van Android of iOS kunnen gebruiken
o Twee soorten hybrid apps
Soort één
Worden verpakt in een iOS en Android
app die niets anders doet dan een website
laden in een webview, dus een browser
Soort twee
Worden geschreven in één taal naar
keuze, maar wordt gecompileerd naar
native Java of Swift cide
o Dit soort apps zijn (bijna) even
performant als echte native apps
React Native
o Een React framework om hybrid native apps te schrijven
o React Native projecten worden geschreven in JavaScript en maken gebruik
van een 100% gedeelde codebase
o React Native biedt React UI-componenten aan die vertaald worden naar
native iOS of Android componenten
Flutter
o Een relatief nieuw framework ontwikkeld door Google
o Flutter apps worden geschreven in Dart
2
, Één cidebase kan gecompileerd worden naar een mobiele, web of
desktop applicatie
Dart is ontwikkeld met het transpileren naar verschillende
platformen in het achterhoofd en biedt bijzonder goede
performance op de verschillende platformen
Ionic
o Een hybrid webview framework
o Ionic applicaties worden dus niet gecompileerd naar native code
o Toch biedt Ionic, UI-componenten aan die zich automatisch aapassen aan
het platform waarop de applicatie uitgevoerd wordt
o Ionic apps kunnen ontwikkeld worden in Angular, React, Vue of klassieke
JavaScript
Via Capacitor wordt de applicatie geconverteerd tot een hybrid-
webview applicatie die, voor de gebruiker, niet te onderscheiden is
van een native app
o Ionic apps kunnen eenvoudig gepubliceerd worden als progressive web
apps of desktop applicaties via Electron
.NET MAUI
o De .NET Multi-platform App UI of MAUI is een recent uitgebrachte tool voor
multi-platform development
o Via MAUI kan met één C# codebase code geschreven worden voor
Android, iOS, Windows, macOs
o MAUI is de opvolger van Xamarin.Forms en Xamarin.Native maar
combineert de beste aspecten van beide
o Een MAUI-UI-component wordt automatisch getranspileerd naar een
gepaste native component op het doelplatform
Progressive Web Apps
o PWAs
Zijn webapplicaties waaraan service workers en web manifest aan
toegevoegd worden
Deze technologieën zorgen ervoor dat de applicatie vanuit
een browser geïnstalleerd kan worden op een smartphone of
desktop computer
o 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
3
, een website en dus automatisch de
laatste versie downloaden
4
Dev Tools
Tijdens het ontwikkelen van een mobiele applicatie is het natuurlijk belangrijk
om de applicatie te testen op een mobiele viewport
o Chrome of Firefox dev tools F12
de dev tools bieden de optie om mobiele applicaties te bekijken op verschillende
mobiele toestellen
o zowel Android als iOS
Als de mobiele view geactiveerd is, kan via de device toolbox, het toestel waarop
de app draait ingesteld worden
o Via een dropdown-menu kunnen verschillende andere toestellen
toegevoegd worden
Na het wijzigen van het toestel is et nodig om de pagina te
herladen, anders zijn de CSS wijzigingen niet zichtbaar
Prefers-color-scheme
o Ionic voorziet zowel lichte als donkere thema’s
Beiden thema’s kunnen testen
Zowel Chrome als Firefox voorzien de optie om het thema
aan te passen
o Chrome
Als de dev tools open zijn kan je de shortcut
ctrl+shift+p gebruiken om het command venter
te openen
Hier kan je de tekst ‘emulate’ intypen en
vervolgens kan hier het gewenste thema
geselecteerd worden
o Firefox
De optie om het thema te manipuleren staat
standaard niet aan
Navigeer naar about:config via de
adresbalk
o Zoek vervolgens naar
devtools.inspector.color-scheme-
, simulation en druk op de add (+)
knop
Het mobiele landschap
Hybrid-webview & hybrid-native
o 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
Android als iOS
Hybrid applicaties
o Hybrid apps kunnen geschreven worden in JavaScript,
C#, Dart, Python, Kotlin
De taal kan je dus kiezen
o Nadelen
Afhankelijk van een derde partij
Gebruikt frameworks en plug-ins die niet altijd
up-to-date zijn en meestal niet de allerlaatste
features van Android of iOS kunnen gebruiken
o Twee soorten hybrid apps
Soort één
Worden verpakt in een iOS en Android
app die niets anders doet dan een website
laden in een webview, dus een browser
Soort twee
Worden geschreven in één taal naar
keuze, maar wordt gecompileerd naar
native Java of Swift cide
o Dit soort apps zijn (bijna) even
performant als echte native apps
React Native
o Een React framework om hybrid native apps te schrijven
o React Native projecten worden geschreven in JavaScript en maken gebruik
van een 100% gedeelde codebase
o React Native biedt React UI-componenten aan die vertaald worden naar
native iOS of Android componenten
Flutter
o Een relatief nieuw framework ontwikkeld door Google
o Flutter apps worden geschreven in Dart
2
, Één cidebase kan gecompileerd worden naar een mobiele, web of
desktop applicatie
Dart is ontwikkeld met het transpileren naar verschillende
platformen in het achterhoofd en biedt bijzonder goede
performance op de verschillende platformen
Ionic
o Een hybrid webview framework
o Ionic applicaties worden dus niet gecompileerd naar native code
o Toch biedt Ionic, UI-componenten aan die zich automatisch aapassen aan
het platform waarop de applicatie uitgevoerd wordt
o Ionic apps kunnen ontwikkeld worden in Angular, React, Vue of klassieke
JavaScript
Via Capacitor wordt de applicatie geconverteerd tot een hybrid-
webview applicatie die, voor de gebruiker, niet te onderscheiden is
van een native app
o Ionic apps kunnen eenvoudig gepubliceerd worden als progressive web
apps of desktop applicaties via Electron
.NET MAUI
o De .NET Multi-platform App UI of MAUI is een recent uitgebrachte tool voor
multi-platform development
o Via MAUI kan met één C# codebase code geschreven worden voor
Android, iOS, Windows, macOs
o MAUI is de opvolger van Xamarin.Forms en Xamarin.Native maar
combineert de beste aspecten van beide
o Een MAUI-UI-component wordt automatisch getranspileerd naar een
gepaste native component op het doelplatform
Progressive Web Apps
o PWAs
Zijn webapplicaties waaraan service workers en web manifest aan
toegevoegd worden
Deze technologieën zorgen ervoor dat de applicatie vanuit
een browser geïnstalleerd kan worden op een smartphone of
desktop computer
o 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
3
, een website en dus automatisch de
laatste versie downloaden
4
