Is Svelte the future of JavaScript Frameworks?

Over the years, JavaScript development has gone through several paradigms: from raw AJAX in vanilla JS to a long reign of event-driven frameworks such as jQuery and Mootools, to the current state-driven approach of the current champions such as React, Vue, and Angular. 

But in an era where everyone is looking at performance, accessibility, and developer experience, there’s a new contender that promises to deliver all of these through a radical new approach to building apps. Is Svelte the next big thing in JavaScript frameworks? 

The Evolution of JavaScript Frameworks

In one way or another, we’ve been building web apps even before the word “app” was coined.

Early interactive websites gathered the power of AJAX to provide improved navigation and even what we may call the first SPAs. But the crude state of JS made for an excruciating developer experience, making apps increasingly hard to deploy and maintain as they grew.

In 2006 John Resig created jQuery, and the era of event-driven frameworks was born. After a quick challenge with MooTools, jQuery rose as the go-to framework for anything front-end, and it reigned supreme for a good decade. 

But as applications grew bigger and more complex, the need to share data across components drove a paradigm shift towards other approaches. After a brief and quick burn of Ember and AngularJS, we ended up with the current champions, that in one way or another aim towards a declarative, state-driven approach to frontend development: React, Vue and Angular. 

React is currently the most used and one of the most sought-after skills in all of tech, which provides an incredibly rich environment, a ginormous user base, and pretty much a guaranteed job for anyone that learns the ins and outs of the library. 

This has its downsides too, most notably developers using React for places where it may not be the best option. We see simple institutional websites built with React and a bunch of add-ons all the time, something that honestly feels like driving a nail with a sledgehammer: sure, you’ll get the nail in, but you’ll probably take a good chunk of the wall with it. But even in applications that really need a tool like React, it’s easy to find bundle sizes getting out of control, contrived codebases with increasingly painful developer experience, and certain patterns where the user experience is seriously damaged by poor performance.

What is Svelte?

That’s where Svelte.js promises a bright new future, by providing incredibly lightweight and performant applications.

The key idea that allows it to do so is working as a compiler. Current frameworks/libraries ship with your bundle to run your declarative code in the imperative programming environment of the browser APIs. 

Svelte works as a compiler at build time instead, cutting down a huge chunk out of your bundle size. It only ships your code, with some enhancements introduced by the framework. 

But it doesn’t stop there. It also allows us to write far more efficient code by achieving true reactivity, something that no other library/framework comes even close to and provides a smooth developer environment that’s incredibly easy to work with, maintain, and scale. 

The Developer Experience Matters

One of the biggest challenges for any framework is providing a good developer experience. We don’t really build applications for the computers but for other humans, and that includes both the users and our fellow developers. 

There are a million things that influence how a system’s developer experience is perceived, but we can probably summarise a positive experience as providing an easier learning curve, better readability, less boilerplate, doing more with less code, and ease of maintenance. 

I would dare to say that the focus on developer experience is actually one of the main reasons why Vue was able to achieve such great success in a market dominated by frameworks/libraries built by industry giants, and why it’s so heartwarmingly valued by its users.

Svelte has put a great effort into this, leveraging the lessons learned from previous frameworks. It takes ideas from Vue such as single file components and even revendicates the old jQuery motto “write less, do more”. 

Vue-Like Single-File Components

Generally speaking, one of the most welcomed features of Vue is the use of single-file components, that is, the possibility to have our markup, styles, and logic all gathered in one place. Of course, like anything in tech, this is opinionated and has lots of asterisks and “it depends” attached to it, but for the most part, developers value the readability and modularity of SFCs. 

Svelte.js takes inspiration from Vue here and gets it to the next level. In any given .svelte component you can have a





Hello {title}!

This is my first Svelte component

This is one of the things that in my opinion makes Svelte so welcoming for newbies: if you know HTML, CSS and JS, Svelte will look familiar the very first time you see it. And to prove it, check this bit of (slightly more complex) code and see if you can understand what it does:

Pretty sure most people reading this, even those who have never seen Svelte code before but are familiar with HTML and JS, will immediately pick that we have a button that displays how many times it was clicked and updates through an event handler. 

Sure, some parts of the JavaScript syntax can get obscure (more on this later on), but it will still be relatively easy to understand. With Svelte there’s no need to learn a whole additional templating language like React’s JSx or understand the totality of the system before dropping a line of code as in Angular’s case. 

Scoped, Modular CSS

One of the biggest challenges of styling websites and apps is keeping control over the CSS specificity and scopes. As apps grow bigger, it’s fairly common to see blocks of CSS that no one dares to delete or modify, simply because you don’t know what it will affect. 

The Svelte framework addresses the issue by having your styles scoped to the module you declare them in by default.  You can add a