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.
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.
3# Svelte is more sustainable and environmentally friendly
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.
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/