Angular vs React vs Vue

Ter info: React is officieel een UI library, Angular is een volwaardig front-end framework, terwijl Vue.js een progressive framework is.
Maar ik zal in deze blog alle drie benoemen als framework.

Om de frameworks op een gelijkwaardige manier te vergelijken met elkaar heb ik in elk framework een To Do app gebouwd. Je hebt ook nog het framework Svelte, maar deze laat ik voor nu buiten beschouwing.

De styling van de drie To Do apps, zoals de afbeelding hierboven, zijn identiek aan elkaar. In deze blog ga ik verder niet in op het design.

Wel vergelijk ik de drie frameworks op de volgende onderdelen:

• Installeren van de framework
• Verschillen in files
• Functions aanroepen
• Componentcommunicatie

Installatie van de frameworks

Components maken je leven makkelijker. Het kunnen lazy-loaden is mogelijk gemaakt door components. Het maakt code schrijven overzichtelijker en leesbaarder wanneer je op zoek bent naar een specifiek stuk code. Bijvoorbeeld wanneer je iets wil aanpassen op je homepage. Met components ga je dan direct naar het juiste component. 

De verschillen qua files

Ik zal in het kort uitleggen wat de verschillen in de files structuur zijn per framework.

React gebruikt twee files. Één voor je CSS en 1 voor de JavaScript én HTML.

In Angular heb je drie files beschikbaar in een component. De HTML-files voor je dagelijkse HTML. De CSS voor je styling en de TS-files voor je Typescript logica.

Vue daarentegen gebruikt maar 1 file voor alles. Ja, alles.

Verschillen in simpele HTML-tags en hoe je functions aanroept:

Ik heb in alle drie de apps een button ingebouwd om een To Do te deleten. Deze zien er per component zo uit:

Je kan zien dat de HTML, in dit voorbeeld de button, hetzelfde is. Idem met het type en de class. Het verschil zit in de communicatie tussen de HTML en JS.

Het is geen groot verschil, maar bij React zie je bijvoorbeeld bij het click event een props staan. Props is een speciaal keyword in React en staat voor properties. Het wordt gebruikt om data te versturen van het ene naar het andere component. In dit geval had ik de delete To Do functie in een app.js bestandje staan. Props is ook read-only, dit betekent dat de waarde die meegestuurd wordt door de parent component mag worden gewijzigd door de child component.

Angular gebruikt de twee brackets om de click heen, en dan de functie als parameter mét brackets erachter.

In Vue wordt er vaak de v-on:click gebruikt. Dit is een vue.js directive. Het heeft dezelfde functie als de onClick() maar op de Vue manier met een functie erin.

Niet heel spannend allemaal toch?

Laten we verder gaan met het child component en hoe je deze kan laten werken in een parent component, maar ook wat het verschil hierin is.

Zoals je ziet zijn de componenten verschillend van elkaar. In React hoef je namelijk geen andere variabele te maken binnen de child component. Het is direct binding door de props.

In de communicatie van parent naar child, zijn Vue en Angular redelijk hetzelfde. 
Namelijk door data-overdracht die aan het child component wordt doorgegeven met behulp van property binding. 

Conclusie

Op dit moment ben ik een Angular developer, maar dat betekent niet dat ik meer neig naar Angular. Angular is qua structuur, zeker in grote bedrijven, een goede keuze. Toch wint React het steeds meer in populariteit. Ook het aantal developers wat hiermee werkt neemt toe. Ook ik, als Angular Developer, vind React een prettig framework om mee te werken, ondanks dat ik een voorkeur heb voor structuur.

Vue werkt van deze drie frameworks het minste voor mij. Al ben ik wel van mening dat, als je maar lang genoeg werkt met een van deze frameworks, je het vanzelf fijn vindt werken. Het is een kwestie van wennen.

Dit is natuurlijk mijn mening. Iedereen heeft zijn eigen voorkeur. Mijn advies zou zijn; kies een van deze frameworks en wordt hier een goeroe in. Maar verdiep je ook in de basis van de andere twee. Dit helpt je in het vervolg om de andere twee frameworks sneller naar je eigen hand te zetten.

Gewoon een kwestie van uitproberen dus! :)