In het huidige ecosysteem voor webontwikkeling zijn JavaScript frameworks iets dat door bijna elke webdeveloper wordt gebruikt om hun ontwikkelingsproces gemakkelijker en productiever te maken. Maar omdat de technologie die we gebruiken steeds beter wordt, blijven de frameworks ook evolueren, met betere, eenvoudigere en soms zelfs complexere frameworks die worden uitgebracht.

Met zoveel keuze kan het echt moeilijk worden om het beste framework te kiezen dat aan je behoeften voldoet.

In dit artikel zullen we het hebben over twee van de grootste JavaScript frameworks van dit moment: Svelte vs React. We zullen ze direct met elkaar vergelijken en de voor- en nadelen van elk framework opsommen om je te helpen er een te kiezen.

Wat is Svelte?

Svelte is een framework voor het bouwen van snelle, flexibele en cybernetisch verbeterde webapplicaties. Het staat ook bekend als het “meest geliefde JavaScript framework” met de “meest tevreden developers”, met meer dan 60.000 sterren op de GitHub repository.

Svelte applicaties en componenten worden gedefinieerd in .svelte bestanden, dat zijn HTML bestanden uitgebreid met templatingsyntaxis die lijkt op JSX.

Geschiedenis

Svelte is ontstaan uit Ractive.js, dat ontwikkeld werd door de maker van Svelte zelf: Rich Harris. Svelte werd ontworpen als opvolger van Ractive. De eerste versie van Svelte die in 2016 werd uitgebracht was in principe Ractive, maar dan met een compiler.

De naam “Svelte” werd gekozen door Rich Harris en zijn medewerkers bij The Guardian. Naarmate de tijd verstreek, kregen steeds meer developers kennis van en interesse in Svelte. Tegen 2019 was Svelte een volwaardige tool geworden om webapps te bouwen met kant-en-klare TypeScript ondersteuning.

Het SvelteKit webframework werd in 2020 aangekondigd en ging in 2021 in bèta.

Belangrijkste features

Svelte is een radicaal nieuwe benadering van het bouwen van gebruikersinterfaces. Waar traditionele frameworks als React en Vue het grootste deel van hun werk in de browser doen, verschuift Svelte dat werk naar een compileerstap die gebeurt wanneer je je app bouwt.

Svelte zet je app tijdens het bouwen om in ideale JavaScript, in plaats van je applicatiecode te interpreteren tijdens het draaien. Dit betekent dat je de prestatiekosten van de abstracties van het framework niet betaalt, en dat je geen straf krijgt als je app voor het eerst wordt geladen.

Je kunt je hele app bouwen met Svelte, of je kunt het incrementeel toevoegen aan een bestaande codebase. Je kunt ook componenten leveren als zelfstandige pakketten die overal werken, zonder de overhead van afhankelijkheid van een conventioneel framework.

Voor- en nadelen van Svelte

Zoals elk framework heeft ook Svelte voor- en nadelen. Het is belangrijk om het volledige plaatje te begrijpen voordat je je toelegt op Svelte vs React.

Laten we eens kijken naar de voor- en nadelen die Svelte developers biedt.

Voordelen van Svelte

Hier zijn enkele van de belangrijkste voordelen van het gebruik van Svelte:

  • Geen virtuele DOM: Svelte is een compiler en heeft geen gebruik van een Virtuele DOM, Svelte is een compiler die bij het bouwen al weet hoe dingen in je app zouden kunnen veranderen, in plaats van te wachten tot het werk bij het uitvoeren wordt gedaan. Dit is een zeer belangrijk voordeel van Svelte boven elk ander webframework.
  • Minder boilerplate: Het verminderen van de hoeveelheid code die je moet schrijven is een expliciet doel van Svelte. Svelte helpt je om gebruikersinterfaces te bouwen met een minimum aan poespas, wat de leesbaarheid van code verbetert door zaken als betere reactiviteit, bindingen en top-level elementen te implementeren, waar we het later in dit artikel over zullen hebben.
  • Echt reactief: Svelte is een taal op zich en heeft reactiviteit standaard ingeschakeld. Er zijn geen speciale regels code nodig om je code reactief te maken, elke variabele die je declareert is standaard reactief. Svelte ondersteunt daarnaast afgeleide declaraties en statements die worden berekend bij state verandering.
  • Gemakkelijker te leren: Svelte biedt een hybride taal die bestaat uit makkelijke HTML, CSS en JavaScript/TypeScript. Je hoeft geen nieuwe concepten of speciale syntaxis zoals JSX te leren, waardoor het gemakkelijker te leren is. De documentatie van Svelte is heel gemakkelijk te volgen en bevat een gedetailleerde ingebouwde handleiding.

