An Introduction To Svelte
A quick introduction to the Svelte framework.
In this story, I will be talking about what Svelte is, when to use it and more.
Note
I didn’t include Svelte in my A 2021 Comparison of the Best Frontend JavaScript Frameworks story because I just didn’t have enough experience with it. You can think of this story as the Svelte part of that story.
Let’s start!
What is Svelte?
Svelte is a front-end, open-source JavaScript framework for making interactive webpages. Svelte is similar to pre-existing frameworks like React and Vue in that it enables developers to make web apps. However, Svelte brings several features to the table that provides developers with a unique experience.
Even though Svelte developers don’t like this sentence, I think that Svelte is a mix of React and Vue.
Svelte features
- Less code
- No Virtual DOM
- Truly Reactive
- Faster Performance
Less code
Writing fewer lines of code saves time, reduces bugs, and increases readability.
Svelte does not restrict the developer to only one additional top-level element. Moreover, Svelte lets you update the local state of a variable with ease by using the assignment operator (=). In React, however, users must use theuseState hook, which makes the code heavier.
No Virtual DOM
In the most basic sense, the Virtual DOM is a way to update the state by comparing the snapshot of a previous tree of custom-objects with the current one. This is used in React.
Svelte is a compiler, so the user does not need to load the library to the browser to run the Svelte code. Instead, a simple .js file is loaded on the page to render the app. All the object updates are made at compile time. This helps Svelte reduce the overhead generated by the virtual DOM. Moreover, not having to load the whole library reduces the size of the file significantly. This is especially beneficial for mobile devices.
Truly Reactive
Svelte surgically updates the DOM at build-time. This lets users build their application as per their requirements without caring about unnecessary overhead.
To make the user’s life even easier, Svelte incorporated reactivity into its language.
To change the state in React or Vue, the user needs to use hooks. Although hooks are a fundamental element for updating the state, they generate unnecessary work for the Garbage Collector.
Faster Performance
Because Svelte compiles into optimized JS files instead of JS, HTML, and CSS, it’s lightning-fast compared to other frameworks. User tests show Svelte is around 30% faster than other common frameworks.
When to use Svelte
- You don’t want any boilerplate at all
- You want a simple and elegant syntax
- You prefer small frameworks over large ones
Final Thoughts
In my opinion, Svelte is pretty useful for small projects. But I’m still not sure if you should use it for big ones.
I hope this story helped you and you’ve learned something new about Svelte.
And that’s it. Thanks for reading this story!
If you liked the story, make sure to let us know in the comments, and feel free to ask me anything you want.
Follow me on Twitter:
Support me on Patreon:
