Why SvelteJS may be the best framework for new web devs

Ben Holmes on March 19, 2019

Any web dev who's been at it for a few years has likely heard this question every other day. I'm really interested in learning about web developme... [Read Full]
markdown guide
 

If I'm not mistaken, Svelte is from the creator of Ractive.js, which I really enjoyed when I was building an app with it. I like how Svelte pushes some of sweet Ractive's ideas to the limit – Ractive compiled templates to functions, so re-renders get pretty lightweight, and Svelte compiles the whole source file into a frameworkless script. A nice feat, I think! This is how I'd like web frameworks to be.

 

Yea, Ractive was great, but too underestimated (( I hope Svelte will become more popular. Btw, maybe you would like to join us to Telegram channel: t.me/sveltejs

 

IMO Ractive hit a really bad timing. Just when it started to get some attention, React was announced and of course people went for something from Facebook.
Another underestimated framework was MithrilJS.

 

I have one thing that prevented me from using Svelte. I can't figure out how to bring in a stylesheet from node modules. I've tried importing it in both js and css. Nothing happens.

I asked about it in their discord and got ignored. Kinda sucks...

 

Yeah, this is a notable issue since their "native" styling solution doesn't allow for preprocessors like SASS. I personally never use a preprocessor so it doesn't bother me, but I get the frustration. Same goes for typescript support atm but it's in the works!

 

Right. I was just trying to bring in Normalize.css and Bulma.css for a little project and couldn't for the life of me figure it out haha

can't you use <svelte:head/> to achieve this?

You should be able to do a standart style or script include in the template.html

I guess I am just so used to importing CSS files in JavaScript, the React way. Thanks! I'll give it another shot with Svelte

You can do this too, but the proper way is to use svelte.preprocess.

The reason I don't import directly into components (other than sass variables) is because Svelte strips unused classes, and your imported CSS is going to have a lot of bloat which will need to be stripped, which will result in long build times.

That makes a lot of sense. Thanks! I plan on giving Svelte another go here soon.

Hi Brian, Ben, et all reading this. For those trying to put Svelte and Bulma together in a project, by coincidence I recently was trying to do the same thing, I think I solved and inside Svelte components it recognizes Bulma. Would be great if I can get oppinnions from you guys, as I was thinking to post some article on next days or make a full example maybe connecting it to a REST api, but now reading this great posts and yor comments, maybe I should investigate about svelte.preprocess first to give it a try.

Anyway, here you have the github link: github.com/jumanja/SvelteBulma

Cheers,

Juan
jumanja.net

Ah I liked how you did that!

Importing it in your css file. Pretty clever. That makes it easier, reminds me of how it's done in Next.js too.

 

Just use sass preprocessor and then import anything with @import from anywhere you want
github.com/kazzkiq/svelte-preproce...

 

That's why the svelte compiler has a preprocess option. It is very much allowed.

This module, and its docs, have never failed me.

npmjs.com/package/svelte-preprocess

 

For new people, the interactive tutorials and live playground (repl) are very helpful!

(Both links are v3, which is nearing release)

 

I have been doing React for the past two years. After watching the Rethinking Reactivity talk from Rich I am now a convert. Now doing all my new dev projects on Svelte and I am re-writing one big React app on Svelte.

 

How's it going? Any complaints? Anything missing in Svelte that you really wish it had?

 

Just saw Rich Harris talk. It's really amazing🙌

 

And i still say - make index.html toss in some tags add in css and then some vanilla JS. Nobody should start with build tools, libs and all the rest stuff. Once you learn basics then go with what is need for project (maybe angular, maybe vue, whatever is needed).

 

This. Please, lets start with semantic HTML and well-written styles.

 

not a new dev, but as a server-focused dev Svelete is useful for 2 primary reasons:

  1. no npm madness
  2. fetch into {#await} (React et all requires a class and three functions for this ubiquitous promise-based networking)

The second point: Built in template reactivity, is comparable to Go's build-in concurrency. Game changer that future frameworks can't do without.

 

Reminds me a lot of Vue. I'm curious as to the advantages this might have over just using Vue. Not having to put something within a data property isn't really much of an advantage, so there must be something else, no?

 

From the article:

For the abridged explanation, Svelte is meant to be the framework that isn't really a framework; it's basically a tool to compile components down at the build step, allowing you to load a single bundle.js on your page to render your app. This means no virtual DOM, no frameworks on top of frameworks, and no framework to load at runtime.

That's the big difference with Svelte - it exists only at build time, outputting self-contained components with no runtime library to load. The ideas behind it are spelled out by the creator in this talk:

The combination of simplicity and small runtime size/sheer speed is what has attracted me to Svelte, and the upcoming V3 looks to improve even more on both fronts.

 

Seems Vue should remind you Ractive a lot. Svelte is the next step from the best Ractive's ideas to most modern approaches. Vue would always be only the catching-up imitator.

 

I'd heard about SvelteJS but hadn't really looked into it. So basically everything in one file with regular HTML tags like <style /> and <script />. Seems pretty painless and stuff like the foreach syntax isn't that foreign for anyone whose done Handlebars or Meteor's Spacebars, i.e. #each.

Thanks for the writeup. Looking forward to your next post Ben!

 

I have many experiences with Angular and React in my projects at the university but they are usually not as wonderful as i expected. Angular was great but too complex. I don't have any emotion with React - It was too bad for me. - Then i choose Svelte 3 for both my Web Subject and my University Graduation Thesis. It didn't disappoint me.

 

I'm creating a project, mostly for my own use. I first wrote it in Vue.js, then moved it to Mint, and not I have it on Svelte v3. The Svelte version is the easiest to maintain and expand. But it also respond the fastest to UI changes. Since it is a desktop application using nw.js, the speed is much appriciated. People understand UI delays on a web page, but not for a desktop application.

 

Seriously, React Suspense for data fetching , plus React Hooks for business logic are gonna throw other frameworks out of water.

 

That's kinda the point of svelte - it's not a framework (in the sense that it's all compiled to vanilla JavaScript and there's no additional overhead).

I'm a huge fan of the concepts of svelte for that reason, so while React is certainly the heavy hitter at the moment, I'm hopeful the trend moves more where svelte is heading

 

Seriously? React Suspense + React Hooks will inflate fatty React even more. No thanks!

 

React Hooks is what Svelte 3 is inspired from, so your comment already shows a distinct lack of knowledge and ignorance towards the subject matter.

Having said that, Suspense looks interesting and there isn't a way to replicate the exact same sort of thing in Svelte right now.

However, framework choice is about trade-offs, and right now, React has far more impactful trade-offs when compared to Svelte or Vue. I don't think anything is getting blown out of the water just yet.

 

What do you mean by Suspense looks interesting and there isn't a way to replicate the exact same sort of thing in Svelte right now.

In Svelte we have the #await block :)

 

I've been keeping an eye on Svelte since seeing Rich Harris do his presentation at JSConf 2018. The early versions had some weird requirements in terms of code structure - that were tolerable given the benefits it provided - but v3 is a massive improvement. It now feels really effortless to write component-based applications: so little boiler-plate but plenty of power :)

Not sure it's established enough to use in a large production app just yet; but all my personal projects are going to be written using Svelte from now on.

For complex server-rendered apps with Svelte components also see Sapper

 

I think it would be better if you put the <script> tag at the top, as it would make it easier to know where the variables comes from. And also, this is good :)

 

Hm, that's a fair point! Since Svelte builds everything down to a bundle it shouldn't be a performance issue to put the <script> at the top. However, I tend to read code from the markup first, then dive into the functionality if need be. Personal preference more than anything 🤷‍♀️

 

I'm doing Maximilian's Svelte course, he puts script section at the top and it does look nice. He uses npm and only for CLI to get rollup to build and to start dev webserver. Highly recommend him and his course - on Node too.

I've taken that course too. It covers everything. The one gripe is that when it comes to Sapper, he refactors the existing pure Svelte SPA cours project, which I can't follow. Better would be a tiny program in Svelte/Sapper.

Other than that, the course is well worth the $12 for lifetime access.
You can find it on udemy.com.

 

I"m excited about Svelte. I think in the near future I'm going to do a project in it.

 

I'm beginner coder who is trying to understand React and Vue but can't get what to start from... I'll try your starter template. Thank you!

 

Omg that's awesome, thanks for the interest! Please don't hesitate to reach out to me on Twitter or elsewhere if you get stuck. I tried to make everything clear but learning any new tool can be hard, especially with a newer framework like this 😊

 

I'm also learning svelte right now. I think it's pretty clean. I'm looking to build a prototype project soon with it.

 

Started playing with it today and felt at ease, only thing is I can't get it working with parcel yet!

I like how it feels its actually working with me rather than the other way round!!

Papas for a brand new toy 😎

 
 
 

Any way to do the compile in the browser? I'd like to compile only on commit. I did this with coffeescript several years ago and loved it!

Oh, and how easy is it to use with other libs. I'm thinking about Bulma and hyperscript (the h() function). The h function may not be all that necessary?

 

No. The point of Svelte is that it is compiled up front, meaning the browser has less work to do. That's a core principle of how Svelte works.

As for how easy it is to use with other libs, I use Bulma, various vanilla js libraries and plugins, and they all work a lot more smoothly than they do with other frameworks or libraries. Svelte hinders you less when it comes to playing nice with other things.

 

Wow. I remember stumbling upon Svelte long time ago and it seemed a bit like a toy then. Looks like it developed nicely. I'd like to give it a try in near future.

 

I've translated this article to Spanish in case anyone is interested: developinginspanish.com/2019/09/08...

 

HI Ben,

Thank you for the article. Do you know of any numbers comparing the performance of Svelte vs React or Angular?

 

There are some, last check it was 33x faster than React. However the numbers are meaningless, as a user is never going to notice that level of performance in their browser, and the code which demonstrates the crazy speeds in these metrics is entirely useless.

The net result is, though, due to avoiding shadow dom and dom diffing, and compiling up-front, as well as a number of other optimisations, it is significantly faster than anything out there right now.

code of conduct - report abuse