The truth about Svelte

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?

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.

@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.

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

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.

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>

<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>

  <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).

@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?

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.

@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.

@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.

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

@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.

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

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.

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!

@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.

@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).

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.

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

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

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.

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.

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>

<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>

  <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?

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.

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.

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>

<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>

  <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

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...

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

irislib/iris-messenger#113

We have a discussion going, about using Svelte, which will be the base for Metaverse-Gun https://github.com/worldpeaceenginelabs/METAVERSE-GUN

I did read your article "The truth about Svelte", i dont disaggree, just my explainer is better

Join us! It could help!

Fabulous clickbait: "I've been deceiving you all".. very nice following your progress, even if your twitter page did rickroll me lol. Keep up the great work!