De 3 populairste JavaScript front-end frameworks, een uiteenzetting: #2 Vue

Wanneer over front-end ontwikkeling wordt gesproken, wordt vaak in dezelfde adem ook gesproken over JavaScript frameworks (of in elk geval eentje ervan). Soms is het moeilijk om door de framework-bomen het bos nog te zien. Elke oplossing heeft uiteraard zijn voor- en nadelen, maar welke past nou perfect bij de applicatie die je voornemens bent te bouwen? Deze serie van blogs is bedoeld om de drie meest populaire frameworks tegen elkaar uit te zetten, om zo te helpen in het maken van jouw keuze!

Met populairste frameworks wordt hier gedoeld op React, Angular en VueJS. Voor alle drie wordt eerst wat voorinformatie gegeven, waarna de voor- en nadelen op een rijtje worden gezet. Het tweede framework dat aan bod komt is Vue.

De voor- en nadelen van Vue

Vue is in 2014 door Evan You, een ex-ontwikkelaar in het Angular team van Google. Vue heeft op tijd van schrijven van dit blog 191k sterren op GitHub. Het gedachteproces van Evan You omschrijft hij zelf als: ‘I figured, what if I could just extract the part that I really liked about Angular and build something really lightweight.’.  Je zou bijna kunnen zeggen dat Vue tussen Angular en React in zit, wat betreft out-of-the box functionaliteiten. De core bevat al een scala aan functionaliteiten, welke zijn uit te breiden met andere (officieel ondersteunde) libraries.

1. Lichtgewicht

Vue is van zichzelf erg lichtgewicht. Een volledig uitgedost Vue 3 project is (gzipped) zo’n 10KB groot en een Angular project maar liefst 65KB. React laat ik in deze vergelijking bewust even weg, omdat dit een library is en geen framework. Heel kort door de bocht betekent dit dat React van zichzelf vrij minimaal is qua functionaliteiten en in veel gevallen uitgebreid dient te worden met andere libraries of packages. Vue en Angular zijn out-of-the box al een stuk vollediger.

2. Eenvoudig door Vue Templates

Waar in React alles wordt gedaan in JSX (of TSX als je typescript gebruikt), wordt met Vue de code opgesplitst in HTML, CSS en JS. Op deze manier is de stap van traditionele webontwikkeling naar Vue erg klein, wat een zeer gunstige impact heeft op de leercurve.

Vue projecten zijn opgebouwd door Vue templates. Dit zijn losse bestanden (met een .vue extensie) waarin de HTML structuur, het functionele deel en de styling duidelijk van elkaar zijn gescheiden. Het mooie hierin is dat het voor de ontwikkelaar eenvoudig van elkaar te onderscheiden is, maar het onder water wel met elkaar samenwerkt. Door data binding kan eenvoudig een stuk data uit het template in de HTML structuur worden ingebracht, om zo aan de gebruiker te tonen. Dit geldt niet alleen voor het tonen van data in de vorm van een stukje tekst of een getal, maar ook voor het interactief beïnvloeden van bijvoorbeeld CSS klassen die aan elementen zijn toegevoegd.

3. Goede performance door de Virtuele DOM

Net als React, werkt ook Vue met een virtuele DOM. Kort uitgelegd werkt dat als volgt: In plaats van dat een verandering van een object in het scherm (hoe groot of klein dan ook) direct in de HTML structuur plaatsvindt, wordt dit eerst toegepast in de virtuele DOM. Dit wordt vervolgens vergeleken met de HTML structuur en waar deze verschilt, wordt een onderdeel opnieuw gerenderd. Dit alles gebeurt in milliseconden onder water.

Van de drie frameworks die in deze reeks blogs besproken worden, is Angular de enige die geen gebruik maakt van een virtuele DOM. Hier wordt weer een andere manier toegepast om de performance te optimaliseren, maar hierover meer in het volgende blog!

4. Veranderlijke State

Vue bevat twee weg data binding. Dat betekent dat de state van een component mutable (oftewel veranderlijk) is. Deze verschillende definities voor hetzelfde concept klinken allicht wat moelijker dan ze zouden moeten klinken. Wat er mee gezegd wordt is eigenlijk als volgt: data werkt in Vue twee kanten op; het kan direct worden getoond aan de gebruiker, waar het ook direct kan worden aangepast door de gebruiker.

Om de vergelijking met React te trekken: in React is de state van een component niet direct aan te passen, maar gebeurt dit door middel van asynchrone functies. In Vue is de state wel direct aan te passen door de gebruiker.

Het voordeel is dat er minder nodig is om functionaliteit in te bouwen waar state wordt veranderd (het gebeurt letterlijk in minder regels code). Het nadeel is echter dat het in complexere applicaties moeilijker te achterhalen is waar een state verandering vandaan komt. Het gebeurt op minder gecontroleerde wijze dan een framework waarvan de state ‘unmutable’ is.

5. Scoped CSS

Waar React het nadeel heeft dat Scoped CSS niet wordt ondersteund, is dit in Vue juist wel het geval. Het mooie hiervan is dat je CSS voor één template specifiek kan schrijven, zonder daarmee de rest van de applicatie te beïnvloeden. Als ik bijvoorbeeld wil dat de tekst in component A rood is en in de rest van de applicatie zwart, dan kan ik een stukje CSS schrijven dat enkel in component A wordt toegepast.

6. Visueel project beheer

Voor de visueel ingestelde ontwikkelaars die het niet zo hebben op de command line interface, biedt Vue ook een Graphical User Interface (GUI) aan. Hiermee kan in een overzichtelijk scherm het volledige project worden beheerd. Zo kunnen bijvoorbeeld npm scripts worden toegevoegd, linting instellingen worden gewijzigd en wordt een overzichtelijk beeld gegeven van de app grootte en hoe deze is opgebouwd. 

Dit blog is geschreven door Steve Jonk.