Home / Tutorials / Svelte / Introduction

Introduction to Svelte.js 3

In this introductory lesson we learn what Svelte is, the benefits of using Svelte and the prerequisites for this course.

Lessons in this course

If you're new to Svelte, or Javascript frameworks in general, start from the beginning.

First Steps
Development Environment Setup The Svelte Application Instance
Basics
Data & One-way Databinding Event Handling Two-way Databinding (if, else if, else) Conditional Rendering (each) Iteration Rendering Reactive Statements & Declarations
Components
Component Basics Component Props Context API Component Events Component Slots Component Styling
Lifecycle
Lifecycle Hooks
DOM Access
The 'this' Binding
HTTP & Local Data Storage
HTTP Requests with the Fetch API Local JSON Storage
State Management
Stores & State Management
Build
Build a Svelte app for production
Build Tools
The Vite Build Tool

Lesson Video

If you prefer to learn visually, you can watch this lesson in video format.

What is Svelte?

Svelte is a versatile front end component framework for building high performance user interfaces (UIs) and web applications.

Component frameworks help us write applications by using the declarative programming model.

In programming languages like C or C# , we use the imperative model where we describe the control flow of a computation, explicitly listing down the steps it should take.

With the declarative model, we describe the desired outcome. We just have to tell Svelte what we want the UI to look like and it will take care of the rest for us.

A short history of Svelte

Svelte version 1 was written in Javascript by Rich Harris (the developer of the Rollup bundler) and released in November 2016.

Version 3 is written in TypeScript and was released in April 2019. It’s maintained by Rich Harris and the Svelte core team members.

The accompanying SvelteKit web framework was announed in October 2020 and entered a beta state in March 2021.

This course covers the latest major version, Svelte 3.

Why do we want to use Svelte as our Javascript framework?

Svelte doesn’t use a Virtual DOM like other popular frameworks, such as React or Vue. Instead, Svelte’s compiler converts the code we write into client-side Javascript at build time.

There’s no need to bundle the framework code with your application, so the bundle size is smaller, making the application load faster.

Technically, we write our code in what is essentially an HTML file with a .svelte extension. Svelte’s compiler turns this into an Abstract Syntax Tree , giving us a Javascript class we can import into our application.

The initial state is in the markup instead of DOM objects, so it’s cheaper and loads faster. It then tracks changes to top-level component variables and updates only the affected parts of the DOM, rather than re-rendering an entire component.

Is Svelte hard to learn?

Svelte is the easiest of all the major frameworks to learn. However, it really depends on what you already know.

Svelte is a framework that uses Javascript and a syntax that looks like HTML. While it does provide us with most of what we need to create an application, there will be times that you need to integrate other Javascript libraries into your application.

That means you will need to know at least the fundamentals of HTML, CSS and Javascript. The more Javascript (and ES6 features) you know, the easier it will be for you.

In this course, we will briefly explain any of the more advanced Javascript concepts when we need to, but we recommend taking our free introductory Javascript course first if you’re new to Javascript.

Prerequisites for this course

Before we proceed, please note that we make the following assumptions:

  • You know how to install software on whichever operating system you use.
  • You can create and navigate directories and files on your computer.
  • You know at least the basics of HTML, CSS and Javascript.
  • We cover the command line where needed in this course, but it’s helpful to know the basics of it as well.

This tutorial course is primarily aimed at beginners with no knowledge of Svelte or Javascript frameworks. But, more experienced students coming from other frameworks like Angular, Vue or React may also find it helpful.

Next
Development Environment Setup