DEV Community

What's New in Svelte 4: Performance Boosts and Streamlined Development

Pierre Bouillon on June 25, 2023

On the 22th of June, Svelte has announced its new major release. Even if it is presented as "mainly about setting the ground for these future impr...

Read full post

Ting • Jun 26 '23

Been looking into svelte and solid, how does Svelte 4 compare to Solid with all these new improvements?

Pierre Bouillon • Jun 26 '23

I wish I could answer you precisely, however si do not know SolidJS (nor Svelte but I’m working on it) enough to give you a proper feedback on this

I guess that the core features and performance are still the same (so far, before Svelte 5) but that at least the size of Svelte 4 is not a pain point anymore!

Ting • Jul 1 '23

No worries, thank you for making the post! Maybe I will try them out and share my experience as a total noob :)

Jyothikrishna • Jun 26 '23

Hello @ting 👋. Welcome to Dev community

Ting • Jun 26 '23

Thanks!

Dimitri Mostrey • Jun 25 '23

Thanks for the article. Svelte is on my radar. Upgrading my vast Laravel website to LiveWire and alpinejs. And Tailwind... A stepping stone towards an API. A lot to do but worth it. So I hope.

Maybe the SPA will be Svelte based. Alpinejs has a similar code structure. I'll wait for Svelte 5.

Pierre Bouillon • Jun 25 '23

Thanks for reading and your feedback!

I also kept an eye on Svelte, to see if it can still prove relevant among the other giants of JS Frameworks

So far they are still proposing some interesting features and updates seems to stay relevant and in the same spirit

I hope that Svelte 5 will be as exciting as they are implying!

artydev • Jun 25 '23 • Edited

" 2.8MB" small ?

Look at this : VanJS

devtoVanJS

VanJSIfYouMissJSX

Here is a basic Counter , no bundling, directly in browser Counter

import van from "./van.js"
const {button, h1, div} = van.tags


//VanJS
// Create a new State object with init value 1
const counter = van.state(1)

let Counter = div (
  h1("VanJS Counter ", counter),
  button({onclick: () => counter.val++}, "INC")
)

van.add(document.body, Counter)

regards

Thiago Lino Gomes • Jun 28 '23 • Edited

2.8M is the size of the compiler, the javascript generated and sent to the browser in an app with a simple counter like the one in your example is 2.04KB
But with a much more convenient and scalable syntax
example

Pierre Bouillon • Jun 25 '23 • Edited

Their package is indeed smaller than it was, and I’m looking forward to Svelte 5 for an event smaller bundle

Still, there is of course tools that will be lighter for sure, be it VanJS, another tool or even raw HTML/JS

I guess that, as everything in tech, this is a matter of compromise and choosing the most suitable tool for your usage

However I didn’t knew about VanJS, glad to have learn something new, thanks for sharing!

artydev • Jun 25 '23

You are welcome :-)

Phyo Arkar Lwin • Jun 27 '23

Great one. Better than official svelte4 launch post. It was missing a lot of information.

Phyo Arkar Lwin • Jun 27 '23

Thanks , the original svelte4 launch blockpost was lacking information .
This is a lot better.