En React-Utvecklares Perspektiv på Svelte: Utforska Ny Terräng

Från React till Svelte: En Nybörjarguide i Jämförelse

Hej kodentusiaster och teknikälskare! Under min karriär som utvecklare har jag byggt applikationer och webbsidor och nästan alltid använt mig av React eller Next.js. Nyligen kom jag till en punkt där jag kände att det var dags att doppa tån i något annat. Bara för att få smaka på hype’en lite, är gräset grönare på andra sidan eller gör jag bäst i att vattna där jag står? Hur som helst, jag beslutade att, om jag lyckas trolla fram lite fritid mellan jobb och andra åtaganden så ska jag doppa mina tår i det knallorangea Svelte-vattnet!



Nu står jag här en och en halv hemsida senare och gör vad man skulle kunna kalla vadar runt i svelte. Om än små sajter så har jag i alla fall börjat få en känsla för vad Svelte och Sveltekit är för något. Så nu tänker jag dela med mig av några av mina egna upptäckta uppenbara skillnader från att gå från React till Svelte.

Och förresten, numera känns det som att det i bloggvärlden finns två typer. De som använder sig av chatGPT, och de som ljuger om att de inte använder chatGPT, (skämt). Men skämt åsido, det vore korkat att inte ta hjälp, speciellt eftersom det är typ andra gången jag skriver ett blogginlägg. Jag vill inte ni ska behöva lida eller att Squeed behöver skämmas över mig! Men! Jag ska göra så gott jag kan och i alla fall vara transparent med när chatGPT används. Hittills är det bara min min egna hjärna som fått jobba, men nu kommer ett stycke där chatGPT kort får sammanfatta vad react är och vad svelte är, så ni får en bas.

Prompt: Var god skriv en kort sammanfattning kring vad React är och vad Svelte är tonen ska vara sjukt sarkastisk för alla vet redan vad React och Svelte är egentligen. Publiken är ett gäng goa gubbar och gummor på LinkedIn och dylikt!

Kort Sammanfattning: React och Svelte för "Alla-Vet-Redan"-Publiken

React: "Återuppväckt Ur Dinosauriernas Era"

Ah, React! Ni vet, det där antika ramverket som alla och deras farmor har använt sedan stenåldern, låt oss prata om det som om ni aldrig hört talas om det. React, utvecklat av några okända typer på Facebook (någonsin hört talas om dem?), är det där ramverket som absolut ingen använder. Skojar bara! Det är ju överallt. React är som det där gamla, pålitliga verktyget i verktygslådan som du använder för att bygga nästan allt – från din lilla "Hello World" app till gigantiska, komplexa webbapplikationer som bara ska fungera. Men kom igen, vem behöver en virtuell DOM och komponentbaserad arkitektur dessa dagar? Åh, vänta, det är ju nästan alla...

Svelte: "The New Kid" som Försöker Göra Allt Annorlunda

Och här kommer Svelte, det nya, glänsande ramverket som försöker lära den gamla hunden React nya trick. Svelte är som den där nya hipstern i stan som tror att den kan göra allting bättre och effektivare. Ingen virtuell DOM? Kompilering vid byggtid för att spara användarnas dyrbara millisekunder? Oj, vad innovativt! Inte som om webbutvecklare bryr sig om prestanda och smidig kod. Men, erkänn, det är lite häftigt, eller hur? Fast det är fortfarande lite av en outsider jämfört med den stora, badande React.

Så där har ni det, goa gubbar och gummor på LinkedIn och dylikt. En helt "ny" och "revolutionerande" sammanfattning av React och Svelte. Ni visste nog allt detta redan, men ibland är det kul att låtsas vara förvånad.

Jag ska vara ärlig och säga att jag fnös nog till åtminstone en gång av att läsa det där stycket!

Okej, lite mer seriöst då! Nästan snart en tredjedel in i bloggartikeln och allt jag lyckats förmedla till er är att jag har testat Svelte och är en gammal React utvecklare.

Vi har i alla fall etablerat vad React och Svelte egentligen är (med en skopa sarkasm), låt oss dyka in i de tekniska aspekterna. Vi kommer att titta på några konkreta kodexempel för att verkligen se skillnaderna mellan dessa två ramverk.

Det första jag la märke till va såklart syntaxen…

Syntaxskillnader: En Närmare Titt

