I det nuværende økosystem for webudvikling er JavaScript-frameworks noget, som næsten alle webudviklere bruger til at gøre deres udviklingsproces lettere og mere produktiv. Men i takt med at den teknologi, vi bruger, bliver forbedret, udvikler rammerne sig også løbende, og der udgives bedre, enklere og nogle gange endda mere komplekse frameworks.

Med så mange valgmuligheder kan det blive rigtig svært at vælge det bedste framework, der passer til dine behov.

I denne artikel vil vi tale om to af de største JavaScript frameworks i dag: Svelte vs React. Vi sammenligner dem frontalt og opstiller fordele og ulemper ved hvert framework, så du kan vælge et af dem.

Hvad er Svelte?

Svelte er et framework til opbygning af hurtige, fleksible og kybernetisk forbedrede webapplikationer. Det er også kendt som det “mest elskede JavaScript framework” med de “mest tilfredse udviklere” og kan prale af at have mere end 60.000 stjerner på GitHub-repositoriet.

Svelte-applikationer og -komponenter defineres i .svelte-filer, som er HTML-filer udvidet med templating-syntaks, der ligner JSX.

Historie

Svelte stammer fra Ractive.js, som blev udviklet af skaberen af Svelte selv: Rich Harris. Svelte blev designet som efterfølger til Ractive. Den første version af Svelte, der blev udgivet i 2016, var grundlæggende Ractive, men med en compiler.

Navnet “Svelte” blev valgt af Rich Harris og hans medarbejdere på The Guardian. Efterhånden som tiden gik, fik flere og flere udviklere kendskab til og blev interesserede i Svelte. I 2019 var Svelte blevet et fuldgyldigt værktøj til at bygge webapps med TypeScript-understøttelse out of the box.

SvelteKit-webrameworket blev annonceret i 2020 og gik i beta i 2021.

Nøglefunktioner

Svelte er en radikal ny tilgang til at bygge brugergrænseflader. Hvor traditionelle frameworks som React og Vue udfører hovedparten af deres arbejde i browseren, flytter Svelte dette arbejde over i et kompileringstrin, der sker, når du bygger din app.

Svelte konverterer din app til ideelt JavaScript på byggetidspunktet i stedet for at fortolke din applikationskode på køretidspunktet. Det betyder, at du ikke betaler ydelsesomkostningerne ved frameworkens abstraktioner, og at du ikke pådrager dig en straf, når din app indlæses første gang.

Du kan bygge hele din app med Svelte, eller du kan tilføje det trinvis til en eksisterende kodebase. Du kan også sende komponenter som selvstændige pakker, der fungerer hvor som helst, uden det overhead, som afhængigheden af en konventionel framework medfører.

Fordele og ulemper ved Svelte

Som med ethvert framework har Svelte både fordele og ulemper. Det er vigtigt at forstå det fulde billede, før du dedikerer dig til Svelte vs. React.

Lad os tage et kig på de fordele og ulemper, som Svelte tilbyder udviklere.

Fordele ved Svelte

Her er nogle af de vigtigste fordele ved at bruge Svelte:

  • Ingen virtuel DOM: Svelte er en compiler og har ingen brug for en virtuel DOM, Svelte er en compiler, der ved på byggetidspunktet ved, hvordan tingene kan ændres i din app, i stedet for at vente på at gøre arbejdet på køretid. Dette er en meget vigtig fordel ved Svelte i forhold til alle andre webframeworks.
  • Mindre boilerplate: At reducere mængden af kode, du skal skrive, er et eksplicit mål for Svelte. Svelte hjælper dig med at opbygge brugergrænseflader med et minimum af bøvl, hvilket forbedrer læsbarheden af kode ved at implementere ting som bedre Reactivity, Bindings og Top-Level Elements, som vi vil tale om senere i denne artikel.
  • Virkelig reaktiv: Svelte er et sprog i sig selv og har reaktivitet aktiveret som standard. Der er ingen særlige kodelinjer nødvendige for at gøre din kode reaktiv, hver variabel, du deklarerer, er som standard reaktiv. Svelte understøtter også afledte deklarationer og erklæringer, der beregnes ved tilstandsændringer.
  • Nemmere at lære: Svelte tilbyder et hybridsprog bestående af vanilla HTML, CSS og JavaScript/TypeScript. Der er ikke behov for at lære nye koncepter eller særlig syntaks som JSX at lære, hvilket gør det lettere at lære. Svelte’s dokumentation er meget let at følge og har en detaljeret indbygget tutorial.

