Svelte

The technologies available to build web apps are constantly evolving and ever-changing. It seems as if every other week there is a sensational new framework that has caught the attention of the JavaScript community. 

Today, I’ll introduce you to Svelte – a pretty new kid on the block, this component-based JavaScript user interface framework (similar to React or Vue) is designed for the development of interactive and high-performant applications. 

Component-based frameworks allow developers to build UI by creating composable components that are re-usable across multiple contexts, just wanted to get that out of the way. Before I move on further, let’s first refresh the idea of reactivity in application development.

What is reactivity in app development?

The concept of reactivity forms the foundation of the modern interactive web apps. When an application is reactive, it means that any change of values (for instance as a result of user input) will be automatically reflected in the DOM (Document Object Model), a logical tree structure that represents an XML or HTML document you can see in the browser, or any other place in which there are values that depend on the changed ones.

Reactive apps were made possible thanks to the modern asynchronous and event-driven web application frameworks such as React, Angular and Vue. They use various techniques (like the Virtual DOM) that interpret the application code in the background, thus allowing updating the application’s individual elements without having to refresh the entire HTML page.

Svelte final-aim is a somewhat similar reactive app, but how it achieves it, well that’s a totally different story.

Svelte – how does it exactly work?

To put it simply, Svelte aims to compile the written code at build time, so that only pure JS that directly manipulates the DOM ever makes it to the browser. A reason why it calls itself the “disappearing framework” – by the time the app’s code appears in the browser, there is really no framework anymore.

Well, now let’s understand this in a little more detail.

As mentioned above, Svelte is a component-based UI framework, so its applications are composed of one or more components that combine HTML, CSS and JavaScript in .svelte files. Also mentioned before, it’s similar to React & Vue and much like them it aims to handle the application’s reactivity by keeping the DOM in sync with the app’s state.

But instead of doing it in the browser (interpreting), it compiles your code into valid vanilla JS at build time.

This frontend framework can be used either for the development of a standalone application, or as part of another application, together with other frameworks (it’s not a new feature neither its unique to just Svelte since the same can be done with React, Vue or Angular too), or even for the development of independent components that work anywhere, without being dependent on any conventional framework.

Well, that’s great isn’t it? Now, let me tell you how it all translates into actual advantages for developers and businesses.

Svelte’s benefits for application development

Well, as far as the quality and development speed is concerned, this framework offers quite a few conveniences:

  • Less boilerplate – Svelte goal is to allow developers to focus more on writing actual business logic rather than getting lost in semantics and dependencies, for instance by using built-in simple-to-use reactiveness or state management without constructing complex Redux store.
  • Excellent way of working with reactive variables – by simply adding “$:” to the beginning of a line will turn your variable into a reactive one that automatically updates should its value be influenced by other changes.
  • No virtual DOM – since the application compiles to vanilla JavaScript, it is quick and immediately so.
  • Scoped styling instead of CSS in JavaScript.
  • No state management libraries – comes with its own built-in 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 development of an application. But as far as the benefits for the company go, well, it’s just the start.

Svelte’s benefits for companies

Irrespective of what kind of app you’re developing, you will most certainly appreciate the following:

  • Performance – without the framework and virtual DOM overhead, Svelte apps might outclass the competition in most performance benchmarks.
  • Ideal for smaller projects – fewer dependencies and boilerplate can make a really big difference in the bundle size of your application, especially for smaller projects.
  • Shallow Learning Curve – This framework’s simple, readable and relatively compact syntax without much boilerplate makes it easy for new programmers to delve into or take over you application.

Learning app development with Svelte

Even if you don’t intend on switching to this framework anytime soon, it may still be beneficial for your programmers to try it out. A reason why I’m recommending this is because aside of offering a whole new approach to building reactive web applications (which who knows may come to dominate the industry eventually), it’s also ridiculously easy to get into (as clearly stated above), for a couple of reasons:

  • It handles state management without external dependencies.
  • Lack of extra plug-ins 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.

You can get started by visiting the official interactive Svelte tutorial on Svelte.dev.

Should you invest your 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.

Leave a Comment