Starting with "SVELTE"

Series on Svelte - Part 1

ยท

3 min read

Starting with "SVELTE"

Hello everyone , today we are going discuss about SVELTE..

  • What is Svelte .

  • How to start with it ?

  • Why we need it .

I HAVE RECENTLY STARTED TO LEARN SVELTE , so I thought to discuss with you folks .

WHAT IS SVELTE ?

It is similar to JavaScript frameworks such as React and Vue, which share a goal of making it easy to build slick interactive user interfaces.
-- definition from official docs of svelte

It is a free and open-source front end compiler created by Rich Harris and maintained by the Svelte core team members.

  • Its more a compiler rather than a framework or a library (we will discuss its working a little later )
  • Its much easier ,simpler and lighter than other frameworks which gives similar functionalities
  • The way the code is written is readable .

The most important feature of SVELTE is that when the code is compiled by it ,all the code is converted to very small sized chunks of CSS and JS

How to Start ?

Creating your first Svelte app

Prerequisites required

Good in HTML | JS for understanding the concepts .

For styling , also should have good hands on CSS as well.

Now question arises where to practise it ,so the answer is simple just to go the official svelte website . and also we can do practise at the same platform.

  • install node .
  • install npm .
  • have an IDE (visual studio /atom etc)
npx degit sveltejs/template my-svelte-project

cd my-svelte-project

npm install
npm run dev

Screenshot from 2021-09-21 22-39-53.png

The file structure looks like ..

Screenshot from 2021-09-21 22-40-07.png

The SVELTE files are written with .svelte extension .We can see there are bundle.css and bundle.js . We will start with App.svelte as root node.

Let's see a simple example : In App.svelte

<script>

let count = 1;

</script>

<p>{count}</p>

<style>
    p {
     color:green;
}
</style>

Here in above example we are directly using variable count , defined in JS part of the file and used in HTML part .

Also to change the value of count we don't need to make some state variables as we do in ReactJS and other similar frameworks , Lets understand

Taking the above example ,we will create a button having a click event to increase the value by 1 .

<script>

let count = 1;

function changeCount()
{
count =count+1;
}

</script>

<p>{count}</p>
<button on:click ={changeCount}>Change</button>

<style>
    p {
     color:green;
}
</style>

On clicking of the button , the value of count will increase by one . Its very simple to use variable and update its value as well.

we can observe that its easy as compared to handling states

We will discuss the difference and will dive into folder structure and the files we get in Svelte project , pros and cons in next part..

That's all for this one, we will continue to discuss in upcoming parts of the series

Thank you for reading, hope you found this useful. Let me know in the comments below.

Happy coding!

Till next time, Ciao. ๐Ÿ‘‹๐Ÿป