5 Reasons to Choose SvelteJS for your Next Project

Svelte.js is a revolutionary, new JavaScript framework with fast performance, easy-to-learn syntax, and a compile step that doesn't use a virtual DOM so the browser does less work. You can use Svelte as part of a component-based architecture to build projects of any kind, wherever you might use React, Angular, or Vue. Although Svelte.js is a newer framework, several companies have already started implementing it to create fast-loading landing pages, including Spotify. Read on to find out what all the Svelte buzz is about, and 5 reasons why you should choose Svelte for your next project.

1. Quick Svelte Project Initialization#

Svelte is known for being easy to learn and read, but it's also quick and simple to set up a Svelte project. If you already have Git and NPM on your system, then initializing a Svelte project and running it locally only takes a couple of commands:

This will create a basic Svelte project in a new folder called my-svelte-project, and run it in a hot-loading local dev environment. This is similar to create-react-app in React, where you can create a template with the files and tools needed to set up a project in one command. Here's a look at the files that are created:

With the Svelte template set up, you can run npm install, then npm run dev, and navigate to localhost:5000 to see your app up and running!

2. Single File Components#

In a Svelte project, .svelte files are used to define single-file components. Keeping components in single files (organized in directories) with all the logic in one place helps keep even big projects maintainable.

A .svelte file consists of a <script> section and any HTML markup you wish to use. You may notice the lack of boiler-plate, which makes the code very readable even for someone who has never used the framework.

Here's a sample .svelte file. Any variable declared is automatically reactive and can be used in the markup with single curly braces {varName}.

3. Event Handlers#

Just as with other JavaScript frameworks, it's easy to make your buttons and DOM elements interactive with event handlers with Svelte. With the syntax on:eventname={handlerFunction} you can listen to any event on an element. Modifiers can also be added to event handlers to change their behavior. Here's a simple button click handler example.

And with the once modifier:

Event modifiers can also be chained, so that more than one modifier can be added to a single event.

4. Conditional Rendering#

Conditional rendering is an essential tool to show or hide certain elements from the DOM based on whether or not a condition is met. In Svelte, Conditional rendering is accomplished with {#if} blocks. Simply add {#if expression} and Svelte will handle the rest.

{#if} blocks can also be combined with {:else} and {:else if} blocks for greater conditional functionality.

5. List Iteration#

Showing lists or a table of rows from a data source is a very common task in web applications. In Svelte you can iterate and render lists with {#each} blocks, in this case accessing each row, along with the index.

Where To Go From Here?#

Just getting started with Svelte and want to know more about the basics and how Svelte compares to other frameworks? Check out our blog What is Svelte.js and Why Should You Care? Svelte vs React vs Vue.

If you want to know more about the background of Svelte, read the Svelte introductory blog post from the framework's author Rich Harris. There's so much to learn when it comes to Svelte, and you can also get started with lots of interactive examples at the official Svelte.js tutorial.

If you want to go even further with Svelte you can learn how to build a full-stack web application with Svelte, Express, and PostgreSQL in our new Fullstack Svelte Course!