Jeg hørte kode24 nevne Vue vs. Svelte på podcasten, og har litt å si om dette temaet, men skal prøve å forholde meg "kort".
Jeg er definitivt biased - jeg har brukt brukt vue siden 2015. Men jeg skrev også dette biblioteket som har pakker for både Svelte, Vue, React og Angular, så jeg har litt innsikt i de ulike.
I min "kortfattethet" så skal jeg også nevne litt om React og Angular.
«På det tidspunktet var Angular et hakk opp fra jQuery, men et hakk ned i forhold til React.»
Først kom React...
En av grunnene til at React ble populært i 2013 (eller når enn det var), var at en kunne tvinge seg selv (og sine medarbeidere) til å drive med funksjonell programmering.
Det gjorde at folk som tidligere hadde skrevet statefull spaghetti plutselig begynte å skrive kode som produserte det samme resultatet hver gang den ble kjørt.
React var relativt lavnivå, hvor det var opp til utvikleren å bestemme hvor ofte noe skulle rendres på nytt på skjermen.
På det tidspunktet var Angular et hakk opp fra jQuery, men et hakk ned i forhold til React når det kom til å skrive deklarativ kode.
Svelte, GPT-3, Blazor: Teknologiene som skuffa meg i 2021
...så Vue...
Det var i dette mellomrommet Vue oppstod. Det tok det beste fra Angular og det beste fra React, og kombinerte det inn i et rammeverk som ble kvitt boilerplate.
I stedet for at alt skulle være "pure" og "immutable", og heller enn at utvikleren skulle kontrollere når re-render skulle skje, så omfavnet Vue den "mutable" naturen av objekter, og valgte heller å spore alle endringer i data automatisk og selv bestemme når den skulle re-rendre.
På dette tidspunktet eksisterte ikke JavaScript proxies, og Vue var stuck med å bruke Object.defineProperty internt. Dette gjorde at det var en noen få gotcha's når en jobbet med mutering av objekter, og en kunne få bugs en måtte klø seg en del i hodet over før en skjønte feilen.
...og til slutt Svelte
Det var i dette mellomrommet Svelte oppstod.
Svelte kom på banen med tre features som ble lovprist:
- Mindre boilerplate fordi det fikser problemene rundt mutering av objekter og verdier i et kompileringssteg.
- Kompileringssteget fjerner Svelte som en avhengighet, så build output er mindre.
- Det bruker ikke virtual DOM.
Dette stemte bra i 2016, men påstandene til Svelte er en sannhet med modifikasjoner i 2022:
- Skepsis rundt web-komponenter skyldes manglende kunnskap
#1: "Mindre boilerplate"
Nå er Javascript proxies her, Vue 3 bruker det, og problemene rundt observering av objekter er borte.
Dette gjør at Vue 3 er tilnærmet lik Svelte i mengde kode en må skrive.
Og gotcha's som eksisterte rundt mutasjonssporing i Vue 2 er borte.
#2: "Build output er mindre"
Dette stemmer - ish.
Siden Svelte kompilerer vekk seg selv, så legger den igjen en del kode for å kunne ha komponentlogikk. Det viser seg at om en lager flere enn 13 (!) komponenter, så vil Svelte produsere større build output enn Vue.
Dette blir bare verre etter hvert som en legger til komponenter. Så for et prosjekt som er større enn "TODO MVC", vil Svelte produsere en mye større build enn et prosjekt i Vue.
Du også nysgjerrig på Svelte? Her er filosofien bak
#3: "Ingen virtual DOM"
Det stemmer.
Meeeen: Direkte DOM-access er raskere i noen tilfeller, treigere i andre.
Vue hadde ingen virtual DOM i v1, men byttet over til det i v2 for ytelse. Om det viser seg at browserne har blitt bedre over hele fjøla for de ulike case-ene, så vil nok Vue 4 bytte tilbake til å ikke bruke virtual DOM.
Sååå: Etter min mening så er det litt ubrukelig å bruke det som et promoteringspunkt.
«Koden en skriver er så langt borte fra build-output at det "by design" er vanskelig å skrive god developer tooling for.»
Venter på Angulars hype-øyeblikk
Dette forklarer også hvorfor det ble så mye hype rundt hooks i React. Endelig kunne de i funksjonelle React overlate både state og spørsmålet "Skal jeg rendre på nytt?" til rammeverket.
Når det kommer til Angular, så venter jeg fortsatt på hype-øyeblikket. De har noen veldig gode konsepter, og har tatt steget inn i den funksjonelle verden gjennom RxJS, men nettopp på grunn av RxJS så kan ting fort bli komplisert og vanskelig å debugge.
Enda verre er det med kompileringen. Koden en skriver er så langt borte fra build-output at det "by design" er vanskelig å skrive god developer tooling for. Hot module replacement finnes, men fungerer ikke for annet enn veldig små apper. Kompileringen gjør at det fort kan ta opp mot 20 sekunder fra en trykker "lagre" til browseren laster sida på nytt i et større prosjekt.
Nå snuser norske utviklere på Vue og web3: - Vil lære meg å lage dapps i 2022
Svelte vs. Vue
Men, men - jeg sa jeg skulle forholde meg "kort".
Så: Hva får du med Svelte som du ikke får med Vue?
- Du kan skrive "const x = 1" i stedet for "const x = ref(1)".
- Lengre byggetid, med fare for at en om fem år har like lange byggetider som Angular.
- Større build output.
- Lovnad om at ting blir bedre fordi én person har blitt ansatt i Vercel.
- Sitteplass på hype-toget. Dette er ikke bare ment negativt, jeg hoppet på hype-toget i 2015 med Vue, og heldigvis var dette et av togene som ikke sporet av underveis.
Jeg er spent på å se hvor det bærer, og heier på stadige forbedringer i livet mitt som utvikler.
Men jeg ser for øyeblikket ingen fordeler med å velge Svelte over Vue.
