Getting started with Svelte

Svelte is a lightweight modern JavaScript library (4.57KB minified) intended for use on projects where legacy browser support is not necessary. It uses modern JavaScript (querySelectorAll, classList, matchesSelector) to help make it as lightweight as possible and therefore only works on the latest version of modern browsers E.g. Chrome, Firefox, Opera, IE10+. Svelte is used to develop cybernetically enhanced web apps.

Why Svelte?

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 diffing, Svelte writes code that surgically updates the DOM when the state of your app changes. Some features are:

1. Write less code: Reducing the amount of code is the explicit goal of Svelte. It build boilerplate-free components using languages you already know – HTML, CSS and JavaScript. Writing more code takes more time, leaving less time for other things like optimisation, nice-to-have features. Also more code you have to write the buggier your apps will be.
2. No Virtual DOM: Virtual DOM is pure overhead. As Virtual DOM is valuable because it allows you to build apps without thinking about state transitions, with performance that is generally good enough. That means less buggy code, and more time spent on creative tasks instead of tedious ones. But it turns out that we can achieve a similar programming model without using virtual DOM – and that’s where Svelte comes in. It retires the ‘virtual DOM is fast’ myth once and for all. As it compiles your code to tiny, framework-less vanilla JS – your app starts fast and stays fast.
3. Truly Reactive: No more complex state management libraries – Svelte brings reactivity to JavaScript itself.

Steps to create first Svelte project

Svelte project is created by using degit, a project scaffolding tool. In the terminal, you can instantly create first svelte project by using follow command:

# Create first svelte project
npx degit sveltejs/template first-svelte-project 

# Change Directory to created project
cd first-svelte-project 

# install the dependencies listed inside package.json
npm install

# starts the server on http://localhost:5000.
npm run dev

Now we are ready to develop an application on Svelte!

Directory Structure

The directory structure for Svelte project is:

1. package.json: This file contains all the dependencies and dev dependencies required for the application. This file also defines a number of scripts reuired for a Svelte project.k
2. main.js: In src folder, there is a root component App.svelte and Javascript entry point main.js. main.js simply takes that root component and instantiates the component using the target element in index.html file.
3. index.html: There is a public folder which contain app bundle and an index.html file. This file is root HTML file for svelte application.
4. Svelte files: Svelte apps are built using components that are written in .svelte files, which contain all the logic, styling and markup for the component.

See the Svelte guide for more information.