Algemene info en Samenvatting

Overzicht van de algemene technieken die zijn gebruikt.

De afbeelding hieronder weergeeft de flow die een pagina ondergaat bij het opzoeken, updaten of verwijderen van data.

De design pattern

De View-Layer (Front-end)

In de html bestanden zul je veel van deze ongebruikelijke syntaxis tegenkomen: th:object${...}" th:text${...}" th:field*{...}" th:src${...}"

Voor de view-layer is namelijk Thymeleaf gebruikt.

De reden waarom ik voor Thymeleaf heb gekozen is omdat ik Thymeleaf ken, en het een natuurlijke template-engine is en daardoor mijn werkwijze versoepelt: Ik kan de frontend volledig in html en css uitschrijven. Zelfs voor veranderende data kan ik gewoon voorbeeld-waarden invoeren en die laten staan. Ik kies dan later in de frontend welke tekstelementen dat zijn. De body van de tag wordt dan vervangen met de juiste data uit de database. De uitkomst van de frontend is dus erg voorspelbaar.

Verder bied Thymeleaf ook de mogelijkheid om je code korter te houden. Herhalende elementen kun je opslaan in een soort variabel (fragmenten), en deze op elke pagina aanroepen. Een voorbeeld van waar dit wordt toegepast is bij de elementen in de <head>, header en footer-tag.

De stabiele versie is van Thymeleaf is 18 maanden uit (juni 2020).

De voornaamste reden waarom ik geen react heb gebruik is omdat ik in geval van dit project niet kan profiteren van de single-page-application functies die react biedt, en het gebrek aan kennis van andere mogelijkheden. Thymeleaf is gezien de tijd en mijn uiteindelijke doel veel geschikter.

Het nadeel van mijn design en het gebruik van Thymeleaf is dat er niet wordt gecommuniceerd via een REST-API. Dit zou handig zijn voor als er later andere services bij komen die deze data nodig hebben.

De Controller-Layer

In deze laag worden alle requests in behandeling genomen. Het kan bijvoorbeeld zijn dat er wordt doorverwezen naar een andere pagina. Of dat er handelingen worden verricht zoals het opslaan van een nieuwe gebruiker, of het opsturen en beoordelen van een demo. De uitvoering van deze transacties kun je vinden in de bestanden van de Controllers-map

Persistence-Layer

Voorbeeld implementatie persistence-layer

Last updated

Was this helpful?