Skip to content

Instantly share code, notes, and snippets.

@Rich-Harris
Last active March 27, 2024 06:09
Show Gist options
  • Save Rich-Harris/0f910048478c2a6505d1c32185b61934 to your computer and use it in GitHub Desktop.
Save Rich-Harris/0f910048478c2a6505d1c32185b61934 to your computer and use it in GitHub Desktop.
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.

@digitaldrreamer
Copy link

@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

@efpage
Copy link

efpage commented Mar 13, 2023

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

@rbenzazon
Copy link

rbenzazon commented Mar 18, 2023 via email

@oofdere
Copy link

oofdere commented Jul 12, 2023

<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

@kaspersky3550879
Copy link

Cool

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