Nadelen van Svelte

Dit zijn de belangrijkste nadelen van het gebruik van Svelte:

  • Relatief kleiner ecosysteem: Omdat het een nieuw framework is, heeft Svelte nog geen heel groot ecosysteem eromheen in vergelijking met frameworks als React, wat betekent dat je niet zoveel bibliotheken en tools zult vinden die gerelateerd zijn aan Svelte als je zou vinden voor React.
  • Unieke UX: Hoewel Svelte HTML, CSS en JavaScript/TypeScript gebruikt, introduceert het unieke elementen die anders zijn dan hoe de meeste andere frameworks werken. Als je gewend bent aan JSX en probeert over te stappen op Svelte, kun je wat eigenaardigheden tegenkomen, zoals het export sleutelwoord dat anders wordt gebruikt en het gebruik van on:click in plaats van onClick.

Wat is React?

React is een van de allereerste en oudere webframeworks in het JavaScript ecosysteem en is het populairste en meest gebruikte webframework van dit moment. Het biedt een manier om gemakkelijk en efficiënt interactieve UI’s te maken.

React maakt gebruik van JSX om applicaties te maken en heeft een enorm aantal bibliotheken eromheen gebouwd, wat het een zeer betrouwbaar framework maakt.

Geschiedenis

React werd in 2013 gecreëerd door Meta als tool voor het maken van een dynamische interface voor verschillende websites. De virtuele DOM, die een weergave is van DOM elementen gebouwd met React componenten, is de basis van React.

Sindsdien is het geëvolueerd met tonnen nieuwe features om webontwikkeling gemakkelijker te maken voor de hele JavaScript community.

Belangrijkste features

Nu je een goed idee hebt van wat React is, laten we eens kijken naar enkele van de belangrijkste features die het zo populair hebben gemaakt.

JSX

React is ontwikkeld op basis van het feit dat renderinglogica moet worden gekoppeld aan andere UI logica (events, statebeheer) en samen moet worden beheerd. Daarom gebruikt React, in plaats van technologieën (HTML en JavaScript in aparte bestanden) te scheiden, JSX (JavaScript XML). Met JSX kun je markup binnen JavaScript schrijven, wat je een superkracht geeft om logica en markup van een component in een enkel .jsx bestand te schrijven.

Op componenten gebaseerd

In React bouwen we ingekapselde componenten die hun eigen state beheren, en stellen ze vervolgens samen om complexe UI’s te maken. Omdat de logica van componenten wordt geschreven in JavaScript in plaats van in templates, kunnen we gemakkelijk rich data door onze app sturen en de state buiten het DOM houden.

Declaratief

React maakt het pijnloos om interactieve UI’s te maken. We kunnen eenvoudige views ontwerpen voor elke state in onze applicatie, en React zal efficiënt precies de juiste componenten bijwerken en weergeven als onze gegevens veranderen.

Voor- en nadelen van React

React heeft, net als Svelte, enkele voor- en nadelen waarvan je je bewust moet zijn voordat je het als framework kiest.

Voordelen van React

Hier zijn de belangrijkste voordelen van React:

  • Herbruikbaarheid van code: React gebruikt componenten voor ontwikkeling en de meeste van deze componenten zijn herbruikbaar en kunnen met behulp van props aangepast worden aan onze behoefte.
  • Efficiënte SEO optimalisatie: Over het algemeen hebben zoekmachines moeite met het lezen van zware JavaScript applicaties. React ondervangt dit probleem, wat voor developers nuttig is voor de gemakkelijke navigatie op diverse zoekmachines. React apps kunnen op de server draaien, en de virtuele DOM wordt gerenderd en teruggestuurd naar de browser als een gewone pagina.
  • Groot ecosysteem: Als een van de oudste webframeworks heeft React een zeer groot ecosysteem in vergelijking met de nieuwere. Dit betekent dat er veel resources beschikbaar zijn voor React gebruikers, samen met veel ontwikkelingsgerelateerde hulp.
  • Bibliotheken: Omdat React een groot ecosysteem heeft, betekent dit ook dat er veel developers zijn die tools en bibliotheken rond React bouwen. De community brengt voortdurend geweldige projecten uit die regelmatig door miljoenen React developers worden gebruikt.

