Overgang van React naar Vue

Ik gebruik React nu een paar jaar en de afgelopen weken ben ik begonnen met de overgang naar Vue. Als je aan JavaScript-frameworks denkt, zit je waarschijnlijk vast tussen Vue, Angular en React, aangezien deze verreweg het populairst zijn in het JavaScript-ecosysteem. Een van de grootste verschillen tussen deze twee technologieën is dat Vue.js een op zichzelf staand framework is, terwijl React samen met andere libraries moet worden gebruikt. 

Hoewel zowel React als Vue component gebaseerde infrastructuren gebruiken binnen hun projecten, waarbij één bestand verantwoordelijk is voor één component, verschilt de manier waarop ze dit doen op een aantal belangrijke manieren.

De overgang verliep relatief soepel met als grootste verschillen het state management, het niet kunnen gebruiken van JSX en lifecycle methods. Vue gebruikt meestal HTML template files, terwijl React volledig JavaScript of TypeScript is. React heeft een aantal voordelen op het gebied van prestaties in vergelijking met Vue. Geheugentoewijzing en opstarttijden zijn bijvoorbeeld iets beter met Vue, terwijl runtime is waar React het voortouw neemt. Maar deze prestatieverschillen zijn bijna te verwaarlozen. Schone code en snelheid van ontwikkeling zijn het belangrijkste.

Een van de dingen die ik erg leuk vind aan Vue in vergelijking met React, zijn de lifecycle methods. In React gebruik je meestal gewoon de useEffect hook met enkele variaties die voor iemand die React leert niet echt een duidelijk beeld geeft van wat het doet of hoe het werkt (het duurde even voor mij toen ik React voor het eerst begon te gebruiken). In Vue is er echter een grote verscheidenheid aan lifecycle-hooks met geweldige naamgevingsconventies, dus er is geen verwarring. Bijvoorbeeld onMounted, beforeMounted, onUnmounted, onUpdated en de lijst gaat maar door.

Dan zijn vergelijkbare berekende rekwisieten een verademing. Dit maakt de template code een stuk schoner en haalt alle veranderlijke rekwisieten uit de sjabloon en in het script. In React kun je dit omzeilen door de gegevens in een useState hook te plaatsen, maar dit brengt een hele reeks andere problemen met zich mee met veranderingen in de state.

Dan computed props zorgen er voor dat de template code een stuk eenvoudiger en schoner is dan React. Aangezien React puur JavaScript is, gaat dit door in het template en dit zorgt voor een gigantische puinhoop waar je niet weet waar je moet zoeken. Vue maakt dit zoveel schoner met zaken als v-if, v-for en v-show waarbij je JavaScript map functies en inline if-statements in React zou moeten gebruiken.

Naar mijn mening is Vue in de meeste gevallen beter dan React, maar als je TypeScript wilt gebruiken, zou ik adviseren om bij React te blijven, aangezien de TypeScript-ondersteuning veel beter is.

Met betrekking tot state management kan React behoorlijk wat hoofdpijn opleveren als er geen state management library zoals Redux worden gebruikt. Het grootste probleem is dat React geen 2 way binding toestaat en dat je de state constant omhoog moet verplaatsen in de component stack en dan terug omlaag moet verplaatsen via props of een context moet creëren die dat deel van de applicatie omvat. In Vue is het opzetten van Phinia-winkels een stuk eenvoudiger en heb je direct alle gegevens die je nodig hebt overal binnen je applicatie beschikbaar.

Laten we het nu hebben over documentatie. Vue spant hier zeker de kroon. React heeft verouderde documentatie die nog steeds class components gebruikt, terwijl je altijd functionele componenten zou moeten gebruiken, dit is al vele jaren het geval. De Vue-documentatie heeft een duidelijke focus en verschil tussen de verschillende API's en het is gemakkelijk om te vinden wat je zoekt.

Vue.js heeft een veel gemakkelijkere leercurve, React heeft veel meer ontwikkelaars. Vue is eenvoudig te leren en met behulp van de Vue CLI kunt u binnen enkele minuten een functionele website bouwen en eenvoudig implementeren met zoiets als Netlify. Functies waarvoor een bibliotheek in React nodig is zijn al opgenomen in Vue.js.

Overschakelen van React JSX naar Vue-template was (en is) lastig voor mij. Hoewel de syntax bijna native is en het reguliere JavaScript weerspiegelt, is de template syntax in Vue behoorlijk

geavanceerd: het bevat richtlijnen, afkortingen en voorwaardelijke weergave, waardoor Vue lijkt op Angular, maar weet dat dit bijna het einde van de gelijkenis is. Dit zijn zonder enige twijfel enkele van de meest interessante functies van Vue.js, aangezien u

de juiste sjabloon krijgt met HTML-opmaak, maar JavaScript is daar, dus er is geen ongemakkelijke scheiding tussen template en logica.

Concluderend zijn dit twee geweldige frameworks met verschillende use-cases in gedachten. Persoonlijk zal ik Vue voor de meeste projecten blijven gebruiken, maar ik zal React gebruiken als ik TypeScript moet gebruiken.