Why Svelte is the Next Big Thing in JavaScript Development

Before the rise of React.js and Vue.js, creating large and maintainable web applications was quite a challenge. To name but a few reasons, JavaScript's files were difficult to organize and deploy to production.

This has undoubtedly opened the doors to new developments. The best proof is that, while there were only 4 JS frameworks in 2016, this number increased to 10 by 2021 (State of JS, 2021).

And while React and Vue have turned frontend developers into productivity stars, a whole new perspective was proposed by the creator of Svelte.js.

In this article, let’s take a deeper look at:

• what Svelte and SvelteKit are

• why Svelte is getting popular

• what its best features are

• what the pros and cons are from the developer’s perspective

What is Svelte?

Before we start, you might want to check this article about what Jamstack is, if you wish to know more about the headless approach. But now, let’s begin with the basics.

Like React and Vue, Svelte is a JavaScript framework/library. In general, it’s a set of components, tools and rules for creating the structure of websites and applications with the use of JavaScript. Svelte, however, has developed its own, original way to let developers build what they need and want. Due to this fresh approach, Svelte is sometimes described as a compiler.

React and Vue use a virtual DOM in the browser, which leads to certain performance shortcomings. The DOM (Document Object Model) is an interface for web pages. It is an API that allows programs to read and manipulate the page content, structure and styles. You can compare it to temporary memory storage for interface changes.

Svelte, however, doesn't use a virtual DOM, instead compiling code into tiny, pure Vanilla JS. As a result, the code works much faster from the beginning, making a potential app product much lighter and user-friendly. This is the first and most notable difference that Svelte has presented to the world of coding.

What is SvelteKit?

Svelte offers a productive approach to facilitating the creation of frontend interfaces. Its app framework, SvelteKit, is a static site generator for Jamstack. Just as Next is helpful when working with React, SvelteKit would be highly needed by Svelte developers. It offers server-side rendering, code-splitting, components for serverless platforms, routing and many more features.

What’s different here, however, is that SvelteKit proposes a different approach than the very popular front-end frameworks like React, Vue or Angular. Since these frameworks do most of the work in the user's browser, e.g. handling a virtual DOM, Svelte goes through a compilation step. The results are high-performance and browser-friendly JavaScript with small package sizes.

While Svelte application build process is the biggest innovation of the framework, it's also very easy to learn, has great documentation, and comes with great experience testimonials from developers.

As a side note, feel free to check this article to see examples of how an actual Jamstack website can look like.

Svelte is Getting More Popular: the Proof

Svelte was developed first in 2016 by Rich Harris, the graphics editor at The New York Times. He is also known for having developed:

• Ractive, a UI library

• Rollup, a bundler module

• Buble, an ES2015 transpiler

In addition to his qualities as a developer, Harris is also very active in the JS dev community. He is present on Twitter, where he often participates in debates on the JavaScript ecosystem, with an often very clear opinion and a good repartee.

He is also an excellent and inspiring speaker, who travels to meetups and conferences to talk about Svelte and SvelteKit.

Undeniably, this presence on social networks and on meetups contributes greatly to the notoriety of Svelte. He makes people talk, and it makes them more curious to discover his solution.

Svelte first rose to glory in April 2019, when version 3 was released. The project at that time reached 32k stars on GitHub, which was considered very successful.

Svelte Popularity: the Numbers

Now, as for its popularity, there isn’t going to be better proof than these:

• Svelte has reached 56.5k stars on GitHub. To compare, Next.js, one of the most popular choices on the market, has reached 82.2k.

• SvelteKit is currently considered the most loved framework, with a 71 love to 28 dread ratio.

• Usage of Svelte has increased from 8% to 20% in the last 2 years, which indicates 150% growth.

• Svelte awareness grew from 75% to 94% in the last 2 years.

• Svelte has a higher satisfaction rate than React or Vue and is the most interesting front-end framework in the last 3 years.

• Svelte is the most loved framework among 66k responders.

• Svelte provides developers with one of the highest satisfaction rates among developers.

• Svelte is the first choice for developers when it comes to naming frameworks they'd like to learn in the future.

Svelte and Vercel

What’s even more promising is that, even at the current stage of Svelte development, it has been recently purchased by Vercel, a true web development giant (and our partner, too!). Indeed, it’s very good news.

Vercel is a publisher of Static Internet Sites for businesses and professionals. It’s a cloud platform for serverless deployment, allowing developers to host websites and web services that deploy instantly, scale automatically, and require no monitoring, all with minimal configuration.

Known for its innovative approach, Vercel has well established its market position as the creator of Next.js. Both them and Rich Harris see eye to eye for future business goals and the very development of the Svelte and SvelteKit tools.

