Svelte Explained

Svelte is a framework like no other, and according to Stack Overflow it’s the world’s most loved framework in 2021

. The documentation Svelte is absolutely so well written, and there is even a interactive IDE that can help you get started on understanding Svelte. The framework’s main focus is on letting you write less code while still being very versatile, lightweight and letting the compiler, Svelte Kit, do the heavy lifting. It is a component driven framework that uses HTML templates that that you write javascript or typescript directly into the

file.

You can have access to writing Svelte by either using the CDN link or the or installing the project though node. The easiest way to install svelte is by running the commands:

    npm create svelte@latest my-app
cd my-app
npm install
npm run dev -- --open

This will get you a template to start your 1st project. Building a simple “Hello World” is as simple as writing regular HTML and boom you have written your 1st svelte. It handles javascript in the in script tags and passes the variable to the the HTML by wrapping the variable name in

.

    <script>
const name = "Jorge"
</script>
<p>Hello {name}!</p>

As simple as that your page will now have "Hello Jorge". Styles are written a inside a style tag and it is not affected by other imports that might share the same tags. This helps with modularity of Svelte. All on the same svelte file. To understand how to to add event handlers

is a link to something I made in a Svelte REPL. The action

with the name of the function will call that function when the click is made. Svelte also has special syntax to write directly in your HTML that can use logic like IF blocks that looks like this:

    <script>
    let toggler = { on: false };

    function toggle() {
        toggler.on = !toggler.on;
    }
</script>

{#if toggler.on}
    <button on:click={toggle}>
        ON
    </button>
{/if}

{#if !toggler.on}
    <button on:click={toggle}>
        OFF
    </button>
{/if}

This code has a two buttons that toggle each other when on is clicked it switches to off using the if block logic in the code.

Svelte components are just separate svelte files that are exported from the file into others. When exporting just use the export keyword and you now have access to the exported svelte file to the the file you import it at. The imported file also has access to variables that you might want to use in your code. That looks something like

. This can leads to a very modular design process similar to React.

This is just a brief introduction into Svelte but there is so much more and all can be learned with ease.

is such a great resource on the topic and I encourage you to check out his podcast

and his

page as well. Svelte also has a

with a great community. I hope this article launches you to take a deeper dive into the framework.

Some Useful Links: