The truth about Svelte

what-is-svelte.md

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:

• Elm
• Imba
• Idyll
• Marko
• ...probably many others

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

• We instrument assignments to variables and properties
• We add $: statements, using the little-known label construct, that run whenever their inputs change value
• We tie it all together with an opinionated scheduler

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.

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.

QML

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.

👏👍👏👏👏♥️

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>

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

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!

@Rich-Harris I love Svelte man! You gave me the best escape I could ever hope for: an escape from React's depressing JSX and obsessive community(Like everyone wants to use react for everything).
I'm moving to SvelteKit next. Then I'm ditching React Native for Svelte Native.
Thanks a lot. Svelte is literally what I've been dreaming of.
PS: I especially love the interactive tutorial. Webcontainer is impressive

@Rich-Harris: "Svelte is a language"? Maybe, that is the weakest point of Svelte. It isn´t really a "programming" language! Or maybe, a fairly limited one. There are - for good reason - about 10 different ways to use loops in Javascript. Svelte knows ? 1 ?

Don´t get me wrong: Svelte is absolute fantastic and possibly the best we could get for the web community today, but I absolutely miss the option to do all the things we can do with a "real" programming language.

What, if we coud turn things around and not embed scripting elements into HTML, but vice versa:
In Svelte, you write:

<script>
	const percentage = [0, 25, 50, 75, 100]
</script>

{#each percentage as p}
<button on:click="{() => progress.set(p/100.0)}">
	{p}%
</button>
{/each}

which is nice and easy to understand. But "#each" is not as powerful as loops in JS are.

If we could use JS directly, this could be:

<script>
      for (p of [0, 25, 50, 75, 100]){
         <button on:click="{() => progress.set(p/100.0)}">
	      {p}%
         </button>
      }
</script>

I do not pray for the JSX-syntax, this is a false friend as well. But using a full featured programming language would bring much more power to the task.

As my grandma said: Never do a thing for a computer, that a computer can do for you.

Sometimes I wonder about why we can't have detached Fragment in the code like in react, but in a way what svelte offers covers well most of the use cases, I would like to find some use case where it's a critical limitation. I guess that this limitation opens the door for an optimal component pattern. Some code-base in react use all the possible ways possible to render fragments at the same time and it becomes uncomfortable. With svelte I got a feeling of predictability. Svelte components follow more or less the MVC pattern with the script only containing the state (props,lets) controller (handlers/reactive statements) stores, the document/style is the view. You don't declare blocks / functions / state member there, you can only consume,listen or bind. This means that you can't obfuscate the intents and the how, it constrains the developer/teams into a clear path. Le lun. 13 mars 2023 à 23:14, Eckehard ***@***.***> a écrit :

…

***@***.**** commented on this gist. ------------------------------ ***@***.*** <https://github.com/Rich-Harris>: "Svelte is a language"*? Maybe, that is the weakest point of Svelte. It isn´t really a "programming" language! Or maybe, a fairly limited one. There are - for good reason - about 10 different ways to use loops in Javascript. Svelte knows ? 1 ? Don´t get me wrong: Svelte is absolute fantastic and possibly the best we could get for the web community today, but I absolutely miss the option to do all the things we can do with a "real" programming language. What, if we coud turn things around and not embed scripting elements into HTML, but vice versa: In Svelte, you write: <script> const percentage = [0, 25, 50, 75, 100]</script> {#each percentage as p,i}<button on:click="{() => progress.set(p/100.0)}"> {p}%</button> which is nice and easy to understand. But "#each" is not as powerful as loops in JS ar. If we could use JS directly, this could be: <script> for (p of [0, 25, 50, 75, 100]){ <button on:click="{() => progress.set(p/100.0)}"> {p}% </button> }</script> I do not pray for the JSX-syntax, this is a false friend as well. But using a full featured programming language would bring much more power to the task. As my grandma said: Never do a thing for a computer, that a computer can do for you. — Reply to this email directly, view it on GitHub <https://gist.github.com/0f910048478c2a6505d1c32185b61934#gistcomment-4501441> or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACLIE5DW6EYZA2MSZAIHEH3W36L33BFKMF2HI4TJMJ2XIZLTSKBKK5TBNR2WLJDHNFZXJJDOMFWWLK3UNBZGKYLEL52HS4DFQKSXMYLMOVS2I5DSOVS2I3TBNVS3W5DIOJSWCZC7OBQXE5DJMNUXAYLOORPWCY3UNF3GS5DZVRZXKYTKMVRXIX3UPFYGLK2HNFZXIQ3PNVWWK3TUUZ2G64DJMNZZDAVEOR4XAZNEM5UXG5FFOZQWY5LFVA4TGMRUGMYDCMNHORZGSZ3HMVZKMY3SMVQXIZI> . You are receiving this email because you commented on the thread. Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub> .

<script>
      for (p of [0, 25, 50, 75, 100]){
         <button on:click="{() => progress.set(p/100.0)}">
	      {p}%
         </button>
      }
</script>

You can pretty much already do this:

<script>
	let progress = 0;
</script>

<progress value={progress} />

{#each [0, 25, 50, 75, 100] as p}
	<button on:click="{() => progress = p/100.0}">
		{p}%
	</button>
{/each}

https://svelte.dev/repl/f3a28a0ab1134c6fa877f89faaa0c9f5?version=4.0.5

Cool