...
Voor de applicatie is ook een deployment diagram opgesteld met daarin alle servers waar de applicatie op komt te draaien. Hierbij zijn een aantal design keuzes gemaakt die in het kopje eronder staan verantwoord.
...
Design Sub-System Vue.js frontend:
Design Class Diagram
Op basis van de ontwerpkeuze router is er een diagram opgesteld dat inzicht geeft in de paginastructuur uit de router.
Sequence diagrams
Dit onderdeel is niet van toepassing op het front end gedeelte. Er staan sequence diagrammen in het volgende onderdeel over subsystemen.
Design decisions made for the sub-system
...
Losse componenten
Decision | Description | ||
|---|---|---|---|
Problem/Issue | Omdat pagina’s vaak vergelijkbare onderdelen bevatten, zou er snel dubbele code ontstaan. | ||
Decision | Er | Decision | Er is een duidelijk onderscheid aangebracht tussen enerzijds de pagina’s, en anderzijds de tools & componenten. Op deze manier kunnen tools en componenten geïmporteerd & hergebruikt worden. |
Alternatives | In plaats van losse componenten hadden we ook kunnen kiezen om de code te herhalen. | ||
Arguments | Het grote voordeel van losse componenten schrijven is dat ze maar op 1 plek hoeven te worden aangepast, wat efficiënter en minder foutgevoelig is dan dubbele code. Ook zijn de losse componenten een belangrijke onderdeel van het zogenaamde Declarative Rendering, wat inhoudt dat de componenten alleen updaten als hun data veranderd. Dit maakt het laden en navigeren binnen het HR Portaal efficiënter dan als de hele pagina herladen zou worden. |
...
Decision | Description |
|---|---|
Problem/Issue | Omdat pagina’s vaak vergelijkbare onderdelen bevatten, zou er snel dubbele code ontstaan. |
Decision | Er is een duidelijk onderscheid aangebracht tussen enerzijds de pagina’s, en anderzijds de tools & componenten. Op deze manier kunnen tools en componenten geïmporteerd & hergebruikt worden. |
Alternatives | In plaats van losse componenten hadden we ook kunnen kiezen om de code te herhalen. | Arguments | Het grote voordeel van losse componenten schrijven is dat ze maar op 1 plek hoeven te worden aangepast, wat efficiënter en minder foutgevoelig is dan dubbele code. Ook zijn de losse componenten een belangrijke onderdeel van het zogenaamde Declarative Rendering, wat inhoudt dat de componenten alleen updaten als hun data veranderd. Dit maakt het laden en navigeren binnen het HR Portaal efficiënter dan als de hele pagina herladen zou worden.
Alle developers moesten een duidelijk beeld hebben van hoe het front-end eruit zou gaan zien, zodat de stijl voor de verschillende onderdelen matched en het er als een geheel uit komt te zien. | |
Decision | Er is besloten om al vroeg schetsen op te stellen voor alle interfaces die in de front-end te zien zijn. Dit bevatte dingen als de pagina-layout, kleurkeuzes, fontstijl, etc. Hierbij is vooral gekeken naar de bestaande JDI website, zodat het HR Portaal bij de bestaande pagina’s past. |
Alternatives | Het alternatief was om direct van start te gaan met de front-end code, zonder eerst schetsen te maken. |
Arguments | Het voordeel van de schetsen is dat alle front-end developers in het Perlman ontwikkelteam op dezelfde lijn zaten. Ook konden deze ontwerpen alvast richting de opdrachtgever gestuurd worden, zodat het voor de opdrachtgever duidelijk is wat ze konden verwachten (en eventueel kon er nog feedback op de ontwerpen komen vanuit de opdrachtgever). |
Externe tools
Decision | Description |
|---|---|
Problem/Issue | Alle developers moesten een duidelijk beeld hebben van hoe het front-end eruit zou gaan zien, zodat de stijl voor de verschillende onderdelen matched en het er als een geheel uit komt te zienHandmatig alle opmaak voor de front-end programmeren kost veel tijd en moeite die beter richting andere taken kan gaan. |
Decision | Er is besloten om al vroeg schetsen op te stellen voor alle interfaces die in de front-end te zien zijn. Dit bevatte dingen als de pagina-layout, kleurkeuzes, fontstijl, etc. Hierbij is vooral gekeken naar de bestaande JDI website, zodat het HR Portaal bij de bestaande pagina’s past. |
Alternatives | Het alternatief was om direct van start te gaan met de front-end code, zonder eerst schetsen te maken. |
Arguments | Het voordeel van de schetsen is dat alle front-end developers in het Perlman ontwikkelteam op dezelfde lijn zaten. Ook konden deze ontwerpen alvast richting de opdrachtgever gestuurd worden, zodat het voor de opdrachtgever duidelijk is wat ze konden verwachten (en eventueel kon er nog feedback op de ontwerpen komen vanuit de opdrachtgever). |
gebruik te maken van bestaande tools zoals Bulma en FontAwesome. Bulma is een css framework met veel front-end componenten wat het makkelijk maakt om layout’s in elkaar te zetten. FontAwesome is een grote collectie van icoontjes die door het hele HR Portaal gebruikt zijn. | |
Alternatives | We hadden kunnen kiezen om de css volledig zelf te bouwen, en icoontjes handmatig op te zoeken en in te voegen. |
Arguments | Tools zoals Bulma en FontAwesome besparen heel veel tijd. Ook maken ze het makkelijker om een consistente look te verwezenlijken, omdat alle css componenten op hetzelfde achterliggende framework gebaseerd zijn. |
RouterExterne tools
Decision | Description |
|---|---|
Problem/IssueHandmatig alle opmaak voor de front-end programmeren kost veel tijd en moeite die beter richting andere taken kan gaan | Aangezien het portaal een SPA is kan de positie van de gebruiker binnen de app snel onduidelijk zijn. Ook laat de URL niet altijd accuraat zien waar de gebruiker zich bevindt. |
Decision | Er is besloten om voor de front-end gebruik te maken van bestaande tools zoals Bulma en FontAwesome. Bulma is een css framework met veel front-end componenten wat het makkelijk maakt om layout’s in elkaar te zetten. FontAwesome is een grote collectie van icoontjes die door het hele HR Portaal gebruikt zijn. |
Alternatives | We hadden kunnen kiezen om de css volledig zelf te bouwen, en icoontjes handmatig op te zoeken en in te voegen. |
Arguments | Tools zoals Bulma en FontAwesome besparen heel veel tijd. Ook maken ze het makkelijker om een consistente look te verwezenlijken, omdat alle css componenten op hetzelfde achterliggende framework gebaseerd zijn. |
de Vue Router. Dit laat ons zelf routes (en bijbehorende URL’s) binnen het HR Portaal aangeven. | |
Alternatives | Het alternatief is om geen Router te gebruiken. |
Arguments | Door het gebruik van de Router lijkt onze SPA meer op een reguliere website waarbij gebruikers aan de hand van de URL door de app kunnen navigeren. |
Opsplitsen netwerkcodeRouter
Decision | Description |
|---|---|
Problem/Issue | Aangezien het portaal een SPA is kan de positie van de gebruiker binnen de app snel onduidelijk zijn. Ook laat de URL niet altijd accuraat zien waar de gebruiker zich bevindtNa de eerste twee sprints werd het duidelijk dat alle netwerk-gerelateerde functies in 1 document zetten geen goed idee was. Ieder nieuwe methode leverde ingewikkelde merge-conflicten op, en het werd zeer lastig om code terug te vinden. |
Decision | Er is besloten om gebruik te maken van de Vue Router. Dit laat ons zelf routes (en bijbehorende URL’s) binnen het HR Portaal aangeven. |
Alternatives | Het alternatief is om geen Router te gebruiken. |
Arguments | Door het gebruik van de Router lijkt onze SPA meer op een reguliere website waarbij gebruikers aan de hand van de URL door de app kunnen navigeren. |
Opsplitsen netwerkcode
...
Decision
...
Description
...
Problem/Issue
...
Na de eerste twee sprints werd het duidelijk dat alle netwerk-gerelateerde functies in 1 document zetten geen goed idee was. Ieder nieuwe methode leverde ingewikkelde merge-conflicten op, en het werd zeer lastig om code terug te vinden.
...
Decision
...
Er is gekozen om alle netwerk code op te delen in losse documenten met individuele functies.
...
Alternatives
...
We hadden de netwerk functies allemaal bij elkaar kunnen laten staan.
...
Arguments
...
Nu alle netwerk functies over losse documenten zijn uitgesplitst levert het zelden meer merge-conflicten op, en het is veel makkelijker om code terug te vinden.
gekozen om alle netwerk code op te delen in losse documenten met individuele functies. | |
Alternatives | We hadden de netwerk functies allemaal bij elkaar kunnen laten staan. |
Arguments | Nu alle netwerk functies over losse documenten zijn uitgesplitst levert het zelden meer merge-conflicten op, en het is veel makkelijker om code terug te vinden. |
Design Sub-System Spring boot backend:
De backend voor het HR Portaal is geschreven in Spring Boot. De backend is een belangrijk onderdeel van het eindproduct, en in dit hoofdstuk zullen de structuur en ontwerpbeslissingen van de backend worden toegelicht.
Design Class Diagram
Onderstaand is het class diagram voor de gehele backend van het HR Portaal. In dit diagram is gekozen om relaties aan te geven tussen klasses, als deze klasses een variable hebben voor de andere klasse. De DTO's worden veelal gebruikt binnen methodes in de resource klasses; dit wordt niet als relatie weergegeven, maar de DTO's staan wel in de buurt van de resources waar ze worden gebruikt.
Sequence Diagrams
De volgende GRASP principes zijn van toepassing op de sequence diagrammen:
- Controller - Alle endpoints zijn aangemaakt in de resource classen. Deze laag handelt de UI interactie af.
- High cohesion & low coupling - Door een hoge samenhang en lage afhankelijkheid zijn de classen minder afhankelijk van elkaar en is het makkelijker om de code uit te breiden
- Information expert - De verantwoordelijkheden zijn toegekend aan de classen die de meeste informatie hebben om de verantwoordelijkheid te dragen.
Design Sub-System Spring boot backend:
De backend voor het HR Portaal is geschreven in Spring Boot. De backend is een belangrijk onderdeel van het eindproduct, en in dit hoofdstuk zullen de structuur en ontwerpbeslissingen van de backend worden toegelicht.
Design Class Diagram
Onderstaand is het class diagram voor de gehele backend van het HR Portaal. In dit diagram is gekozen om relaties aan te geven tussen klasses, als deze klasses een variable hebben voor de andere klasse. De DTO's worden veelal gebruikt binnen methodes in de resource klasses; dit wordt niet als relatie weergegeven, maar de DTO's staan wel in de buurt van de resources waar ze worden gebruikt.
...
Sequence diagram reserveren werkplek
...