Services

Services kunnen beschouwd worden als een vierde laag in een applicatie die MVC gebruikt.

De toepassing van services kan je op meerdere manier intepreteren, maar het komt neer op:

• Een service verzamelt herbruikbare logica op één plek
• Services kunnen andere services gebruiken om hun logica uit te voeren
• Controllers, in de context van MVC, maken gebruik van één of meerdere services om logica uit te voeren.

Het idee hierachter is dat een service vervangen zou kunnen worden met een nieuwe implementatie en dat de gebruikers van de oude versie niks in hun code hoeven aan te passen.

Voorbeeld

Klinkt als een hoop abracadabra? Laten we een voorbeeld pakken!

In een Web Component heb je een functie zitten die een fetch naar een API Endpoint zou moeten doen en vervolgens het resultaat in de HTML.

In pseudo-code:

async function mijnGeweldigeFunctie() {
    const resultaat = await fetch("/api/mijn-endpoint");

    document.querySelector("#resultaat").innerHTML = resultaat;
}

Als we kijken naar het Single-responsibility principe, doet deze functie nu stiekem “te veel”. Niet alleen past deze de HTML aan, wat de taak van een Web Component is, de functie weet ook hoe het resultaat verzameld moet worden. Nog even los van de benodigde foutafhandeling daar omheen, of dat je deze API misschien wel vaker moet aanroepen!

Stel nu dat je klant zegt dat resultaat niet meer uit een API komt, maar uit een CSV bestand. Je moet dan onder andere op alle plekken in de code waar je de API gebruikt aanpassen. Geen leuke klus!

Een service kan hierbij helpen. In plaats van direct de fetch aan te roepen, kunnen we dat door een service laten afhandelen.

In pseudo-code:

class MijnResultaatService {
    public async function krijgResultaat() {
        return await fetch("/api/mijn-endpoint");
    }
}

Vervolgens in je Web Component, in pseudo-code:

const mijnResultaatService = new MijnResultaatService();

async function mijnGeweldigeFunctie() {
    const resultaat = await mijnResultaatService.krijgResultaat();

    document.querySelector("#resultaat").innerHTML = resultaat;
}

Je kunt nu krijgResultaat vaker hergebruiken, maar nog mooier is dat je de werking van deze functie zou kunnen aanpassen naar het verwerken van een CSV-bestand zonder dat mijnGeweldigeFunctie hier last van heeft. Sterker nog, het boeit de functie niet hoe dat gebeurt, als het maar gebeurd.

Helpers

Naast services heb je ook nog helpers. Dit zijn klassen die enkel uit statische methodes bestaand, of of modules met enkel export function in de context van TypeScript.

De standaard Math-class van TypeScript is een voorbeeld van een helper.