Editor’s note: This article was last updated 17 October 2022 to reflect new features in Svelte as well as the addition of SvelteKit.
With the rise of single page applications, we’ve seen a significant shift in the logic and functionality of web applications. Conveniently, you can now perform most operations that were previously on the server side on the client side as well.
While I am a heavy framework user myself, especially Vue, sometimes, it feels like frameworks do much more than we need, and to be honest, this can become a problem. Luckily for me, I came across Svelte not too long ago and tried it out on a production project. It was exciting, so here I am, raving about Svelte.
In this article, we’ll explore Svelte in depth, reviewing some factors that may influence your decision to use Svelte in production. Let’s get started!
Table of contents
- What is Svelte?
- Performance and bundle size comparison
- Popular sites built using Svelte
- Should you use Svelte in production?
What is Svelte?
Frameworks and libraries like Angular, React, and Vue run in the browser. Whenever you run an app created with any of these frameworks, the framework is first booted before your own application code is executed, causing two significant disadvantages.
For one, both the framework code and your application code are being exported, causing the size of your application when exported to production to be heavier than it should. In addition, there is an initial delay in execution during the phase when the framework is being booted; however, subsequent executions are faster.
Performance and bundle size comparison
To understand some of the benefits of using Svelte, we’ll review a benchmark test comparing Svelte against Vue, React, and Angular. I conducted the benchmark test using Krausest’s benchmark tool.
When it comes to time to interactivity and post-compression resource transfer, Svelte is a clear winner:
In terms of memory usage, Svelte clearly comes out on top as well.
Popular sites built using Svelte
If you decide to use Svelte in production, you can be sure that you’re not alone. There are many established companies already using it too. According to svelte.dev, some popular companies that already use Svelte, including GoDaddy, NameCoach, Rakuten, 1Password, The New York Times, Creative Tims, and mail.ru.
Should you use Svelte in production?
Svelte promises a good developer experience. When you make the switch, you’ll get to enjoy some of the following benefits:
If you’ve used the other frameworks I mentioned before, you’ve probably seen how helpful creating reusable components in your app can be. Svelte is also built with this component-based development approach at its core. Just like Vue, you can either build your app entirely using Svelte, or just add it to some parts of your application incrementally.
With Svelte’s out-of-the-box scoped styling, you can style a component without worrying about the CSS leaking to other components. In addition, state management, templating, server-side rendering, animations, and a plugin system are some of the many tools that come with Svelte right out of the box.
While Svelte is still a relatively new framework, its community is already growing rapidly. You can join in on discussions about Svelte on Discord, and there are also over 3,500 questions asked on StackOverflow.
Because Svelte is still relatively new, it doesn’t yet have the same large community as other frameworks. However, this is bound to change as the framework progress.
When it comes to developer tools and packages, there are limited options available for Svelte developers to choose from at the time of writing. However, as the community grows and more developers begin using Svelte, this problem will likely fade out.
SvelteKit is a web application framework that provides flexible, filesystem-based routing as well as a fun development experience. With SvelteKit, you don’t have to worry about sacrificing SEO, progressive enhancement, or any of the performance that Svelte offers.
Built-in routing system
SvelteKit includes a filesystem-based router that allows you to easily route Svelte component files in specific folders as URL paths.
To put it another way, by simply creating
routes/contact.svelte, these component files are immediately routed to
/contact, respectively. This is accompanied by other mechanisms for loading page data, creating layouts, and handling route errors and redirects, among other things.
Behind the scenes, SvelteKit integrates Vite and will automatically process imported assets to improve performance. For the same reason, you can easily transform files on the fly, like converting
.avif image files to
.webp or rendering responsive images with different sizes for different devices.
SEO, service workers, and more
Handling search engine optimization is a breeze with SvelteKit. It includes a mechanism for easily integrating service workers into your projects. It was designed with accessibility in mind, and it includes additional features that make your development processes more enjoyable.
In this article, we’ve considered both the pros and cons of the Svelte framework. Without a doubt, the pros outweigh the cons. While Svelte might not be the perfect solution to every single problem you may have as a developer, it has a lot to offer. And this is only the beginning for Svelte. Since Rich Harris, the creator of Svelte, has joined the Vercel team to work on Svelte full time, we can be confident in Svelte’s promising future.
I hope you enjoyed this article. Happy coding!
LogRocket: Full visibility into your web and mobile apps
LogRocket is a frontend application monitoring solution that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.
More great articles from LogRocket:
- Don't miss a moment with The Replay, a curated newsletter from LogRocket
- Learn how LogRocket's Galileo cuts through the noise to proactively resolve issues in your app
- Use React's useEffect to optimize your application's performance
- Switch between multiple versions of Node
- Discover how to animate your React app with AnimXYZ
- Explore Tauri, a new framework for building binaries
- Compare NestJS vs. Express.js