Samenvatting Backend Frameworks (Ionic & Angular)

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