Edument

Är Svelte en ny utmanare inom frontend?

Ett av de nya ramverken inom JavaScript är Svelte, det har seglat upp på topplistan och konkurrerar med bland annat React och Angular. Men är det här för att stanna?

Svelte har direkt gått in för att toppa listan över vilka JavaScript-ramverk det är störst intresse för hos utvecklare (källa). För några år sedan vände React upp och ner på världen av webbutveckling med sin Virtuella DOM, som har signifikanta fördelar över vanlig DOM-hantering. Nu kanske det är Sveltes tur med sin nya approach.  


Utvecklares intresse över JavaScripts olika ramverk:
 

Bildkälla



Svelte körs vid byggfasen och konverterar dina komponenter till mycket effektiv imperativ kod som kirurgiskt uppdaterar din DOM. Som ett resultat kan du skriva ambitiösa applikationer med utmärkta prestandaegenskaper. Svelte är tänkt att användas då det behövs en minimal script-nedladdning och där andra ramverk är alldeles för uppsvällda. Det är främst tänkt för miljöer i så kallat ”embedded web” – som wearables, internet-of-things, smart TV, osv - där varje kilobyte räknas. 



Vinnare av millisekunder

Enligt JS Framework Benchmark Test är Svelte snabbt som tusan, snabbare än både React, Vue och Angular. Sveltes implementation av TodoMVC väger bara 3,6 kb zippad jämfört med Reacts som väger 45 kb zippad. TodoMVC är ett test för att skriva en grundläggande webbapplikation i ett JavaScript-ramverk, för att utvärdera hur svårt/lätt det är att göra grundläggande operationer. 


I de senaste benchmarktesterna klår Svelte React och Angular i snabbhet på i stort sett alla fronter. Att det är ett snabbt ramverk behöver inte ifrågasättas, men huruvida millisekunder alltid är vinnande går att tvivla på och fundera över.  



Reaktiv programmering

I Svelte sker Reaktiv programmering inte som Reacts state-hantering eller Vues getter och setters, utan är ännu mer minimala; där en enkel tilldelning till en variabel får sidan att uppdatera sig. Reaktiv programmering sysslar med dataströmmar och flöden där en förändring i en variabel skapar en kedjeeffekt beroende på dess underliggande beroende variabler. 


Exempel: En ändring i variabel A kan få variabler B och C att uppdatera sig automatiskt. I Angular har de Observables och Rxjs för att orkestrera dessa dataflöden i programmen. 


Även Microsofts WPF stödjer modellen. För många är det en tilltalande modell för att få interaktivare gränssnitt.

 


CSS i Svelte

CSS i Svelte-komponenter är knutna (scopade) till komponenten och läcker inte ut. Det är bra för då behövs inte ännu ett bibliotek för att lösa det. Men man kan även använda CSS-in-JS, liknande Styled Components i React har, om man så vill.



Svelte mot toppen

Svelte har många av de features som en utvecklare förväntar sig av ett frontend-ramverk, men med fördelen att det blir ett väldigt minimalt script i slutändan. Men har Svelte vad som krävs för att ta över tronen från React och bli det mest använda ramverket?


As usual React and Vue lead the pack, but Svelte is quickly establishing itself as a very serious contender for the front-end crown.Källa



Slaget om tronen beror på en rad faktorer - kanske främst kravet på att Svelte måste lösa samma problem som React, fast på ett mer effektivt sätt; vilket kommer göra det enklare att utveckla samma slags funktionalitet. Kan Svelte konkurrera med de redan etablerade ramverken eller kommer det enbart användas när millisekunder är högst prioriterat? Ett exempel på detta är miljöer som kräver minimala script-filer, med till exempelvis dålig bandbredd, då är Svelte ett mycket intressant alternativ.


Oavsett det kan konkurrera om tronen eller ej är ramverket ett tydligt exempel på att innovationstakten inom JavaScript är fortsatt hög. Det är såklart svårt att sia om framtiden för Svelte och dess plats bland de övriga ramverken, men det är definitivt ett ramverk med potential som är värt att hålla i radarn. Huruvida det blir nästa succé får framtiden utvisa. 



Mer information



Av: Marko Poikkimäki



JavaScript seem to be disabled in your browser.

You must have JavaScript enabled in your browser to utilize the functionality of this website.