MVC

Na aanleiding van het a1 mondeling voor project tech ben ik gaan kijken naar MVC models. Danny gaf mij als feedback om te kijken naar MVC als ik hier tijd voor had om zo mijn code overzichtelijker te maken. Alle javascript die ik serverside uit voerde gebeurde in mijn server.js file in de root van mijn project.

Wat is MVC?

MVC staat voor Models, Views, Controllers drie componenten waarin je de code kunt opsplitsen om zo krachtigere en leesbaardere code te schrijven.

View

Als gebruiker kom ik in de browser op een pagina terecht, dit is de View, eigenlijk alles wat de gebruiker ziet. In de View heb ik interactie, ik wil bijvoorbeeld op een knop drukken. Aan de knop zit een bepaalde actie gekoppeld, deze actie wordt uitgevoerd in de Controller.

Controller

De controller wordt dus gewaarschuwd door de View dat er een event plaats vindt. In mijn geval heeft de Controller informatie van de database of Spotify API nodig om het event te kunnen verwerken. Deze informatie en connecties staan in de Models.

Model

De controller zal aan de hand van het event in de Models informatie updaten of ophalen. Wanneer dit is geslaagd zal er vanuit Models een signaal worden gegeven naar View dat er informatie is gewijzigd. View haalt de gewijzigde informatie op uit Models en de gewijzigde informatie wordt aan de gebruiker weergegeven.

Deze cirkel zal zich voor elk event voordoen, door het scheiden van handelingen maak je de code overzichtelijker en is het makkelijker om bugs en errors te vinden en verhelpen. MVC is dus een wisselwerking tussen componenten.

Mijn Code

Om de uitleg van hier boven plat te slaan en toe te passen op mijn eigen code kan ik het als volgt indelen:

In Models staat het mongoose schema waarin informatie van de database wordt verwerkt, en wordt er in models connectie gemaakt met de Spotify API. In Views staan alle Handlebars templates. Tot slot in Controllers staan alle functies die uitgevoerd moeten worden wanneer er bijvoorbeeld een gebruiker geliked wordt.

De drie componenten communiceren met elkaar door middel van Module.exports en ``require``` in models exporteer ik bijvoorbeeld mijn mongoose schema:

Module.exports = Users

en in Controllers haal ik de export weer op om te kunnen gebruiken met:

const Users = require('../models/users')

Bij require doe ik eerst ../ in het path om uit de Controllers folder te gaan en vanaf daar naar Models te kunnen navigeren.

Ik heb mijn code verder opgesplitst door gebruik te maken van een aparte routes file. Hierbij koppel ik de routes los van de functies die je anders binnen je route zou uitvoeren. in plaats van dat ik

app.get('/home', (res, req))

gebruik, maak ik nu gebruik van

router.get('/home', controller.functie)

hiermee verwijs ik naar de route die geladen moet worden en daarna naar de controller file met daarin een gedefinieerde functie. ook hier maak ik weer gebruik van export en require om te communiceren tussen de verschillende componenten. hierbij is controller.functie gerequierd vanuit Controllers door middel van

const controller = require('../controllers.userController')

en wordt er in de controller file de functie geëxporteerd doormiddel van

Module.exports = { functie }

Op deze manier is mijn code dus in verschillende componenten opgedeeld aan de hand van het MVC model, het helpt mij om het overzichtelijker te maken en sneller te kunnen zien waar bugs of errors zitten.