DEV Community: sharath Kumar

Svelte Todo CRUD App

sharath Kumar — Thu, 05 Aug 2021 14:00:23 +0000

Create Simple Todo App using Svelte

Deleting Todos

There will be more videos coming. Subscribe to get udpates.

SvelteKit Tutorial

sharath Kumar — Wed, 16 Jun 2021 09:02:10 +0000

I have a series of SvelteKit tutorial videos. I have discussed the basic used cases using which you can build things that you desire.

I guess if I give you bricks, you can build walls, bridges or a mansion. That's what I tried here. Check it out.

Intro, Pages & Layouts - Sveltekit Tutorial 1

In this video I will be talking about Sveltekit. What is Sveltekit? How to create pages in sveltekit? How to create layouts in Sveltekit? How to create components in Sveltekit?
Layout Reset - Sveltekit Tutorial 2

In this video I have explained how to create an entirely different layout for a
Dynamic Routes - Sveltekit Tutorial 3

In this video I'm talking about how to use sveltekit dynamic routes and how to get the page parameters in out routes. This is a stepping stone to build blogs using sveltekit.
Layouts for pages - Sveltekit Tutorial 4

In this video I'll be showing you how you can have a different layout for a page even if it is in the same level as other pages.
Multiple Layouts - Sveltekit Tutorial 5

In this video I will be showing how to use multiple layouts for a page in Sveltekit.
Sveltekit Error Pages - Sveltekit Tutorial 6

In this video I will be showing how to use create error pages in Sveltekit.
Sveltekit Endpoints - Sveltekit Tutorial 7

In this video I will be showing how to create backend endpoints in Sveltekit. I will be showing only the GET request in this one.
Sveltekit Post Request - Sveltekit Tutorial 8

In this video, I will be talking about Sveltekit POST reqests. How we can send data from our components to the backend and how we can handle the request.
SvelteKit Post Endpoint Part 2 - Sveltekit Tutorial 9

In this video, I will be talking about Sveltekit HTTP requests which can be used in the same endpoint.
A Simple Blog - Sveltekit Tutorial 10

In this video, I will show you how to build a simple Sveltekit blog using an API.
A Simple Blog Part 2 - Sveltekit Tutorial 11

In this video I will be creating a route to show the blog author. This is a small incremental addition to what we did in the first part where we created a simple SvelteKit Blog.

How to create a markdown blog in Svelte

This video helps you create your own markdown blog with amazing features like component import into markdown or creating a component inside a markdown post.

That was easy! - Svelte Shopping Cart

sharath Kumar — Sun, 14 Feb 2021 12:22:55 +0000

While learning JavaScript, I started building this simple e-commerce shopping cart which had some basic functionalities,

Add products.
Show products in the cart.
Update product quantity in the cart.

It seems really simple but I had a hard time doing it. But when I tried the same in Svelte, it felt like a breeze.

Check out this REPL: Svelte shopping cart

I will show you - with snippets - how I did it.

Create an array of products. Each products usually will have details like id, name, image, price etc.

 let products = [
  {id: 1, name: "Apple", image: "/path/to/apple.png", price: 10, quantity: 1},
  {id: 2, name: "Orange", image: "/path/to/apple.png", price: 11, quantity: 1},
  {id: 3, name: "Grapes", image: "/path/to/apple.png", price: 12, quantity: 1},
]

Create an empty array called cart. The idea is to add items from products to the cart whenever Add to cart is clicked.

 let cart = [];

Let's show these prodcuts along with a button.

