5 reasons you should learn Svelte in 2021

Svelte is hot, Svelte is new, and Svelte has the potential to be better than React, Angular, and Vue. In this article, we are giving You 5 great reasons why You should learn Svelte in 2021.

1# Svelte is easy to learn and fast to use

If You already know about how React works, then learning Svelte will be easy as scratching your arm. When Svelte was created is was intentionally made to be easy and very powerful so that you can learn quickly and get from A to B fast.

Svelte is built up around the script tag, HTML5, and style tag. The script tag contains all of the functions for a given component and these functions can be structured almost as you do in React function components. The style tag is optional and it contains all of the stylings for a given component. You can also choose to leave out the style tag and link to a global CSS file instead. In between the script and the style tag you write your HTML5 code.

To see examples of Svelte in use, please take a look at the official Svelte documentation.

2# Svelte makes use of the DOM instead of using virtual DOM

Svelte is different from React and Angular since Svelte is a compiler and it makes use of the real DOM instead of a virtual DOM. This means every time you update a state and your components change, then you are changing HTML in the real DOM.

There are many theories about whether virtual DOM or the real DOM is better, but the fact is that in most cases bundle size will be smaller when using the real DOM instead of having to invent a virtual DOM to display your bundle.

Here is an article from React about what Virtual Dom is.

3# Svelte is more sustainable and environmentally friendly

Svelte is different from React since it makes use of the real DOM. Svelte is only a compiler that compiles your JavaScript, HTML, and CSS into a bundle file you can serve on your website. Both the difference that Svelte uses the real DOM and that it only compiles makes Svelte’s bundle file sizes smaller than the average React bundle file sizes. Smaller bundle sizes are equal to fewer data needed and therefore it is more sustainable and environmentally friendly than React.

4# With Svelte You can use almost the same functions as with React JS

Even though Svelte only is a compiler it is still very powerful. The creators of Svelte have built-in functions that allow you to do almost the same as you would do in React. This means you can use context, states, functions that run on load, etc. Below is a list of some of the functions you can use:

OnMount: This allows you to run functions every time a component updates or renders.
OnDestroy: This allows you to run functions when your component is destroyed.
BeforeUpdate and AfterUpdate: This allows you to run functions just before updating a component or just after updating a component.
Tick: Returns a promise that awaits pending DOM changes before it updates and moves on.
Writable stores: This allows you to add context that is writable to your Svelte bundle.
Readable stores: This allows you to add context values that can only be read.
Store bindings: Store bindings allow you to update the DOM every time your state from the context changes.

5# Svelte has the potential to be the best

Svelte is different from React, Angular, and Vue but it has the potential to become the best and most attractive on the market. Svelte is still new and many things can happen, but just from the fact that Svelte is using the real DOM, the bundle sizes are smaller and it, in general, is easier to learn and use puts Svelte up on the top of the list. With Svelte we have the potential to do better than we did with React, Angular, and Vue and thereby create a super version without the childhood diseases and end up with a new standard in the web designing industry.

Wrapping up

Now we have given you 5 good reasons why You should learn Svelte in 2021 and we hope you will take the step and do it. We believe that Svelte will become powerful and a big part of the industry and by learning it already You will be ready when everything changes.

Thinking about sustainability is important and because the internet is polluting a lot we need to think about the way we do things. Adding Svelte to your tool belt would be a good idea because you can use the most environmentally friendly solution out there to build your web applications.

If You are interested in learning Svelte, You can find great documentation on Svelte’s website, or You can take a look at this video course from Udemy: https://www.udemy.com/course/sveltejs-the-complete-guide/

Author

Michael Andersen

I am a self-taught and highly passionate web developer currently living in Sweden, where I use my skills to make the internet a better place through ethical and sustainable web design.