Apps bouwen met Vue.js

Fenno van der Velden - 17 Oktober 2018

Is het een program language? Is het een library? Nee, het is Vue.js! Veel succesvolle organisaties zoals Alibaba, Uber, maar bijvoorbeeld ook Nu.nl zijn al om. En dus rest de vraag: moet jij er ook aan gaan geloven? Wij bij Aer namen de proef op de som en ontdekten al gauw dat het programmeren voor ons weer echt leuk wordt. Tijd om ook jou te laten zien hoe het zich onderscheidt van bijvoorbeeld Angular en React. En geven we onze visie waarom we denken dat Vue.js in de toekomst nog veel te bieden heeft.

Vue echt nieuw?

Ondanks dat er over Vue.js nog relatief weinig informatie te verkrijgen is, vond de eerste release alweer vier jaar geleden plaats. In die tijd heeft het in een korte periode enorm aan populariteit gewonnen. Evan You, de oprichter van Vue, heeft zich bij de eerste release laten inspireren door de frameworks Angular en React. Hierdoor zijn veel functionaliteiten herkenbaar voor de doorgewinterde developer. Zo lijken sommige syntax onderdelen erg op die van AngularJS (e.g. v-if en ng-if) en ligt de focus op het gebruik van componenten zoals bij React.

Maar Evan You heeft ook vooral geleerd van de fouten die er bij eerdere frameworks zijn gemaakt, en dit zorgt ervoor dat de gebruiksvriendelijkheid naar een hoger niveau wordt getild. Dit zorgt ervoor dat ook de developer die net om de hoek komt kijken, het programmeren snel onder de knie heeft!

De kracht van componenten

Zoals gezegd, het gebruik van componenten bestond al voor de komst van Vue. Componenten zijn stukjes code die een bepaalde functionaliteit bevatten die hergebruikt kunnen worden op verschillende plekken binnen een applicatie. Erg handig wanneer je in een team van developers werkt! Ieder kan op zichzelf aan losstaande componenten werken en deze later samen voegen. Vue heeft geleerd van Angular en vervangt de complexe tweezijdige voor een eenzijdige dataflow. Hierdoor wordt code een stuk leesbaarder.

Focus op design

Waar Angular en React vrij complex zijn, legt Vue de focus op de simpliciteit van het programmeren. Dit geeft je meer ruimte om je te richten op het design van een webapplicatie. Vue geeft de mogelijkheid zelf animaties of transities kan maken. Hiermee zijn al veel award winnende interactieve web apps gebouwd door o.a. Alibaba.

Daarnaast zorgt Vue ervoor dat componenten toegang hebben tot de CSS-styling van de componenten waarin ze genest zijn. Ook kan je componenten ook gemakkelijk een afgebakende css-styling geven.

Mocht je snel een professioneel uitziende applicatie willen bouwen, dan biedt de community van Vue een prachtige library op basis van Material Design, Vuetify. Hierdoor is het zelfs voor design newbies mogelijk om een mooie webapp te ontwikkelen. Onze twee trainees hebben in twee maanden tijd Vue eigen gemaakt en een volledige webapp gemaakt met Vuetify.

Lees meer over dit project!

Snel, compact en flexibel

Er zijn nog wat andere punten die benoemd mogen worden. Zo worden er veel minder strenge regels gehandhaafd dan bijvoorbeeld bij Angular. Hierdoor is het erg flexibel in het ondersteunen van een verscheidenheid aan andere ontwikkelde systemen.

Daarbij is Vue ook erg compact. Een Angular gzip file al erg compact (ongeveer 130KB), maar Vue spant de kroon. Een pakkage met Vue2 + Vuex + Vue Router is ongeveer slechts 30KB. Dit is vooral belangrijk als je ontwikkelt voor het 'mobile web'. En ondanks dat het veel lichter en flexibeler is, gaat dit niet ten koste van de snelheid die vergelijkbaar is met die van React en Angular.

Wat houd je nog tegen?

Wij spreken met veel lof over Vue, maar er zijn ook zaken waar je rekening mee moet houden voordat je hiervoor kiest. Angular en React zijn veel langer gevestigd in de development wereld. Door hun bekendheid zal je sneller een baan kunnen vinden met kennis van deze frameworks. Daarnaast is er veel meer informatie te vinden over het gebruik van deze frameworks en is er een enorm grote groep aan developers die je graag willen helpen op platforms als Stack Overflow. Tot slot hebben React en Angular zichzelf bewezen als stabiele frameworks die niet snel van het programmeer landschap lijken te verdwijnen.

Daarentegen belooft Vue veel goeds. De community ontwikkelt zich in rap tempo en belangrijke namen hebben aan zich aan het project verbonden. Sinds 2017 zijn ze zelfs de samenwerking aangegaan met Alibaba.

Kortom, ga je liever voor oud en vertrouwd en vind jij het niet erg om wat meer uitdaging in het programmeren te hebben? In dit geval passen Angular of React waarschijnlijk beter bij jou. Laat jij liever de complexe code voor wat het is, sta je wel open voor iets nieuws en heb je zin om je meer te focussen op de vormgeving van je apps? Dan moet je zeker eens Vue.js proberen!

Bronnen: vuejs.org blog.evanyou.me valuecoders.com medium.com about.gitlab.com