5 Reasons to Use Svelte for Front End Development
Why Svelte is the Future of JavaScript Frontend Development
What is Svelte?
Svelte is a JavaScript framework for building full-stack web apps. Instead of components being declared in .js files, Svelte runs mostly on a custom variation of HTML, the .svelte file! This file is an HTML file with the ability to use props and state, input JS into your code with curly braces, and more.
I tried Svelte, and these were the first things I noticed:
- Svelte has extremely good docs and a cool interactive playground
- Svelte is the best of both JavaScript framework worlds (React and Vue)
- Svelte is lightweight and easy to read
These are all amazing first impressions for a new framework, so here’s a deeper dive into the brand new framework: Svelte.
Reason 1. Small amount of code, lots of functionality
Svelte has fixed to lots of annoying parts of other frameworks, like React and Vue. State automatically updates when changed, and JS code is simple but functional and readable. This means a smaller amount of code, for the same level of functionality.
Let’s compare a simple app where you click a button and then a count state variable updates:
Svelte (10 lines)
React (23 lines)
We can immediately see that the Svelte version is shorter and more understandable. This also means it was faster to write, making the example using Svelte better than the one using React.
Reason 2. State automatically updates
You might’ve been in the situation where you are developing a web app using React or Vue and you realize your website isn’t working properly. You check the console for an error. Nothing is there. You begin sweating, and realize you’ve made a mistake that the compiler doesn’t recognize. A developer's worst nightmare.
It turns out that you didn’t reload/set the state using setState() or its equivalent. This can waste a lot of time when you need to make a website fast, and is also just generally annoying.
Reason 3. Better for beginners
Svelte is better for beginners or newbies for many reasons. It intertwines with HTML, making a lot of the code you need to write simpler, and its javascript is fast and versatile. All of these are things that could greatly help out a beginner who wants to enter web development.
Reason 4. Spreading props for a component
To make your code cleaner, Svelte provides the opportunity to make an object with the appropriate attributes for a component, and then pass it into a component in your Svelte HTML, like so!
<script>
const pkg = {
name: 'svelte',
version: 3,
speed: 'good',
website: 'https://svelte.dev'
};
</script><Package {...pkg}/>
The above is working code! Since our imaginary Package component requires the props name , version , speed and website , we can just pass in the object! This is helpful if you need to reuse some data, or just generally make your code easier to use.
Reason 5. Small JS snippets in your HTML
Svelte lets you easily add sometimes complex JS into your HTML, like putting in a loop that goes through an array, an if statement, or just a simple expression like count * 2 . Svelte uses these in different ways, but here’s an example:
{#if user.isLoggedIn}
<span> You are logged in!
{/if}This piece of code starts with an if statement and condition, and then what to do if it is true. Then you close it with /if . This can also be adapted for a loop or other JS things, but I’ll stick with that example for now.
Conclusion
If I spent a bit longer than I have with Svelte, I’d have many more reasons. At the end of the day, I think that Svelte is a great framework. I had lots of fun trying it, and I’ll try to advance my skills in it. Thank you for reading this, and as always, clap for this post or follow me if you enjoyed this! Also, please join the small (for now!) discord server where you can get programming support, here!
