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?
- 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.
- 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.
- 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
Svelte 3 requires Node.js 8 or higher it is always a good idea to install the latest version.
- Go to https://nodejs.org/en/download/current/.
- Download the installer by selecting the correct Operating system and architecture of your operating system (64-bit in my case).
- 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.
The above command starts the application
Before winding up the tutorial, couple of things to mention. Under the src folder you'll find two files:
main.jsis the entry point of our application.
App.svelteis 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.