Svelte - det "nye" frontend-rammeverket!

**automatisk oversatt tekst**

I de siste årene har frontend fokusert på populariteten til Vue, React og Angular. Men nylig har en ny spiller dukket opp og fascinert frontend-ekspertene. Svelte – det er navnet på den "nye" oppdagelsen.

Vi observerer at nyskapende programvare forsvinner like raskt som de ble til. Likevel, nå og da, forblir et rammeverk lenger, og svelte kan være akkurat tilfelle. La oss vurdere det et øyeblikk.

Når du hører det "nye" rammeverket, får du umiddelbart deg selv å stille det samme spørsmålet som alle programmerere. Hva annet kan du gjøre for å lette programvareutvikling? IT-verdenen er så dynamisk at den bare oppstår nye produkter hver gang. Til tross for at de gjentatte ganger har hørt om komponenter og reaktivitet, gjør krokbaserte løsninger også et gjennombrudd.

Alle tilgjengelige markedsrammeverk har én ting til felles – vi legger dem til programvarekildekoden. Her er Svelte unntaket fra regelen.

Hva er Svelte?

Rammeverket har vært på markedet siden 2016, og dets popularitet har blomstret siden den gang. La oss se på hvorfor den tredje utgivelsen fikk så mye oppmerksomhet.

Popularitetstrend blant Github-brukere. Kilde: https://www.npmtrends.com/svelte

Data på diagrammet viser en betydelig endring i utvikleres interesse. Trenden ble veldig tydelig ved utgivelsen av den siste versjonen. Bare så om 3 år, selv før det, kunne Svelte samle et ganske stort og dedikert brukerfellesskap. Sammenlignet med React eller VueJS virker den ganske liten. Likevel har disse rammene eksistert siden 2013, som er 3 år lenger enn Svelte. I følge data fra npmtrends.com kan du sammenligne disse rammeverkets nedlastingsforhold innen 3 år etter utgivelsen. Svelte, med sine 69 479 brukernedlastinger og på samme utviklingsstadium som de to andre, gjorde det utrolig bra.

Den betydelige forskjellen mellom Svelte og React ligger i tall. Ikke rart, det er så stort siden Facebook Inc. støtter teknologien.

State of JS gjennomfører årlige meningsmålinger som retter seg mot programmerere fra hele verden. Data som samles inn gir oss mye interessant materiale.

Ulike meningsmålinger om de undersøkte teknologiene. Kilde: https://2019.stateofjs.com/front-end-frameworks/

21 717 respondenter fra hele verden deltok i undersøkelsen. Ser du nøye etter ser du at Svelte har den laveste andelen misfornøyde brukere. De som har erklært å bruke det minst én gang og vil ikke gjøre det i fremtiden. Ifølge data har det en stor appell innen programmerere, og de ønsker å lære Svelte.

Det som virker litt rart, de fleste på tidspunktet for studien hadde ikke hørt om Svelte ennå. Den nåværende undersøkelsen resultater og kan øke Svelte popularitet snart. Interessant nok hadde VueJS den samme utviklingsveien for nesten 3 år siden – nå, det nest mest populære JS-rammeverket. Forskning fra State of JS, tilstede på diagrammet, avslører at Svelte tok ledelsen i 2019 innenfor flere populære rammer.

Rangering av populære frontend-teknologier. Kilde: https://2019.stateofjs.com/front-end-frameworks/

Svelte er i ferd med å bli fremtredende blant anerkjente JavaScript-rammeverk. Er det en spesifikk grunn til at den har fått så mye anerkjennelse? Hva har den over konkurrentene? Vil det være en forløper i frontend-teknologiene?

Det er vanskelig å si entydige svar på disse punktene. Den eneste kilden du kan stole på dine tanker, brukerundersøkelser og statistikk basert på innsamlet data. I tillegg kan følelsen av frontend-markedsmiljøet og dets krav komme til nytte i sammenhengen.

Svelte – i motsetning til andre

Noen sier at Svelte er et kraftig alternativ til de ledende frontend-rammeverkene. Som React eller Vue kan du bruke den til å bygge hele applikasjoner og deres spesifikke komponenter. Sveltes fremtredende trekk er enkelheten ved koding.

I den nyeste versjonen ble rammemekanismene mer forenklet. Som et resultat er det mindre kode å håndtere, og du kan implementere applikasjonen mye raskere. Følgelig gjør det utviklernes jobb mindre krevende – enklere kodeadministrasjon og færre feil.

