Web App from Scratch

You can retrieve data, manipulate it and dynamically convert it to html elements using templating

Ik heb als eerst de flow opgezet om data op te halen uit de Storyblok API zoals te lezen is in de eerdere hoofdstukken in deze product biografie. Nadat ik de data heb opgehaald manipuleer ik dat zodat we de data verkrijgen op een manier zodat we het eenvoudig kunnen gebruiken in het project.

Het verkrijgen van data, manipuleren en converteren naar HTML templates is voor mij ondertussen aardig gesneden koek omdat ik dit al 1000 maal eerder heb gedaan in diverse projecten. Daarom was juist de reden dat ik dit als eerst heb opgepakt zodat m'n teamgenoten een bepaald 'voorbeeld' hadden die ze dan als basis hebben kunnen nemen.

You understand how you can work with an external API using asynchronous code

Again, we werken dus met die Storyblok API. Daarnaast gebruiken we ook onze eigen serverless functions waarmee we moeten werken die eveneens asynchroon zijn. In de opzet die we nu hebben, hebben we simpelweg veel gebruik gemaakt van (externe) API's, hier hebben we dan ook veel vanuit WAFS kunnen meenemen.

Ik heb, zoals eerder gezegd, data opgehaald vanuit de Storyblok API. Hiervoor is uiteraard asynchrone code nodig. Wel heb ik geprobeerd om zoveel mogelijk dingen met async-await te schrijven in plaats van de .then syntax omdat ik heb gemerkt dat het m'n code een stuk cleaner een eenvoudiger begrijpbaar maakt. Hoewel het degelijk asynchroon is leest het als synchrone code.

Verder heb ik ook Gijs geholpen bij het schrijven van de logica voor het ophalen van events, waar we uiteindelijk Promise.all hebben gebruikt (zie onderstaand). Ik vind dit persoonlijk best een mooi patroon omdat je dan, hoewel je twee calls doet, ze wel parallel aan elkaar doet waardoor de ene call niet hoeft te wachten op de andere.

const [pages, events] = await Promise.all([
    Storyblok.get('cdn/stories', { version }),
    Storyblok.get('cdn/stories', { starts_with: 'events', version })
])