VPRO Film van het jaar met Vue.js

The Joker is door de stemmers van de VPRO film van het jaar verkiezingen uitgekozen tot dé film van 2019. Heb jij gestemd? Je kon maximaal 10 films selecteren, nog even lezen waar die spannende thriller ook alweer over ging en vertellen waarom toch die mooie animatiefilm jouw nummer 1 is dit jaar.

Wat was jouw favoriete film van 2019? Met gepaste trots kan ik zeggen dat wij voor de VPRO afgelopen jaar de Verkiezing Film van het jaar 2019 hebben gemaakt.

Wat we hebben gemaakt is een applicatie die op één pagina van VPRO.nl ingeladen wordt. Deze applicatie heeft verschillende views. Je kunt tussen de volgende views navigeren:

• Overzicht van alle uitgebrachte films. Zoek naar een film, filter op genre en voeg films toe aan je favorieten.
• Detailpagina van een film. Lees een korte beschrijving van de film.
• Breng je stem uit. Een formulier om je stem uit te brengen, pas de volgorde van je top 10 aan en geef een korte motivatie voor jouw selectie.
• Bedankt/deelpagina. Het overzicht van iemands selectie. Deze pagina kun je delen met anderen.

De grootste uitdaging? Ook al zijn er dus verschillende views en heb je het idee dat je lekker zit te navigeren, je blijft eigenlijk op dezelfde pagina.

Het script dat wordt ingeladen is verantwoordelijk voor het opzetten en laten functioneren van de applicatie. Het navigeren tussen de verschillende views gebeurt aan de frontend.

Hoe dan?

Dit type applicatie wordt een single page application genoemd (spa). Vue.js is een JavaScript framework dat erg geschikt is voor het maken van dit type applicaties. Het biedt de mogelijkheid om user interfaces te maken door verschillende componenten te definiëren en aan te geven hoe deze moeten reageren op veranderingen binnen de applicatie. Het uitgangspunt hierbij is de data die gebruikt wordt in de verschillende componenten. De developer geeft dus de opdracht wat het effect moet zijn van wijzigingen van de data binnen de applicatie.

Dit klinkt misschien nog wat abstract, daarom een voorbeeld: In deze applicatie wordt een lijst van favoriete films bijgehouden (data). Wanneer je een film toevoegt of verwijdert wordt deze lijst aangepast dus de data verandert. Als de data verandert, verandert automatisch de weergave van de componenten die gebruik maken van deze data. In dit voorbeeld zie je dan dat het plusje om een film toe te voegen een minnetje wordt om de film weer te verwijderen en omgedraaid.

Vue was voor mij new 🤓

Tijdens September Labs, een maandelijkse periode van twee dagen waar we de ruimte hebben om te werken aan eigen projecten of het leren van nieuwe technieken, ben ik begonnen met het bouwen van de basis voor deze applicatie. Op deze manier kon ik op een relaxte manier kennis maken met Vue.js voor het bouwen van een applicatie voor een opdrachtgever. Later kon ik doorbouwen op deze basis.

Een van de punten waar ik veel tijd aan heb besteed is uitzoeken hoe de communicatie tussen componenten precies werkt.

Je bent in Vue redelijk vrij in hoe je dit opzet. Dit is prettig maar zorgt ook voor enige verwarring als je net begint.

Wanneer je eenmaal een systeem hebt opgezet kun je gemakkelijk nieuwe features toevoegen en wijzigingen maken omdat je voor een bepaalde manier van werken hebt gekozen. Dit maakt het makkelijker voor een developer om over de applicatie te redeneren en beslissingen te maken.

Meer weten? In mijn volgende blog ga ik wat dieper in op dit onderwerp door uit te leggen hoe de communicatie tussen de componenten en de navigatie tussen de verschillende views werkt.