The Svelte Compiler Handbook

What makes you say it looks paused? There’s been a very steady stream of releases since the big 3.0 launch last spring. There’s certainly more than one active contributor, although the core team is just a few people.

PudgePacket2• 6 years ago

It just had a major release :P any faster and people would be complaining about churn !

untog2• 6 years ago

Looking at the Github commits I’d say neither statement is true? Seems to be plenty of contributors that have contributed recently:

https://github.com/sveltejs/svelte/commits/master

wolfadex4• 6 years ago

By "regular" programming do you mean JavaScript?

tomerbd• 6 years ago

Use Elm for fun and React/Svelte for Profit

IshKebab3• 6 years ago

The problem with Svelte is it doesn't support Typescript. You pretty much need that on any reasonable size project unless you are happy to spend your life tracking down runtime bugs. Vue has a similar problem (it sort of supports Typescript, but not properly and templates aren't type checked).

I've not used Elm so maybe that is better. React has good support for type checking. I would use that.

orange818• 6 years ago

Typescript. You pretty much need that on any reasonable size project unless you are happy to spend your life tracking down runtime bugs

I'd say it depends on your teams skill set and level of disciple. The best defence against a buggy codebase isn't a programming language or framework, its good all fashioned discipline.

untog2• 6 years ago

I’ve had success with extracting as much logic as I can out of .svelte files and putting them in .ts and importing. At this point the JS logic in my svelte files is almost exclusively view lifecycle stuff. It’s not perfect but it works well enough for me, and I prefer the output to what I’d get with React.

0az• 6 years ago

IIRC, Vue 3 uses Typescript.

michaelcampbell4• 6 years ago

I'd say Elm has support for types, yes =D

maps72• 6 years ago

I picked up Svelte recently and I am happy with it. There is good documentation and examples and any questions I had were already answered online.

I haven't used Elm yet.

adelarsq• 6 years ago

Try F#. Has good tooling and its possible to use the ELM arch. See https://zaid-ajaj.github.io/the-elmish-book

xupybd2• 6 years ago

Thank you this looks great. Okay now another tool to try. This is tricky business when you're looking for the tool set you want to invest in for the next 2 to 5 years and there are so many promising options.

saila• 6 years ago

I used Svelte 3 for a fairly complex side project last year (rewrote it from React), and it's my favorite JS framework so far. I do wish the TypeScript story was better though.

I've also used Elm for another little side project, and it was super fun to learn, but it was a bit mind-bending at first.

I think Svelte is a fairly safe choice because it's actively developed and because it's not too different from Angular/React/Vue.

If there's any possibility that you'll have to hand this code over to someone else, I think Elm is a much less safe choice.

So, to echo tomerbd's reply: Elm for fun; Svelte for profit.

wolfadex4• 6 years ago

Just a reminder that Svelte, in Rich Harris's own words, is a language and not a framework. It technically isn't JavaScript, just an incredibly similar syntax.

wolfadex4• 6 years ago

While I primarily use Elm for all my front end side projects, I do think it's worthwhile to try both.

I'm currently writing a blog about trying as many front end frameworks/languages as I can. I'm going with this approach because I want to see what I can learn from each of them. For example, I've learned from Elm that compilers can be much friendlier. I've learned from Svelte that people are more willing to accept what appears to be familiar.

You may learn something completely different.

hitekker• 6 years ago

Prezi, the original company that backed Elm, laid-off the maintainer and then deprecated Elm in their codebase.

rgoulter• 6 years ago

I wasn't aware of that context.

Though evancz now works at NoRedInk. https://www.noredink.com/about/team

michaelcampbell4• 6 years ago

If you haven't yet, find and read the lengthy "why I'm leaving elm" post; there's a big discussion here also. May provide some impetus one way or the other for you.

alserio3• 6 years ago

I was missing a resource like this. Also, I'm looking forward to the next "Compiling Svelte in your head" article.

vitoc• 6 years ago

Very clear and crisp overview of the compilation process!

ha4fsd3fas• 6 years ago

This is very useful. I have just started contributing to svelte and it was a bit overwhelming even though the bugs were very well isolated in the codebase.

amelius• 6 years ago

I skimmed through it, but couldn't find a description of the distinguishing feature of svelte, i.e. how the incremental updates are performed.

PudgePacket2• 6 years ago

It's actually really easy to read the svelte compiler output! You'll see exactly how it works :P

jiofih• 6 years ago

I assume people downvoting this comment are not familiar with Svelte?

You can in fact see how it works by looking at the output. Go to the REPL at https://svelte.dev/repl/hello-world and select “JS output”.

alserio3• 6 years ago

From the same author, you may find this useful: https://lihautan.com/compile-svelte-in-your-head-part-1/

k__• 6 years ago

I think the idea is to provide the programming model that React allows via its virtual DOM, but compile all that code away, so you end up with code das works without a virtual DOM.

Direct DOM interactions are faster and you don't have to bring a whole VDOM library.

maps72• 6 years ago

