> Svelte 4 reduces the Svelte package size by nearly 75% (10.6 MB down to 2.8 MB), which means less waiting on npm install. This improvement will be especially noticeable for users who are loading our interactive learning experience on learn.svelte.dev for the first time, users of the Svelte REPL, and users with limited connectivity. The majority of the remaining package size is eslint support, which necessitates distributing a CJS build, and once the eslint rewrite is completed the Svelte package size can drop by over another 50%.
Speaking about size reduction, I once had a client who want me to update his product as it became extremely slow and buggy. The product was an MS Word Add-In that was run on an MS Surface which takes shots using webcam and insert them into the active document, it was built in .Net and the previous developer used, as I recall, OpenCV library to take the shots. The installation binary was around 300MB! And, to add insult to injury, both x86 & x64 of OpenCV were included in binary which made the final binary more than 600MB. I then used a tiny lib in C# to take webcam shots and rebuild the entire solution from scratch which generated a binary of around 1MB. The client had some concerns and suspicions about my delivery but once he tried it in a clean Surface, he realized what I did. It was like magic for him but not for me. I was happy because I made him happy :)
I remember when I was talking about some code my team wrote once and we'd managed to get an operation down from 6 hours to like 5 minutes.
Another manager said to me (fairly with hindsight) "If you get something down from two hours to one hour, that's an opimisation. Going from 6 hours to 5 minutes means it just wasn't finished."
> I _would_ say that this will result in no changes that are observable to users of the framework, but that's not quite true — it will result in smaller packages (no need to ship giant sourcemaps etc), and you'll be able to e.g. debug the framework by cmd-clicking on functions you import from `svelte` and its subpackages (instead of taking you to an unhelpful type declaration, it will take you to the actual source, which you'll be able to edit right inside `node_modules` to see changes happen).
Let's hope all baggage was not offloaded to some extra dependency ;) In all seriousness I would like to see more packages competing to reduce size and dependencies count to absolute minimum.
I'm used to Svelte, and I remember last year when I tried to install a basic NextJS starter template (create-nextjs-app) I had to wait a minute or so for all the npm dependencies to install. I then checked my project folder and it was 600MB....mindblowingly bloated.
As somebody looking for a more effcient (less re-rendering) and nicer DX (template based, stuff like exit animations) alternative to React, what actually makes Svelte measurably better than Vue? On first (and very naive) look the two seem pretty similar, with the biggest difference being that Vue seems to have the much bigger ecosystem and more mature tooling (I keep hearing about Svelte's flavor of JS basically being its own language now and it not playing all that well with Typescript). From what I remember they even once had a virtual DOM-replacing Ahead of Time compiler, so that might not be the biggest moat either.
Both can be fiddled around with to support rendering using JSX, but it seems to easier and better supported for Vue.
Now I wonder whether the performance benefit is big enough to justify using Svelte, especially since Vue already uses a "compiler informed virtual DOM".
Anecodally all Vue apps I have used felt fast while the React experience was more mixed, but the sample on the Vue side is also just really small.
> I keep hearing about Svelte's flavor of JS basically being its own language now and it not playing all that well with Typescript
it's a weird habit on HN to refer to random rumours that have discouraged you from trying something, and then explicitly not link to even the source of the random thing you're thinking of.
I would guess you're misremembering something about the *developers of Svelte* saying they didn't think Typescript was worth it for *developing libraries*, and so they were switching to using JSDoc annotations for developing Svelte, which has no impact at all on Typescript or Svelte or Svelte users using Typescript?
Vue 3 (with <script setup> is quite close to Svelte in terms of DX, but Svelte has the edge here. Svelte is so simple, elegant and concise.
The biggest advantage of Vue is the ecosystem. However, Svelte is catching up. Some interesting UI component libs have recently arisen, e.g. https://skeleton.dev.
Performance wise, both are super fast.
Make sure to check out Sveltekit, even for building pure SPAs. The routing and data loading are worth it alone.
The performance difference is huge. A few years ago I launched an interactive consumer app on very resource constrained devices that would have been impossible with React or Vue (I empirically tested both). Think dual or quad core 1Ghz arm processors with zero GPU acceleration running electron.
The only optimization I had to implement was virtualization when showing hundreds of off screen images (an optimization I would have had to implement regardless of framework).
> From what I remember they even once had a virtual DOM-replacing Ahead of Time compiler, but walked back on it for some reason.
nope, its still there, just is less complicated than you make it sound with those adjectives in front of "compiler"
in the days of svelte 3 vs vue 2, i'd say the authoring experience was a lot more straightforward as vue had constraints around being a drop in framework. but then vue 3 came with "script setup" and other svelte inspired improvements that brought it a lot closer to svelte. am a bit uncomfortable with the 2->3 churn in the vue ecosystem (https://twitter.com/swyx/status/1482778158537801728) but havent actually tested it out since
I have little experience with Vue but to me Vue is very similar to React.
What sold me on svelte is the fact that I learned like all of it in maybe 3 hours. I have tried to pick up React here and there and I get the fundamentals but I hate that you need an architecture framework, a router framework etc. Svelte has a standard way of doing that.
Writing Svelte, I actually had "fun" building stuff, I can't say the same thing about my React attempts.
> especially since Vue already uses a "compiler informed virtual DOM"
Not diffing at all against a virtual DOM and instead executing the pre-compiled DOM manipulations is an order of magnitude better in terms of processing. It also avoids diffing entirely. At a casual glance, the compiler hints and other VDOM optimisations in Vue reduce but do not obviate this burden (e.g., don't re-render static nodes, flatten the DOM tree to avoid traversing) But as ever, it's best to measure these things and I can't seem to find any recent benchmarks between the two platforms, and any benchmark would vary wildly depending on use-case, and with the exigencies of real-world development.
I haven't worked with Svelte (but with Vue, so def biased) but my feeling is that where Vue really shines (and always have, compared to other frameworks) is it's data reactivity system, making data (including but not limited to) stores very nice to author.
The composability of Vue 3 data stores makes it imo really nice to work with for anything a little bit more complex, and I've yet to see anything as good.
Svelte is more like a compiler than a library. The code you ship is plain JavaScript without any svelte dependency. That’s why svelte has always been simple and fast.
I've recently embraced Svelte for my side-projects, hackathons, and personal endeavors, and I must say, I'm absolutely enamored with its developer experience (DX) when compared to React. If you're interested, I've shared some of my thoughts about this on my personal website: https://www.kabirsewani.com/blog/why-svelte . (However, if personal links are not permitted, I'd be more than happy to provide a brief summary instead.)
I understand this thought for external dependencies, but dependencies also includes internal ones, which I don't see a reason to reduce. Modularity and re-usability of individual pieces of code are a good sign for me.
@dang https://news.ycombinator.com/item?id=36432447 was on the front page and has substantially more discussion. It was somehow marked as a duplicate of this post. Could you merge them?
I tested the beta version of Svelte 4 on my app and it worked without requiring any changes other than running the migration script. Excellent work from the team!
The breaking changes aren't really gamechanging stuff, just cleaning up baggage in preparation for Svelte 4.x and Svelte 5. The course would still be fully applicable
I took the course when he did it live. There is lots of good stuff in there. The meat of the course was mostly going through learn.svelte.dev. One day was on Svelte and one day was on Sveltekit. The most interesting part was the end of day sessions where you actually build apps.
I don't think you learn anything that wouldn't apply to Svelte 4. It's intended as a smaller update to prep them for bigger changes coming in Svelte 5.
Could someone give a one or two sentence explanation of why I would want to use Svelte over something like React? I have heard it is "better", but have never understood why.
The only problem I have with Svelte is that I can't find a job. Only seen one in the last six months and they bailed after we discussed pay.
I love Vue but I really wanted to work on an actual project with Svelte because the developer experience was fantastic. Guess I'll have to wait a few more years.
Almost every job is react, react, react. It's exhausting dealing with the cultists
> Svelte 4 reduces the Svelte package size by nearly 75% (10.6 MB down to 2.8 MB), which means less waiting on npm install. This improvement will be especially noticeable for users who are loading our interactive learning experience on learn.svelte.dev for the first time, users of the Svelte REPL, and users with limited connectivity. The majority of the remaining package size is eslint support, which necessitates distributing a CJS build, and once the eslint rewrite is completed the Svelte package size can drop by over another 50%.
I'd recommend it to anyone who is focused on actually just shipping UI and making progress (not bike shedding or wasting time, you know who I'm talking about lol).
It is a nice paradigm that lets devs focus on just writing HTML, CSS, and JS with a little bit of teeny tiny magic (it is actually easy to understand). That's it.
What an odd coincidence, after seeing Svelte for years I decided to actually try it for the first time yesterday, and now this drops. To be honest the timing of this is actually kind of a shame (just for me) as I haven't used it nearly enough to be particularly excited about this, but seeing as Svelte 3 was 4 years ago, I doubt I'll see another one anytime soon.
I'm curious what peoples' experiences have been using modern react vs svelte vs whatever else is popular these days. I used react a while back for a dashboard mockup and was pretty happy with it.
Something about svelte being a superset of standard html/js/css that gets compiled bothers me. I realize that the same can be said about typescript/tsx but I feel like in can trust it more... Maybe it's a maturity thing? Or that it's just one language getting compiled to its subset (with syntactic sugar for dom elements)
Can someone point me to a concise location of getting a development environment setup for Docker.
Spent an hour or so after reading this and found conflicting information/out of date documentation. The tutorial[1] on the website is not helpful for actual deployment/development.
I found Svelte for New Developers[2] which is slightly better, however, when building according to the instructions what I expect to happen is not happening. i.e, a static index.html is rendered vs. the src/App.svelte getting rendered.
Wrangling all of this is the worst part of modern day Javascript.
I can't help you with a docker setup, but if I'd highly recommend Vite for standing up a working Svelte dev environment (or Sveltekit, or React, or Next for that matter): https://vitejs.dev/guide/
You'll be up and running in seconds. This is all you need to know:
I've heard of Svelte but am not sure exactly what it does. So this time I went to their homepage and it doesn't provide any concise summary of what it is.
If I had to guess, I'd say it packages Javascript up into an application that runs locally, but... ¯\_(ツ)_/¯
It's just a frontend framework for building fast, interactive frontends.
If you're interested in seeing what all the fuss is about and have 5-10 minutes to spare, you could start https://svelte.dev/tutorial/basics and get a pretty good sense of it in less than 10 minutes
One of the platforms I built before used jquery and bootstrap, while it obviously do the job but I was looking to revamp the whole UI, svelte was one of the options as it’s close to vanilla js, react is troublesome unless you enjoy your app breaks next time you update it. The only thing I’m looking for, is there any component based svelte UI I can choose from and quickly build my UI, similar to bootstrap if that make sense, as I usually do embedded development and last thing I want is to work wuth css.
To be more exact on what I want to do: is a dynamic dashboard, where users can add widgets or/and resize them per needed.
[+] [-] m8s|2 years ago|reply
Wow, that’s a pretty big reduction.
[+] [-] redbell|2 years ago|reply
[+] [-] gadders|2 years ago|reply
Another manager said to me (fairly with hindsight) "If you get something down from two hours to one hour, that's an opimisation. Going from 6 hours to 5 minutes means it just wasn't finished."
[+] [-] flanbiscuit|2 years ago|reply
> I _would_ say that this will result in no changes that are observable to users of the framework, but that's not quite true — it will result in smaller packages (no need to ship giant sourcemaps etc), and you'll be able to e.g. debug the framework by cmd-clicking on functions you import from `svelte` and its subpackages (instead of taking you to an unhelpful type declaration, it will take you to the actual source, which you'll be able to edit right inside `node_modules` to see changes happen).
[+] [-] butz|2 years ago|reply
[+] [-] gnrlst|2 years ago|reply
[+] [-] DonHopkins|2 years ago|reply
[+] [-] solarkraft|2 years ago|reply
As somebody looking for a more effcient (less re-rendering) and nicer DX (template based, stuff like exit animations) alternative to React, what actually makes Svelte measurably better than Vue? On first (and very naive) look the two seem pretty similar, with the biggest difference being that Vue seems to have the much bigger ecosystem and more mature tooling (I keep hearing about Svelte's flavor of JS basically being its own language now and it not playing all that well with Typescript). From what I remember they even once had a virtual DOM-replacing Ahead of Time compiler, so that might not be the biggest moat either.
Both can be fiddled around with to support rendering using JSX, but it seems to easier and better supported for Vue.
Edit: The AOT compilation was called "Reactivity Transform" and dropped due to the aforementioned shift away from "real" JavaScript: https://vuejs.org/guide/extras/reactivity-in-depth.html#runt...
Now I wonder whether the performance benefit is big enough to justify using Svelte, especially since Vue already uses a "compiler informed virtual DOM".
Anecodally all Vue apps I have used felt fast while the React experience was more mixed, but the sample on the Vue side is also just really small.
[+] [-] bananapub|2 years ago|reply
it's a weird habit on HN to refer to random rumours that have discouraged you from trying something, and then explicitly not link to even the source of the random thing you're thinking of.
I would guess you're misremembering something about the *developers of Svelte* saying they didn't think Typescript was worth it for *developing libraries*, and so they were switching to using JSDoc annotations for developing Svelte, which has no impact at all on Typescript or Svelte or Svelte users using Typescript?
e.g. https://devclass.com/2023/05/11/typescript-is-not-worth-it-f...
anyway, Svelte is fairly similar to Vue, just a subjectively slightly nicer style. do both tutorials and see which you like I guess?
[+] [-] WuxiFingerHold|2 years ago|reply
The biggest advantage of Vue is the ecosystem. However, Svelte is catching up. Some interesting UI component libs have recently arisen, e.g. https://skeleton.dev.
Performance wise, both are super fast.
Make sure to check out Sveltekit, even for building pure SPAs. The routing and data loading are worth it alone.
[+] [-] civilitty|2 years ago|reply
The only optimization I had to implement was virtualization when showing hundreds of off screen images (an optimization I would have had to implement regardless of framework).
[+] [-] swyx|2 years ago|reply
nope, its still there, just is less complicated than you make it sound with those adjectives in front of "compiler"
in the days of svelte 3 vs vue 2, i'd say the authoring experience was a lot more straightforward as vue had constraints around being a drop in framework. but then vue 3 came with "script setup" and other svelte inspired improvements that brought it a lot closer to svelte. am a bit uncomfortable with the 2->3 churn in the vue ecosystem (https://twitter.com/swyx/status/1482778158537801728) but havent actually tested it out since
[+] [-] adamnemecek|2 years ago|reply
What sold me on svelte is the fact that I learned like all of it in maybe 3 hours. I have tried to pick up React here and there and I get the fundamentals but I hate that you need an architecture framework, a router framework etc. Svelte has a standard way of doing that.
Writing Svelte, I actually had "fun" building stuff, I can't say the same thing about my React attempts.
[+] [-] samwillis|2 years ago|reply
https://blog.vuejs.org/posts/2022-year-in-review
[+] [-] h0l0cube|2 years ago|reply
Not diffing at all against a virtual DOM and instead executing the pre-compiled DOM manipulations is an order of magnitude better in terms of processing. It also avoids diffing entirely. At a casual glance, the compiler hints and other VDOM optimisations in Vue reduce but do not obviate this burden (e.g., don't re-render static nodes, flatten the DOM tree to avoid traversing) But as ever, it's best to measure these things and I can't seem to find any recent benchmarks between the two platforms, and any benchmark would vary wildly depending on use-case, and with the exigencies of real-world development.
[+] [-] cjblomqvist|2 years ago|reply
The composability of Vue 3 data stores makes it imo really nice to work with for anything a little bit more complex, and I've yet to see anything as good.
[+] [-] dist-epoch|2 years ago|reply
I suspect author (Evan) lost interest, given the Vue 2/3 situation (similar to Python 2/3) and the lost battle against React.
[+] [-] s__s|2 years ago|reply
[+] [-] foxandmouse|2 years ago|reply
[+] [-] dimgl|2 years ago|reply
The virtual DOM was created to solve browser performance issues with the actual DOM. This may not be relevant anymore, but that's why it was made.
[+] [-] afavour|2 years ago|reply
Adore this. Would love to see more JS frameworks reduce their dependency trees.
[+] [-] Timon3|2 years ago|reply
[+] [-] silverwind|2 years ago|reply
[+] [-] benmccann|2 years ago|reply
[+] [-] pronoiac|2 years ago|reply
[+] [-] khromov|2 years ago|reply
I tested the beta version of Svelte 4 on my app and it worked without requiring any changes other than running the migration script. Excellent work from the team!
[+] [-] laurels-marts|2 years ago|reply
[+] [-] gonzaloalvarez|2 years ago|reply
[+] [-] azemetre|2 years ago|reply
https://frontendmasters.com/courses/svelte-v2/
From the migration there does appear to be some breaking changes, don't know how that aligns with the course which I planned to take.
His old course was good as well, but that relied on Sapper.
[+] [-] csjh|2 years ago|reply
[+] [-] cadooo|2 years ago|reply
I don't think you learn anything that wouldn't apply to Svelte 4. It's intended as a smaller update to prep them for bigger changes coming in Svelte 5.
[+] [-] Orangeair|2 years ago|reply
[+] [-] nu11ptr|2 years ago|reply
[+] [-] beebeepka|2 years ago|reply
I love Vue but I really wanted to work on an actual project with Svelte because the developer experience was fantastic. Guess I'll have to wait a few more years.
Almost every job is react, react, react. It's exhausting dealing with the cultists
[+] [-] swyx|2 years ago|reply
also
> Svelte 4 reduces the Svelte package size by nearly 75% (10.6 MB down to 2.8 MB), which means less waiting on npm install. This improvement will be especially noticeable for users who are loading our interactive learning experience on learn.svelte.dev for the first time, users of the Svelte REPL, and users with limited connectivity. The majority of the remaining package size is eslint support, which necessitates distributing a CJS build, and once the eslint rewrite is completed the Svelte package size can drop by over another 50%.
[+] [-] moomoo11|2 years ago|reply
I'd recommend it to anyone who is focused on actually just shipping UI and making progress (not bike shedding or wasting time, you know who I'm talking about lol).
It is a nice paradigm that lets devs focus on just writing HTML, CSS, and JS with a little bit of teeny tiny magic (it is actually easy to understand). That's it.
[+] [-] bodge5000|2 years ago|reply
All sounds great anyway, congrats to the team!
[+] [-] kayson|2 years ago|reply
Something about svelte being a superset of standard html/js/css that gets compiled bothers me. I realize that the same can be said about typescript/tsx but I feel like in can trust it more... Maybe it's a maturity thing? Or that it's just one language getting compiled to its subset (with syntactic sugar for dom elements)
[+] [-] ComputerGuru|2 years ago|reply
(I believe the new 1Password app is powered by Svelte.)
[+] [-] bovermyer|2 years ago|reply
[+] [-] SkyMarshal|2 years ago|reply
[+] [-] benmccann|2 years ago|reply
[+] [-] nickstinemates|2 years ago|reply
Spent an hour or so after reading this and found conflicting information/out of date documentation. The tutorial[1] on the website is not helpful for actual deployment/development.
I found Svelte for New Developers[2] which is slightly better, however, when building according to the instructions what I expect to happen is not happening. i.e, a static index.html is rendered vs. the src/App.svelte getting rendered.
Wrangling all of this is the worst part of modern day Javascript.
1: https://learn.svelte.dev/tutorial/welcome-to-svelte 2: https://svelte.dev/blog/svelte-for-new-developers
[+] [-] pcthrowaway|2 years ago|reply
You'll be up and running in seconds. This is all you need to know:
(if you're looking for sveltekit it's the same command, you'll just select sveltekit in the prompt)[+] [-] unknown|2 years ago|reply
[deleted]
[+] [-] ShadowBanThis01|2 years ago|reply
If I had to guess, I'd say it packages Javascript up into an application that runs locally, but... ¯\_(ツ)_/¯
[+] [-] pcthrowaway|2 years ago|reply
If you're interested in seeing what all the fuss is about and have 5-10 minutes to spare, you could start https://svelte.dev/tutorial/basics and get a pretty good sense of it in less than 10 minutes
[+] [-] AHOHA|2 years ago|reply
To be more exact on what I want to do: is a dynamic dashboard, where users can add widgets or/and resize them per needed.