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
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.
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.