Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
The truth about Svelte

I've been deceiving you all. I had you believe that Svelte was a UI framework — unlike React and Vue etc, because it shifts work out of the client and into the compiler, but a framework nonetheless.

But that's not exactly accurate. In my defense, I didn't realise it myself until very recently. But with Svelte 3 around the corner, it's time to come clean about what Svelte really is.

Svelte is a language.

Specifically, Svelte is an attempt to answer a question that many people have asked, and a few have answered: what would it look like if we had a language for describing reactive user interfaces?

A few projects that have answered this question:

(Idyll is an outlier as it's geared towards a specific use case, rather than general purpose app development, but I think it qualifies as an example.)

These projects are all very cool, but there's a reason they haven't hit mass adoption: they want to control the entire world. You can't adopt Elm or Imba incrementally, and they need dedicated tooling far beyond just the compiler itself (e.g. syntax highlighting, unless you like your code monochrome). In some cases (Elm stands out), interop with the JS ecosystem is less than seamless.

Beyond that, they have a steep learning curve, which is hard to justify when there are so many options that are more accessible.

Thinking inside the box

What if we had a language that was designed for building reactive user interfaces, but that also worked with your existing tools? What if you didn't need you to discard your years of experience using HTML, CSS and JavaScript, because it extended those languages?

  • It would extend HTML by adding JavaScript expressions in markup, directives for controlling behaviour and reacting to input, syntax for using conditions, loops and asynchronous values
  • It would extend CSS by adding a scoping mechanism that kept styles from clobbering each other
  • It would extend JavaScript by making reactivity a language primitive

How do we make reactivity a language primitive without introducing invalid syntax, or breaking the relationship with existing tooling (like TypeScript)? By hacking existing syntax:

This, to me, is the best of all possible worlds: we can lean on decades of accumulated wisdom by extending well-known languages, author components in a delightfully concise and expressive way, and yet still generate apps that are bleeding-edge in terms of performance and everything that goes with it.

@Rich-Harris
Copy link
Author

Rich-Harris commented Oct 30, 2019

@randompixels normally I'm very chill about people expressing their opinions about the work done by me and my fellow maintainers, and given away freely for the benefit of the web community, but then you went and said this...

You have absolutely no place to decide what I can or cannot say. You know, free speech and all. It's my opinion and I own it, including the consequences. Feel free to ignore my opinion, but you are not allowed to tell me to remove it

...which I found very funny. Because I can tell you to remove it, because this is my gist. 'Free speech' just means the government can't prevent you from saying things, it's not a license to be a dick. Your comments have been deleted, and your future comments will also be deleted. Bye!

@MehdiRaash
Copy link

MehdiRaash commented Oct 31, 2019

From React doc

Additionally, React has been out for about five years, and we want to make sure it stays relevant in the next five years. As Svelte, Angular, Glimmer, and others show, ahead-of-time compilation of components has a lot of future potential. Especially if it’s not limited to templates. Recently, we’ve been experimenting with component folding using Prepack...

I've seen from react team that they pronounce Svelte quite often as a successful ahead-of-time library, as you can see they started Prepack, but a bit later they somehow leave the project.

Maybe this is a question that I must asked there also.

What do you think was the reason behind stopping such an idea(prepack I mean)? do you think that was related to Svelte or so?

@Rich-Harris
Copy link
Author

Rich-Harris commented Oct 31, 2019

As I understand it (from conversations — I don't have any real inside knowledge) it was mostly about code size. Prepack was capable of creating code that executed very fast, but that was many times larger than the input.

@sonyarianto
Copy link

sonyarianto commented Dec 23, 2019

@Rich-Harris or anyone, I am learning Svelte and can I know any post or article for gradual adoption to it? Thanks for such a great product and bright potential on the future.

@rbenzazon
Copy link

rbenzazon commented Dec 31, 2019

I just used svelte to convert a vue project and I had a great experience.
To reduce the "time to first professional delivery", this tech could use some additions :

-a simple built in solution for internationalization
-simple config option to make the styles unscoped and/or cascading to child instances
-support nested css rules
-lazy loading to further svelte advantage on bundle size
-configure the basic template with default json import support (rollup plugin / config)
-make the !production runtime variable easier to find and why not associate the alias feature of rollup with this doc/tuto to let users have some dev/prod variants.

These are subjective opinions after a specific task / context but I believe this situation is the most useful when gathering feedback for improvements.

Apart from that I can say that this experience was seamless even if I had previous experience with neither svelte nor vue.
I'm planning on using svelte very often, especially because I work on website customization and additional content which benefit from being bundled small and executing fast. Thanks for offering us this great tool

@defenestrator
Copy link

defenestrator commented Jan 27, 2020

https://gist.github.com/Rich-Harris/0f910048478c2a6505d1c32185b61934#gistcomment-3016695

SDL?
LSD?

That was my first thought. It is more of a Domain Specific Language or Grammar, than an 'actual' language. Nonetheless, totally compelling. Evaluating SvelteJS vs AlpineJS for a project right now. Excited about both for slightly different reasons.

@nonopolarity
Copy link

nonopolarity commented Feb 2, 2020

I like Svelte's loop

	{#each cats as cat}
		<li><a target="_blank" href="https://www.youtube.com/watch?v={cat.id}">
			{cat.name}
		</a></li>
	{/each}

although it reads "each cats as cat"... could it be "loop cats as cat"? It could be "each cat of cats".

I feel weird with

<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

or

<li *ngFor="let product of products">
    <h2>{{product.name}} / ${{product.price}}</h2>
    <p> {{product.description}} </p>
</li>

It is like, you have to read <li ... and then the for, and then move that for to the left of <li ..., to make it

for ... <li .... instead... maybe I am just not used to reading code that needs a programmer to backtrack.

If it can be

  <li repeated-for="item in items">
    {{ item.message }}
  </li>

then it reads "<li repeated for ... the following", and it is more natural.

  <li repeated-for-each="item in items">
    {{ item.message }}
  </li>

and

  <li for-each="item in items">
    {{ item.message }}
  </li>

also read naturally.

I feel ok with this too:

    <ul>
      {elements.map((value, index) => 
        <li key={index}>{value}</li>
      )}
    </ul>

Some people don't like the JSX, but you can just view it as mapping from the HTML code to some DOM creation code. (which is what it really does).

@cgarciae
Copy link

cgarciae commented Mar 15, 2020

@Rich-Harris

If you had the chance, what would you change to JS, HTML, and CSS to improve upon Svelte? In other words, if you had infinite resources and could modify everything how would this platform of the future look like?

@jjouvins
Copy link

jjouvins commented Mar 25, 2020

I am about to start the development of a new project so that it can be executed on desktop, android and iOS devices, Svelte seems to me the simplest and most elegant option to do so, but I have the following doubts:

  1. What assurance do I have that the project continues in time, I only see that Rich-Harris is the one who worries about this, I do not see interaction on the blog (https://svelte.dev/blog) the last date was 03/22/2019, I don't see any plans for new improvements or features.
  2. I see that Svelte offers some options to work the ui / ux of the applications, but it also allows other libraries to be used to do it, this will continue to improve so that it contains everything like ionic for example.
  3. The most direct approach to native applications directly supported by svelte is planned.

Copy link

ghost commented Apr 4, 2020

@jjouvinis answering to point number one, you have no guarantees. This is an open source project. You can be pretty sure your code will still work with the same library version you coded it in, always.

@ryanatkn
Copy link

ryanatkn commented Apr 13, 2020

@jjouvins I'm a Svelte user, not a member of the development team. I think enough time has passed since you asked the questions to let someone more qualified respond if they wanted to, so I'll offer my responses.

  1. What assurance do I have that the project continues in time, I only see that Rich-Harris is the one who worries about this, I do not see interaction on the blog (svelte.dev/blog) the last date was 03/22/2019, I don't see any plans for new improvements or features.

There's a lot to unpack here.

  • Like v0idifier said there is no assurance the project will continue like it has, nor is there with any open source project. In some ways there's more risk, because Rich is the primary developer and he does not work on Svelte full time, but a flourishing community has formed - it's inaccurate to say Rich is the only one. There are many active contributors and the community and core development team have many generous volunteers. A lot of companies use Svelte in production. In other ways there is less risk to using Svelte, in part because there isn't a single company driving everything according to its own needs. My personal read is that the community is robust enough to survive life's unpredictability.
  • The blog has never been a good indicator of Svelte's development. See the Svelte issues and Discord - both have a lot of activity.
  • For ongoing discussion about improvements, features, and proposals see the RFCs and the issues. Anyone can make an RFC or comment on one, and in my experience it's a shining example of open source working beautifully. The project sveltejs/language-tools is a set of in-progress features that's high priority for a lot of people, and it indicates increasing maturity of the Svelte language.
  1. I see that Svelte offers some options to work the ui / ux of the applications, but it also allows other libraries to be used to do it, this will continue to improve so that it contains everything like ionic for example.

Svelte is a component framework and Sapper is an app framework with a featureset that's narrow compared to Ionic. Svelte and Sapper are tightly focused on specific problems, and because they integrate fluidly with web APIs and JavaScript, they can be naturally extended by projects with a bigger scope. They by themselves won't ever give you the all-in-one experience of an Ionic. Rich has shown interest in leveraging Svelte and Sapper to provide a more complete experience with experiments like Sapper Studio, and I suspect some motivated people are working on similar projects right now.

  1. The most direct approach to native applications directly supported by svelte is planned.

The team is not officially supporting native applications today but as a compiler Svelte's future is promising. The unofficial project Svelte Native is the biggest one here and it has its own channel on the official Discord. I can't speak to whether it's "the most direct approach" and I haven't used it. You'll have to do your own research to see if it's suitable for your needs.

@mretty
Copy link

mretty commented Jun 14, 2020

Sapper is a complete turn-off for Svelte adoption. Why cant Svelte be a standlone-implementation like React ?

@vectorselector
Copy link

vectorselector commented Jun 14, 2020

@mretty, I'm a total noob here, and I also might completely be misunderstanding your question.
It's my understanding that Sapper is not a required part of using Svelte to generate your html/css/js.
One can use Svelte tooling for rollup, webpack, etc. One can directly invoke the Svelte compiler via it's API (from your language of choice, I suppose...)
The end result is a transformation of Svelte code to html/css/js in a "component" fashion.
One COULD simply transpile your Svelte to this and then include the results in a page via script tags, but that sort of defeats the point of being able to continuously iterate on the source, or would make a lot of leg work.

I also have little interest in Sapper or any server-side Node.js, but I digress.
Svelte is exciting, for sure.

@autr
Copy link

autr commented Jul 1, 2020

Been using Svelte for the last 3 days and it is gooooorrrrrgeous. Top work! <3

@ferry-creator
Copy link

ferry-creator commented Jul 12, 2020

Sapper is a complete turn-off for Svelte adoption. Why cant Svelte be a standlone-implementation like React ?

Because of flexibility. Svelte is not a monolith. It's a language. Sapper is the React standalone-implementation of the svelte language, just like React is of JSX. React is what makes JSX "useful", just like Sapper makes Svelte "useful". But really, by separating compiler/language from framework, it allows people to make a lot more stuff with svelte than just PWAs.

Really, look at what people makes with svelte:
https://mdsvex.com/

This is only possible, because svelte is just the compiler, and doesn't ship with a box, that locks you into only making PWAs.

@Rokata9
Copy link

Rokata9 commented Aug 7, 2020

I'm really impressed with this framework language, to be honest. And compiling things beforehand, rather than having a runtime in the browser doing the stuff, really appeals to me.

I have a question (mostly to the author, @Rich-Harris) - how do you think Svelte can gain as much popularity as React and Angular in the future? Note that I'm not including Vue in the question, because unfortunately (for me, at least) it has very low popularity among IT companies in my country, Bulgaria, for example (although having more GitHub stars than any of the others and despite the relatively high number of npm downloads).

Looking at npm downloads, there's a signifact increase in Svelte downloads for the last year (80% as I can see), but numbers are still low compared to the most popular libs/frameworks out there.

Just for the record, I'm React developer and I still think it's a great library, but it's normal that newer libs might have better ideas and be more compact at the same time (having in mind Svelte and Vue). Looking forward to your reply, have a great one! 👍

@MehdiRaash
Copy link

MehdiRaash commented Aug 11, 2020

@Rokata9 Of course newer libraries have better ideas, But to me, In my company, I preferred to use a library that have as fewer abstraction as possible to work with.
Anyways for me less abstraction and better integration with my existing code is important, Libraries (or as the author tend to call 'language') such Svelte definitely offer niche performance, but it's not my concern.

@Rokata9
Copy link

Rokata9 commented Aug 11, 2020

@MehdiRaash, yes it depends on the project you have. I don't know exactly what you mean by fewer abstraction (probably less library-specific template engine or even language in case of Svelte), but probably React goes to that group you're refering to.

I liked it mostly because of the flexibility that JSX offers, but Vue also has JSX now and even more than that (seems like a more rich library and smaller at the same time). React hooks also are nice, but again Vue took them to the next (better IMHO) level with the Composition API.
But in my experience at least, JSX sometimes lead to less readable markup code, and if you have smaller threshold for certain rules in prettier things get even more difficult. And that's where it would come in handy for me a robust (yes, still library-specific) template engine (Svelte, Vue).

@MehdiRaash
Copy link

MehdiRaash commented Aug 11, 2020

React does not belong to the Svelte group in terms of abstraction, although there were some attempts to do pre-compiling the code to something intermediary(prepack) code.
The thing is react is just a library, the JSX is like plugin to react in my opinion. so babel help the code like a helper library.

Slvete is a totally different thing, the code you write is like a new interface(thus it's called a language) to you, not the JavaScript code that you expect to run in the browser, so as you know that interface should be compiled to a optimised and pre-compiled version of JS.

Regarding the Vue vs React, in my opinion these two have become quite robust. both use VDOM the same manner.
React has JSX(also Vue) and backed by facebook, for me that's more convincing, at this time to pick up for my next project.

@skanskan
Copy link

skanskan commented Oct 24, 2020

QML

How does QML compare to Vue in terms of easiness, speed and memory?

@abhijitgujar86
Copy link

abhijitgujar86 commented Nov 6, 2020

nether the less, I think that svelte is amazing , easy , straight forward ,lets the developer focus on his logic ....

@DavidKloucek
Copy link

DavidKloucek commented Nov 14, 2020

I only played with Svelte 1-2 hours, no real project, but it looks promising. You can immediately start writing without learning tons of patterns, no Vue 3 reactivity drawbacks (ref() and reactive() sucks), maximum performance..
I think that compilation is the future, because React/Vue is a compromise between UX (performance) and DX, but Svelte's compilation gives the best for both.

@mzohaibqc
Copy link

mzohaibqc commented Nov 23, 2020

I went through few tutorials and then created an app with authentication, some public and protected pages in 2-3 hours. Played with animations and added component library (svelte-materialify). Added sass/scss support.

Super cool stuff and easy to develop. I am on board.

👏👍👏👏👏♥️

@glinda93
Copy link

glinda93 commented Dec 7, 2020

I like Svelte's loop

	{#each cats as cat}
		<li><a target="_blank" href="https://www.youtube.com/watch?v={cat.id}">
			{cat.name}
		</a></li>
	{/each}

although it reads "each cats as cat"... could it be "loop cats as cat"? It could be "each cat of cats".

I feel weird with

<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

or

<li *ngFor="let product of products">
    <h2>{{product.name}} / ${{product.price}}</h2>
    <p> {{product.description}} </p>
</li>

It is like, you have to read <li ... and then the for, and then move that for to the left of <li ..., to make it

for ... <li .... instead... maybe I am just not used to reading code that needs a programmer to backtrack.

If it can be

  <li repeated-for="item in items">
    {{ item.message }}
  </li>

then it reads "<li repeated for ... the following", and it is more natural.

  <li repeated-for-each="item in items">
    {{ item.message }}
  </li>

and

  <li for-each="item in items">
    {{ item.message }}
  </li>

also read naturally.

I feel ok with this too:

    <ul>
      {elements.map((value, index) => 
        <li key={index}>{value}</li>
      )}
    </ul>

Some people don't like the JSX, but you can just view it as mapping from the HTML code to some DOM creation code. (which is what it really does).

Don't you think for-each, repeated-for-each, repeated-for is too lengthy?

@Papierkorb
Copy link

Papierkorb commented Dec 22, 2020

Just found Svelte today. It looks great!

I've been coding for 17 years now. I wrote a friggin x86 kernel over a decade ago because I wondered "how computers work". I think I understand coding. I like C++/Qt to build UIs, but they're really limiting in todays world. I, for the life of me, don't understand Angular nor React or Vue.js. They're so insanely complicated to do things that should be easy (See C++/Qt or QML/Qt). Svelte v3 looks so much saner than anything I've come across yet. Thank You for Svetle!

Next thing is I need to figure out how I can integrate this node.js (I've never worked with that) with my back-end written in Ruby or Crystal. Especially for development.

@sanathusk
Copy link

sanathusk commented Jan 6, 2021

SVetle is a great a tool.makes UI building fun.I personally feel svelte should try to extend itself to support GUI development.for example if SVetle could provide bindings from gtk3 it could make a break through in a new domain. Honestly the web GUI development is crowded and domainated . Supporting such alternative stack would benefit svelte as I will not be just another framework in that space.

@hanct
Copy link

hanct commented Jun 11, 2021

I like Svelte's loop

	{#each cats as cat}
		<li><a target="_blank" href="https://www.youtube.com/watch?v={cat.id}">
			{cat.name}
		</a></li>
	{/each}

although it reads "each cats as cat"... could it be "loop cats as cat"? It could be "each cat of cats".
I feel weird with

<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

or

<li *ngFor="let product of products">
    <h2>{{product.name}} / ${{product.price}}</h2>
    <p> {{product.description}} </p>
</li>

It is like, you have to read <li ... and then the for, and then move that for to the left of <li ..., to make it
for ... <li .... instead... maybe I am just not used to reading code that needs a programmer to backtrack.
If it can be

  <li repeated-for="item in items">
    {{ item.message }}
  </li>

then it reads "<li repeated for ... the following", and it is more natural.

  <li repeated-for-each="item in items">
    {{ item.message }}
  </li>

and

  <li for-each="item in items">
    {{ item.message }}
  </li>

also read naturally.
I feel ok with this too:

    <ul>
      {elements.map((value, index) => 
        <li key={index}>{value}</li>
      )}
    </ul>

Some people don't like the JSX, but you can just view it as mapping from the HTML code to some DOM creation code. (which is what it really does).

Don't you think for-each, repeated-for-each, repeated-for is too lengthy?

Actually for the loop, i prefer angular version. Cos svelte add additional lines to specify the loop. Imagine the below

<div *ngFor="let product of products">{{product}}</div>
//other elements in between
<div  *ngFor="let product of products">{{product}}</div>
//other elements in between
<div  *ngFor="let product of products">{{product}}</div>

For angular, i can just add the loop construct (i.e ngFor) without introducing extra lines. But for svelte, will introduce 6 more extra lines to achieve the loop. This will make the html more cluttered.
I truely hope that there will be a day where svelte will provide syntactic sugar where we can add the loops construct as an attributes of the element to loop (similar to that of angular). The svelte compiler wlll then be able to convert that syntatic sugar back to the current syntax.

That goes the same for if/else

See sveltejs/svelte#3288 on similar discussion

@AllanOricil
Copy link

AllanOricil commented Sep 19, 2021

Svelte is an amazing solution. But the following phrase made me think, and I have two questions.

"How do we make reactivity a language primitive without introducing invalid syntax, or breaking the relationship with existing tooling (like TypeScript)? By hacking existing syntax:"

If we know that the best solution to make reactivity really great is what Svelte does, why ins't there anybody thinking about improving Javascript to get rid of this "Hack"?

Shouldn't Svelte be used as a "Use Case" to prove the benefits its "Hack" brought to web development @Rich-Harris?

I used the word "hack" just because you called your amazing work a hack, but I don't believe it is a hack. If it was a hack, people wouldn't adopt it so well, and you could be called crazy just because you invest time on a hack haha
Keep improving it.

I just wish you could improve DX to make it as easier as Vue

@chenzx
Copy link

chenzx commented Mar 16, 2022

I like Svelte, and i'm reading its impl internals. Some code hard to understand for now.

I have an idea: to extend vanilla JS to gain a "Typed DSL", which means JS with type annotations, then use AOT compile to translate to other forms of code: like JS (JS to JS, with runtime for reactive, which is used by Svelte), i want to get wasm or C++ native to boost performance in NodeJS env...

@tomaz-on
Copy link

tomaz-on commented May 8, 2022

Hello guys, I think svelte / sveltekit like:

svelte = compiler

sveltekit = framework

If I am wrong, please teach me and I would appreciate it.

and sveltekit is my first JavaScript framework I'm in ... Almost went with Vue, but with Blazor I decided to wait and keep with .NET Core things, but sveltekit made me join and I love it like I love .NET Core ecosystem

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment