Rich Harris Talks SvelteKit and What’s Next for Svelte
Work on the first major revision of Svelte is underway, according to Rich Harris, creator of the frontend framework. This comes on the heels of the team’s release of SvelteKit, a full stack framework for building web applications.
“Now that SvelteKit is out, [is] pretty widely used and stable at this point, our attention is going to switch back to Svelte itself,” Harris told The New Stack. “Right now we’re working on Svelte 4, which is going to modernize the codebase.”
The team is switching the underlying code from TypeScript to JavaScript. That and the update will then allow the team to incorporate “big ideas” for Svelte 5 later this year, he added.
Svelte is a framework, but it’s also a language for describing user interfaces, Harris said. It’s compiled into JavaScript so that it can run anywhere. The advantage of doing that, he said, is when the application is built, Svelte knows which parts of the app could change and which parts can’t.
“Whereas [the first] frameworks would have to do a lot of work to figure out what needs to change on the page, Svelte was the first framework that really showed that that was unnecessary and that you could get significant gains, in terms of performance and in terms of bundle size, by doing as much work as possible ahead of time instead of in the browser,” Harris said.
What SvelteKit Offers Frontend Developers
Focusing on Svelte means there will be less focus on SvelteKit in the short term. SvelteKit was released as version 1.0 in December and is now in version 1.11. Harris said that it’s stable. It competes with Next.js, Gatsby and Nuxt.
“Sometimes people will say, ‘Should I start with Svelte or SvelteKit,’ as though they’re mutually exclusive. The way that I would frame it is, if you’re familiar with frameworks like React and Meta frameworks, Next or Remix, then Svelte and SvelteKit have a similar relationship,” Harris said.
SvelteKit is a user interface framework used to create self-contained components, which combine some markup, behaviors and styles into a reusable component that developers can use inside their apps, he said. That could be a navbar, a blog post or chat widget, or even a component inside another component, he added. It can be anything the developer wants.
“Increasingly over the last few years, what we’ve seen is framework teams realizing that it’s on us to provide tools for people to actually build applications with these component frameworks,” Harris said. “Next was probably the first really serious attempt at this. It took React from being something that you would have to cobble together into your own application framework.”
In short, if developers are building with Svelte, SvelteKit supports and provides the best way to do that, he explained. Svelte can run in two different environments — on the server or in the browser, where it will manipulate the DOM. SvelteKit is built with JavaScript and has the idea of the server/client split, Harris said.
“One is a one-shot, generate HTML, and you’re done,” he said. “The other is you’re creating this long-lived, potentially interactive thing, which might receive new data, and you can click buttons and create events and change state and all of those things, so it has to have this long life cycle.”
Even though you’re writing the component once, you’re targeting two very different environments, he added.
“SvelteKit gives you a really easy way to bridge that gap,” he said. “It will coordinate the initial rendering on the server, and then it will deliver a seamless handoff to the browser.”
The Benefits of SvelteKit’s Approach
The benefit of this approach is a better-perceived performance, because part of the page runs even as the JavaScript loads — or even if it won’t load, which Harris said happens more than developers tend to think. For instance, he experiences this problem whenever he’s on a subway — the connection drops out before the JavaScript can load. Having the server-side rendering can allow users to see the content anyway.
“It’s better for search engine optimization, it’s better for archival purposes, it’s better for accessibility, all of these other things,” he said. “That’s why we have this server/client mindset where both things are equal partners in the application.”
It does more than server side-rendering, though. SvelteKit also has a process for getting data from the server. If a page needs to update without reloading, it can fetch data from the server as well, enabling developers to create API endpoints so that data is available even to third parties within the same application, he said.
Edge Rendering and Svelte
Edge rendering is another type of server-side rendering. Using Svelte at the edge has generated some discussion and was a topic at the Svelte Summit two years ago. Harris said the ability is a function of the frontend frameworks, and not unique to Svelte.
“The big innovation with Edge functions is the not running Node anymore; they’re running a much lighter weight JavaScript runtime, which is practical to run in many different data centers all around the world,” Harris said. “The evolution we’re seeing is from centralized, manually managed servers to these very small units of compute that can run anywhere around the world. That can be any computer whatsoever, but in our case, it happens to be rendering HTML.”
Is Svelte Enterprise-Ready?
Harris readily acknowledges that, previously, Svelte might not have been the best choice for a large company.
“If you are responsible for engineering decisions at a large company, then the sorts of things that you’d be thinking about are: Does this framework have the backing of a major company? Are there a lot of developers using it? And for a long time, the answer was no and no,” he said.
That’s changed with the backing of Vercel, some of whose clients are now using Svelte. Schneider Electric, the Pudding and GitBook are among the companies that use Svelte.
“Increasingly, we are seeing developers at large companies use it,” Harris said. “Once you have one example of the company succeeding with Svelte that you know, the other companies will often follow.”