Ulemper ved Svelte

Dette er de største ulemper ved at bruge Svelte:

  • Relativt mindre økosystem: Da Svelte er et nyt framework, har det endnu ikke et meget stort økosystem omkring sig sammenlignet med frameworks som React, hvilket betyder, at du ikke vil finde så mange biblioteker og værktøjer relateret til Svelte, som du ville finde for React.
  • Unik UX: Selv om Svelte bruger HTML, CSS og JavaScript/TypeScript, introducerer det unikke elementer, der er forskellige fra den måde, som de fleste andre frameworks fungerer på. Hvis du er vant til JSX og forsøger at skifte til Svelte, kan du finde nogle særheder, som f.eks. at nøgleordet export bruges anderledes og brugen af on:click i stedet for onClick.

Hvad er React?

React er et af de allerførste og ældre webframeworks, der findes i JavaScript-økosystemet, og det er det mest populære og udbredte webframework i dag. Det giver mulighed for at lave interaktive brugergrænseflader nemt og effektivt.

React gør brug af JSX til at skabe applikationer og har et kolossalt antal biblioteker bygget omkring det, hvilket gør det til et meget pålideligt framework.

Historie

React blev skabt i 2013 af Meta som et værktøj til at skabe en dynamisk grænseflade til forskellige websteder. Den virtuelle DOM, som er en repræsentation af DOM-elementer bygget med React-komponenter, er fundamentet for React.

Siden da har det udviklet sig til at omfatte tonsvis af nye funktioner, der gør webudvikling lettere for hele JavaScript-fællesskabet.

Nøglefunktioner

Nu hvor du har en god idé om, hvad React er, skal vi se på nogle af de vigtigste funktioner, som har gjort det så populært.

JSX

React er udviklet ud fra det faktum, at renderingslogik skal kobles sammen med anden UI-logik(events, tilstandshåndtering) og skal håndteres sammen. Derfor bruger React i stedet for at adskille teknologier (HTML og JavaScript i separate filer) JSX (JavaScript XML). Ved hjælp af JSX kan du skrive markup inde i JavaScript, hvilket giver dig en superkraft til at skrive logik og markup for en komponent i en enkelt .jsx-fil.

Komponentbaseret

I React bygger vi indkapslede komponenter, der administrerer deres egen tilstand, og sammensætter dem derefter for at skabe komplekse brugergrænseflader. Da komponentlogikken er skrevet i JavaScript i stedet for i skabeloner, kan vi nemt sende rige data gennem vores app og holde tilstanden ude af DOM’en.

Deklarativ

React gør det smertefrit at skabe interaktive brugergrænseflader. Vi kan designe enkle visninger for hver tilstand i vores applikation, og React vil effektivt opdatere og gengive netop de rigtige komponenter, når vores data ændres.

Fordele og ulemper ved React

React kommer ligesom Svelte med nogle fordele og ulemper, som du bør være opmærksom på, før du vælger det som dit framework.

Fordele ved React

Her er de største fordele, der følger med brugen af React:

  • Genanvendelighed af kode: React anvender komponenter til udvikling, og de fleste af disse komponenter kan genbruges og kan ændres efter vores behov ved hjælp af props.
  • Effektiv SEO-optimering: Generelt har søgemaskinerne problemer med at læse tunge JavaScript-applikationer. React overvinder dette problem, hvilket er nyttigt for udviklere til den nemme navigation på forskellige søgemaskiner. React-apps kan køre på serveren, og den virtuelle DOM vil blive gengivet og returneres til browseren som en almindelig side.
  • Stort økosystem: React er et af de ældste webframeworks og har derfor et meget stort økosystem sammenlignet med de nyere. Det betyder, at der er mange ressourcer til rådighed for React-brugere, sammen med masser af udviklingsrelateret hjælp.
  • Biblioteker: Da React har et stort økosystem, betyder det også, at der er mange udviklere, der bygger værktøjer og biblioteker omkring React. Fællesskabet frigiver løbende fantastiske projekter, som bruges af millioner af React-udviklere regelmæssigt.

