Day 107 - Svelte, A JavaScript FrontEnd Framework

Svelte is a JavaScript FrontEnd Framework just like React, Vue and Angular which is used to build frontend user interfaces. Its a "tool for building fast web applications". It is components based framework.

There are many difference between Svelte and other frameworks like React but the main difference can be that Svelte is a compiler and it does not uses Virtual DOM for rendering its compoents in the Browser. It will compile your code into Vanila JavaScript at build time while react compiles the components at the run time.

I will be taking a break from learning about Operating Systems and instead will foucs on WebDev for some time now. Svelte is the first thing I will be learning about and I have heard alot about it on Twitter and Youtube and now I will be learning the basics of it.

Installation

To get start with Svelte we run the following command which is just like npx create-react-app command that will setup all the basic files for us.

User: ~/svelte$ npx degit sveltejs/template svelte-demo

After getting all the boiler plate we run the following commands.

User: ~/svelte$ npm install
User: ~/svelte$ npm run dev

Basics

If anyone of you who knows VueJS can understand the basics of Svelte quite easily. I am not saying that they are same rather I am saying is that it quite simillar to how we build components in VueJS.

// Vue Components
<template>
    //  HTML structure of the component
</template>

<script>
    // JavaScript code for the component
</script>

<style>
    // Styling for the components
</style>

// Svelte Components
<script>
    // All of JS logic for the component
</script>

<style>
    // Styling for the component
</style>

<div>
    <h1>HTML Structure Here!</h1>
</div>

You see how they both are simillar in writing code for the components. In script tag at the top in Svelte component we write all the JS for the component, style tag for stying the component and below all we write HTML for the component.

Now back to Svelte. When we clone the repo or npx it, there are three dirs that are present there. For now we only be working with src directory. In src dir, there are two files, main.js and App.svelte.

In main.js file the component is being imported and is assigned to a new var app and is provided two arguments to it. first one is the target document.body which tells the compiler where it should be rendering. Second props which is simillar to props in React.

In App.svelte we see a simillar structure as we see above. In script tag we are exporting a const name which we use in the main > h1 tag and then in style the styling for the component. Start the npm run dev we see the following page in the browser.

Svelte

Building A Counter

For simple use case I will be building a simple counter with SvelteJS. This is what the main.js looks like now.

import App from "./App.svelte";

const app = new App({
  target: document.body,
});

export default app;

And this is what the App.svelte looks like.

<script>
  let counter = 0;

  function incrementCounter() {
    counter += 1;
  }
</script>

<main>
  <h1>{counter}</h1>
  <button on:click={incrementCounter}>Increment</button>
</main>

<style>
  main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  h1 {
    margin: 0;
    color: black;
    font-size: 4em;
    font-weight: 600;
  }
</style>

Increment Button

Now this is a simple example to show to build web apps with svelte and the post is already long enough so that it for today.

zainscizainsci