Until now, Rich Harris has split his time between working on Svelte and as a visual editor at The New York Times. Considering Vercel’s vast know-how and experience, not to mention several big investors to back it up, the framework is more than good to go with this new cooperation. Svelte and SvelteKit will be able to grow unhindered.

Why is Svelte Getting More Popular?

Well, now that we know that Svelte is getting more popular and praised, let’s discover some of the reasons behind this trend. They may even serve as the next answers to why Vercel actually bought Svelte together with SvelteKit.

1. Svelte.js allows for the creation of applications with a very small size once compiled. It does not embed a runtime like React or Vue.

2. Its source code is easy to understand for developers. Svelte.js gathers the logic (JavaScript), the structure (HTML), and the style (CSS) in the same file. This makes the code easy to read and maintain. Guillermo Rauch, Vercel founder & CEO, has even said Svelte, in his opinion, is a lot easier to learn than React - an environment he’s known perfectly for ages.

3. The aforementioned elements are compiled in the .svelte file. Since Svelte.js doesn't embed a virtual DOM, it works somehow like a compiler, and thus gains in speed.

4. When creating Svelte apps, all components are compiled into independent JavaScript modules. The dev can monitor the execution and stability of the compiled program at any time using the preview window. This makes the final script very light and fast to run. Its performance is estimated to be several times faster than React.

5. As a web developer, you won't have to worry about error-susceptible CSS components. You can use HTML markup or simplified XML files that will be interpreted by Svelte.js.

Finally, there are a few minor but, nonetheless, appreciable advantages that have helped gained Svelte its popularity:

• There is little risk of graphical side effects because the style of each Svelte component is isolated to affect only the component, not its parents or children

• Svelte is ES2018 compatible, so yes, you can use arrow functions and other nice little features

Svelte Features From Developers’ Perspectives

Even though we have already gained some insight into Svelte and SvelteKit’s strong suits, let’s see what the developers’ experience is. To many of them, Svelte is the next evolutionary step in the rapidly evolving ecosystem of JavaScript frameworks. Why is that?

From a developer’s point of view, it just seems much easier to write with Svelte. What’s more, it doesn’t take much deduction to tell that Rich Harris was tired of all the boring abstractions and necessary standard code that existing frameworks force developers to learn. This is a very practical side of the tool, and one that really speaks to people actually involved with the coding part.

Going through the opinions on sites like Dev or GitHub, it’s not long until we see many developers’ comments like:

Here are the top ten reasons why developers recommend Svelte to every new web dev starting to learn to program:

1. Components Easy to Understand

Just as we mentioned before in this article, Svelte was considered as a clear, neat framework with no unnecessary additions. The coding and designing process has never been so easy, making developers happy and, as a result, the project runs much more smoothly.

2. Concise Code and Light Files

Writing logic is simple and easily readable at the same time. After all, the less code you write, the fewer bugs there can appear. Just like React, SvelteKit provides you with a code-splitting feature, which supports the faster loading of apps.

3. Responsiveness with Labeled Statements

Whenever you want your variable values to be updated and recalculated based on other variables, you can use responsive statements. Just put a dollar sign in front of the variable you want to be reactive to, and you're ready to go!

From the business side, it means the process of coding is smoother. Building web applications’ responsive interfaces is one of the most key parts of all projects nowadays, as they should be scalable for both web and mobile devices. This little feature makes it much less frustrating for developers and, thus, ensures the whole process is better optimized.

4. Simple Out-Of-The-Box Global State Management

To build Svelte apps, there’s no need for complicated third-party state management tools like Redux or Vuex. You simply define a variable as a writeable/readable store and use it in all .svelte files preceded by a $sign.

There is a long list of accessibility checks implemented in Svelte, and they provide hints without ever becoming a nuisance. What’s more, with Svelte Stores, you never have to worry about memory leaks because store variables preceded by a $sign automatically act as auto-subscribe and unsubscribe.

5. Built-in Accessibility and Unused CSS Checks

Svelte wants to make the Internet a better place by helping you with useful tips in the code. For instance, whenever you forget to put the alt attribute on a tag, Svelte will display an “A11y: element should have an alt attribute reminder” for you. To keep the code as concise as possible and to avoid leftover code snippets, this framework also marks unused CSS selectors for you whenever there is no respective markup in a component.

And what does it mean for your business? Developers claim this makes their work much easier. Svelte makes little corrections along the way, which ensures that the potential bugs in the files will be fewer in number.

6. Components Are Exported Automatically

Whenever you want to use component A in component B, you usually have to write code to export component A first, so that it can be imported by component B. With SvelteKit, you never have to worry about forgetting to export. The .svelte components are always automatically exported by default and ready to be imported by any other component.

