Say Hi to Svelte !

3 min readJan 26, 2024

1. Outline

What is Svelte?
Basic example
Takeaways

2. What Is Svelte?

Svelte is a modern JavaScript framework for building web applications. What makes it different from the other frameworks? Its unique approach for building user interfaces. Instead of running in the browser, Svelte shifts the work to the compilation phase. Good, but what does this mean? Let’s look at an example where we compare a traditional approach using JavaScript in the browser with another one using Svelte.

<!DOCTYPE html>
<html>
<head>
    <title>Traditional App</title>
</head>
<body>
    <button id="myButton">Click Me</button>

    <script>
        // identify button by id
        const button = document.getElementById('myButton');

        // add an event to the button and display a message
        button.addEventListener('click', () => {
            alert('Hello from the browser!');
        });
    </script>
</body>
</html>

In the code above, the JavaScript runs directly in the user’s browser. When you click the button, the browser’s JavaScript engine responds with an alert.

<script>
  // handle what is happening when the button is clicked
  function showMessage() {
      alert('Hello from the compiled app!');
  }
</script>


<button on:click={showMessage}>Click Me</button>

In this Svelte example, most of the work, like preparing the click event handling, is done before the code even reaches the user’s browser. Svelte compiles your code into efficient JavaScript. When you click the button, the browser just follows the plan set by the compiled code, and you see the alert.

One of the key benefits of Svelte is that it eliminates the need for a runtime library. What does this mean? For better understanding, let’s compare a simple component in Svelte with a similar component in React to illustrate the difference in runtime library usage.

<!-- svelte-component.svelte -->
<script>
  let count = 0;

  function increment() {
    count += 1;
  }
</script>

<button on:click={increment}>
  Clicked {count} times
</button>

In this Svelte component, there’s no need to import or rely on a runtime library. The logic and rendering are all encapsulated within the Svelte component itself. The code you write is efficiently compiled during the build process, and the resulting JavaScript is minimal.

// react-component.js
import React, { useState } from 'react';

function ReactComponent() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

In this React component, we need to import and use the React runtime library. The useState function, JSX syntax, and other features depend on this library to work. While React provides powerful features and a component-based approach, it comes with a larger runtime library.

3. Basic Example

In Svelte, an application is composed from one or more components. A component is a reusable self-contained block of code that encapsulates HTML, CSS and JavaScript that belong together, written into a .svelte file.

<!-- App.svelte -->
<script>
    let title= 'Hello, I am Svelte!';
</script>

<style>
    h1 {
        color: lightskyblue;
    }
</style>

<h1>{title}</h1>

The code above will generate the page below:

4. Takeaways

Svelte:

a modern JavaScript framework
shifts the work to the compilation phase
no runtime library needed

Say Hi to Svelte !

1. Outline

2. What Is Svelte?

3. Basic Example

4. Takeaways

Written by Dana Prata