Intuïtieve en schaalbare webapplicaties realiseren met het nieuwe Vue 3

Vue is een framework dat gemaakt is op basis van de scripttaal Javascript. Binnen ons bedrijf Cube zijn wij al enige tijd verknocht aan dit pareltje van een Javascript framework en passen we deze techniek in verscheidene projecten toe. Vue biedt ons de mogelijkheid om complexe vraagstukken op te lossen en schaalbare, interactieve interfaces vrij snel op te bouwen.

sjors-vuejs-3-1.jpg

Toepassing van Vue.js voor onze klanten

De tool is bijvoorbeeld heel geschikt om flows neer te zetten waarbij de volgorde van stappen afhankelijk zijn van verschillende variabelen. Een goed voorbeeld hiervan is de “keuze engine” van Pure Energie, waarbij de gebruiker een flow kan doorlopen om het juiste energiepakket samen te stellen. Doordat we Vue.js hebben ingezet op belangrijke plekken in de website kunnen we efficiënt doorontwikkelen, A/B testen en optimalisaties doorvoeren.

Ook hebben wij in de technische architectuur, Vue.js toegepast voor Quality Wellnessresorts hierbij betreft het de flow voor reservaties in één van hun resorts. Hierdoor kun je snel in heldere stappen jouw ideale dagje sauna samenstellen, bijvoorbeeld bij Thermen Bussloo, Thermen Berendonck, Thermen Bad Nieuweschans of Thermen Soesterberg.

Deze twee showcases zou je kunnen scharen onder een middelgrote Vue applicatie. Waarbij enkele core functionaliteiten van de website zijn uitgewerkt met Vue. Echter is het framework niet alleen geschikt om enkele segmenten van je website of webapplicatie uit te werken, ook kan je er prima een hele website of webapplicatie mee optuigen, waarbij het zelfs mogelijk is om de website serverside te laten renderen. Dit zorgt er onder andere voor dat de website razendsnel kan worden en verfijnde animaties zoals page transitions mogelijk zijn, fantastisch toch?!

sjors-vuejs-3-2-1.jpg

Elk voordeel heeft z’n nadeel

Een key feature van Vue is dat de templating, logica en eventueel de styling van een pagina of component allemaal in één bestand kunnen plaatsvinden. Dit maakt het lekker overzichtelijk en zo hoef je niet steeds te zoeken naar de corresponderende bestanden. Voor een kleine tot middelgrote applicatie is dit handig en werkt dit fijn, toch is mijn ervaring dat met grotere projecten die met Vue gebouwd worden dit voordeel zich ook enigszins tot een nadeel kan uiten.

Wanneer een applicatie wordt (door)ontwikkeld en hierdoor groter in omvang word is het te begrijpen dat door het toevoegen van meer data, (lifecycle) methods, (computed) properties en (child) components je met meerdere ontwikkelaars sneller het spoor kwijt raakt. In vue kun je m.b.v. mixins logica makkelijker distribueren naar verschillende componenten en hierdoor de angel van complexiteit er een stukje uithalen en daarnaast DRY te werk gaan. Maar toch heeft het gebruiken van mixins binnen Vue ook zijn nadelen.

Terzake

Één van de grootste nieuwe key features van Vue 3.0 is de integratie van de composition API. Deze feature wordt nu volledig opgenomen in Vue en is daarmee standaard beschikbaar. De composition API biedt als grootste uitkomst dat de code in grotere mate generiek kan worden opgezet en hiermee beter en makkelijker is the distribueren naar verschillende componenten. Waarbij het voorheen gebruikelijk was om logica en data op component niveau te plaatsen, wordt in Vue 3 met m.b.v composition API gestuurd om de logica en data verder los te trekken van componenten en dit globaler te definiëren. Ter verduidelijking is hieronder een voorbeeld waarbij links de distributie van facetten zijn te weergegeven o.b.v. de Options API en rechts de distributie van facetten o.b.v de composition API.

Wat betekent dit voor de klant?

Zoals te zien is het rechter voorbeeld een stuk gestructureerder. Dit zorgt voor meer overzicht en duidelijkheid, dit is voor het beestje wat developer heet essentieel. Maar ook voor de klant kan deze ontwikkeling positieve uitkomsten bieden.

Doordat er meer handvatten worden geboden voor orde heeft het uiteindelijke product meer structuur. Hierdoor blijft de applicatie meer overzichtelijk, onderhoudbaar en betrouwbaar.

Wat heeft Vue 3 nog meer in zijn petto?

Naast de composition API biedt Vue 3 nog een scala van nieuwe mogelijkheden en features, enkele voorbeelden hiervan zijn:

  • Teleport (De mogelijkheid om op bepaalde plekken o.b.v. een conditie of event een component makkelijk in een ander component te plaatsen, denk aan een modal waarbij de inhoud variabel kan zijn).

  • Suspense (Hierdoor kun je een fallback component tonen totdat het andere component volledig geladen is, bijvoorbeeld het tonen van een laad icoon).

  • Multiple root elements - (Kunnen plaatsen van meerdere root elementen binnen een component, hierdoor blijft de HTML nog meer overzichtelijk aangezien je minder hoeft te nesten).

  • Multiple v-models - (hierdoor is het mogelijk om op component niveau meerdere waardes van een child component te koppelen (two-way binding)).

  • Betere Reactivity - (Kort Gezegd is reactivity een begrip waarbij op plaats 1 data wordt gemodificeerd en op plaats 2 een nieuwe weergave van deze data wordt getoond, de methode die hiervoor zorgt is in Vue 3 herzien waardoor deze magie nog magischer wordt).

De toekomst

Mijn eerste bevindingen nadat ik met Vue 3 en de composition API heb gespeeld, zijn zeer positief. Ik vind dat met de komst van versie 3, vue in het algemeen een goede stap heeft gemaakt, waarbij het zich neerzet als een nog volwassener Javascript framework. Je ziet dat de laatste jaren in de web-development steeds meer een verschuiving plaatsvindt waarbij het aandeel wat javascript hierin speelt steeds groter wordt, zowel front- als backend. Denk hierbij aan een (headless) CMS aangestuurd met een RESTful API waarbij de front-end volledig is opgetuigd m.b.v. een Javascript framework. Ik vind dat op het gebied van front-end Vue zich hierbij in het lijstje plaatst als één van de “best to use” frameworks.

Enthousiast geworden? Wij denken graag met jouw organisatie mee bij het neerzetten van de technische architectuur van IT en web projecten met de hierbij in te zetten technieken.

Tegenwoordig werkt Cube dit in Design Sprints met onze klanten uit waarbij wij heldere technische afwegingen overleggen in samenwerking met jou. Voor Cube zijn de te kiezen technieken nooit een doel op zich, het gaat hierbij om de oplossing die wij gezamenlijk weten te realiseren en de meest efficiënte weg ernaartoe. Ben jij klaar voor een digitaal avontuur?

Wij wel, Tot snel!