Thank you! I was just thinking yesterday that I wanted to understand Svelte more. I will dive into this today.

lihautan2• 6 years ago

let me know if there's anything unclear of or things you would like to learn more about!

xellisx3• 6 years ago

I'm surprised Apprun nor Solid have been mentioned yet.

Are there any TypeScript reactive frameworks? I know you can use TS with the others, but finding tutorials can be a pain since it all these are JS first frameworks.

Trufa5• 6 years ago

I'm actually working on one. I don't know what will come out of it, but it's an interesting endeavor. As soon as it's shareable I will share it on Github.

I'm basically trying to do a superset of typescript where you create elements so:

  const root = c({
    el: 'div',
    children: [
      `hello, ${store.user.name}`
    ],
    attr: {
      class: 'bold smart',
      id: 'abc',
      bla: true,
    },
    evts: {
      click: () => {
        console.log("Clicked")
      }
    }
  });

And store store.user.name is "magically" reactive.

Was that what you meant?

bufferoverflow2• 6 years ago

That is awfully verbose.

chrismorgan• 6 years ago

What you’ve written there couldn’t possibly be reactive without compilation or wrapping it in a function. Is there something else wrapping it (a function), or is it being compiled into a different form? If it’s being compiled (so that the code means something other than it seems to), then I see no particular advantage to using TypeScript syntax, given it’s more verbose than need be.

For reference, in Svelte that’d be something like this, which is shorter and more obvious:

  <div class="bold smart" id="abc" bla={true} on:click={() => { console.log("Clicked") }>
    hello, {store.user.name}
  </div>

syspec• 6 years ago

Using 'evts' instead of events is a good way to get people to make mistakes

Casperin• 6 years ago

Is there any framework that explicitly allows me to set properties instead of just attributes? It doesn't play nice with web components when the object you passed in comes out as a string "[object Object]".

arkanciscan• 6 years ago

^ why you shouldn't use supersets

spankalee5• 6 years ago

lit-html is written in TypeScript, so has great typings.

There are TypeScript plugins to statically analyze the templates, like lit-analyzer and the lit-plugin VS Code extension.

LitElement provides TypeScript decorators for declaring reactive properties and more.

xellisx3• 6 years ago

While it is writen in typescript, it's still aimed towards JS first.

lostintangent• 6 years ago

This is so awesome! I wonder if it would be useful to have this knowledge “overlayed” on top of the Svelte compiler source itself. That way, contributors could clone the repo and get an annotated tour of the compiler process, directly from their editor.

I’ve been working on a side-project, that allows recording and playing back interactive, guided walkthroughs of a codebase. This seems like an excellent “test case“ for that experience, which I might have to experiment with :)

https://aka.ms/codetour.

dragosmocrii• 6 years ago

I like Svelte very much. My biggest struggle is with tooling, especially the lack of proper IDE support. I know there are several IDEs with plugins for Svelte, but they're either obsolete or lacking essential features. That's why I won't use it for me next project, just not worth it going against the wind.

Now, I am looking at Flutter. Seems to match my needs, and it's also actively maintained.

Never underestimate the power of proper tooling and abundance of documentation, better be productive rather than cool.

jeremyjh• 6 years ago

Flutter web support is in beta. I've never heard of anyone using it. Don't you think you are swimming upstream there too?

satvikpendem• 6 years ago

For applications it's actually quite good, if you use the WASM renderer instead of the DOM based one. I say for applications and not websites as this method will not have any SEO since it renders onto a canvas element. It does have accessibility as Flutter constructs a separate semantic tree on top that accessibility devices can read.

So Flutter Web is pretty nice if you're not making a forum for example but moreso any type of CRUD or business app where text is not a big factor. Of course, since it's Flutter you can then build mobile and desktop apps as well from your application for those who want more control.

seeekr2• 6 years ago

Svelte support in the Jetbrains family of tools is great (IDEA, Webstorm etc). There are a few issues, but they're all minor. Started using Svelte for serious work a few months ago, very happy with it, best frontend framework I've worked with thus far.

michaelcampbell4• 6 years ago

I'm just starting to play with Svelte, but have very little JS background. Which flavor of the jetbrains tools are you actually using; webstorm or IDEA? I have the all-tools sub, so could use either but is one better than the other?

hinkley• 6 years ago

I felt like there was a sort of sea change when JetBrains started producing multiple IDEs. IDEA always struggled to handle supporting everything at once and third party plugins are always incomplete. They don’t support all of the functionality and you have to keep that active in your mind while developing, which saps resources for solving hard problems.

I just wish they could support more languages and tool chains, and I wish an IDEA subscription entitled you to all other versions of the editor. I want to buy one but use Webstorm because it’s a little less resource intensive than IDEA. And I want them to make like five more IDEs, which I feel they could fund through IDEA-specific revenue.

Stratoscope• 6 years ago

I wish an IDEA subscription entitled you to all other versions of the editor.

They do offer that; it's called the All Tools subscription. It costs more than the IntelliJ subscription, but you get all the IDEs, ReSharper, etc.

