Svelte 3 — Compile-time framework

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 updates the DOM when the state of your app changes.

Svelte is a component framework that compiles components at build step (unlike React/Vue) into highly efficient imperative code that updates the DOM.

Photo by Alfons Morales on Unsplash

Advantages of Svelte

1. less boilerplate code than other frameworks to achieve the same functionality.
2. No more complex state management libraries — Svelte brings reactivity to JavaScript itself
3. No virtual DOM, means it compiles your code to tiny, framework-less vanilla JS — your app starts fast and stays fast
4. It uses scoped styling without needing CSS-in-JS
5. Rather than putting a <script src='svelte.js'> tag on the page, or bringing it into your app with import or require, Svelte is a compiler that works behind the scenes to turn your component files into beautifully optimised JavaScript.

Setup and Folder Structure

First open your terminal and run the Below command

npx degit sveltejs/template my-svelte-todo
cd my-svelte-todo
npm install
npm run dev

first line will setup the project with the name “my-svelte-todo”.

Third line will install all the dependencies that is mentioned in package.json

Fourth line will help you to run your project locally on “http://localhost:5000” as shown below

Running Svelte boilerplate code

Let’s Explore the Folder Structure . Your Project will look like this

1. Svelte using rollup as JS module bundler but you can use any other like webpack based on you comfort or need.
2. main.js : This is root file which helps us to inject our svelte app into the dom.
3. App.svelte : This is root component of the svelte app.
4. In Svelte each component consists of script, style and HTML markup.

a) script: In the script tag, we need to write JavaScript code related to that component

b) style: In style tag, we need to write CSS code related to that component(styles are scoped by default in svelte).

c) HTML markup — In Html tag’s you will write the HTML code.

Basic Syntax

a) Interpolation

<script>
 let name = ‘world’;
</script>
<h1>Hello {name}!</h1>

b) Click

<script>
 let count = 0;
function handleClick() {
  count += 1;
 }
</script>
<button on:click={handleClick}>
 Clicked {count} {count === 1 ? 'time' : 'times'}
</button>

c) Conditional rendering

<script>
 let x = 7;
</script>
{#if x > 10}
 <p>{x} is greater than 10</p>
{:else if 5 > x}
 <p>{x} is less than 5</p>
{:else}
 <p>{x} is between 5 and 10</p>
{/if}

d) Looping- You can loop the data by #each.

<script>
 let data = [
  { id: '1', name: 'john' },
  { id: '2', name: 'joe' },
  { id: '3', name: 'doe' }
 ];
</script>
<ul>
 {#each data as { id, name }, i}
  <li>My name is {name} with {id}</li>
 {/each}
</ul>

e) Event Binding — You can use bind:value attribute to do data binding. In below example whenever you change the text value it will update the name in p tag immediately.

<script>
 let name= 'nik';
</script>
<label>
 <input type=text bind:value={name} >
</label>
<p>{name}</p>

There are many other syntax you can explore from here

I have created a Svelte TODO App. You can checkout the code from my Github.

https://github.com/karkranikhil/Svelte-todo-app

References

1. https://svelte.dev/
2. https://reactgo.com/sveltejs-intro-tutorial/