worden. Een PWA ziet er ook uit als een gewone app omdat het gebouwd is op een app-shell
model [37]. Een nadeel is dat de PWA geen hardware- en platform-level features zoals kalender
of contacten kan gebruiken als die niet ondersteund worden door de browser [34]. Rekening houdend met bovenstaande voordelen en omdat de nadelen geen invloed hebben op de geplande
features van de receptenapplicatie, werd er gekozen om een PWA te ontwikkelen.
De PWA werkt met een service worker API die gebruik maakt van een in de achtergrond draaiend script. Het script doet zich voor als netwerk en apparaatproxy en zorgt voor achter- grondsynchronisatie, het cachen van data en het onderscheppen van netwerkrequests. Bij het eerste gebruik van de receptenapplicatie wordt de service worker geregistreerd. Omwille van het onderscheppen van netwerk requests wordt er verplicht gewerkt met HTTPS, wat de receptenap- plicatie ook veel veiliger maakt [34]. De service worker werkt onafhankelijk van de applicatielaag waardoor deze automatisch berichten kan ontvangen, zelfs als de app op de achtergrond draait, niet open staat of de browser afgesloten is. Dit kan bijvoorbeeld handig zijn om meldingen te ontvangen bij een groepsinvite in de receptenapplicatie. De service worker is een Javascript wor-
ker die indirecte toegang heeft tot het Document Object Model (DOM), het gebruikt enkel de
pagina’s waarop het toegepast wordt en deze passen het DOM aan. De worker kan ook steeds opnieuw worden afgesloten en heropgestart, maar caching is vereist om geen data te verliezen. Aangezien er door Application Shell Architecture by default aan pre-cachen wordt gedaan, werd enkel deze techniek gebruikt voor de receptenapplicatie. Hierbij worden de assets (HTML, CSS, afbeeldingen, Javascript) gecachet wanneer de service worker voor het eerst wordt geïnstalleerd. Naast pre-cachen kan men ook dynamisch cachen wat de performantie ten goede komt en een offline cache gebruiken als er geen internetconnectie is.
Bij een PWA is een web app manifest nodig om het gedrag en de stijl van de app aan te kunnen passen en de metadata van de app (naam, iconen, URL,…) bij te houden [34]. Deze informatie wordt bewaard in een JSON-tekstbestand. Deze file zorgt zowel voor een snellere toegang tot de app en een betere user experience [38]. Samen met de service worker zorgt deze web app manifest ervoor dat de app geïnstalleerd kan worden op het homescherm [35]. Om de performantie van de receptenapplicatie te testen, werd gebruik gemaakt van Google Lighthouse. Dit kan uitgevoerd worden als Chrome-extensie, vanuit de command line of als Node-module. Lighthouse kijkt vooral naar de performantie en de kwaliteit van PWA’s [38].
7.5 Front-end
In deze masterproef werd geopteerd voor een progressieve webapp met als front-end Angular in plaats van React. Alhoewel beiden gebruikt kunnen worden voor het uitbouwen van een presentatielaag voor de data, kennen ze toch veel verschillen. De keuze viel op Angular aangezien dit additionele helperfuncties biedt voor het maken van HTTP-requests en het een volledig
behoort bijgevolg tot de MEAN-categorie, wat staat voor MongoDB, Express, Angular en Node [39].
React
React is een UI library die gebruik maakt van states en components en is ontwikkeld door bedrijven als Facebook en Instagram [39, 40]. Het is een hulpmiddel voor grote applicaties, want het kan nieuwe data laden zonder de pagina te vernieuwen. [39]. Een state is een snapshot van alle componentvariabelen in een bepaalde fase van de lifecycle en het kan via Redux gedeeld worden. Het is een onveranderlijke statencontainer die door elk component geraadpleegd kan worden [40] volgens 3 concepten: de actions regelen de updates van de staat, de reducers passen de staat aan na een actie en de store slaat de staat op. [41].
React gebruikt JSX als programmeertaal, wat een extensie is van Javascript met XML-syntax en gelijkaardig is aan HTML. Dit zorgt ervoor dat de businesslogica en functies in hetzelfde bestand als HTML kunnen bestaan. Op die manier zijn React-componenten volledig geïsoleerd en kunnen ze hergebruikt worden [40].
React is performanter dan Angular aangezien Angular via dynamische binding veel componenten onnodig herlaadt. Het is ook minder complex dan Angular, maar de ontwikkelaar regelt zelf de organisatie waardoor het onderhoud moeilijker verloopt. Ten slotte gebruikt React enkel de view van MVC waardoor extra tools en uitwendige hulp nodig zijn voor de webapplicatie [39]. Na het maken van deze afweging werd Angular verkozen voor de receptenapplicatie.
Angular
Angular is een opensource Javascript library die onderhouden wordt door Google. Het verbe- tert de webapplicaties via MVC (Model-View-Controller) en componenten die elk bestaan uit typescript code en een HTML template. Deze technieken zorgen voor schaalbare, uitbreidbare projecten en zijn gemakkelijk te testen. Er wordt gewerkt via dependency injection en deep lin-
king waardoor het binden van dynamische data leidt tot automatische synchronisatie tussen de view en model van een component. De ondersteuning van REST zorgt voor een gemakkelijke
interactie met de server. [39, 42]. Aangezien Angular zelf veel ondersteuning biedt, zijn er weinig derde partijen nodig om de webapp te runnen.
Bij de ontwikkeling van de front-end van de receptenapplicatie werd er gebruik gemaakt van Material design, een UI component library van Google. Dit zorgt voor consistente en functionele webpagina’s via herbruikbare, geteste en toegankelijke componenten zoals formulieren, navigatie, layout, knoppen, pop-ups en tabellen [43].
Er worden ook unittesten voorzien met gebruik van de tool Karma die ondersteuning biedt voor de meeste browsers en test frameworks zoals Jasmine en Mocha [44]. Tijdens het testen wordt de aanroepende controller naar de back-end gemockt waardoor de teruggegeven data altijd statisch
7.6. BACK-END: NODE.JS 63