Nadelen van React

Enkele nadelen van React zijn:

  • Moeilijke leercurve: Zoals we al eerder zagen, maakt React gebruik van JSX – een heel nieuwe technologie, gemaakt voor nieuwe developers die net beginnen met React. Veel developers houden niet van het gebruik van JSX vanwege de steilere en moeilijkere leercurve.
  • Beperkingen als bibliotheek: React is een bibliotheek en geen echt webframework, wat betekent dat het niet voorverpakt met noodzakelijke features en belangrijke kant-en-klare ontwikkeltools komt. Bovendien stelt dit de app bloot aan veiligheids- en consistentieproblemen, en moeten developers vertrouwen op de continuïteit van externe bibliotheken om ervoor te zorgen dat hun React app altijd goed functioneert.
  • Slechte documentatie: React heeft geen goede documentatie, omdat er voortdurend updates zijn in de React omgeving die moeilijk te volgen kunnen zijn. Hierdoor kan het voor beginners moeilijk zijn om met React aan de slag te gaan.

Svelte vs React: Onderlinge vergelijking

Nu we de basisfeatures, voor- en nadelen van beide webframeworks kennen, kunnen we ze onderling vergelijken om tot een conclusie te komen over welke beter is en welke je zou moeten gebruiken.

Populariteit

Als het gaat om populariteit is er op dit moment geen ander framework dat React kan overtreffen. React is volgens de State of JavaScript 2021 het populairste webframework, wat redelijk is in vergelijking met Svelte, omdat React al sinds 2013 deel uitmaakt van het JavaScript ecosysteem, waardoor het een voorsprong heeft op een nieuw ontwikkeld framework als Svelte.

Frontend frameworks gerangschikt naar gebruik
Frontend frameworks gerangschikt naar gebruik volgens State Of JS – 2021.

Schaalbaarheid en uitbreidbaarheid

Zowel Svelte als React zijn schaalbare en stabiele productiegerichte frameworks. Maar als het gaat om uitbreidbaarheid heeft React misschien een kleine voorsprong op Svelte, dankzij het enorme ecosysteem en de community die eromheen werkt.

Er zijn tonnen externe bibliotheken en tools gemaakt voor React, zoals we hierboven zagen, waardoor React beter uit te breiden is dan Svelte en zijn relatief kleine ecosysteem.

Snelheid en prestaties

Als het gaat om prestaties en snelheid, kan Svelte op geen enkele manier worden overtroffen door React. Zoals we al zagen, doet Svelte het meeste werk in de compileerstap in plaats van ze in de browser te doen, wat React doet. Dit verbetert de prestaties sterk en geeft een boost aan de starttijden van de server.

Het volgende dat Svelte een prestatieboost geeft is het feit dat het geen Virtual DOM gebruikt. Volgens Svelte is Virtual DOM misschien sneller dan Real DOM, maar wel traag. Svelte heeft hier ook een gedetailleerd artikel over op hun site dat je misschien wilt lezen.

Syntax en leercurve

Zowel Svelte als React volgen een op componenten gebaseerde ontwikkelingsarchitectuur, maar het verschil zit hem in het feit dat React JSX gebruikt, terwijl Svelte een taal op zich is, samengesteld uit de drie standaardtalen: HTML, CSS en JavaScript.

Bovendien is Svelte code veel gemakkelijker te lezen en bevat het geen overbodige code. Het feit dat Svelte standaard echt reactief is, geeft het in dit geval een voorsprong op React.

Over het gemak van leren gesproken: Svelte heeft ook hier een voorsprong op React – de reden is dat de meeste developers al vloeiend zijn in HTML, CSS en JavaScript voordat ze een framework gaan gebruiken. Omdat React JSX gebruikt, vinden veel developers het te complex en moeilijker te begrijpen.

