walking into the sunset

Insights

Overgang van React naar Vue

🛠 Frontend development

In deze blogpost zal ik het hebben over mijn ervaring met de overstap 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.

Ik had echter wat problemen toen ik voor het eerst begon. Het was in het begin niet eenvoudig om slots te begrijpen en te begrijpen hoe ze werken. Als ik een component in React wilde doorgeven, gebruikte ik gewoon JSX en gaf het door als een prop zoals in dit voorbeeld.

reactcode

In Vue werkt het niet zo. 

Het zijn beide goede oplossingen voor het probleem van het doorgeven van onderliggende componenten aan een ouder, maar de manier waarop React het doet is naar mijn mening eenvoudiger.

vuecode

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.

🎙

Sometimes it’s beneficial to take a step back and look at the bigger picture

LanderLander Van Landeghem
Lander

Lander

Delen:

Op zoek naar inspiratie?

Wij zorgen voor gepast advies op het vlak van frontend development.

💌

Insights

Meer inzichten

conference

🛠 Frontend development

Vue Amsterdam 2024: dag 1

Dag 1 van de jaarlijkse Vue Amsterdam conference.

A person holding a smartphone

📱 PWA,
🛠 Frontend development

PWA. Nu meer dan ooit.

De kloof tussen native en web wordt steeds kleiner. Dat bewijst ook de komst van Push Notifications voor web apps op het Home Screen (PWA’s) in iOS 16.4. Deze functionaliteit was al langer beschikbaar op Android, maar nu kunnen ontwikkelaars dit eindelijk voor beide platforms implementeren. Android en iOS samen hebben een marktaandeel van maar liefst 99% van alle mobiele gebruikers.

nuxt-gsap

💫 Motion,
🛠 Frontend development

Motion Library

Om een aantrekkelijke en moderne UI te bekomen, is het animeren van een website van groot belang. Daarom hebben we bij Appeel gewerkt aan een animatie project “Motion library”. In dit project worden verschillende componenten van een website geanimeerd en de code ervan getoond om zo als inspiratiebron te dienen voor alle collega’s van Appeel.