Ulemper ved React

Et par af ulemperne ved React er bl.a:

  • Vanskelig indlæringskurve: Som vi allerede har set tidligere, anvender React JSX – en meget ny teknologi, der er lavet til nye udviklere, der lige er begyndt med React. Mange udviklere bryder sig ikke om at bruge JSX på grund af den stejlere og vanskeligere indlæringskurve.
  • Begrænsninger som et bibliotek: React er et bibliotek og ikke et ægte webframework, hvilket betyder, at det ikke leveres færdigpakket med nødvendige funktioner og vigtige udviklingsværktøjer out of the box. Desuden udsætter dette appen for sikkerheds- og konsistensproblemer, og udviklere er nødt til at stole på kontinuiteten i eksterne biblioteker for at sikre, at deres React-app til enhver tid fungerer korrekt.
  • Dårlig dokumentation: React har ikke nogen ordentlig dokumentation på plads, da der er konstante opdateringer i React-miljøet, som kan blive svære at følge med i. På grund af dette kan det være svært for nybegyndere at komme i gang med React.

Svelte vs React: Sammenligning head-to-head

Nu hvor vi kender de grundlæggende funktioner, fordele og ulemper ved begge webframeworks, kan vi sammenligne dem frontalt for at nå frem til en konklusion om, hvilken af dem der er bedst, og hvilken du bør bruge.

Popularitet

Når det kommer til popularitet, er der ikke noget andet framework lige nu, som kan overgå React. React er det mest populære webframework-værktøj ifølge State of JavaScript 2021, hvilket er ganske fornuftigt sammenlignet med Svelte, da React har været med i JavaScript-økosystemet siden 2013, hvilket giver det en fordel i forhold til et nyudviklet webframework-værktøj som Svelte.

Frontend frameworks rangeret efter brug
Frontend frameworks rangeret efter brug i henhold til State Of JS – 2021.

Skalerbarhed og udvidelsesmuligheder

Både Svelte og React er skalerbare og stabile produktionsorienterede frameworks. Men når det kommer til udvidelighed, har React måske en lille fordel over Svelte takket være dets store økosystem og det fællesskab, der arbejder omkring det.

Der er tonsvis af eksterne biblioteker og værktøjer lavet til React, som vi så ovenfor, hvilket gør React mere udvidelig end Svelte og dets relativt lille økosystem.

Hastighed og ydeevne

Når det kommer til ydeevne og hastighed, kan Svelte på ingen måde udkonkurreres af React. Som vi allerede har set, gør Svelte det meste af arbejdet i kompileringsfasen i stedet for at gøre dem i browseren, hvilket React gør. Dette forbedrer ydelsen meget og giver et løft til serverens starttider.

Den næste ting, der giver Svelte et ydelsesboost, er det faktum, at den ikke bruger Virtual DOM. Ifølge Svelte er Virtual DOM måske hurtigere end Real DOM, men det er langsomt. Svelte har også en detaljeret artikel om dette på deres hjemmeside, som du måske vil læse.

Syntaks og læringskurve

Både Svelte og React følger en komponentbaseret udviklingsarkitektur, men forskellen ligger i det faktum, at React anvender JSX, mens Svelte er et sprog i sig selv, der består af de tre standardsprog: HTML, CSS og JavaScript.

Desuden er Svelte-koden meget lettere at læse og har ingen unødvendig kode. Det faktum, at Svelte som standard er ægte reaktivt, giver det en fordel i forhold til React i dette tilfælde.

Når vi taler om nem indlæring, har Svelte igen en fordel i forhold til React – grunden er, at de fleste udviklere allerede er flydende i HTML, CSS og JavaScript, før de begynder at bruge et framework. Da React bruger JSX, finder mange udviklere det alt for komplekst og sværere at forstå.

