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 FrameworksIn 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 MattersOne 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 ComponentsGenerally 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 <script> tag declaring your logic, a <style> block for your CSS, and regular HTML tags defining your template. And I mean it. There's no templating language in Svelte, not even the need to declare a <template> block. You simply write your HTML tags as you would in an old-fashioned HTML file, with added functionality via handlebars-like curly braces. <script>
const title = "World";
</script>
<style>
h1 {
font-size: 2.5rem ;
}
</style>
<h1>Hello {title}!</h1>
<p>This is my first Svelte component</p>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:<script>
let count = 0;
function (addOne){
count += 1;
}
</script>
<button on:click={addOne}>
Clicked {count} times
</button>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 CSSOne 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 <style> tag to your component without worrying about affecting anything else on the app. It achieves this by adding a computer-generated unique hash to the styles declared in each module. This gives you most of the benefits of CSS-in-JS with none of its drawbacks. For instance, consider this code:/* app.svelte */
<script>
import Nested from './Nested.svelte';
</script>
<p>This is a paragraph.</p>
<Nested/>
<style>
p {color: purple; }
</style>
/* Nested.svelte */
<p>This is another paragraph.</p>We have two modules, one nested in the other. The resulting app will show two paragraphs, but only the first one will be purple. If you inspect the compiled code to check how things are working under the hood, you'll see that Svelte is creating a unique class, something among the lines of p.svelte-urs9w7{color:purple;}, and only applying it to the <p> elements explicitly declared in that module.While I can see the huge benefit this provides for most teams, if you have a dedicated CSS specialist they're probably yelling "just embrace the cascade instead" right now. I know I would... Well, turns out you can. Svelte doesn't lock you into this architecture. You still have the option to affect nested elements with <style global>, and even the possibility to use pre-processors and whatever framework or architecture you'd like. It gives you a simple and effective way to handle your CSS, but you can override it with whatever other approach you prefer. Want to spice things up with SASS? you got it, just declare <style lang="scss">. Want to go with any flavor of CSS-In-JS for whatever reason? You can. Toss in Tailwind for your convenience? No problem.True ReactivitySome people say there are as many definitions of "reactive programming" as reactive programmers out there, and they are quite right. But the basic idea is defining the dynamic behavior of a value at the time of declaration.A good example of reactive programming can be found in spreadsheets. When we declare a cell's value we may do so in relation to other cells. This creates an intricate tree of relations that knows exactly which values depend on each other, it is aware of which cells should update and in which order whenever we make a change.The declarative nature of current JavaScript frameworks is closer to reactive programming than the previous imperative ones, but still miles away from true, spreadsheet-like reactivity. React is, ironically enough, not reactive. To understand the difference, we should dive into how the frameworks really work. Older frameworks would make it such that any change meant a lot of unnecessary DOM traversing and re-rendering. For instance, when we deleted an element from a list all of its items would re-render, despite only one of them having actually changed. This is not a problem in simple interfaces, but it gets to disproportionate levels as things start to scale, as DOM manipulation is a lot slower than most other JavaScript processes.The revolutionary, core feature behind React was providing us with a lightweight memory representation of the DOM that we can traverse much faster for manipulation. This is called the Virtual DOM.When a change happens, React updates the virtual DOM, compares it to a previous snapshot to know exactly which elements have changed, and only updates those elements in the real DOM through a
