Tegenwoordig wordt de grafische user interface (kortweg interface of GUI) van een webapplicatie steeds belangrijker. Een goede interface moet simpel zijn: iconen en knoppen moeten de gebruiker snel duidelijk maken hoe de website of webapplicatie werkt. Daarnaast wordt er een duidelijke navigatie structuur (menu) verwacht. Bovendien moet het geheel voor de gebruiker snel en soepel aanvoelen.
Gebruiksvriendelijke interfaces
PLint-sites streeft ernaar om onze interfaces zo te ontwerpen en implementeren, dat ze voldoen aan bovenstaande eisen. We maken daarbij gebruik van diverse technieken waaronder Vue. Vue is een Javascript framework dat zich de laatste jaren enorm ontwikkeld heeft en nog steeds in populariteit groeit. In kort is de werking vergelijkbaar met het React framework van Facebook maar de zogenaamde learning curve is bij Vue veel minder aanwezig: het is gewoonweg gemakkelijk om mee te beginnen, mede door de uitgebreide, duidelijke documentatie.
Complexe en schaalbare webapplicaties
Maar dat houdt niet in dat je er geen schaalbare, complexe webapplicaties mee kunt maken, integendeel. Alibaba, de grootste webwinkel in China draait bijvoorbeeld volledig op Vue. Maar ook streamingdienst Netflix heeft enkele interne apps gebouwd met Vue. En zo kunnen we nog wel even doorgaan.
Vue in combinatie met Laravel
Hoewel er tegenwoordig diverse javascript frameworks zijn die goed werken, heeft PLint-sites voor Vue gekozen. Een van de redenen hiervoor is dat Vue heel goed te combineren is met Laravel, het php framework dat we gebruiken als backend voor onze webapplicaties.
De manier waarop Vue opgezet is, maakt het daarnaast ook heel makkelijk om het toe te passen in een bestaande applicatie. Heb je bijvoorbeeld op een bepaalde pagina een datepicker nodig om snel een datum in te vullen? Met Vue is dit heel snel geregeld!
Componenten
Vue maakt, net als de overige moderne frontend frameworks (React, Angular), gebruik van componenten. Zo kan je functionaliteit die regelmatig terugkomt makkelijk hergebruiken.
Deze functionaliteit bouwen we in zogenaamde single file components. Dit zijn componenten die geheel ingekapseld zijn en bestaan uit een template (dit geeft de HTML structuur aan), een styling blok (dat enkel toegepast wordt op dit component) en een script blok (dat zorgt voor alle interactie).
Een contactformulier is een voorbeeld van functionaliteit die je gemakkelijk als component kunt opbouwen: In het template definiëren we welke velden het formulier bevat, bijvoorbeeld velden waarin de gebruiker zijn naam, emailadres en vraag in kan vullen. Het styling blok bevat de opmaak van het formulier, waarin we bijvoorbeeld de afmetingen van de velden definiëren. Het script blok houdt zich bezig met de afhandeling van het formulier. Dit blok verzamelt de ingevulde gegevens en stuurt deze naar een server voor verdere verwerking.
Officiële plugins voor Vue
We kunnen ieder component zelf programmeren, maar soms is dat niet nodig. Sommige functionaliteit, zoals bijvoorbeeld de eerder genoemde datepicker, wordt gebruikt in bijna iedere website of webapplicatie. Voor deze functionaliteiten zijn plugins beschikbaar: pakketjes code die beschikbaar gesteld worden door programmeurs en door iedereen gebruikt kunnen worden.
Tot slot zijn er een aantal officiële Vue plugins ontwikkeld door het Vue kernteam die ervoor zorgen dat het Vue framework zelf betrekkelijk klein blijft. Deze geven ons bijvoorbeeld de routing functionaliteit (voor de navigatie) en een zogenaamde state manager. Het voordeel aan deze officiële plugins is dat ze altijd compatibel zijn met het Vue framework en dat ze volledig gedocumenteerd zijn.
Toepassing van Vue bij PLint-sites
In het laatste jaar heeft PLint-sites in diverse projecten gebruik gemaakt van het Vue framework. Zo is voor de webshop van Horren.com de product configurator geheel met Vue ontwikkeld: een behoorlijk complex stuk uit de webshop dat heel soepel werkt voor de bezoekers!
Daarnaast hebben we onlangs een eigen project gelanceerd dat volledig met Vue is gebouwd: Solo Cooking, een website met een groot aanbod van recepten voor mensen die geregeld alleen koken en eten.
Het werken met Vue geeft zo’n fijne developer ervaring, dat we ons tijdens de implementatie meermaals verbaasd hebben dat we het niet eerder hebben toegepast.
Nieuwsgierig geworden naar de mogelijkheden voor jouw bedrijf, webapplicatie of webshop? Neem dan vrijblijvend contact met ons op om te spreken over hoe we jou van dienst kunnen zijn!