Tijdens ons vorige kijkje in de keuken vertelden we hoe we de miljoenen adressen met Elasticsearch doorzoekbaar maken en hoe we die via een GraphQL API naar ons frontend brengen. In dit laatste deel van de serie willen we vertellen over het ontbrekende stukje van deze puzzel: het Vue-component dat we gebouwd hebben om deze zoekacties voor onze gebruikers mogelijk te maken.
De reactivity en modulariteit van Vue passen ook goed bij de manier waarop we onze frontend-code willen inrichten.
Om complexe interacties in onze frontend-apps te bouwen, hebben we slimme en gebruiksvriendelijke tools nodig. React, Angular en Vue zijn de drie grootste spelers in frontend-land. Wij hebben gekozen voor Vue omdat we de opzet en API’s van Vue eenvoudiger vinden dan die van React en Angular. De reactivity en modulariteit van Vue passen ook goed bij de manier waarop we onze frontend-code willen inrichten.
Alle gedeelde frontend-code is georganiseerd in een aparte interne Git-repository, Arch. Hier worden alle Vue-componenten bijgehouden, inclusief styling. Deze componenten werken zo zelfstandig mogelijk, zodat ze eenvoudig in onze frontend-apps te gebruiken zijn. We maken daarvoor veel gebruik van custom events en slots in Vue.
Op deze manier kunnen we onze componenten generiek houden en tegelijkertijd in iedere frontend-app precies laten doen wat we op dat moment nodig hebben.
De meeste van onze interactieve pagina’s zijn single page applications. Deze zijn helemaal in Vue geschreven en communiceren met onze backend via GraphQL. We hebben ook pagina’s die server-side worden gerenderd (zoals onze publieke landingspagina’s), waar Vue alleen wordt gebruikt om een paar onderdelen van de pagina mooier te maken. Vue leent zich prima voor beide use-cases.
In het geval van onze zoekbalk voor adressen werken de Vue-componenten grofweg zo:
Aardig wat bewegende delen dus. Om de kwaliteit van al die frontend-code beheersbaar en testbaar te houden, gebruiken we TypeScript.
Vue is een Javascript-framework. Helaas staat Javascript niet bepaald bekend om z’n consistente type-checks. Om dat leed enigszins te verzachten, heeft Microsoft TypeScript in het leven geroepen. Met Typescript zijn nog lang niet alle uitdagingen uit Javascript-land opgelost, maar de typing zorgt er in ieder geval voor dat de code van onze Vue-componenten zo stabiel mogelijk is, ook in productie.
Vervolgens zorgen we er met TypeScript voor dat onze code testbaar en correct is en blijft.
Met Apollo worden onze GraphQL schema's netjes geïmporteerd als TypeScript types, gecheckt door de compiler en in de runtime van je browser. Daardoor kunnen we zo goed mogelijk garanderen dat we alleen geldige queries naar ons backend sturen en alleen geldige antwoorden terugkrijgen. Voor jou betekent dat: vloeiende interactie met onze applicaties, zonder foutmeldingen of andere vervelende verrassingen.
Onze Vue en TypeScript-code wordt gebouwd met Webpack. Hoe we dit precies geconfigureerd hebben is genoeg voor een artikel op zich, dus daar zullen we een andere keer dieper op ingaan. In het kort komt het erop neer dat alle Vue-componenten uit elkaar worden getrokken. De afzonderlijke onderdelen (Pug templates en TypeScript code) worden vervolgens gecompileerd en in stukjes geknipt voordat het in de CI/CD pipeline naar ons CDN wordt geüpload.
De <script lang=”ts”></script> tags in het screenshot hierboven instrueren Webpack om de inhoud van die tags door de TypeScript type-checker en compiler heen te halen. Onze GraphQL API is typed en we hebben deze types in TypeScript overgenomen. Hierdoor kan de type checker dus ook de GraphQL queries die naar de backend gaan type-checken en ons een seintje geven als iets niet voldoet aan ons GraphQL schema.
Het laatste stuk van de puzzel over hoe we miljoenen adressen binnen miliseconden doorzoekbaar maken, is het Vue-component. Dit component maakt de interacties op de website die onze design- en product-teams bedenken mogelijk, zoals het zoeken en selecteren van adressen met autocomplete.
Dankzij Vue kunnen we deze complexe interacties snel en overzichtelijk bouwen op ons frontend. Vue heeft de reactivity en modulariteit die goed passen bij de manier waarop we onze frontend-code inrichten. Vervolgens zorgen we er met TypeScript voor dat onze code testbaar en correct is en blijft. En op die manier helpen we duizenden mensen per dag om alles te weten te komen over elk adres in Nederland.
Een huis kopen in het jaar van corona. Dit is waar je op moet letten als je een huis gaat kopen in tijden van economische onzekerheid.
In 2015 werd er voor elk Nederlands huis een voorlopig energielabel verstrekt. Maar dat zegt eigenlijk niet zoveel. Walter geeft je het verschil tussen voorlopig en definitief en waarom het zo belangrijk is.