Svelte - JS's smallest next big thing

written by Dan Parry.

The TL;DR here is that Svelte is an easy-to-learn JS framework/compiler with clear and clean syntax. It has no boilerplate and doesn't use a virtual DOM. If you are already a Vue or React developer, I recommend taking a look.

Svelte is an open-source framework for building dynamic user interfaces. A direct competitor to React, Vue, and Angular, Svelte is newer, but in terms of core functionality, it's very similar. Things like conditional rendering of HTML, creating DOM elements based on data, dynamically updating the DOM from variables, or any other functions you might expect to find in a dynamic framework, are in Svelte. The first big difference comes down to the use of a virtual DOM - Svelte doesn't use one.

What is a DOM/virtual DOM and why is this important?

The DOM is a representation of the HTML rendered by the browser, displayed as a tree. A virtual DOM is a copy of this tree that is used to control when and what changes are passed on to the real DOM.

Why is this important? Well, if you are using a framework like React or Vue and you make a change to an element in your code (document.createElement, document.apendChild, etc), you make it to the virtual DOM. A diff comparison to the real DOM is then made and only the text in the affected object is updated. Svelte on the other hand removes this middle man by compiling directly to the core JS element. This makes Svelte more of a compiler than a traditional framework. It also means there is also nothing of Svelte bundled into the final production files, it's just plain, human-readable JS commands.

Advantages of Svelte

It's really easy to pick up and start learning: the syntax is clean and clear. There is no convoluted way of accessing a variable and making it reactive for example. I'm not saying there is no advantage to the complexity you might find in other frameworks but in terms of learning a new framework, Svelte shines with its simplicity. There is also some good documentation to get stuck into when you start.

Converting the JS at build time instead of interpreting your app at run time, means there is less loading when you first run the app. The bundle size is also much smaller. When you put a Vue app into production, for example, Vue needs to be of your application because it needs to make that diff comparison as part of the virtual DOM method.

There are no boilerplates. Svelte it's just a regular JS script tag in your single file component, no template tag is needed. You can have a style tag if you want, which is again just HTML, CSS, and JS, but if you don't have any styling, just don't add it. The same goes for JS, if you don't have any, just don't add it will still render as a Svelte file.

Future maintenance is easier to make. If for whatever reason, you need to come back and make an edit to your app 3-4 years down the line, it's doable. A happy symptom of Svelte's approach to DOM manipulation is that you're just going to have the JS to edit, whereas a Vue or React project will need you to edit the framework.

Svelte vs vanilla JS

You might be thinking that you can do most of what Svelte is offering with vanilla JS, so let's quickly address that. The difference Svelte manages all the small tasks for you. Let's say you want to show or hide an element, in vanilla you have to do that with a JS command from the UI. With Svelte you can just use an if statement, inside the HTML. It's much faster and easier to write dynamic UIs and that's its value.

On that note, if you can do things like that in vanilla that's a great skill to have, it's only going to give you have a strong base to work with any framework. Most new devs may not put the time into learning the fundamentals so deeply when there are so many tools out there to jump ahead.

Svelte is more than worth your time if you are a front-end dev or if you're making any kind of web app with complex HTML structure. No runtime overhead is going to give you a responsive app that works great on low-powered devices or even slow networks. The shallow learning curve means it isn't going to eat up your time getting your head around it and overall it's going to be a clean experience.

You might also want to check out Sapper, a framework built on Svelte that allows you to develop more advanced features like server-side rendering, offline support, and file-based routing.

If you’re building software and looking to eliminate bottlenecks, look no further than Codesphere for you cloud service needs! We’re building Codesphere to be the most intuitive cloud and devops tool on the market!

Happy coding!