Welcome to the first article of a series I named "I tried ..."!
My purpose here is to manipulate multiple technologies (new or older) and give my opinion over it! I'll try to write in a small amount of time, so I won't loose it procrastinating! Thank you for reading, let's go! ;)

What is Svelte ?

Svelte is a component oriented framework for the web, helping you building reactive applications. It introduces a new file extension .svelte as it brings its own compiler. According to Svelte landing page :

Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app.

So it remains fast in the browser (and we like it).

Write components

To write Svelte components, you'll have to mix JavaScript, CSS and HTML within the same .svelte file using tags. This singular approach looks like this :

<script>
    let count = 0;

    function increment() {
        count += 1;
    }
</script>

<p>Hello World!</p>
<div>
    count : { count }
</div>
<button on:click={increment}>Increment</button>

<style>
    p {
        color: blue;
    }
</style>

As you can see in this short example, you don't have to manipulate DOM element with JavaScript, but write some kind of JSX like you will do with React, as it's really close to HTML syntax but mixed up with JavaScript inside, using brackets.

Directives

Pay attention to the way we implemented mouse click event handler. The on:eventName directive is here to tell Svelte you want to run a function when event 'eventName' is triggered. Svelte lets you the flexibility to create your own events with createEventDispatcher API, so you're not constraint by native ones.

There are several useful directives like this one. Most used will be bind:something of course, as it lets you bind variables you declared in your component script, so you can make re-render the element on changes (like <input bind:value={value} />).

Component life cycle

All component oriented frameworks come with utilities to manage components life cycle, and Svelte is no exception! There are four : onMount, onDestroy, beforeUpdate and afterUpdate. Just read their names to understand what they do! You just have to provide them a callback, and they will execute it during the right cycle.

State management

In case you want to build a store to manage your application states properly (as you'd do with Redux, RxJS, MobX or whatsoever) Svelte provides a full utility tools panel! Don't need to smash another external library, just focus on your code!
You are able to create two kind of stores : writable or readable.
The main difference is that writable are mutable by 'outside' using their set method. To get their value, you'll have to subscribe to them, then unsubscribe (same thing with readable stores, of course) :

import { writable } from 'svelte/store';

const count = writable(0, () => {
    console.log('Subscribed!');
    return () => console.log('Unsubscribed!');
});

const unsubscribe = count.subscribe(value => {
    console.log(value);
}); // logs '0'

count.set(1); // logs '1'

count.update(n => n + 1); // logs '2'

unsubscribe();

Nothing new for you if you're used to observable!

Things I liked about it

There are so much things I love with Svelte, I don't know where to begin!
Svelte file structure is probably the solution I expected for my frustration using React or Angular. None of this two fully satisfies me on component construction (structure, style and behavior).
Here, I have the power to assemble every part of a component in a single file, with no harm to keep control over them.

I also really like state management simplicity, I found it really understandable, no black magic behind.

If you read my article 'A quick comparison: React / Angular' you may have noticed that Svelte is in top position of smallest bundle size, where React, Angular and even Vue are way behind (from 4 to 20 times heavier!). As developers, we should always worried about this, as it will impact final users.

Things I did not like about it

Actually, there is no really aspect of Svelte that I really disagree with, but I found points that can be improve to make him the best framework.

Whether hot-reload is available with Svelte compiler, I found some weird behaviors sometimes, I had to destroy the entire bundle, and recompile everything again to see my changes be effective, but it was rare.

Svelte community is great, and even if they are working on their communication over job opportunities, the industry is slow, and jobs evolution still push same tools (React, Angular, Java SpringBoot, .Net...). I hope in the future that we'll see more Svelte jobs opportunities ! If you're looking for one, you can follow this Twitter account.

Conclusion

Svelte is a wonderful framework, full of potential, and I'll be watching really close its development. Concurrency is rude, but I think Svelte has everything to raise in the top web-client frameworks of this decade.
Even more when you know all the ecosystem dev team is building around it!

If you want to learn more about Svelte, check their documentation and start a little project to make your own opinion!

That's all folks! Hope you liked it! Stay safe, drink water, and happy hacking!

You made NO joke really ?
Sorry no time catch up later bye ++ ciao
Am I a joke to you ?
:)

About the author

Follow me on my socials!
Twitter : https://twitter.com/TitouanSola

Devto : https://dev.to/titouansola

Website: https://titouansola.dev