I guess if we wanna talk about the origin of Svelte, we have to go back to 2012, which is when I started working on Svelte’s predecessor, which is a library called Ractive (as in short for Interactive); also a word from a Nils Stevenson novel.

Ractive was a Vue framework that was based around templates, it was based around the idea that if you had some data that existed as a plain old JavaScript object, and you had a template which resembled Mustache, and you could combine the two together, then you could generate a really highly-performing application by tracking which parts of your data were changing over time. This is something that I think was probably pioneered with Knockout back in the day, but I wanted a different developer experience than Knockout could provide, and I noticed that a lot of the things that we were building, all we were doing really was trying to make the page match some templated HTML… But the way that we were doing that was by inter-HTML-ing parts of the page, which is kind of gross and inefficient.

So I built this library that would allow me to create Mustache templates that would be self-updating in the most efficient way possible. That’s something that I started when I was working at The Guardian in the U.K. back in 2012, and it powered a lot of our interactives back at that point… And it was reasonably successful; it was my first big open source project. It ended up getting used in a bunch of places… It was used inside Amazon, inside a Wall Street bank, it was used by the NFL, Delta Air Lines, Playboy TV at one point, apparently… In spite of that, it never really hit the mainstream, but I like to think that some of the ideas kind of stuck. Vue came along shortly after Ractive was launched, and sort of took all the best ideas, and jettisoned the bad ideas, and became very successful.

I was pretty pleased with it… It was better-performing than React, in most of the tests that I could throw at it, and it was really easy to use, and it had this really delightful community around it. But over time, as more of our work shifted to mobile, I became increasingly aware of the bundle size concern. People were always telling us that we need to make smaller JavaScript bundles because the initial load experience is so important, and if you’ve got a bunch of JavaScript that has to get parsed and evaluated when the page first loads, it provides this really bad experience… So I started thinking that there must be a way that I can deliver these applications without also having to deliver a library that knows nothing about the application… Because a library like Ractive, or React, or Vue - it has to be able to accommodate an infinite set of possible states of your application, but there isn’t an infinite set of possible states; there’s a set of states that can be known ahead of time, and if we could find out what they were, then we could deliver optimized JavaScript for them.

[ ] So I started to think about what a solution to that problem might look like, and around that time I had a conversation at a JavaScript meetup in New York with a guy named Jed Schmidt, who is a really smart programmer, and he had been thinking about this problem, too… And he started talking about compilers - what if a compiler could look at your code and write the application for you? This idea bounced around in my head for a little while. Then I thought “I think I know how we can do this. We can take our existing Ractive components, and we can put them through a special-purpose compiler”, and I know what code it needs to generate… So I spent a furious week coding, did a first version of that. The performance was unbelievable, the size of the applications that it was generating was unbelievable… So we started using it at The Guardian for some of our projects.

I open-sourced it, and it turned out that the idea resonated with a lot of people, and it kind of went from there. But the initial design was very heavily influenced by Ractive, because I wanted to be able to have a development experience that I was familiar with. And in retrospect, that development experience had a lot of flaws. There were a lot of mistakes made in the original design of Ractive, and it was getting a little bit difficult to move away from those mistakes.

Svelte 3 is in essence a complete reboot of the idea. It’s a little bit inspired by the work the React team has been doing with hooks, it’s very focused on developer ergonomics, but it also has a bunch of new features and a new approach to updating the DOM, which will result in even better performance in a lot of situations.