Web applications are increasingly transforming browsers into the primary interface for our digital lives. As we rely more on web applications for everything from work to entertainment, the responsiveness of these applications becomes paramount. Rich Harris, a former journalist and the mind behind Svelte, shares his insights into web development technologies and trends.
Edited transcription
A journalist by trade, Rich Harris recognized the potential of web technologies to enable “new forms of interesting and exciting journalism that involve visualizing large datasets.” Curious about how these technologies could help him do a better job, he began learning JavaScript and eventually open-source software development: “I began building tools for myself and then sort of sharing them on GitHub, discovering that other people had the same needs,” he reflects. Ultimately, Rich kept diving deeper into software development and created Svelte and its companion framework, SvelteKit, and transitioned out of journalism when he secured sponsorship from Vercel for his project.
Svelte is a JavaScript framework for building user interfaces. Unlike traditional frameworks like React and Vue, Svelte compiles components into highly optimized JavaScript code, resulting in faster performance from the client and smaller bundle sizes. Rich describes Svelte as “a way of building interactive websites with a lot more reliability and a lot less pain than if you were manually wiring up all of the DOM manipulation code yourself.”
Building the framework
The most defining philosophical difference between Svelte and other frameworks is the prominence of the compiler. As Rich puts it, “It doesn’t make sense to do a lot of work in the browser when every single user has to do that work and you have to ship the code that does that work when you could just do that at compile time.”
The compiler allows writing code “in this sort of declarative form that very closely resembles HTML, but with interactivity added on top of it,” Rich explains. Hence, unlike JavaScript-centric frameworks, Svelte allows developers to use JS, HTML, and CSS in a more integrated manner. “When you build a component in Svelte, you can include styles,” Rich notes. This scoped CSS approach ensures that styles defined within a component are isolated to that component. “It makes sense if that CSS belongs with the component in such a way that the framework can keep the styles defined with the components scoped to that component, which is something that Svelte does.”
In this regard, Rich believes other frameworks often “lean more in the direction of letting the community solve” issues. While he acknowledges that this can produce excellent solutions—since “people can really focus very intensely on one specific problem”—it also places a burden on developers. “Everyone who uses the framework needs to spend time thinking about which of the many solutions on display they’re going to use, and which is right for their application,” he says. In contrast, Svelte puts developer experience first: Users “want to be able to start writing code and be productive, and have the answer ready to the question, ‘How do I do this thing?’ before they start working.”
Many of Svelte’s features were shaped by this principle, including built-in support for animations and transitions as first-class primitives. “Whereas in other frameworks, you might need to research which library to use and then figure out how to integrate it, Svelte just supports these features out of the box,” says Rich. Likewise, Svelte’s implementation of signals introduced a more flexible way to manage state and dependencies. Signals are a mechanism for building reactive systems that automatically update the UI whenever their values change: “We’re able to be extremely surgical about which parts of the page update in response to a given change,” he says.
Finding the balance between server and client workload
While Svelte has been optimized to prioritize build-time tasks, there are inherent limits to what can be achieved with it. As Rich confesses, “When you’re building a large enough application, you will find that there are things that you just cannot know at build time; you need to have the information of the dependency graph available at runtime, and that just wasn’t there.”
Shifting workloads between the browser and the server is not a settled matter; in fact, it has become a recurring trend in web development, fed by hype cycles. “We shouldn’t be surprised that we’re in the middle of another one of these pendulum swings right now,” says Rich. To his understanding, these cycles often overcorrect previous trends. For example, during the 2010s, developers increasingly shifted workloads to the browser following the Ajax revolution sparked by Gmail, which led to the proliferation of large JavaScript bundles that often overloaded the browser. In turn, over the past few years, there’s been a shift back to server-side rendering, a trend of which Svelte is a part of.
Withal, Rich advocates for a balanced approach. “Code should run where it’s needed. If you have a supercomputer in your pocket and the ability to render a high-fidelity interactive user experience using code that runs on that device, then do it there.” Web applications can learn from native apps, which operate offline; excessive reliance on servers undermines offline functionality—a feature many users value.
To balance the workload, Svelte has SvelteKit, a framework built on top of Svelte for creating modern web applications. For enabling offline functionality, SvelteKit supports Progressive Web App (PWA) features. For example, SvelteKit can be configured to use service workers—scripts that run in the background to cache essential assets like HTML, CSS, and JavaScript files. When users revisit the application, these cached assets allow the app to load instantly, even without a server connection. SvelteKit also supports pre-rendering pages at build time, generating static HTML for specific routes or pages. These pre-rendered pages can be cached on the user’s device, ensuring they remain accessible offline. Additionally, SvelteKit facilitates API requests and client-side data fetching. With caching strategies, developers can store API responses and other data offline using technologies like service workers or IndexedDB.
The bottom line
To get involved with Svelte, Rich encourages developers to create component libraries, which are essential building blocks for applications. Visit github.com/sveltejs to learn more. Rich also invites enthusiasts to join the Svelte community on Discord at svelte.dev/chat.
You can follow Rich in X at @rich_harris.
