AK

Getting Started with the Svelte 3 - Tutorial

Ashutosh Kukreti -

In the last few years, front-end development becomes simpler, more accessible, and powerful. Nowadays, browser-based web apps are the new norm. Browsers have faster JavaScript engines and HTML5 and CSS3 added a bunch of new features, including the <video> tag that removed the flash plugins.

What is Svelte?

Svelte is a comparatively new framework. It was created by Rich Harris in 2016. According to the documentation, 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, Svelte writes code that surgically updates the DOM when the state of your app changes.

How it is different from the traditional frameworks?

  1. Svelte is like React or Vue and is reactive. What it means is, we don't need to manage the DOM directly. However, in traditional frameworks, the browser handles the DOM operations. Svelte operates it at a compilation/build stage.
  2. Svelte is close to "vanilla JavaScript" and does not introduce new JavaScript syntax like React's JSX.
  3. As it's pre-compiled, Svelte apps have minimal code size and higher performance. Smaller bundles perform your page load faster, especially with slower internet connections.
  4. Svelte does not include virtual DOM (like React and Vue). Any changes in state in Svelte apps are reflected directly in the DOM.

Setting up your environment

To use Svelte, you must have Node.js installed. It is not necessary, still good to know, the Svelte compiler is in JavaScript. And it requires Node.js to execute the code.

Installing Node.js

Svelte 3 requires Node.js 8 or higher it is always a good idea to install the latest version.

  1. Go to https://nodejs.org/en/download/current/.
  2. Download the installer by selecting the correct Operating system and architecture of your operating system (64-bit in my case).
  3. Launch the application and follow the installation instructions on the screen.

PS:- Installer requires Administrator privileges, and you need to authenticate with the system in the case of Windows.

Setting Up the Project

Svelte application needs to be integrated with Svelte with a project scaffolding tool. In this tutorial we are using degit, we'll cover to setup the Svelte application without degit in another tutorial.

Execute the following commands on your terminal:

npx degit sveltejs/template firstapp

# Change the directory to firstapp
cd firstapp

# execute npm install or yarn install
yarn install

The above will install all the dependencies and required packages.

yarn dev

The above command starts the application http://localhost:5000

Before winding up the tutorial, couple of things to mention. Under the src folder you'll find two files:

  • main.js is the entry point of our application.
  • App.svelte is the component. (Structure looks similar to Vue)

In this tutorial, we learn how to get started with Svelte 3 in minimal time. We'll learn more about Svelte in the upcoming tutorials.