At its core, Svelte is a JavaScript tool for building fast user interfaces. However, it stands out from other frameworks in that it doesn’t work with the concept of Virtual DOM. The framework is also very easy to learn and use by beginners. Let’s take a look at its features in more detail.

Compiler

Other frameworks like React are operating on something called Virtual DOM, which can be very expensive as all of those operations have to happen in the browser itself. Svlete compiles the code during the production build into imperative code that updates the DOM directly.

More reactive than React

It may sound a little bit surprising but Svelte it’s actually more reactive than React itself. I know! Crazy. With Svelte you don’t need to write all this fancy boilerplate code that helps you manage your state.

Compact components

In Svelte, the boilerplate code is reduced to the bare minimum. For that reason, you write your HTML, CSS and JS all in the same file. Let’s take a look at this small application. I have generated a new Svelte project and modified the App.svelte file to be a better fit for our needs. Take a look at the code below

<script>
  export let name;
</script>

<main>
  <h1>Hello {name}!</h1>
  <p>
    Visit <a href="https://upmostly/com">Upmostly</a> to learn more about Svelte
    :)
  </p>
</main>

<style>
  main {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  h1 {
    color: purple;
  }
</style>

As you can see, we can divide the code into three different sections. Anything that goes between script tags is the JS, anything that goes between the style tags is the CSS and the last element is the HTML markup used in the component.

You can take a look at the output below.

Read more here about how to start working with Svelte.

👋 Hey, I'm Dawid Budaszewski

Hello! I'm Dawid. I'm a full-stack developer with a couple of years of experience under my belt. I spent most of my career working with React. I also built reacterry.com, an online portal with React coding challenges.