We’re creating documentaries to tell the tech stories that inspire people to keep creating and learning, and ultimately, unlock more potential in both themselves and software. Check out the YouTube Channel!
Here, Rich Harris and Orta Therox explain how the improved Svelte tooling experience led to mainstream adoption.
Transcript
Rich Harris
For a long time, TypeScript support was one of the most requested features in Svelte. People like being able to write the JavaScript inside the components. We have this single file component format. But at the time, TypeScript was becoming incredibly popular and very important in the JavaScript ecosystem. To the extent that a lot of people just won’t touch code unless it’s TypeScript.
And so it was preventing people from using Svelte. I happen to know Orta. He’s a good friend. He actually used to live down the road from here, and he’s on the TypeScript team. And Orta was able to lead a project with several developers to actually build TypeScript support into Svelte. Not directly into the compiler, you still have to add a little bit of a preprocessor, but it means that now if you’re building a Svelte component, you can use TypeScript and you will get all of the same auto-completions and type checking as you’re building your app as you would if you’re writing straight TypeScript.
Orta Therox
I heard about Svelte back at my old company. We had Rich Harris come in and give us a talk about what it was. It was still like a very new project for him at the time. And a few years later, I interacted with Rich a few times through the JavaScript ecosystem in New York. We are both Englishmen living in New York.
And I invited him to a house party, and we were chatting about where Svelte is and where Svelte could be and at the time I was working on TypeScript and I thought it would be a very interesting sort of exploration to see what it looks like to make the sort of tooling experience that we have in TypeScript as good in the Svelte ecosystem, because Rich hadn’t really been focusing much on what does it look like to work in Svelte in your editor but mostly on what is Svelte, how does Svelte work and how does Svelte fast. And so I felt like it was something that I could take a dig at.
I had a lot of experience in trying to make developer tools for complicated environments, and so I said Well, maybe I could try and take that responsibility for you for a while.
Like we didn’t want to TypeScript inside Svelte, but we wanted the TypeScript-like experience that people get in their editors for Svelte. I think that that is like an important part of scaling Svelte. Like the ability to have your editor tell you what properties are available and how they all intermingle. You need like rich developer tools to be able to do that.
I kind of did two things. One was to describe what I think the future of tooling for Svelte looks like. And then the other was to sort of create the foundations that the allow of a people to eventually create those.
There were a lot of different projects that had different owners that weren’t necessarily on the Svelte call team. They were all trying to find different ways that you could have interesting experiences in the browsers, in your editors and on the command line. What I did was I went and consolidated all of the most interesting work into a single place and started building out these foundations that would allow maintainers in the call team to stop actually running these projects themselves.
So think of it as like you know, there were a lot of people exploring in the world. I came in as a sort of somebody that has a lot of experience in that area and just said, these projects are the ones that we actually want to take. We’ll take some of these projects and put them into Svelte sort of repository of things that we care about and make a few more people call team members because they’re already doing interesting work and then consolidate it all into one single thing.
We actually built support for Svelte in an LSP, which means that it works in VM it works in Atom, it works in Sublime Text, and it works in VS code as well as trying to figure out, Well, we may have all these tools in your editor, but how do you verify that your Svelte files are what they say they are and that they link between each other correctly, and that really helps you to scale code bases.
And so we also built a sort of SLI tool that uses the LSP to verify that all of your files are correct in the way that you expect them to be. And so that work was trying to figure out what is the tooling around Svelte that could be built in a way that doesn’t negatively affect the sort of performance characteristics of Svelte itself.
We just really wanted to try and find a way to make tooling like TypeScript run alongside Svelte in a way that understood the internals of the systems, but could provide you with all of the experience that you were looking for as a developer.
So my involvement, I think really helped Svelte to be able to hit mainstream adoption by providing the tooling in the editor.
I was only involved in Svelte for about three months. My initial involvement was announcing to the world that I was going to be involved in, which I wrote a pretty lengthy GitHub issue, trying to describe what I think the future of tooling looks like for Svelte. Over the course of the next few months I sort of brought that vision into reality by inviting different maintainers to come contribute, and to sort of set the foundations up so that it will succeed in the future.
So that’s something as boring as setting up, correct CI, making sure that deployments are completely automated and not dependent on me or any individual in the small org. This was like, this is kind of boring work for for most developers, but for somebody who cares about the dev tools, this is what gets me up in the morning.
Over the months I helped build these repos and people started to contribute as I was starting to still build them and it was really gratifying to see individuals like Domdidom come in and start adding features while I’m still trying to plug all the pieces together to make it work.
And it was in parallel with them that I managed to get all of these pieces put together and then sort of just announced it. My responsibilities sort of started with an issue and then ended with a blog post and they sort of encapsulate basically all of what does it look like to use Svelte in an editor. And it’s like some really gratifying work. I wish I could do more of it.
Rich Harris
And it’s been huge. People absolutely adore TypeScript, and the fact that he was able to do that just blows my mind. I still don’t understand how any of that actually works, but I use it every day and it’s great. It’s now like part of the default developer experience for a lot of people using Svelte.
Related content
- Svelte Origins: The Documentary by OfferZen
- Why OfferZen is Making Documentaries about Open-source tech
- What is Svelte? feat. Rich Harris
- Rich Harris on why he created Svelte
- Why Svelte is Easy to Learn as a React Developer
- How Svelte differs from React or Vue.js
- The state of JavaScript
- Taylor Otwell on how he Decides what PRs to Merge into Laravel
- Jeffrey Way Tells the Story of Laracasts
- The Story of Tailwind CSS feat. Adam Wathan
- Nuno Maduro Tells the Story of Pest PHP
- Larabelles and Inclusivity in the Laravel community
- PHP Isn’t Dead ft. Jeffrey Way, Erika Heidi and others
- Taylor Otwell Explains his Coding Style
- The story of Laravel News featuring Eric L. Barnes
- Taylor Otwell on the Importance of Documentation and Developer Experience in Laravel
- The story of Code Happy, Code Bright & Code Smart feat. Dayle Rees
- Taylor Otwell on How He Got Into Programming
- The pros and cons of open-source feat. the Laravel Origins cast
- Taylor Otwell on how Laracon came to be
