Frontend

De frontend is een Javascript web applicatie zijn dat actief is in de browser. Het is de gebruikersinterface voor de functionaliteiten die de API implementeert.

In deze fase heeft de volgende vraag centraal gestaan:

• Hoe bouw ik verder op het bestaande concept?

Het originele prototype

Het originele concept was ontwikkeld in javascript. Er moest dus een keuze gemaakt worden om op de bestaande code te bouwen en het de implementatie van het datamodel end de API te laten informeren. Of te beginnen met het datamodel en API en hiervoor een nieuw javascript prototype te ontwikkelen.

De opdrachtgever gaf aan dat het niet de look and feel, maar het idee was, dat het AMC interesseerde. Joost Faber, CMD docent aan de HVA, zag op zijn beurt grote kansen voor een goed ontwikkelde API voor het concept waarvan op de frontend nog veel kon worden geïtereerd.

Aan de hand van de conclusies van het onderzoek en het overleg, is gekozen om het datamodel en de API vanuit het onderzoek en de eisenlijst te ontwikkelen. Om daarna een nieuwe frontend te ontwikkelen dat technisch beter aansluit op de API en als een voorbeeld dient voor volgende iteraties.

Het design

Het originele concept heeft gekeken naar de standaarden van Google's material design. Dit heeft het voordeel dat de web applicatie veel weg heeft van een native Andriod app en maakt de mogelijke overstap makkelijker. Om trouw te blijven aan het origineel is het huidige design hier ook op gebaseerd.

Om dit te bereiken is gebruik gemaakt van de Material-ui library. Deze library biedt voorgestijlde User Interface elementen in de stijl van Material Design. De library is ontwikkeld voor gebruik met het React Javacsript framework ontwikkeld door Facebook.

React

React is een kleine library die zich alleen bezighoud met het opbouwen van een User Interface door componenten de definiëren en met elkaar te combineren. Het is uniek in dat de HTML in de Javascript wordt beschreven en daarin tegen best practisises in druist. Echter nadat Facebook het heeft gepubliceerd volgden grote namen als Netflix, Khanacademy en Twitter mobile in de adoptie van deze nieuwe manier van User Interfaces bouwen voor het web.

Omdat het alleen de User Interface beschrijft is het uitermate geschikt voor een project als deze. Omdat het gros van de logica gebeurd op de server en de frontend enkel een presentatielaag is. Het enige wat we extra doen in de frontend is het ophalen van de informatie en deze in de juiste componenten zetten.

Ontwikkelproces

Alhoewel de frontend conceptueel zeer simpel is qua techniek heeft er toch een hoop tijd in gezeten. In tegenstelling tot de meeste CMD techneuten bezat ik geen relevante kennis voor het bouwen van websites op deze manier. Mijn (professionele) ervaring en expertise zit in het ontwikkelen van server side applicaties die de drijvende veer zijn achter een frontend.

Dit heeft geleid tot een klein aantal problemen in de frontend. Er is hier een daar een inconsistentie in bijvoorbeeld de header van de applicatie. Ook is het niet gelukt om van de Markdown functionaliteit een goede gebruikers ervaring te maken. Daarom blijft het voor nu ongedocumenteerd en zal het hopelijk worden opgepakt door anderen.