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 V.

Delen:

Op zoek naar inspiratie?

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

💌

Insights

Meer inzichten

nextjs-13

🛠 Frontend development

Next.js 13

Het is zover, Next.js 13 is sinds 25 oktober 2022 uitgebracht. Exact zes jaar later dan de eerste Next.js release. Waarom zou je Next.js willen gebruiken en wat zijn de nieuwe functionaliteiten in Next.js 13? In deze blogpost bespreken we wat de verschillen zijn tussen Server-Side en Client-Side Rendering. Vervolgens onderzoeken we hoe je een applicatie structureert, wat server componenten zijn, streamen van UI en enkele verbeteringen. Als laatste bekijken we wat Next.js 13 voor de toekomst te bieden heeft.

Spline

🛠 Frontend development

Hoe maak je een moderne UI met Spline

Het ontwerpen van een aantrekkelijke user interface is niet altijd evident. Daarom is het belangrijk om de nieuwste trends te volgen en inspiratie te halen uit werken die beschikbaar staan op het internet. Zo heb ik Spline leren kennen. Spline is een design tool om op een relatief gemakkelijke wijze 3d graphics te creëren voor de web. In deze post, zal ik uitleggen wat de basisfuncties zijn en hoe je deze software kan gebruiken voor jouw volgend project.

css

🛠 Frontend development

Dingen die je in CSS kan doen in plaats van Javascript

Wanneer je wat wilt maken in Javascript dat mogelijk is in CSS, gebruik dan CSS. Of zoek eens op of het mogelijk is tenminste. 🤓