Sammenlignet med andre rammeverk er kildekoden ikke knyttet til den endelige koden. Rich Harris, Sveltes skaper og Babel-verktøyutvikler, brukte sin tidligere erfaring med å kompilere JavaScript-kode.

Svelte oppfører seg som en kompilator under produksjonsbyggeprosessen. Den omkoder syntaksen til ren JavaScript. Ved å bruke native JS-løsninger endrer den kildekoden litt, slik at den kan fungere uavhengig uten eksterne verktøy. Kompileringsresultatet er innebygd JavaScript uten innlasting av rammekode. Hvordan hjelper det egentlig? Svaret er ganske enkelt ved å øke hastigheten betraktelig.

Svelte – raskere enn andre

I følge alle verktøy for testing av netthastighet, presterer Svelte-baserte nettsteder veldig bra og er ekstremt responsive. Derfor kan du stole på en høy rangering i PageSpeed ​​Insights fra Google.

Svelte-skaperen/utvikleren har også forutsett noen fremtidige krav knyttet til SEO. For eksempel er Sapper et verktøy som lar deg kjøre prosjektet i Server Side Rendering-modus. Den støtter også utmerket SEO-synlighet og høyere indekseringsfrekvens av søkemotorer.

Fra et SEO-perspektiv er disse to gyldige fordeler for å begynne å bruke Svelte.

Svelte testforsøk

Derfor testet jeg selve ytelsen til løsninger basert på beskrevne rammeverk: Svelte, React, Vue. For testingens skyld har jeg laget tre nesten identiske prosjekter med separat semantikk per hvert rammeverk. Deretter kjørte jeg dem alle under identiske forhold: samme server, samme konfigurasjon og ingen ekstern belastning. Testing i samme miljø gjorde det mulig å observere forskjeller i responshastighet, ytelse og filstørrelser. Hver applikasjon må gjengi en viss mengde sifre fra Fibonacci-sekvensen.

Først testet jeg gjengivelseshastigheten for de første 50 tallene i en sekvens. Resultatene er følgende:

Ytelsestest #1 – Svelte (Devtools Chrome)

Ytelsestest #1 – React (Devtools Chrome)

Ytelsestest #1 – Vue (Devtools Chrome)

Bare ved å se på resultatene kan du se at Svelte ligger foran konkurrentene. Den er raskere enn React med 1,8 ms og 5,1 ms enn Vue-applikasjonen.

En annen test, jeg utviklet med Lighthouse-verktøyet. Jeg ønsket å måle sideytelsen. Også her ble vinneren Svelte.

Sideytelsestest #2 – Svelte (Devtools Chrome Lighthouse)

Sideytelsestest #2 – React (Devtools Chrome Lighthouse)

Sideytelsestest #2 – Vue (Devtools Chrome Lighthouse)

Til slutt sammenlignet jeg filstørrelsene for hver applikasjon. I skjermbildene nedenfor kan du se at både React og Vue bruker kildekodene sine på en kjøretid. Svelte gjør det ikke, og derfor veier filen bare 5 kb, når den for React er over 130 kb, og for Vue 85 kb.

Nettverksnedlastingsproduksjonsfilstørrelse - Svelte (Devtools Chrome)

Nettverksnedlastingsproduksjonsfilstørrelse - React (Devtools Chrome)

Nettverksnedlastingsproduksjonsfilstørrelse - Vue (Devtools Chrome)

Oppsummerer det

Svelte er et verktøy som lar deg tilnærme programmering annerledes. Det er de facto den første rammeverkskompilatoren noensinne. Mens du bruker den, får du en ren objektkode – den som er skrevet av programmereren. Det er nettopp grunnen til at det kan revolusjonere frontend-teknologifeltet.

Tiden vil vise om Svelte blir lenger. Det vil i stor grad avhenge av Svelte-utviklere, og deres eneste motivasjon for å støtte og optimalisere rammekomponentene. Bare å skape et stabilt miljø kan bære positive resultater og drivkraft i nye Svelte-troende.

Utviklingen vil dreie seg om kompileringsprosessen og dens forbedring. Deretter legger du til automatiske enhetstester for å sjekke utviklerens kode i kompileringstiden – uten å lage egne tester fra bunnen av.

Svelte, med sine to forter – enkelhet og hastighet, surfer inn i fremtiden i nye retninger og IT-løsninger. Hold øye med Svelte-rammeverket. Om 2-3 år kan det bli en av nøkkelaktørene i JavaScript-fellesskapet.