Kijkje in de keuken: Hoe Walter Living Vue en TypeScript gebruikt om zoekacties van gebruikers mogelijk te maken.

Kijkje in de keuken: Hoe Walter Living Vue en TypeScript gebruikt om zoekacties van gebruikers mogelijk te maken.

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.

Vue

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:

  1. Je typt een straatnaam in het veld in, zoals Dorpstraat.
  2. Het Vue-component wacht een paar milliseconden om zeker te weten dat je niet nog wat wilde typen.
  3. De zoekbalk stuurt een GraphQL-query naar onze backend met het zoekwoord.
  4. De backend geeft een set adressen terug aan het Vue-component.
  5. Het Vue-component rendert voor elk van deze adressen een regel – elk weer een eigen Vue-component – in een paneel met zoekresultaten.
  6. Jij klikt op de beste match. Het Vue-componentje voor deze regel vuurt een globaal event af waar de zoekbalk naar luistert.
  7. De zoekbalk stuurt je onze applicatie in, waar je alles te weten komt over het adres dat je aanklikt.

Aardig wat bewegende delen dus. Om de kwaliteit van al die frontend-code beheersbaar en testbaar te houden, gebruiken we TypeScript.

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.

Walter Living: kijkje in de keuken

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.

Conclusie

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.

Meer verhalen van Walter Living

Top 10 gemeentes waar de WOZ waarde 2020 harder is gestegen dan de woningwaarde
Adine Rooyackers |

Top 10 gemeentes waar de WOZ waarde 2020 harder is gestegen dan de woningwaarde

Langzaam maar zeker zijn alle WOZ waardes van 2020 bekend. In deze top 10 gemeenste gemeenten van Nederland zit je met een bezwaar tegen de WOZ waarde van 2020 waarschijnlijk wel goed.

huizenfeiten · 2 minuten leestijd
Voorlopig of definitief energielabel: wat zegt dat nou precies?
Aimée Schuurmans |

Voorlopig of definitief energielabel: wat zegt dat nou precies?

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.

huizenfeiten · 3 minuten leestijd

Klaar om Walter te proberen?

Maak alle juiste huizenjacht keuzes — Geen BS. Beloofd.
Probeer Walter gratis
Alle verhalen
Volgend verhaal
Top 10 gemeentes waar de WOZ waarde 2020 harder is gestegen dan de woningwaarde