Svelte

Svelte is a modern JavaScript framework for building user interfaces. Unlike traditional frameworks, Svelte shifts the work from the browser to the build step, resulting in highly efficient and performant applications. With Svelte, you write components using familiar HTML, CSS, and JavaScript. These components encapsulate your UI logic and can be easily reused across your application.

1. Lets create a svelte app first

This command creates a sveltekit app in your directory, this app will create a svelte app called myapp


npm create svelte@latest myapp

2. Running the svelte app in development environment

lets test the app in our browser


cd myapp
npm install
npm run dev
//bun run dev if you have bun runtime

3. So how does a svelte app work?

Basically the svelte kit has file system routing, the necessary svelte file is called as +page.svelte which is usually present in routes folder directly


my-sveltekit-app
└── src
    └── routes
        ├── index.svelte        // Represents the homepage route
        ├── about.svelte        // Represents the about page route
        ├── contact.svelte      // Represents the contact page route
        ├── blog
        │   ├── index.svelte    // Represents the blog listing page route
        │   └── [slug].svelte   // Represents the individual blog post route using a dynamic parameter
        └── +page.svelte        // Represents a catch-all route for pages that don't have a specific route

4. What is inside this +page.svelte app?

a svelte app basically has a <script></script> tag to conatin the javascript or svelte script, <style></style> to contain the classes and styles for tags and animation and rest of the tags are used as display tags like div,p,a,button,input simple as that


<script>
	let name = 'World';
</script>
<h1>Hello, {name}!</h1>
<style>
	h1 {
		color: blue;
	}
</style>

5. The Magic

Svelte has bind elements where we can make tags responsive to changes like variable or state changes


<script>
	let inputValue = '';
</script>
<input type='text' bind:value={inputValue}/>
<p>The value entered is: {inputValue}</p>

6. Making the clicking possible

So clicking a button does not work exactly how its supposed to be in vanilla html check this out


<script>
	let count = 0;
	function increment() {
		count++;
	}
</script>
<button on:click={increment}>
	Click me! ({count})
</button>

7. If else if else if else if else?

Lets say control flow in svelte is really smooth


<script>
	let loggedIn = true;
</script>
{#if loggedIn}
	<p>Welcome, user!</p>
{:else}
	<p>Please log in to continue.</p>
{/if}

8. So you find repetitive div tags very annoying.

With 'each' control flow iterating through arrays and data becomes easy and fun


<script>
let numbers = [1, 2, 3, 4, 5];
</script>
<ul>
{#each numbers as number}
<li>{number}</li>
{/each}
</ul>

9. Class directive

class directive is a feature that adds a particular class to the div when the given condition becomes true


<script>
	let isActive = true;
</script>
<div class:active={isActive}>
	This div is {isActive ? 'active' : 'inactive'}
</div>

Svelte JS

Svelte Native

Tanishq Dhote