I know, you may think of like why do I need to learn an another Framework?. but there is something unique that svelte has which makes stands out from other frameworks.

Let’s see what makes it special in this article.

What is svelte.js ?

Above all, Svelte.js is a Component Framework like React and Vue but with an important difference. React uses a technique called VirtualDOM which we will cover later in this article.

In simple terms, React allows us to write a state-driven code which gets converted by browser into ideal javascript code .it can be a pain because most of the conversion happens in the browser whereas svelte converts the code into ideal javascript code at build time rather than doing it at run-time.

What is Virtual DOM ?

Manipulating Real DOM is slow. Let’s say we have a list with ten items in it. When, one item gets changed, we need to re-render all the ten items. Consider in a modern website where we have lots of DOM manipulation which makes the application slow.

To solve this problem, React Team came up with a solution of Virtual DOM which is similar to DOM Objects, but it lacks the ability to change anything on the screen.

Every Virtual DOM Object is mapped with the Real DOM Objects. Instead of Manipulating the Real DOM, Virtual DOM gets changed.

*Source : *https://medium.com/@rajaraodv

Read More about Virtual DOM

**Overhead of Virtual DOM : **

React brings the concept of Virtual DOM Diffing. Once the virtual DOM has updated, then React compares the virtual DOM with a virtual DOM snapshot that was taken right before the update.

By comparing the new virtual DOM with a pre-update version, React figures out exactly which virtual DOM objects have changed. This process is called “diffing.”

Most obviously, doffing isn’t free. You can’t apply changes to the real DOM without first comparing the new virtual DOM with the previous snapshot.

This is where svelte shines. Svelte solves the problem without a need of virtual DOM.

Svelte Feature

Svelte.js – Getting Started :

In this article, we will see how to create a To-do List application in svelte.js

Firstly, we will install svelte.js and create a starter project using command line.

npx degit sveltejs/template my-svelte-project
cd my-svelte-project

npm install
npm run dev

Now, the application will be running and when you visit the http://localhost:5000 you will see Hello World in the browser.

if you have experience in working with React or Vue. it will be a cake walk for you. if you are haven’t, don’t worry. you are in a right place at right time.

Let’s see the folder structure and components in the svelte project

• public – it contains the compiled code of the application. the web page that we see in the browser is rendered from this compiled code
• src – this folder contains all the code that we write for the application
• package.json – it is something like a meta data description which contains the dependencies used for the project
• main.js – This file is the root for the application .

As it said earlier, svelte is a component based framework. we will create components needed to create a to-do list application

Svelte Component Structure:

component structure

That’s it …. Seriously. This is the Structure of a component. Pretty simple.right?

we can write all the component logic inside the

#javascript #reactjs #vue-js #angular