<div class="product-list">
 {#each products as product}
   <div>
    <div class="image" style="background-image: url({product.image})"></div>
    <h4>{product.name}</h4>
    <p>₹{product.price}</p>
    <button>Add to cart</button>
   </div>
 {/each}
</div>

<style>
 .product-list {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
 }
</style>

That should display it in a grid with add a non-functional button.

Now, let's add a function addToCart() to buttons. We will have to send the prodcut along with this function as shown below.

<button on:click={() => addToCart(product)}>Add to cart</button>

We can create this function to receive the sent product and push it to the cart.

const addToCart = (product) => {
 cart.push(product)
}

Now, in Svelte this will not be reactive because there is not assignment used. We can rewite this usig spread operator as shown below.

const addToCart = (product) => {
 cart = [...cart, product]
}

The problem with this is that when you add the same item multiple times, it keeps on adding to the cart array. We don't want that. We would like only the quantity of the cart item to increase if it is already present.

When Add to cart is clicked, we can go through all the cart items to see whether the item just added is already in the cart, if so then we increment the quantity as shown below.

const addToCart = (product) => {
  for(let item of cart) {
    if(item.id === product.id) {
    product.quantity += 1
    cart = cart;
    return;
     }
   }
  cart = [...cart, product]
}

We can display the cart a better way as shown below.

<div class="cart-list">
 {#each cart as item }
   <div class="cart-item">
     <img width="50" src={item.image} alt={item.name}/>
     <div>{item.quantity}</div>
     <p>₹{item.price * item.quantity}</p>
   </div>
 {/each}

We can also add buttons besides quantity to add or remove the items added to the cart. This function is pretty much same as the addToCart() function that we already discussed.

Let's add those buttons with functions sending product as parameter.

{#each cart as item }
 <div class="cart-item">
  <img width="50" src={item.image} alt={item.name}/>
   <div>{item.quantity}

     <button on:click={() => minusItem(item)}>-</button>
     <button on:click={() => plusItem(item)}>+</button>

  </div>
  <p>₹{item.price * item.quantity}</p>
 </div>
{/each}

We can define those functions to add or remove items from the cart array as shown here.

const minusItem = (product) => {
 for(let item of cart) {
   if(item.id === product.id) {
     product.quantity -= 1
     cart = cart;
     return;
   }
 }
 cart = [...cart, product]
}

const plusItem = (product) => {
 for(let item of cart) {
   if(item.id === product.id) {
     product.quantity += 1
     cart = cart;
     return;
    }
  }
 cart = [...cart, product]
}

That should take care of the button functions in the cart.

Now this is almost complete. But I have used a single component. In the next article I will be doing the following,

Use components to simplify the app.
Use writable store to maintain state across the app.
Use session store to persist the cart even on browser refresh.

Thanks

Watch the vide here:

Why I like Svelte

sharath Kumar — Fri, 29 Jan 2021 14:23:04 +0000

I have many reasons to like Svelte. I have tried to mention most of them in this article. I hope - at the end of it - you also will appreciate Svelte.

Svelte is a disappearing JavaScript framework. Initially, it was promoted that way. Because, once you build an app with Svelte, there usually is no way of telling that it is using Svelte.

1. Web developer-friendly

I'm a web developer and I like HTML, CSS, and JavaScript. To be honest, I never really liked any JS framework before because they asked me to learn something new. Sometimes new syntax, sometimes new ways to use the markup so on and so forth.

I'm ok to learn new things but I did not dig deep into any of them because they felt like a deviation from the regular HTML, CSS, and JavaScript that I used every day.

Eventually, I had to take up React for a project of which I was been apart for a long time. It was kind of forced on to me but I started liking it. I understood the true productivity and simplicity that can be obtained from a JavaScript framework.

But, I did not like how React uses JSX or HTML inside JavaScript. That always felt wrong.

Along with all these, I was also trying to learn Vuejs which seemed more like HTML and less like JSX.

I still love Vue for the fact that you can just put a script tag in any HTML app and you can start using Vue. Which is fantastic. This is exactly how we add a Javascript plugin to HTML. Let's say you are designing a homepage and you want a carousel or slider, you just go to the slick carousel page, get the script tag, and use it on your website with some initializations. That's it. You can start using it. In that way Vue was revolutionary. For me at least.

I was still into Vue until I watched the "Rethinking Reactivity" video on youtube. I'm not sure how I ended up watching that video but I'm glad I watched it.

I still watch it from time to time to understand the Genius of Rich Harris. How he looked at these JS frameworks from a different angle and utilized the compiler instead of the browser to handle all the logic. And also, How he found a way to truly reactify elements without DOM diffing where you change something in Virtual DOM and compare it with the actual DOM. And then update the difference to the actual DOM.

And in that way - since svelte is truly reactive - he got rid of Virtual DOM completely which is radically different from other frameworks. Because the other frameworks still use Virtual DOM which is an overhead.

So Svelte was mind-blowing for me because finally, I found this JavaScript framework that isn't difficult to learn, uses less code to achieve the same thing, and the most important of all it spits out a tiny JS file that doesn't need any Runtime environment to run.

That should be enough to be excited about svelte but there are other things I like about Svelte.

2. You can just write HTML

Svelte is a superset of HTML. I feel like it is HTML but with a lot of enhancements.

You can write HTML components without any JavaScript(you may need a line or two to import them).

Svelte is HTML with super-powers!

Even a simple paragraph tag works, just like any HTML file.

3. Scoped style

In Sveltejs, every component is encapsulated. The CSS is localized to a component, doesn't affect other components.

It solves a huge problem of cascading. I have had problems with CSS being all over the place. You change it somewhere for one element and it affects some other element.

You'll like using the plain old CSS in Svelte.

You can also have a global style that applies to all elements of the same tag or class which is nice if you want to apply styles across all Svelte components.

4. True Web Components

In a way, I feel Svelte components are complete. It has HTML, CSS, and JS in a single file. For example, take this small component,

<script>
  let name = "world";
</script>

<h1>Hello {name}!</h1>
<input bind:value="{name}" />

<style>
  h1 {
    color: royalblue;
  }
</style>

Just these lines create a two-way data binding component.

REPL: Two-Way Data Binding

You can do this in React also, but you'll get tired. The code will not be readable. Even now I'm not very sure how to work with styles in React. Currently - at work - we use the Tailwind CSS framework. So it isn't a big problem but if I have to write plain old CSS then it becomes tricky.

When you feel the need to write a comment, first try to refactor the code so that any comment becomes superfluous.

Kent Beck

The above quote from Kent Beck's quote says a lot about how bad some JS frameworks are today.

At my work, I have to explain to my co-workers what is happening in a React component. Just by going through the code, they will not know what the hell is happening. Svelte kinda solves this problem.

The example you see at the top is easily readable and comprehensive. I do not think I have to explain what is happening there.

5. Easy to learn for JS beginners

The learning curve is almost nil. If you know a little bit of JS then you can start using Svelte.

There aren't many syntaxes to learn compared to other JavaScript frameworks like React, Vue.

JS can be hard but doesn't feel that way in Svelte.

There are some directives that we use in Svelte that you may have to learn but they seem natural.

Refer: Svelte Documentation

6. Write Less

In svelte, the number of lines you write is less when compared to other top JS frameworks.

Let's say you want to bind an input to a variable and show it - as shown in the above example - it takes way less code in Svelte. I have had a hard time doing this in React.

Less code = less erros & bugs.

Debugging feels way better in Svelte than other Frameworks.

7. Amazing performance

Svelte performs astonishingly well compared to apps developed with other frameworks. I have developed a decent e-commerce site that uses Svelte and Tailwind and the performance is amazing.

I had so much fun developing it. Previously, it was built using jQuery and the performance was fairly good. But it was still loading the entire jQuery script which is huge. After converting it to Svelte, the bundle size is really small. Not to mention that I do not add more scripts to get animations which I used to do before. Svelte does it for me.

Try Svelte for an exhilarating developer experience

So I think I have mentioned everything that made me choose Svelte. Let me know in the comments if you like Svelte, or why do you like Svelte, or what made you like svelte.

Watch the video here