DEV Community

Svelte: a different approach to build UI

Marco Monsanto on June 15, 2020

In a world where we use frameworks and their abstractions to focus on the important thing that is getting the job done, Svelte is a framework that ...
Collapse
 
marcomonsanto profile image
Marco Monsanto

No questions are silly with something this new and not so much information out there as in React for example.
With that said, currently with Svelte only, I'm not aware of a SSR solution to implement, but there is a framework with Svelte called Sapper. I usually refer to it as a Next/Nuxt kind of framework but for Svelte, here is the website.
I've been working with it provides all tools that we require out of the box like SSR and Code Splitting.

Collapse
 
yurikaradzhov profile image
Yuri Karadzhov

Svelte is great, you might save some time with hq dev server and build tool hqjs.org it also have VScode plugin.

Collapse
 
marcomonsanto profile image
Marco Monsanto

Currently the boilerplate from Svelte GitHub page comes with rollup and I'm having values around 0.5s to start the dev server and build, would that tool be a significant boost?

Collapse
 
yurikaradzhov profile image
Yuri Karadzhov

Depending on the project reloading might be faster. It is not bound to Svelte so you will be able to use it with other projects or plain js as well. It does not bundle your code, but rather serve it as ESM. Production mode will take care of images minification and other optimisations and you won't need to configure anything. You can use it as a smart static server that just understand your needs.

Thread Thread
 
marcomonsanto profile image
Marco Monsanto

Alright alright, it seems like a good tool for no configuration projects. I will keep it on the list to check later. If you are interested in Svelte, in a few days will release a new post.

Thread Thread
 
yurikaradzhov profile image
Yuri Karadzhov

Sure it is my favourite framework, I love it and advocate for it here and there.

Collapse
 
itsjzt profile image
Saurabh Sharma

One of the best things about svelte is it is build time dependency not run time dependency. So if 10 different teams are woking on same site, they can bring their own version of svelte and it wouldn't effect load times comparative to traditional frameworks like react.

Collapse
 
marcomonsanto profile image
Marco Monsanto

Never had that case in mind but indeed that is something awesome for micro frontends

Collapse
 
itsjzt profile image
Saurabh Sharma

This is incredibly helpful for us. We make shopify apps which add widget on merchant's site. Because of svelte we have very small bundles. So you can have lots and lots of our widget and it will not effect your site's loading time.

Collapse
 
robbiegm profile image
RobbieGM

It definitely can help for small projects, but for larger ones with many components the compiled code will start to outweigh what your dependencies would have been.

Collapse
 
marcomonsanto profile image
Marco Monsanto

Yes at some point that might happen but when we get to a large project, things like SSR and Code Splitting should already be in place for better performance(check sapper, Svelte NextJS like project) so I think we never pass that point of being heavier than let's say a run time Lib

Collapse
 
itsjzt profile image
Saurabh Sharma

Smaller bundle size is always a good thing

Collapse
 
madza profile image
Madza

svelte + tailwind go hand in hand pretty well :)

Collapse
 
marcomonsanto profile image
Marco Monsanto

I'm currently working on a side project that uses svelte(sapper) and tailwind.

It's awesome!!

Everything is so simple. It's a breath of fresh air playing with those 2.