React använder JSX, en syntax som blandar HTML och JavaScript. Det är som en smakrik gryta med både kod och markup i samma skål. Det var också det som jag introducerades först för i min utvecklar karriär, jag är med andra ord lite biased för den här sortens syntax. Ett exempel på en enkel React-komponent:

(Tyvärr funkar inte code snippets så vi får leva med screenshots)

Här använder vi JavaScript inuti brackets för att infoga dynamiska värden. Komponenten tar emot `name` som en prop och visar den. Rätt standard, men man kan inte förneka att det ser ut som någon kastade in en handfull JavaScript direkt i sin HTML.

Svelte: "Renare" och "Förenklad" – Med Förbehåll

Svelte väljer en väg som skiljer sig markant från Reacts. Här får vi en syntax som påminner mer om klassisk HTML, med skript och stil-taggar för att hantera JavaScript och CSS. Men låt mig sätta "renare" och "förenklad" inom citattecken, för det finns en viktig poäng att göra här.

Som en utvecklare med en gedigen bakgrund i React, har jag utvecklat en djup uppskattning för JSX. Det är inte bara en del av min kodarv, det är ett sätt att tänka och strukturera applikationer. JSX förenar markering och logik på ett sätt som känns intuitivt och kraftfullt. Det skapar en sammanhängande upplevelse där komponenterna och deras beteende är tätt sammanflätade, vilket ger en känsla av kontroll och kreativ frihet.

I jämförelse, när jag närmar mig Svelte, är det som att komma in i en ny värld där gränserna mellan HTML, CSS och JavaScript är mer tydligt definierade. För vissa kan detta uppfattas som "renare" eller mer "förenklat", och det är det säkert – speciellt om du kommer från en bakgrund med mer traditionell webbutveckling och är van vid att arbeta med 'vanilla' HTML, CSS och JavaScript.

Men med min React-bakgrund, där JSX är en central del av hur jag tänker och kodar, upplever jag denna "renhet" och "förenkling" i Svelte inte alltid som en fördel. I börjar var det snarare tvärtom, det blev en extra kognitiv belastning. Hur som helst, det är en annan stil, absolut, men inte nödvändigtvis “överlägsen”, som många vill hävda. Svelte separerar alltså struktur, stil och beteende på ett sätt som kan kännas mindre integrerat än vad jag är van vid med JSX.

Så medan jag utforskar Svelte och dess unika erbjudanden, bär jag med mig en djup uppskattning för JSX och den flexibilitet och kraft det ger i Reacts ekosystem.

Men här är ett exempel på samma komponent som ovan fast i Svelte:

I Svelte exporteras name direkt i script-taggen, och används sedan inuti HTML-markupen, precis som i React. Men notera nu hur “snyggt” och organiserat allt är. Ingen JSX-här, bara god gammaldags HTML med en gnutta magi.

Nästa grej som jag upptäckte med Svelte vs React var att Svelte har inget behov av “props-drilling” och har en inbyggd store, wow! Jag behöver inte Redux längre!

Snabb recap av Reacts sätt att dela props till child-komponenter:

När du skickar data till en djupt liggande child-komponent, behöver du passera dessa parametrar genom varje mellanliggande komponent. Detta kallas "props-drilling". Om du har en djup komponenthierarki, kan detta bli ganska ohanterligt eftersom varje nivå i trädet behöver veta om och vidarebefordra propsen, även om de inte använder dem. Förutsatt att du inte använder React.Context eller t.ex: Redux såklart, som löser det problemet "centralt".

Exempel:

Svelte hanterar detta annorlunda, med hjälp av dess reaktiva inbyggda "store"-koncept. Istället för att manuellt skicka props genom varje nivå, kan du använda en store som är tillgänglig för alla komponenter som behöver den. Detta eliminerar behovet av att "borra" props genom flera komponentlager.

Såhär kan liknande logik se ut i Svelte:

Här, i Svelte, när du använder en store, behöver du inte skicka message som en prop från din parent-komponent till varje barn. Istället kan varje komponent som behöver datan enkelt prenumerera på storen. Detta förenklar strukturen avsevärt, speciellt i komplexa applikationer med många komponentlager.