combatentropy• 6 years ago

How did Rich Harris, a "graphics editor," write Svelte? So many designers hardly know JavaScript at all. This one wrote one of the most advanced JavaScript frameworks I've ever seen. It's not just JavaScript. He wrote a compiler that takes a custom, declarative syntax and converts it to imperative JavaScript to surgically update the DOM.

hibiscus4156• 6 years ago

Funny you mention this, Evan You, the author of VueJS was a graphic designer before writing VueJS

earthboundkid• 6 years ago

I wonder if they have more interest in UX than most people, and that gave their frameworks the edge.

kick2• 6 years ago

Programming is not a particularly difficult skill. During the 1980s, it was taught in grade schools. JavaScript may be a worse and more difficult language than the ones you could find in the micros scattered across schools, but it's not an order of magnitude more difficult to use effectively.

In a field that goes hand-in-hand with programming, which includes pretty much every artistic one, it shouldn't be all that surprising that people know how to use/are at least curious enough to learn the tools available to them.

PaulHoule• 6 years ago

Actually JS is better: try writing a compiler in BASIC. In 2020 a graphic designer can do LISP style metaprogramming because of a number of subtle properties of the module system.

amount101• 6 years ago

Lot of smart people who are not selling their soul to empower companies to:

- track people and systematically destroy privacy forever

- trick kids into clicks via what should be illegal recommendation algorithms

- use their insanely talented minds to work in advertising

Need more diversity in tech. This should be encouraged vs gulping down the big fat framework FB tells you to

alserio3• 6 years ago

He have also written Ractive.js and Rollup.js. From what I've seen Harris doesn't only "know JavaScript" but have a better _vision_ about its future than most, a lot of cool ideas and the skills to try them.

Barrin92• 6 years ago

He probably was interested in it. Not everyone has a traditional background or even day job in the area they're passionate about. One of our neighbours growing up in a small village was a nice old retired man who barely had any formal education, years later I found out he was publishing original maths research online. There's also a guy from Finland who IIRC was a bus driver who is putting great C++ low level graphics and retro programming content on Youtube.

Lots of under-recognised talent is eveywhere.

txdv• 6 years ago

that guy works as a school bus driver so, after work he codes all day

smnplk3• 6 years ago

The bus driver is bisqwit https://www.youtube.com/watch?v=3bIcbnDXSRg

catacombs• 6 years ago

The NYT graphics team is one of, if not THE, best graphics teams in journalism. You need a significant amount of JavaScript to work on the team. Yes, the team does have designers, but there are many developers on the team, including Harris.

If you look at the Svelte repo, the project didn't appear overnight. The first commit dates to 2016, and since then there have been many contributers. Don't think Harris solely built the project to where it's been. He's had help.

dragonshed• 6 years ago

Harris has started a few notable projects outside of Svelte as well, including Rollup (alternative bundler) and buble (alternative es2015 compiler).

ratww• 6 years ago

I have a theory that Svelte originated from his work with Rollup.

He was already a great developer when he started Rollup, but writing it brought him to a new level.

Rollup is super clever: most bundlers back then would treat JS modules like giant strings and concatenate them. It was just plain string concatenation, similar to require.js's "define()", so you needed a runtimes that answered to "require()". Modules were assembled during runtime. [1]

Rollup, instead, uses an algorithm to transform the AST of multiple modules into a single AST, inlining all modules and turning them into variables [2], and renaming duplicate identifiers. The final code looks like something that a human would do if asked to put everything in a single file. [3]

This is done by manipulating the AST returned by the Acorn parser, something he seems to have become an expert on.

I'm pretty sure that it was during the development of Rollup that he had other ideas for crazy optimizations, but unable to apply them to a Bundler, he created Svelte.

[1] https://requirejs.org/docs/api.html#deffunc

[2] https://github.com/rollup/rollup/blob/1e1a11107dbee11636dcf9... and https://github.com/rollup/rollup/blob/1e1a11107dbee11636dcf9...

[3] https://risanb.com/posts/bundling-your-javascript-library-wi...

nojvek2• 6 years ago

I really like that Svelte does compiler time dependency analysis such that there is less work to do runtime.

Can we bring this ideas to react and Vdom based frameworks? I imagine Babel/typescript can analyze jsx to find which attribute are bound to a variable and which are just static. The static ones don’t need to be diffed, only the dynamic ones.

spankalee5• 6 years ago

You don't need a compiler to do that. lit-html does this at runtime, and the benefit from not diffing static content is large.

nojvek2• 6 years ago

at compiler time, you can type check and statically validate. Doing things at runtime with lit-html where things are in a string, quickly falls apart in a large project. One of my biggest griefs with Angular was that you could miss an ending tag in the template and it would work fine until it blows up in production when a customer accesses that specific scenario.

I stay away from magic templates compiled at runtime. I've been bitten way too many times. Plus it's not good for load performance when you have to ship a string compiler with your code.

The Svelte Compiler Handbook

Related Stories