There's a blazingly fast web framework out there, one that's easy to learn and battle-tested in real world applications. And no, we’re not talking about React.
Since Svelte was invented by Rich Harris, at every conference and in every Twitter thread, he has had to fight an uphill battle against other frameworks, just to be noticed.
In this podcast episode Harris tells the tale of Svelte and shares his insights into having developers give a relatively unknown framework a go. Also, how we, at Wix Engineering, are testing Rich’s framework. Listen now:
You can also listen to this episode on Apple podcast, Spotify, Google or on Wix Engineering site. And you can also read the full interview here:
Hi, I’m Ran Levi, welcome back to the Wix Engineering Podcast.
Rich Harris: Hey. I’m Rich Harris. I’m a graphics editor at the New York Times. I’ve spent my career in journalism but I also do a lot of open source software development on the side. Probably best known in the JavaScript world for being the original creator of Rollup.
Years ago, Rich Harris decided to build an interactive-UI Javascript framework. He called it “Ractive.” Ractive was fine--in fact, for a first go-around, it can be considered very successful.
Rich: But over the years, it became clear that it wasn’t all that well-suited to the era of people consuming news on mobile devices, which are lower-powered and where the amount of JavaScript you are shipping to the client is very important.
Exactly what Ractive did right and wrong almost didn’t matter in the end. Just while it was getting going, another Javascript framework called “React” was also hitting the market. Its developers were Facebook.
Rich: There were two fairly different ideas about how to do – how to build frontend applications. And in a lot of ways, the React model is far superior to what I had in mind.
Just imagine being in this position--releasing a product at the same time Facebook releases the same kind of product. You might as well give up! They’ve got billions of dollars, and tens of thousands of the world’s most talented developers at the ready. With those kinds of resources, they can do anything in the world better than you can--they can build a better Javascript framework than you, they can bake cookies better than your grandma’s recipe, they can pick your own nose better than you can.
With all that firepower behind it, React grew fast. Before long, it became arguably the world’s most popular Javascript UI framework, rivaled only by Google’s “Angular”. Today, React and Angular are so ubiquitous that knowing how to use them can sometimes be a prerequisite for getting certain programming jobs.
Yet a few years after releasing Ractive, Rich had an idea for another UI framework that would improve on certain drawbacks of React and Angular. You might be wondering - how could RIch even dream of competing with these two giants? Well, today, Svelte - Rich’s 2nd UI framework - has users at Apple, Wix, Spotify, The New York Times and a number of other large and small companies. On Github, where users give star ratings to projects they like, Vue has 160,000 stars, React has 146,000, Angular has 60,000, and little old Svelte has 32,000 stars. 32,000! Half of Google’s number, an amazing achievement for an open-source project created by a lone developer. Heck, my most popular Github project has only 27 stars!
So, what made Svelte so successful in the face of such challenging competition?
Interviewer: Are there any examples you can think of, of past frameworks or similar programs to Svelte that actually became very successful from the ground up?
Eliran Hizkia: Ah, so you’re talking about the one guy that sits in his basement that –
Interviewer: Yeah, a little bit.
Eliran Hizkia: OK, OK, OK. So you have a lot of these.
You’re listening to Nate Nelson, the writer of this podcast, speaking to Eliran Hizkia, a software engineer at Wix.
Eliran: So you have Babel that was written by an 18-year-old guy. No, he transformed the internet. He gave leverage to a lot of developers to try new features without these features to be implemented in the browser. So you could use it before it gets shipped to the browser.
Interviewer: So how does a program like that become sort of popular, if it’s just an 18-year-olds in their basements?
Eliran Hizkia: I think this is the magic in computer science or in programming. Like, one man or woman can write the code - and it’s duplicatable, and you can put it everywhere, the production cost is zero. So if you have one person with a great idea, he can deliver his thoughts through the code and I think it’s done in a lot of places - Git and Linux were written by the same guy.
The software development community carries a long lineage of lone developers who, with only a computer and two hands at their disposal, have managed to create software platforms that have changed the world. Even in the niche sector of Javascript frameworks, there’s one, shining example of just that.
Rich Harris: So there is precedent for something like Svelte becoming mainstream and that precedent is Vue.
Vue is a framework that, I think its first release was back in 2014, and it was very similar in fact to Ractive, Svelte’s predecessor, in a lot of ways but had a much clearer architecture and a nicer development experience and it cast aside some of the bad decisions that Ractive had made.
People absolutely fell in love with this framework. It was really nice to use. It had a really well thought through development experience and it was basically the product of one guy, one developer, Evan You, who has been working on this thing for the last seven years or so. He started it while he was at Google - he wanted something that was friendlier to designers than Angular, which they’d been using at the time, I believe.
And at a certain point, I think in about 2016, it just skyrocketed in popularity. So now Vue is – I think you would say that it’s one of the big three frameworks alongside React and Angular. And it’s unique among those three in that it doesn’t have the backing of the big corporation.
Vue is now supported by a wide community of developers. But it started with just one. It succeeded not necessarily by being better than React and Angular, but by finding pockets of space where it could actually out-perform them. By doing what it could do better than anyone else did it.
Rich: It’s particularly good for people who were working directly with designers, for example.
Svelte, like Vue, would not only have to be good. It needed more than that. Svelte would have to find a market niche where it could actually outperform React, Angular and, of course, Vue. Only with a different kind of product would developers have any interest in moving away from the frameworks they’re already used to.
It turns out that even the best frameworks come with drawbacks.
Rich: React is a really phenomenal framework and you can build just about anything with it. The reason that I didn’t end up being a React user in my day job is because I work in a place where we have fairly specific requirements.
I’m building these very heavily-interactive applications that use lots of animation, lots of motion, and they need to be deployed into the fairly hostile environment of a news article page where there’s already a lot of JavaScript running - we’ve got ads and analytics and comments and this, that and the other.
So we need our applications to be very small and very fast and React wasn’t quite meeting the mark when it came to the things that we needed to build.
Rich was working for The Guardian on projects that required certain features that weren’t necessarily natural to the React or Angular models.
React and Angular are used to create frontends for web applications, and as such - they need to be fast: pages should load quickly, and interactions with the various UI elements should be seamless, without delays or hiccups. That’s relatively easy to achieve on cutting-edge devices with powerful CPUs - but not so easy on weaker and slower devices.
Why does React strain the CPU? Because it performs most of its computations in what’s called ‘runtime’ - that is in real time, while the app is running on the user’s device. Rich’s idea was to move most of those heavy computations to the compilation stage, and have the compiler spit out vanilla javascript code that runs blazingly fast during the actual execution of the app. In short, Rich’s niche was Performance.
Rich: So I’ve been playing around with these ideas for a little bit and it sort of occurred to me that if we could take your frontend code written using components and turn that into the kind of vanilla JavaScript that you would have written by hand if you were writing an application 10 or 12 years ago, then you would really have the best of both worlds. You would have the declarative development experience of a component framework, but the browser would just be executing very fast JavaScript without this intermediate step of doing virtual DOM diffing or any of the other techniques that frameworks use to synchronize the view with the state.
With the concept of moving the heavy lifting from runtime to the compilation stage in mind, Rich took a break from work as an opportunity to start coding his new platform.
Rich: So in the early days, it was literally just me. It was the Thanksgiving weekend in 2016, I had a little bit of free time and I just kind of banged out the first version of Svelte in three or four days.
More as a proof of concept than anything. Really just an experiment to see whether you could generate a really tiny JavaScript bundle out of a declarative app.
Svelte--or at least the bones of it--had been born. Rich published right away--two days after Thanksgiving. He still had turkey grease on his fingers when he finished the final line of code.
Interviewer: Are there any other unique features that make Svelte distinct from React?
Rich: Most people, when they think about Svelte in the context of other frameworks, tend to focus on the performance aspect and the fact that bundle sizes tend to be very small.
But actually for me, the real benefit of using something like Svelte is it’s a bit more comprehensive as a framework. It takes care of most stuff and the development experience is nicer as a result I think. An example of that would be that when you’re writing a component, you’re writing into a .svelte file, which is essentially a superset of HTML, and because HTML can contain a style tag and a script tag, that’s where the CSS and the behavior belong. And so when you’re writing CSS for a component, it’s local to that component, it gets automatically scoped. You’re not having to have styles written in a separate CSS file that is tightly coupled to the market in your component.
So because of that, firstly it’s a lot easier to understand which styles apply to what market because you’re not switching context. You don’t have to use CSS in JS library (although you can, if that’s your preferred style). But also we can start to do things like, we can scope the CSS of the market as I mentioned. But we can also remove unused CSS, which is a thing that is very difficult to do with more traditional development techniques.
Eliran: One thing Svelte does and React doesn’t do is that it has all the features in it already and it just magically compiles the code that you used into your actual code.
So actually, it’s more comfortable in a way because you go into this one stop shop that has everything in it. And if you want to do the same in React, you have to download React and your React server and then the plugins for transitions and then you have the state management that you have to choose, you have to choose between Redux and MobX, or some kind of other state management, while in Svelte, you have everything inside.
But Svelte's real challenge wasn’t necessarily achieving technical superiority over its rival frameworks - rather, it was adoption. After building it, Rich had to convince people to actually try his framework, even when they had so many other great options already on the market.
Rich: So everyone kind of talks about how success in open source is 10 percent code and 90 percent marketing. I don’t know that it’s quite that extreme, it depends how you quantify success, but it’s certainly a huge proportion of mindshare. A lot of people don’t read the same things that you read on Twitter and Reddit or whatever it is. So you need to be able to kind of reach developers where they are.
You need to be able to write blog posts for different publications or encourage other people to do so to make sure that people are finding out about your thing in the places that they go whether that’s the JavaScript weekly newsletter or CSS Tricks, or this, that and the other.
That’s time-consuming but ultimately kind of necessary I think if you’re going for increasing the user base.
Lack of popular support is a problem that, if you’re not careful, can end up compounding on itself. For one thing, have you ever scrolled Google or Yelp, and seen a restaurant without any ratings? That place may be great, or it may be terrible, you don’t know. If there’s a nearby restaurant with lots of reviews, as long as they’re not negative, you’ll probably choose the popular option nine times out of ten.
But the issue goes deeper than that. Place yourself in the shoes of a young developer. React is used everywhere, so knowing it makes you a better candidate for all kinds of jobs. It’s better for your career than learning Svelte would be, even if you like Svelte.
Eliran: You have amazing dev tools for React. Everything is integrated with TypeScript. Facebook is backing React and they’re going to continue to support it. On the other side, you can move to Svelte which is less common and has less community around it.
Not a lot of companies use it in production. The ecosystem around it is not developed enough. It has less community. It has less questions and answers in Stack Overflow.
Now place yourself in the shoes of a more seasoned developer. You probably already know React, or Angular, or Vue, or some combination of the three. Whatever framework you’re used to working with has gotten you this far. Learning a new one is going to take time and effort.
Eliran: So it’s definitely harder to wrap your head around. It’s compiling your code so it runs differently than you wrote it. So you have to get your mind around it and understand that’s not the code you wrote.
This same rule applies to companies, whose programs and websites have been built with established frameworks.
Rich: Typically people building apps are building apps that will last for several years and if someone started building that app in 2017, 2018, then they were probably going to use React and they’re not due for the big rewrite yet.
I can totally understand why a product manager at a large company would be like, “I don’t know about this, guys. I think we should probably play it safe and continue using React.”
There was no immediate fix to compensate for React’s popularity, and Svelte’s lack of it. But helping experienced developers like Eliran learn how to use the program was feasible and, at this stage, of high priority. In fact, besides building a good and unique product, facilitating an easy onboarding experience was the single most significant factor in getting Svelte out to the world.
Rich: We spent a lot of time building out a pretty comprehensive interactive tutorial for Svelte and people just absolutely fell in love with that.
Eliran: My experience with Svelte was awesome. I got to their tutorial. I did all the 17 or something steps that they had in their tutorial. I read everything. It has these demos and so you go through one, two, three, four, five and then fifteen is something that you haven’t seen yet or that you know that takes a lot of effort to do in other frameworks and suddenly you just add one line and it works.
Rich: It’s a really easy way to get started understanding how you would build an application using Svelte. And at the point at which you want to turn that into a local development experience, you can just click the download button inside our Repl and you will get a Zip file with an application that’s ready to go.
Eliran: The Repl is really good. So you actually don’t have to install anything before you can play with the framework and see what it does
Rich: You just type “NPM install” and you’ve got a local development environment and everything.
The tutorials allowed anybody willing to try Svelte an easy path to learning what it did best. Whether anybody actually would try it was another matter.
Rich: Adoption for a frontend framework is definitely a thing that takes a few years to really get going I think. We saw this with Vue which is an incredibly popular framework but for the first several years of its existence, it was a very minor player in the landscape and I think Svelte is maybe just at the beginning of that elbow curve and towards a greater adoption.
I did a few conference talks last year. I don’t have any lined up currently. We do have regular meet-ups now which is a pretty new thing. Shawn Wang who works at Netlify, he recently began something called Svelte Society and we have chapters of Svelte Society in many different countries around the world and so that’s a way that people can start to build a physical community as well as the online community that we had before.
That’s been really great. We’ve had three events in New York City and they’ve all been really great fun.
The big shot in the arm was a conference talk that I gave that you got in Israel last year where I talked about the concept of reactivity and how Svelte had this slightly different approach to thinking about reactivity.
Watch here:
It really resonated with people and that was the thing that really made people sit up and take interest in this framework. They’re like oh, I see this is not just another framework. It actually has a fundamentally different take on some of these ideas that we’ve been working with, with other frameworks and that is important.
Svelte will probably never make it out of the shadows of React and Angular. Rich Harris won’t convince most programmers and the companies they work for to change how they’ve been doing things for so many years. But that was never the goal. In fact, RIchard at no point set out to build the better framework than React or Angular. His goal was to build the framework he wanted to see in the world. The hope was that others would see the value in it too.
Rich: So rather than trying to do the best possible framework within the confines of JavaScript, the language, we’re saying “What is the best possible development experience, period?”, and we’re trying to shift people towards that. And I think that’s probably the biggest benefit of Svelte over some of the other frameworks.
Gradually, the contributor base has grown and grown and grown, and people have come and gone... But a lot of people are stuck around and now, we’ve got a pretty healthy core team. There are several of us who are regularly working on the project and we’ve got – I think at this point, there’s probably around 200 people who have contributed to the repo in some way.
So at this point, it’s definitely much, much bigger than just me which is exactly how I like it.
Interviewer: What advice would you give to a young developer interested in building their own framework? So how do you make space in a market with such heavy-hitters as Facebook and Google?
Eliran Hizkia: My suggestion would be to not do it. [Laughs]
Rich: The first thing I would say to someone who is trying to break into a market as crowded as the frontend framework market, is “Are you sure you want to do that?”
For us, adoption is – it’s a nice thing, it’s very validating. But it’s actually not a top priority.
Having said that, if that is your goal, if you want to see your framework competing with the biggest frameworks, then I would say the single biggest thing that you can do is invest really heavily in onboarding.
Number two I would say is have a really compelling story that you’ve figured out how to tell and go and tell it.
So yeah, I guess that would be my advice. Figure out how to make it very, very easy to people who are casually interested in your framework to start playing with it straight away without having to invest in – you know, figuring out a bunch of tooling. And sell it in a really clear and concise way.
Eliran: I think that there are a lot of open source projects that address different issues in the web and in the component libraries. I think what you should probably do is look for the best fit for your problem.
If you’re a developer with an idea, but big organizations with lots of money and manpower are standing in your path, there’s a simple trick to success: define your terms. Don’t try to beat multinational corporations at what they’re good at. Build what you want to see in the world. There are other people like you out there--maybe a lot, maybe only a few. Your success will be defined not by how many people you attract, but by how much impact your work has on them.
Rich: I’m not sure that Svelte is ever going to be one of the top three frameworks in terms of actual use. I think it’s going to be a framework that people are interested in, that a lot of people are aware of.
But I don’t know that being one of the biggest frameworks is necessarily our priority. We’re far more interested in solving the problems that we face really well and pushing other frameworks to get better at what they do.
So with Svelte, we’re trying to say to people this is what frontend development could be like. These are some of the ideas that we’re thinking about. Maybe you want to think about them too.
That’s it for this episode, thanks for listening. The Wix Engineering Podcast is produced by PI Media - written by Nate Nelson, produced by Guy Bin Noun and narrated and edited by me, Ran Levi. Special thanks to Morad Stern from Wix. See you again next episode, bye bye.
For more engineering updates and insights:
Visit us on GitHub
Subscribe to our YouTube channel