Grootte van de bibliotheek

Wat betreft de grootte van de bibliotheken: Svelte is lichter, met een minified en GZipped versie van slechts 1,7 KB. React daarentegen is bijna 44,5 KB geminificeerd en GZipped (zowel React als ReactDOM samen).

Zoals je ziet is Svelte bijna 22 keer lichter dan React, wat ook betekent dat Svelte apps standaard sneller laden dan React apps.

Als je op zoek bent naar nog meer snelheid, moet je je keuzes voor hostingplatforms zorgvuldig overwegen, want de verkeerde keuze kan je op meer manieren kosten. De Applicatie Hosting diensten van Kinsta zijn gericht op developers die op zoek zijn naar een eenvoudige deployment- en beheerervaring tegen lage kosten, zonder in te boeten op snelheid of veiligheid. Van begin tot eind duurt de deployment van Svelte en React apps slechts enkele minuten via het MyKinsta dashboard.

Ecosysteem en documentatie

We zagen hierboven al dat React een veel groter ecosysteem heeft dan Svelte, omdat het een van de oudste webframeworks is in het JavaScript ecosysteem. Dit betekent dat het krijgen van ondersteuning, hulp bij code en het vinden van resources veel gemakkelijker is bij het gebruik van React dan bij Svelte.

Maar als het op documentatie aankomt, overtreft Svelte React. De documenten van Svelte behoren tot de beste standalone bronnen om Svelte te leren – er is zelfs een ingebouwde interactieve tutorial.

React daarentegen heeft relatief weinig documentatie, en wat ze hebben is niet interactief. Het React team werkt echter aan het uitbrengen van nieuwe documenten, die nu in bèta zijn en zeer binnenkort openbaar zullen worden gemaakt.

Werkgelegenheidskansen

Volgens The State of JavaScript 2021 staat React op nummer één in zowel bekendheid als gebruik, terwijl Svelte op de vierde plaats staat.

We kunnen hier duidelijk zien dat er een enorme kloof is tussen React en Svelte, wat ook betekent dat er meer mogelijkheden zijn voor werk in React dan in Svelte.

Als je een nieuwe developer bent, raden we je aan met React te beginnen om je kansen om aangenomen te worden te vergroten.

Dynamische styling

Zowel React als Svelte ondersteunen dynamische styling, maar het verschil zit hem in het feit dat React inline styling ondersteunt via JSX. In Svelte zetten we de stijlen in aparte <style></style> blokken in ons componentenbestand.

Samenvatting

Zowel React als Svelte zijn uitstekende frameworks voor het bouwen van geweldige gebruikersinterfaces – afhankelijk van de use case – en elk heeft zijn eigen voor- en nadelen. Op basis van de vergelijking die we hier hebben gemaakt zou je moeten kunnen beslissen welke het beste bij jouw behoeften past.

Als je een beginner bent die simpelweg vaardigheden wil verbeteren, moet je Svelte zeker eens proberen. Als het gaat om prestaties en tevredenheid, overtreft Svelte React in alle opzichten.

Maar als je een ervaren developer bent en al op vaste grond staat, zou React voor jou de beste keuze zijn, omdat het een uitgebreid ecosysteem heeft waarin het vinden van resources en het krijgen van ondersteuning veel gemakkelijker zal zijn. Voor een developer wiens eerste prioriteit het vinden van werk is, is React de beste keuze, met een constante stroom van vacatures van Junior developers tot Senior developers en verder.

Welke van de twee technologieën je ook kiest, je volgende stap is het kiezen van een host voor je applicatie. Voor een snelle deployment via GitHub, razendsnelle snelheden en de beste beveiliging in zijn klasse, kijk je naar de Applicatie Hosting oplossingen van Kinsta. Voor elk project is er een passend abonnement, met 24/7 deskundige ondersteuning van ons team van ervaren developers .

Wat betreft Svelte vs React, welke ben jij van plan als volgende te gebruiken, en wat ga je bouwen? We horen er graag over! Deel het in de commentsectie hieronder.

Ashirvad Bhushan

Ashish is student en solo developer met een passie. Hij werkt graag dicht bij het web en schrijft graag nuttige content voor developers.