Image by Mammiya from Pixabay

Trying Svelte for the first time as a React developer

Alejov
Alejov
Feb 2 · 3 min read

Hi there, these are my first impressions with the Svelte framework, I’m going to record everything that I learn about it here on Medium, so there we go.

What do I know? just that everyone is talking about it, and also that is the second most popular framework according to stateofjs after reactjs

Snapshot from StateOfJS 2019 statistics

So, I will be following the official Svelte tutorial here, my goal on this post is simple, a todo list with checked items, just to learn the basics, we will get deeper in the future.

Keep in mind that I am not an expert on the field, just a guy blogging, If you already know Svelte, well, have fun.

Let’s get started

It looks like Svelte is a compiler, so I have to choose between REPL or degit, I’m going for the second one, it seems like just a few commands.

And I got this hello world screen, I’m giving the tutorial and the source code a quick read to see what this is about and then we can get started with our todo app in Svelte.

Right now it looks like it has a really simple syntax and folder structure, now I want to change a background by clicking a button to learn how the events and state management works.

It was a straightforward way to toggle the background without much code, unlike other frameworks. I’m going to try to create the todo list, to do that I need some kind of map through the elements of the array, so let's keep going.

There is something called Statements, i think it might work pretty much like useEffect on the react side, i like the simplicity of this framework.

I was trying to capture the on:change event on the input and then update the value of todoDescription and set the value of the input to the value of todoDescription that’s the react way, but here I just have to use bind:value, Cool 😎

And this is how my todo-app looks like, if you’d like to try it click here.

And this is what the code looks like, 50 lines of code (I removed 40 of CSS)

Comparing a similar todo-app with other frameworks like react, Svelte has a simple syntax, easy to get used to, I just tried some things of Svelte but it might be the future of web development, it was created in 2016, is not that new, but not that old.

In order to know if I could make real-life web apps with Svelte (probably, chess.com is built with it), I would need to use it at least a couple of months in order to master Svelte.

Image is taken from the video below

I know Svelte since I saw the video “Computer, build me an app” by Rick Harris on JSConf EU 2018. but haven’t tried it until today, it was cool, I’m not switching right now, but I’m definitely going to learn more about it.

There are still a lot of other things about Svelte that i haven’t used, like the LifeCycle, Stores, Motions, Transitions, Actions, Animations, and i put everything into a single file, so i need to create “components”, and use external API’s and libraries.

JavaScript in Plain English

Learn the web's most important programming language.

Alejov

Written by

Alejov

Hi there, I’m Alejandro, I’ve been coding for 4 years mainly with JS tools like React and firebase. alejov@alejov.dev

JavaScript in Plain English

Learn the web's most important programming language.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade