Svelte – Learn the Basics

Svelte – Learn the Basics:

What is Svelte


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.

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;

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.

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

export let name;

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

Hello {name}

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

export let name;

let counter = 0;

lets add the counter and a button to our template

Hello {name}



Let’s create a function to add one to counter

export let name;

let counter = 0;

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

Then let’s add the event to the button.

Hello {name}



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

Hello World


let’s bring the component over to App so we can use it…

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

let counter = 0;

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

Now let’s use it!



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!

from Tumblr

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s