Wat is Vue?
Vue is een framework (zeg maar: een technische oplossing) op basis van JavaScript dat zich heel goed leent voor het ontwikkelen van onder andere dynamische, interactieve webapplicaties en webshops. Met Vue bouw je relatief eenvoudig interfaces, omdat het een toolkit aanbiedt waarmee je met groot gemak herbruikbare componenten kunt bouwen. De componenten kunnen op zeer dynamische wijze op het scherm gezet worden. Denk bijvoorbeeld aan een zoekbalk in een webshop. Als je naar een product zoekt, krijg je direct suggesties die bij jouw zoekopdracht passen. De interface van de applicatie wordt als het ware gemanipuleerd zonder de pagina te verversen.
Het framework is ontstaan vanuit de behoefte van eindgebruikers aan dynamische webapplicaties en webshops met een feilloze interactie en een goede c.q. snelle performance. Aangezien Vue door veel grote organisaties, zoals GitLab, Nintendo, Alibaba, L’Oréal, Happy Socks, Behance en MijnOverheid.nl, wordt gebruikt, is er een commercieel belang om het framework actief te onderhouden. Wat daarnaast zeker ook meespeelt, is het feit dat steeds meer eindgebruikers – verwend als ze zijn door de hoge performance van bijvoorbeeld Facebook en YouTube – simpelweg verwachten dat élke online applicatie aan dezelfde hoge standaard voldoet. Ook met een trage of zelfs helemaal géén internetverbinding.
Vue is ideaal voor Single Page Applications
Vue wordt veel toegepast voor het creëren van gebruiksvriendelijke Single Page Applications (SPA’s): websites en apps die uit één pagina bestaan en gebruikers hierdoor een betere gebruikservaring bieden. Dat werkt zo: de eerste keer dat je een pagina bezoekt, wordt deze in zijn geheel ‘op traditionele wijze’ ingeladen. Vraag je daarna de pagina opnieuw op, dan worden alleen de gewijzigde data ingeladen. De overige – vooral statische – content (zoals het menu en de footer) heb je immers de eerste keer al ingeladen. Hierdoor (her)laadt de pagina supersnel en dát komt de gebruikservaring uiteraard ten goede!
Voordelen van Vue voor klanten en gebruikers
Dat we bij Netvlies graag met Vue werken, komt in de eerste plaats doordat Vue heel veel voordelen voor klanten en gebruikers biedt. Ik noem de belangrijkste:
#1 Snel componenten bouwen
Vue is te gebruiken als een toolkit waarmee je snel componenten met specifieke functies kunt opbouwen. Vergelijk het maar met het principe van legoblokjes. Net als bij lego maak je met Vue met behulp van losse bouwstenen iets dat in essentie herbruikbaar is, om er vervolgens een groter geheel mee in elkaar te zetten. Ook kunnen bij Vue meerdere bouwstenen in één bouwpakket hetzelfde zijn en vormen alle bouwstenen samen uiteindelijk één creatie.
Hoewel ook de bouwstenen van Vue bepaalde vaste eigenschappen hebben (net zoals legoblokjes bepaalde afmetingen hebben), is het mogelijk om in creatieve vrijheid allerlei verschillende varianten te bedenken, zónder buiten de regels te treden en een inconsistente lay-out te bouwen. Dat laatste zou immers slecht zijn voor de gebruiksvriendelijkheid en dát wil je uiteraard voorkomen. Met een consistente lay-out creëer je juist herkenningspunten, waardoor gebruikers lekker makkelijk ‘op de automatische piloot’ kunnen navigeren.
#2 Gebruiker krijgt heldere feedback
Vue geeft de mogelijkheid om een systeem directer te laten reageren op de input van de gebruiker en dynamisch feedback te geven over wat het systeem aan het doen is. Zo kun je via een laadscherm bijvoorbeeld laten zien dat er iets met de input van de gebruiker wordt gedaan (zoals het maken van een berekening) en kan direct feedback worden gegeven door in een split second het resultaat van een simpele berekening op het scherm te tonen. Doordat de pagina niet in z’n geheel hoeft te worden ververst, is die feedback razendsnel.
Ook is het met Vue makkelijker om in een complexe applicatie – waarbij veel elementen op een pagina worden getoond – een component op een andere plek op de pagina te manipuleren op basis van een actie elders. Klinkt dat ingewikkeld? Denk maar eens aan wat er gebeurt als je in een webshop een item toevoegt aan je winkelmandje. In zo’n geval wordt in de header bij het icoontje van het winkelmandje vaak een tellertje getoond met het aantal producten in je winkelmandje en wordt het tellertje opgehoogd naarmate je meer producten aan je winkelmandje toevoegt.
In een traditionele setup kan dit natuurlijk ook, maar met een Vue-implementatie kun je deze gegevens ‘bewaren’ en hergebruiken voor meerdere doeleinden. Geen producten in je winkelmandje kan bijvoorbeeld betekenen dat het tellertje bij het winkelmandje in de header niet wordt getoond, maar kan ook betekenen dat de afreken knop niet zichtbaar is in de applicatie. Meerdere elementen op de pagina kunnen dus reageren op een scenario van een ander element.
#3 Officiële plugins
Er zijn voor Vue tal van officiële plug-ins beschikbaar, zoals een vertaal-plug-in (om je applicatie meertalig te maken) en plug-ins voor state management doeleinden. State management houdt in dat een complex web aan data op een centrale plek in een applicatie wordt bewaard, zodat die data vanuit elke positie c.q. pagina binnen de applicatie opnieuw kan worden gebruikt.
De applicatie is hierdoor eenvoudiger te onderhouden voor developers. Het maakt de applicatie bovendien schaalbaar. De logica hoeft niet steeds te worden herhaald en kan op meerdere plekken in de applicatie worden toegepast. Ook hierbij kun je weer denken aan het voorbeeld van het winkelmandje met het tellertje bij het winkelmand-icoontje.
#4 Laadsnelheid
Bij JavaScript geldt: hoe kleiner het JavaScript framework, hoe beter het is voor de laadsnelheid. JavaScript kost namelijk relatief veel laadtijd per MB. De bundelgrootte van Vue is écht klein: slechts 18 tot 21 KB. Vue is daarmee het kleinste JavaScript framework en neemt stukken minder laadtijd in beslag dan andere frameworks. Waarom die laadsnelheid zo belangrijk is, kun je lezen in een blog van mijn front-end-collega Jelmer.
#5 Pagina één keer laden
Wanneer je bij een traditionele webshop – dus zónder SPA – enkele filters selecteert en vervolgens de zoekfunctie activeert, wordt de hele pagina ververst. Eerst verschijnt kort een blanco pagina, vervolgens wordt de volledige content opnieuw geladen en daarna verschijnen de zoekresultaten. Doe je dit op een smartphone of tablet, dan zijn die filters vaak schermvullend en ben je ze gewoon even ‘kwijt’ als de pagina wordt ververst. Bouw je een SPA, dan hoeft niet de hele pagina te worden ververst en ‘onthoudt’ de pagina dat filters open staan. Het is zelfs mogelijk om realtime feedback te geven over het aantal gevonden resultaten.
#6 Een van de grote frameworks
Vue is inmiddels een van de grotere frameworks. Dat betekent dat regelmatig updates en features beschikbaar komen en dat er veel goede documentatie te vinden is. Uiteraard profiteer je daar als klant van mee. Immers: doordat we kunnen putten uit een flinke standaard set met functionaliteiten hoeven we het wiel niet helemaal opnieuw uit te vinden en dát scheelt aanmerkelijk in de kosten. Bovendien kun je ervan uitgaan dat de oplossing door de regelmatige updates veilig is.
Extra voordelen voor developers
Naast al die klant- en gebruikersvoordelen werkt Vue ook voor developers heel prettig. Kijk maar:
#7 Onafhankelijk werken
Voordat we met Vue werkten, waren back-end en front-end veel meer met elkaar verweven. Met Vue kunnen we de back-end en de front-end van een applicatie volledig onafhankelijk van elkaar opzetten en uitwerken. Hierdoor zitten we niet meer onbedoeld in elkaars vaarwater. Dit maakt het ontwikkelproces van jouw applicatie efficiënter.
#8 Adequate service
Schiet je een ticket in vanwege een bug in de applicatie, dan is het dankzij de Single Page-opzet vaak makkelijker en sneller te achterhalen of het een front-end of een back-end issue is. Beide disciplines zijn bij een SPA namelijk volledig gescheiden opgebouwd.
#9 Makkelijker testen
Met Vue is het eenvoudiger om gescheiden te testen wat de API moet terugsturen. Wil je bijvoorbeeld alle blogberichten op een website aflopend op publicatiedatum tonen, dan kun je dat heel gemakkelijk testen in een unit test zónder de hele pagina te hoeven renderen. Je kan dus specifiek op dit ene onderdeel testen of de API de juiste response geeft. Wil je daarnaast ook testen of de visuele weergave klopt? Dan kun je in de front-end een aanvullende test schrijven. De keuze waar je wél en niet test is hierbij vrij te bepalen, waardoor je een aantal tests veel compacter en sneller kunt maken.
#10 Beter testen
Vue biedt een goed gedocumenteerde automatische test-integratie, waardoor je de web componenten die je bouwt geïsoleerd kunt testen. Wil je bijvoorbeeld dat een button in een specifieke huisstijlkleur van je klant wordt getoond, dan kun je alleen dat element testen. Dat is erg fijn voor de continuïteit en de stabiliteit.
Met Vue creëer je de ultieme gebruikerservaring
Samenvattend kun je gerust stellen dat Vue – zeker in combinatie met SPA – dé manier is om webapplicaties en webshops met een gebruikservaring van de bovenste plank te ontwikkelen. Er zijn daarnaast veel developers in de markt die Vue kennen als hun broekzak. Ook is voldoende documentatie beschikbaar, waardoor je niet snel vastloopt met een vraag. Doordat Vue een open source framework is, kun je bovendien rekenen op een regelmatige stroom van (security) updates en nieuwe features. Dát maakt werken met Vue – in elk geval voor ons bij Netvlies – onweerstaanbaar.