Having used React for years, I know how it works, and I know it works really well, but what if I tell you that Svelte works as good or even better with less code? Let's take a look at this relatively new web development framework.

Requirements

First of all, what do you need to get started with Svelte? Code Editor (I.E., VS Code) Node JS Installed (With NPM)

That's basically it, and you're good to go.

Getting Started

You can use an npx command to generate a Svelte project, let's do this. Open up a folder you would like to use and launch the terminal or your command prompt.

$ npx degit sveltejs/template tutorial

Enter any name for a project you like. I'll stick with 'tutorial'. This command will generate a folder with all kinds of folders and files.

Directory Structure

As you can tell, there are a lot of different files that you probably don't know yet, like the rollup.config.js . This is basically the config file for your Svelte project. You can find the main file and all of the imports, making it possible to create component-based applications and ES6 style imports.

The package.json It isn't anything too special like in other Node JS projects, and it contains all of the scripts and modules.

In the src folder, you'll find the main.js this is the container for your application. As you can see, it imports App.Svelte where all the magic happens. This main.js file also shows us that it is possible to pass in props.

When we open, App.Svelte we see a straightforward and clean structured file.

<script>
    export let name;
</script>

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

<h1> Hello {name}</h1>

To achieve this with React, we would have done a lot more work. It now prints out in purple the name that gets passed in with the props in main.js We can also change the name by removing the props from the main.js file and making it static.

import App from './App.svelte';

const app = new App({
    target: document.body,
    props: {

    }
});

export default app;

<script>
     let name = "Bryan";
</script>

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

<h1> Hello {name}</h1>

To be able to run this application, we first need to install all the missing dependencies. We use the

$ npm i

command.

Running Our Application

To run the application, you can type in the command

$ npm run dev

and it will set up a server on localhost:5000 take a look in your browser.

Conditional Statements in Svelte

In Svelte, it's straightforward to use conditional statements like if, else for, foreach in your HTML directly. Let's show you what I mean. We will add a new variable called points, and if the user has more than 500 points, the username will show up.

<script>
     let name = "Bryan";
     let points = 501;
</script>

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

{#if points > 500}

<h1> Hello {name}</h1>

{/if}

Building For Production

Svelte is really easy to build for production. To do this, run $ npm run build and as everything is compiled and build, you can use your VS Code plugin: Live Server to run the index.html file in the public folder.

As you can see, your complete project is compiled into vanilla javascript and runs with your HTML file.

Wrapping Up

Of course, this was a concise and brief introduction to Svelte. It was meant to let you see how easy it is to set up a Svelte project and to use it. It is swift, and it works, and compared to React and the other frameworks, it is so much easier and faster to code. I think Svelte is something for the future that will push React, Vue, and Angular off their throne.

Originally Published on Medium

Bryan Dijkhuizen