Bibliotekets størrelse

Hvad angår bibliotekernes størrelse, er Svelte mere let, idet den minificerede og GZippede version kun er på 1,7 KB. React er på den anden side næsten 44,5 KB minificeret og GZipped (både React og ReactDOM tilsammen).

Som du kan se, er Svelte næsten 22 gange lettere end React, hvilket også betyder, at Svelte-apps som standard indlæses hurtigere end React-apps.

Hvis du er på udkig efter endnu mere hastighed, bør du nøje overveje dine valg af hostingplatforme, da den forkerte kan koste dig på flere måder. Kinstas Applikation Hosting-tjenester henvender sig til udviklere, der søger en nem implementerings- og administrationsoplevelse til en lav pris uden at ofre hastighed eller sikkerhed. Fra start til slut tager implementering af Svelte- og React-apps kun et par minutter via MyKinsta-dashboardet.

Økosystem og dokumentation

Vi så allerede ovenfor, at React har et meget større økosystem end Svelte, da det er et af de ældste webframeworks i JavaScript-økosystemet. Det betyder, at det er meget nemmere at få support, kodehjælp og finde ressourcer, mens du bruger React, end det er med Svelte.

Når det kommer til dokumentation, overgår Svelte dog React. Svelte-dokumentationen er nogle af de bedste selvstændige ressourcer, der findes til at lære Svelte at kende – der er endda en indbygget interaktiv tutorial.

React har på den anden side en forholdsvis dårlig dokumentation, og det, de har, er ikke interaktivt. React-holdet arbejder dog på at frigive ny dokumentation, som er i beta nu og vil blive offentliggjort meget snart.

Ansættelsesmuligheder

Ifølge The State of JavaScript 2021 ligger React nummer et på både kendskabs- og anvendelsesranglisten, mens Svelte ligger på fjerdepladsen.

Vi kan tydeligt se, at der er et stort gab mellem React og Svelte her, hvilket også betyder, at der er flere muligheder for at arbejde med React end med Svelte.

Hvis du er en ny udvikler, anbefaler vi, at du starter med React for at øge dine chancer for at blive ansat.

Dynamisk styling

Både React og Svelte understøtter dynamisk styling, men forskellen ligger i, at React understøtter inline styling via JSX. I Svelte placerer vi stilarter i separate <style></style> -blokke i vores komponentfil.

Opsummering

Både React og Svelte er glimrende frameworks til at bygge gode brugergrænseflader – afhængigt af brugssituationen – og de har hver især deres egne fordele og ulemper. Du bør kunne beslutte, hvilken der passer bedst til dine behov, baseret på den sammenligning, vi har lagt ud her.

Hvis du er en nybegynder, der bare ønsker at forbedre dine færdigheder, bør du helt sikkert give Svelte en chance. Når det kommer til ydeevne og tilfredshed, overgår Svelte React på alle måder.

Men hvis du er en erfaren udvikler og allerede står på fast grund, vil React være det bedste valg for dig, fordi det har et stort økosystem, hvor det vil være langt lettere at finde ressourcer og få support. For en udvikler, hvis førsteprioritet er at blive ansat, er React det bedste valg med en konstant strøm af ledige stillinger fra Junior Developer til Senior Developer og videre.

Uanset hvilken af de to teknologier du vælger, er dit næste skridt dog at vælge en host til din applikation. Hvis du vil have hurtig implementering via GitHub, lynhurtige hastigheder og den bedste sikkerhed i klassen, skal du kigge på Kinstas løsninger til Applikation Hosting. Der er en plan, der passer til ethvert projekt, og hver plan leveres med 24/7 ekspertsupport fra vores team af erfarne udviklere.

Mellem Svelte vs React, hvilken af dem har du planer om at bruge næste gang, og hvad vil du bygge? Vi vil meget gerne høre om det! Del i kommentarfeltet nedenfor.

Ashirvad Bhushan

Ashish er studerende og solo-udvikler af passion. Han kan lide at arbejde tæt på nettet og skrive nyttigt indhold til udviklere.