DEV Community

Cover image for Svelte - Learn the Basics of this fast framework with small bundles
Alex Merced
Alex Merced

Posted on

Svelte - Learn the Basics of this fast framework with small bundles

What is Svelte

From Svelte.dev

Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app.

Instead of using techniques like virtual DOM diffing, Svelte writes code that surgically updates the DOM when the state of your app changes.

My Web Svelte Video Playlist: https://www.youtube.com/playlist?list=PLY6oTPmKnKbZpyj6WhUsjri1Tw_BO-obP

Getting Started

To generate a new project run the command

npx degit sveltejs/template project1

cd project1

npm install

The Scripts

npm run build

will build your final project build

npm run dev

to run a dev server while developing

npm run start

this runs server to serve the build server for deploying to heroku

File Structure

In the source folder you'll find all the files you'll be generally working in. Let's first discuss the main.js

import App from './App.svelte';

const app = new App({
    target: document.body,
    props: {
        name: 'world'
    }
});

export default app;
Enter fullscreen mode Exit fullscreen mode

This is the file that imports the App component and mounts to the DOM, it also is the place to pass any desired props to APP such as "name" in the default template.

A Svelte Component

If you have used vue and worked with .vue files you'll find the workflow of having JS/CSS/HTML in one file very familiar. Let's replate the existing contents of App.svelte with a blank component.

<script>

</script>

<main>

</main>

<style>

</style>

Enter fullscreen mode Exit fullscreen mode

In order to receive a prop such as name from main js you need to export the variable within the script tags.

<script>
export let name;
</script>

Enter fullscreen mode Exit fullscreen mode

Now we can interpolate the name prop into the template of the app component.

<main>
<h1>Hello {name}</h1>
</main>
Enter fullscreen mode Exit fullscreen mode

State and Reactivity

Since all the logic is worked out in the compile step, you don't have to do anything special when it comes to state, just declare variables and if they change the DOM will update accordingly.

let's create a counter variable in App

<script>
export let name;

let counter = 0;

</script>
Enter fullscreen mode Exit fullscreen mode

lets add the counter and a button to our template

<main>
<h1>Hello {name}</h1>
<h2>{counter}</h2>
<button>add</button>
</main>
Enter fullscreen mode Exit fullscreen mode

Let's create a function to add one to counter

<script>
export let name;

let counter = 0;

const addOne = () => {
    counter += 1
}

</script>

Enter fullscreen mode Exit fullscreen mode

Then let's add the event to the button.

<main>
<h1>Hello {name}</h1>
<h2>{counter}</h2>
<button on:click={addOne}>add</button>
</main>
Enter fullscreen mode Exit fullscreen mode

Now you should be able to click the button and see the counter update!

Making more components

  • make a components folder
  • In that folder make a Hello.svelte

Add the following contents

<script>
</script>

<main>
<h1>Hello World</h1>>
</main>

<style>

</style>
Enter fullscreen mode Exit fullscreen mode

let's bring the component over to App so we can use it...

<script>
import Hello from './components/Hello.svelte'
export let name;

let counter = 0;

const addOne = () => {
    counter += 1
}

</script>
Enter fullscreen mode Exit fullscreen mode

Now let's use it!

<main>
<Hello/>
<h2>{counter}</h2>
<button on:click={addOne}>add</button>
</main>
Enter fullscreen mode Exit fullscreen mode

In summary

As you can see a lot of the development just feels like fairly standard javascript which is what makes Svelte so easy to learn. Since all of the logic is generated at compile when you run the build command the bundles are super small and the apps are super fast, there is certainly reason why Svelte has been growing quickly in popularity among developers, check it out!

Top comments (2)

Collapse
 
mhatvan profile image
Markus Hatvan

Hey Alex, cool to see you spreading the Svelte love!

It is such an awesome framework, you explained it well in the article ;)

I also wrote about why I love Svelte recently, maybe you enjoy it!

Collapse
 
jwp profile image
John Peters

I like this concept. Svelte looks cool.