Week 4
We begonnen de les met een Tech Design rationale, waarin we ons focusten op het formuleren van een fetch onderzoeksvraag. We bespraken of alles in één component gemaakt moet worden en maakten onderscheid tussen statische componenten (zoals headers en footers, die niet veranderen) en dynamische componenten (die wel veranderen).
Danny kwam daarna langs om te vertellen over basis API-architectuur, async-codering en fetching. We kregen uitleg over Sync vs Async, Async in JavaScript, Dataformaten, API-architectuur en Client vs Server fetching. We leerden dat je met asynchroon programmeren in JavaScript kunt bepalen wanneer je code uitvoert, wat handig is als je met API's werkt. Dit komt omdat je moet wachten op je gegevens voordat je ze kunt gebruiken want javascript kan maar 1 ding laden op een moment.
/* Open a new XMLHttpRequest */
function getData(url, callback) {
let xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.onload = function () {
callback(xhr.response);
};
xhr.send();
}
/* Log the data once request has finished */
function logData(data) {
console.log(data);
}
getData('https://opendata.rdw.nl/resource/mz4f-59fw.json', logData);
In JavaScript worden callbacks gebruikt om code asynchroon uit te voeren. Een callback is een functie die je als argument geeft aan een andere functie. Deze functie voert vervolgens code uit op de achtergrond. Zodra de achtergrondcode klaar is, wordt de callbackfunctie aangeroepen.
fetch(url)
.then(
function (response) {
/* Log output of response NOT data */
console.log(response);
/* .json resolves to a JavaScript object */
response.json().then(function (data) {
console.log(data)
});
}
)
.catch(function (err) {
console.log('Fetch Error', err);
});
Een Promise in JavaScript geeft de voltooiing (of mislukking) weer van een asynchrone actie en de bijbehorende waarde. Een Promise kan slechts een keer slagen of falen. Het kan niet meerdere keren van status veranderen of wisselen tussen slagen en falen.
async function getData(url) {
/* Paused until the request completes. */
const response = await fetch(url);
console.log(response);
/* Wait for the JSON. */
const data = await response.json();
console.log(data);
}
getData('https://opendata.rdw.nl/resource/mz4f-59fw.json');
Een async functie in JavaScript is een functie die de mogelijkheid van het gebruik van het await sleutelwoord verwacht om asynchrone code aan te roepen. Async/await dient als syntactische suiker bovenop promises, waardoor asynchrone code gemakkelijker te schrijven en te lezen is. Async/await helpt de promise functie, waardoor code gemakkelijker te schrijven en te lezen is.
Als je werkt met asynchrone code in JavaScript, is het belangrijk om fouten goed op te vangen:
- Gebruik .catch: Als er iets misgaat met een promise, gebruik dan .catch om die fout te vangen.
- Gebruik if-statements: Controleer met if-statements of dingen goed gaan, bijvoorbeeld door te kijken naar de statuscodes.
- Gebruik throw: Als je een fout ontdekt, kun je throw gebruiken om die fout duidelijk te maken.
We kregen vandaag een presentatie van Rijkswaterstaat over waterstanden. Ze toonden hoe ze omgevingsdata gebruiken om 3D-presentaties te maken. Dit helpt om de frequentie en hoogte van waterstanden in Nederland duidelijker te maken. Ze gebruikten echte objecten voor vergelijking, wat de visualisatie vereenvoudigde.
Om onze projecten levendiger te maken, hebben we het vandaag gehad over het gebruik van animatie. Dit kan door middel van video's of interactieve methodes in de code. Animaties kunnen worden gemaakt met CSS-styling, door transacties, positiewijzigingen of kleurwijzigingen. Voor complexere animaties kunnen we animatietools gebruiken, waarbij het gebruik van keyframes essentieel is voor een soepele uitvoering.
- Animeer binnen SVG-bestanden.
- Gebruik JavaScript voor animatie; probeer de GreenSock-bibliotheek greensocks.com
- Zorg ervoor dat je de animatie-oefeningen van vandaag afrondt en in de wiki plaatst
- Maak gebruik van D3-vormen voor je projecten