Jag vet att nu tänker du säkert, ja jo visst… Men det är ju exakt vad React.Context gör för React. Och ja du har rätt i sak. Meeen, när du jämför detta med Svelte, är huvudskillnaden inte nödvändigtvis i funktionaliteten (både React Context och Sveltes stores erbjuder sätt att undvika props-drilling) utan mer i hur de implementeras och används i praktiken.

Sveltes store-system är inbyggt och centraliserat, vilket gör det lätt att använda och reaktivt "out-of-the-box". Det kräver inte samma setup som Reacts Context API, vilket kan vara lite mer involverat och kräver att du skapar en context och använder speciella hooks eller “higher order”- komponenter för att tillhandahålla och konsumera kontexten.

Sista intressanta skillnaden (innan det här blir för långt). Är “State”-hanteringen och hur den görs annorlunda:

State-hantering: React vs Svelte

Den sista betydande skillnaden som jag vill hinna med att nämna är hanteringen av "applikationstillståndet" (state) i React och Svelte. Det är här de verkliga olikheterna i deras filosofi och designmönster lyser igenom.

React: useState och Komponentbaserat State

I React hanteras tillstånd oftast med hjälp av hooks, som useState. Denna hook låter dig lägga till reaktivt tillstånd till en funktionskomponent. Tillståndet är lokaliserat inom den enskilda komponenten, om det inte delas med hjälp av Context eller lyfts upp till en parent-komponent.

I exemplet ovan är count en state-variabel, och setCount är en funktion för att uppdatera den. Varje gång setCount anropas, renderas komponenten om, med det nya tillståndet.

Svelte: Reaktiv Deklaration

Svelte tar en annorlunda approach till state-hantering. I Svelte blir varje variabel som tilldelas ett nytt värde automatiskt en del av komponentens reaktiva tillstånd. Det finns inget behov av en specifik state-hantering hook.

I Svelte-upplägget deklarerar du helt enkelt en variabel, och när den variabeln uppdateras, reagerar Svelte och uppdaterar DOM:en där det behövs. Detta är en mer direkt och mindre ceremoniell metod jämfört med Reacts explicita state-hantering.

Sammanfattning av Skillnader:

• React: Använder hooks som useState för att skapa och hantera tillstånd. Det krävs en mer explicit hantering och uppdatering av tillståndet.
• Svelte: Varje variabel kan vara reaktiv. När en variabels värde ändras, reagerar Svelte automatiskt utan behov av en specifik hook eller funktion för att hantera tillståndet

Mina tankar kring state hanteringen.

Jag har ju genom åren vant mig vid en viss ordning och struktur när det gäller state-hantering. Reacts explicita användning av useState och andra hooks ger en tydlig ram för hur och var tillstånd skapas och hanteras. Det finns en viss trygghet i detta upplägg – du vet alltid var ditt tillstånd kommer ifrån och hur det påverkar dina komponenter. När jag jämför detta med Svelte, stöter jag på en väldigt annorlunda filosofi. Sveltes tillvägagångssätt, där variabler automatiskt blir reaktiva när de ändras, verkar till en början otroligt smidigt och enkelt. Det är mindre kod, mindre bök med hooks och state-hanterare, och en övergripande känsla av enkelhet. Men för någon med min bakgrund i React, kan denna enkelhet ibland kännas förvirrande, nästan som att man “gör fel”. I React är jag van vid att explicit deklarera och hantera state, vilket ger en känsla av kontroll och förutsägbarhet. I Svelte, däremot, sker mycket av denna hantering “bakom kulisserna”, vilket kan kännas lite för magiskt och okontrollerat.

Well well, det får nog räcka så för den här gången! 2000+ ord och jag lyckades inte förmedla mer än tre skillnaderna React vs Svelte, nästan som att missa öppet mål. Men ni har kanske fått lära känna mig lite mer, (nej det har ni inte). Däremot har jag delat med mig lite utav mitt React-perspektiv på några Sveltes specifika skillnader. Tanken för fortsättningen är att jag kommer hålla i ett tech-talk ca 45min där jag försöker klämma in lite flera skillnader och anekdoter från min React karriär och kanske får ni med er något nyttigt den dagen i alla fall.

Tack för ni läste min andra bloggartikel, och tack för överseendet. Tech-Göteborg är inte stort så vi kanske ses. Det hade också varit kul att läsa om er läsares uppfattning av Svelte om ni gett det ett försök och vilken bakgrund ni har i så fall.

Hejdå och God Jul!