Omdat het zo nu en dan ook wel eens verfrissend is te kijken wat er zich allemaal afspeelt buiten onze gebruikelijke WordPress bubbel, is Level Level op vrijdag 16 februari met een team developers afgereisd naar Amsterdam voor Vue.js Conference 2018.
In een grote zaal met een intimiderend groot projectiescherm was een mooi gevarieerd programma te volgen met Vue.js gerelateerde talks op het gebied van front-end development, workflow optimalisaties en het optimaliseren en hergebruiken van code.
Vue.js… wat is dat?
Wat is Vue.js hoor ik je denken. Vue.js is een relatief nieuw, maar snel in populariteit groeiend Javascript framework (vergelijkbaar met frameworks als React of Angular) waarmee het eenvoudig wordt je applicatie te verrijken met extra dynamiek en interactiviteit. Hiermee kunnen we de gebruikerservaring naar een hoger niveau tillen.
Je kunt volledige applicaties ontwikkelen in Vue.js, of gebruiken om specifieke onderdelen van een website of platform te laten reageren op gebruikersinput, zonder dat daarvoor de hele pagina opnieuw geladen hoeft te worden.
“Het was tof om eens op een conferentie aanwezig te zijn buiten de gebruikelijke WordPress bubbel. Een mooi gevarieerd programma. Al met al een leerzame en inspirerende dag met ‘impressive stuff’!”
Scaling Vue in an existing stack
Na de openings keynote van Vue.js founder Evan You begon de dag direct goed met de talk van Roman Kuba waarin hij zijn ervaringen deelt met het implementeren van Vue.js in bestaande projecten. Dit heeft ons betere inzichten gegeven in het toepassen van Vue om onderdelen binnen een website interactiever te maken. Zo hebben wij dit al toegepast in het schadeformulier van Autotaalglas.
“Het was leuk bij een conferentie te zijn van zo’n jong JavaScript framework, dat het op moet nemen tegen de grotere frameworks zoals AngularJS en React. En om te zien dat er zoveel developers al bezig zijn met Vue.js, – voelde goed om daar onderdeel van te zijn!”
State Animation: Getting them right
Bij de talk ‘State Animations: Getting them right van Eduardo San Martin Morote werd op amusante wijze verteld hoe met behulp van Vue animaties, een website geoptimaliseerd kan worden. Er werden voorbeelden gegeven hoe je kunt voorkomen dat animaties abrupt worden afgebroken, maar vloeiend in elkaar overgaan door gebruik te maken van ‘tweening’. Het is belangrijk dat animaties zo natuurlijk mogelijk aanvoelen voor de gebruiker. Bewegingen zijn in het echt nooit lineair, dit kan op het scherm nagebootst worden door middel van easing: Het langzaam versnellen of vertragen van je animatie.
Unit testing in Vue.js
Een veel voorkomend probleem is, vooral bij wat grotere projecten, dat zodra er bij doorontwikkeling nieuwe functionaliteiten toegevoegd worden, dit van invloed kan zijn op andere functionaliteiten binnen je applicatie. Er kunnen bugs ontstaan zonder dat je je er bewust van bent als developer.
Met een unit-test test je de werking van een specifieke functionaliteit binnen je website. Zo kan je na het wijzigen van code ervoor zorgen dat automatisch alle bestaande functionaliteiten van je applicatie getest worden. Hiermee kun je dus tijdens het doorontwikkelen eenvoudig checken of alle functionaliteiten binnen je website nog naar behoren werken.
“Erg gaaf was de talk van Ives van Hoorne van CodeSandbox. Ives is een student aan de Universiteit Twente die als hobbyproject CodeSandbox is gestart. Dit is een online code-editor die het makkelijk maakt in de cloud te ontwikkelen met een framework zoals bijvoorbeeld Vue.js. Handig voor snelle demo’s, maar met CodeSandbox is het ook mogelijk volledige projecten te ontwikkelen, testen en deployen. Gewoon in de webbrowser.”
Vue en Level Level
We hebben Vue.js ingezet om het schadeformulier van Autotaalglas natuurlijk aan te laten voelen met vloeiende interactieve elementen. Op het e-learning platform Generation Next Academy van ABN AMRO MeesPierson hebben we het framework gebruikt om de studenten met subtiele interacties te kunnen motiveren.
Kort samengevat: Vue.js zorgt ervoor dat we onze projecten naar een hoger plan kunnen tillen. Het framework biedt ons structuur en overzicht. Je kunt interactieve elementen opbouwen met duurzame, efficiënte en stabiele code. Het maakt ons frontend development makkelijk, sneller en leuker.
Ook interessant…
Vertel ons meer over je plannen en ambities!
We zijn klaar om jullie online uitdaging op te pakken.