During my 1 week holidays from the University, I was getting bored, so I decided to learn something new, and from my to-learn list, I chose Svelte to be the new framework I will give a try. Oh boy! That was a good decision! Biased by the popularity of react.js, I had been using React for a long time, but React has some 'flaws' which make it kinda hard to use - I do not specifically like how React implements states of components.

So, here I was thinking that nothing can be more powerful as React, considering the amount of people using it and the number of jobs available in it. For those of you who haven't already tried Svelte, lets get things set-up.

Planning the project

Alrighty, the very first thing we need to decide is what kind of simple yet worthwhile frontend only system we want to build. More specifically, looking for something that involves components, something similar to react states, props, component lifecycle methods/hooks, intermediate CSS involvement and some javascript.

With all this in mind, I had recently read a post by Alvaro Montoro, in which he builds Bezos calculator. Click here to read the post, and check out the demo here.

Wouldn't it be cool to create a Svelte app with multiple billionaires in it instead of just one? See how each of them could be a separate component, and how you would need to send data through components while maintaining 'states'? Its a pretty easy looking project, but definitely covers a lot of these concepts we talked about.

Alrighty, going through the documentation of Svelte.js, I build money-speed. I won't go through how I build it since this post is not about that(and its a fairly easy build if you know a bit of front-end development), but you can check out the code here.

Benefits of Svelte

Svete still provides all the same component-like features like your favorite front end framework - React, Vue, Angular etc, but with the added benefit of the code looking like the easiest language ever - HTML, which means its not only easy to read, its easy to understand and quick to learn, while being super effective and strong.

Wait..what was that? Look at the code here:

<script>
 ... JS code 
</script>

<div class="container">
 ... components 
</div>

<style>
 ... css for this component 
</style>

Just looks like regular HTML but without the messy doctype and head/body tags, which are in a separate file.

Again, since this is component based, something like this would work fine:

<div>
    <Navbar />
</div>

Navbar.js:

<div>
    <navitem text="blah" link="./blah" />
</div>

Of course, like other frameworks, we can use loops, conditionals etc within HTML.

<script>
import PokedexCard from "./PokedexCard.svelte";
const pokemon = [
    {
        name: "bulbasaur",
        type : "grass",
    },
    {
        name: "pikachu",
        type: "electric",
    },
]    
</script>

<div class="container">
    {#each pokemon as p}
        <PokedexCard name={p.name} type={p.type} />
    {/each}
</div>

<style>
 .container {
     display: flex;
 }
</style>

Now go create a PokedexCard.svelte file with layout, CSS for just one card, and it would work for all the elements in the pokemon array. Try adding one more pokemon without changing only the array.

Neat, right?

Go on try it out.

Svelte kit

Svelte kit is a new server side next-like framework. Its in beta as of writing this article, but its something definitely worth checking out. Good luck!