As a result, the whole process is performing faster and the amount of potential bugs is significantly lowered. Also, the use of server-side rendering makes it quicker to build and display the front-end of the website or app.

7. The Style Is Set by Default

As with CSS-in-JS libraries, Svelte styles are extended by default, which means that a svelte-classname will be attached to your styles so that they don't leak and influence the style of other components. Of course, you have the option to apply styles globally by simply prefixing them with the :global()modifier or using a .css file if you wish.

To put it in simpler terms, it significantly quickens the entire design progress, while making it much more cohesive at the same time. Developers love it and, as a result, work much more efficiently in the project!

8. #await Blocks

With most web apps, you will need to handle asynchronous data to display useful statistics to your users.

The advantage of {#await} blocks is that you don't have to define additional states for your resolved/rejected promises. You can simply define variables inline in your template.

9. Shortcut Attributes for Passing Props

In case there is an accessory name that is the same as a variable name, we can pass it to the component as a shortcut attribute like {message} below. There is no advantage over using message="{message}", but it is more concise.

Above, you can see the class:roundattribute applied to the button based on whether the round is true or false. This could easily become a reusable component where you pass the value of round from outside to decide the style of the component conditionally.

10. Built-in Effects and Animations

Svelte comes pre-packaged with powerful effects modules:

• slender/motion effects like tweened and spring

• svelte/transition effects like fade, blur, fly, slide, scale and draw

• svelte/animated effects like flip

• svelte/easing effects like bounce, cubic, elastic and many others

Animation is an area of web development where you usually look for an external dependency to handle it for you, so it's great that you can use them out of the box. With Svelte, the size of your website or app will be lower thanks to having transitions and animations built in.

If you want to gain an even clearer perspective, we encourage you to check this article about Jamstack developers. You'll get to know why developers are choosing Jamstack more often.

When Should You Not Use Svelte and SvelteKit?

Even before we dwell on that topic, it might be beneficial for you to gain some more specifics on Jamstack development.

Despite all that has been said, there are drawbacks to using Svelte. To mention the most important ones:

1. The style of using DOM events can be annoying, as one has to follow the specific syntax of Svelte instead of using the predefined JS syntax. You can't use onClick directly like in React development, but you have to use a special syntax. This can be frustrating for developers used to working with .js frameworks. If there are developers like this in your team, you might want to make sure they are okay with switching to Svelte.

2. Svelte does not support reference updates and array mutations. Developers must actively look after this and ensure that arrays are reassigned so that the user interface is updated. This can slow the whole coding process significantly, and cause potential bugs in the final product.

3. Svelte is a young and recent framework with minimal support from the community, and the same goes with SvelteKit. It, therefore, does not support a wide range of plugins and integrations that might be required for a heavy production app. However, with Vercel’s support, this issue may be irrelevant soon.

Taking all this and a broader perspective into account, we can safely bet that this fast developing framework is not the best option in the following circumstances:

• Larger teams that don't want to build every extra feature should not consider Svelte.js. We recommend turning to the likes of Vue, as they have excellent router and state management libraries.

• If you already have a framework in a place like Vue or React, there's no real reason to switch to Svelte, as it doesn't offer any of the features of those frameworks.

• Although Svelte is closer to Vanilla.js than any of the other frameworks, it is still recommended to learn Vanilla.js first in order to have a better understanding of Svelte and all the other frameworks.

Framework as a Compiler: The Future of Web Development?

Almost 3 years after the release of its version 3, Svelte continues to be a hot topic.

Rich Harris, mainly through his communication, is obviously the main architect of this success. He initiated a project which makes it possible to reduce the size of used files, and thus to reduce the size of a typical web app and take advantage of great rendering performance, thanks to server-side rendering. The promises of the simplicity of writing and responsiveness are kept and contribute to the hype around Svelte and SvelteKit.

The compiler aspect opens up new avenues of reflection for the future of the web. Are we heading towards the death of front-end frameworks as we know them today to make way for compilers? When will this happen? How will this happen? Who will be the main players?

It's far too early to say, as all this will take time, but one thing is sure - Svelte is strongly contributing to this new impetus and making the web progress.

Create Jamstack Apps and Websites with Naturaily

As you now know, Svelte is only one of many technologies used in the Jamstack development. To get a bigger picture, you can start with reading about 14 less popular static site generators that are worth knowing of. SvelteKit isn't the only SSG that can bring your website to the next level.

And if you would like to benefit from the hottest headless features right away and use it in your outstanding product development, don’t hesitate to contact us! As experienced Jamstack developers with a proven record of successful projects, we will be able to provide you with advisory and fully functional websites and web apps. Feel free to check out our portfolio and reach out to us!