CTO’s guide to Svelte – what can the rising frontend framework do for you?

The attitude of developers to the news of a new frontend app development framework might range from this:

To this:

In this article, we will introduce to you Svelte – a fairly new frontend framework designed for the development of interactive and high-performant applications. Hopefully, by the end of it, you will be somewhere between these extremes – ready to try it out with a mix of excitement and necessary realism. Before we get any further though, let’s refresh the idea of reactivity in application development.

What is reactivity in app development?

At the heart of modern interactive web applications is the concept of reactivity. When an app is reactive, it means that any change of values (e.g. as a result of user input) will be automatically reflected in the Document Object Model (DOM), a logical tree structure that represents the HTML page a user can see in the browser, or any other place in which there are values that depend on the changed ones.

The introduction of modern asynchronous and event-driven web app frameworks such as React, Angular and Vue made it possible to develop such reactive apps. To that end they use various techniques (such as the Virtual DOM) that interpret the app code in the background, making it possible to update individual elements of the app without having to refresh the entire HTML page.

Svelte’s end-goal is also a reactive app much like this one. But the means it uses to achieve it are very different.

Svelte – how does it exactly work?

When you see how radically different Svelte’s approach is to all the popular JS framework mentioned above, it’s easy to understand why it was the most talked about framework in the “Other Libraries” category during the recent State of JavaScript 2018. Long story short, Svelte aims to compile the code your write at build time, so that only pure JavaScript that directly manipulates the DOM ever makes it to the browser. That’s why it calls itself the “disappearing framework” – by the time the app’s code appears in the browser, there is really no framework anymore.

Need a longer version? OK.

• A Svelte app is composed of one or more components that combine HTML, CSS and JavaScript in .svelte files.
• Much like React or Vue, Svelte aims to handle the app’s reactivity by keeping the DOM in sync with your app state.
• But instead of doing it in the browser (interpreting), it compiles your HTML, CSS and JavaScript into valid vanilla JavaScript at build time.
• Svelte can be used either for the development of a standalone app, or as part of another app, together with other frameworks (not a unique feature since the same can be done with React, Vue or Angular), or even for the development of independent components that work anywhere, without being dependent on any conventional framework.

Sounds pretty good, doesn’t it? How does it all translate to actual benefits for developers and businesses?

Svelte’s advantages for app development

As far as the quality and speed of development goes, Svelte offers quite a few conveniences that at the very last warrant giving it a try:

• Less boilerplate – being one of Svelte’s main selling points, the framework aims to allow you to focus more on writing actual business logic rather than getting lost in semantics and dependencies, for example by using built-in easy-to-use reactiveness or state management without constructing complex Redux store.
• Brilliant way of working with reactive variables – simply prepending a line with “$:” will turn your variable into a reactive one that automatically updates should its value be influenced by other changes.
• No virtual DOM – since the app compiles to vanilla JS, it is fast and immediately so.
• Scoped styling instead of CSS in JS.
• No state management libraries  – contains its own minimalistic state management solution.
• No svelte.js script tag or any other traces of the framework in the browser.

All of these features have the potential to speed up the writing of an app. But as far as the benefits for the organization go, it’s just the beginning.

Svelte’s advantages for companies

Regardless of what kind of software you’re building, you will most certainly appreciate the following:

• Svelte’s performance – without the framework and virtual DOM overhead, it might offer superior performance to similar apps developed with conventional frameworks.
• Perfect for smaller projects – fewer dependencies and boilerplate can make a really big difference in the size of your app, especially for smaller projects
• Svelte’s simple readable and relatively compact syntax without much boilerplate makes it easy for new developers to delve into or take over you application.

Sounds nice, doesn’t it? But what about the learning curve?

Learning app development with Svelte

Even if you are not interested in switching to Svelte anytime soon, it may still be advantageous for your developers to try it out. Why? Because aside of offering a whole new approach to building reactive web apps (which for all we know may come to dominate the industry eventually), it’s also unbelievably easy to get into, for a couple of reasons:

• It handles state management without external dependencies,
• Lack of extra plugins means you can start your first project and really get into the framework very quickly,
• scope styling eliminates the need for extra extensions and custom syntax for CSS,
• minimal requirements when it comes to the boilerplate and the number of files in a base project.

The best way to start is to visit the official interactive Svelte tutorial on Svelte.dev. Once you are done with it, you should do a simple Svelte project to really get into it.

Should I invest my time in Svelte?

With all that said, there is one more question that might have already occurred to you: isn’t that all just a little bit too perfect? Well, the truth is that being a fairly new framework, Svelte’s ecosystem is still maturing, which may prove troublesome for large projects. As of today, Svelte-generated code is also not compatible with Internet Explorer 11 (requires quite a lot of polyfills in order to run the app in IE 11 and older versions of the browser).

But since it can be used in conjunction with other frameworks, there is no need for you to give up on other choices. Who knows, perhaps in time the decision to invest some effort in Svelte will prove extremely beneficial for your development team? With little risk involved, there is no hurt in trying.

The Software House has also already tested the new framework, having used it for an internal project of a game app called TypeRunner.js – a simple typing game which has 2-4 users compete against each other in real time. The backend for this simple game was based on Node.js. And if you find Svelte to be interesting, you should also put some effort into developing a simple Svelte-based project on your own. It is by far the best way to get enough confidence to actually use it in a serious commercial work.

Whether you have any questions regarding the project or Svelte development, or if you have an app idea but you’re yet to decide on a particular technology, contact us. Initial consultations are always free of charge. Also, check our other development articles for CTOs: basics of microservices-based architecture and a very practical introduction to design patterns in microservices.