Blog post image

Svelte training: Here you can learn Svelte

Svelte is getting popular and more companies are starting to develop new projects using Svelte, simply because it is so powerful and easy. Therefore we need to get you some Svelte training so that you will be ready when your company makes the move or when you need to find a new job.

In this article, we have collected some of the best paid and free Svelte training courses that will take you from newbie to advanced in no time. You will also find additional training material and documentation to help you along the way.

Start your Svelte training with these sources:

To get you started training Svelte, we have gathered a list below with some of the best training courses both paid and free. In the list, you will also find additional training material ranging from documentations, videos, games, and articles.

Paid Svelte training courses.

Free Svelte training courses.

Other Svelte training sources.

FAQ: Good to know when training Svelte:

Learning Svelte or anything else can be confusing and often you have more questions than answers. Therefore in this FAQ (Frequently asked questions), we have gathered some of the questions we had when we first started learning Svelte:

Will it be easier to learn Svelte if I already know React?

Yes, it will be easier to learn Svelte if you already know how to use React. Svelte is building on some of the same principles as React, but instead of having a steep upward-going learning curve, Svelte is easier to learn.

Will it take a long time to learn Svelte?

It depends. If you already have knowledge in web development, then it should be faster to learn Svelte compared to React and Angular. Svelte has many of the same functions, but the way you handle certain situations has been made easier. In other words: Svelte took the things that were hard and complicated in React and made it easier. So as an answer: If you have general knowledge of HTML, CSS, and JavaScript, then it should be relatively fast to pick up Svelte.

Is Svelte stable to use in production projects?

Svelte has been around for a few years and has been in constant movement. They got a good start by being able to learn from the mistakes that React and Angular made. I believe that Svelte has already gone through its major changes, and therefore it is suitable and stable to use in real-life production projects.

Is Svelte more environmentally friendly compared to React and Angular?

Comparisons have been made between a "Hello world" project made with Svelte, React, and Angular. The file size of the compiled bundles was compared to each other, and it revealed that the smallest bundle was Svelte's by far. In other blog posts, it has also been made clear that Svelte uses the real DOM while React uses a virtual DOM and Angular uses an incremental DOM. According to various sources, real DOM manipulation is much faster than manipulating virtual DOM. 

Is Svelte better than React?

This is a hard question to answer, but if you scroll down to the section "Should I switch from React to Svelte", then we try to answer it as well as we can.

Why you should learn Svelte

As we mentioned at the beginning of this article: Svelte is getting very popular, and by training/learning Svelte already now, you will be ready when your company makes the move or when you decide to find a new job.

Svelte has an advantage, and that is that it was created after Angular and React. Because it was built afterward Svelte had the opportunity to learn from the mistakes that React and Angular have made. Fixing those mistakes has allowed Svelte to jump many steps forward and build something easy to understand, requires a lot less training, and is blasting fast.

Because of Svelte's simplicity, it allows web developers to learn it quickly and build web apps faster and with less code. Svelte's structure is made up of having a script tag at the top, your HTML code in the middle, and an optional scoped style tag at the bottom. This means that you can write your Javascript code inside the script tag, add your HTML, and if you want to add scoped CSS, then you can do that at the bottom. If you don't want to add scoped CSS, then you can instead choose to import a global CSS file like you normally would do in web development.

Here is an example of how simple Svelte's structure is set up, and it illustrates how small a learning curve it has compared to React and Angular.

<script lang="ts">
   let name: string = 'world';
</script>

<h1>Hello {name}</h1>

Compared to React and Angular, Svelte made their syntax much more simple. This allows you to write coster faster and use less code to achieve your goal. The example below is showing you how you add an HTML input element and bind the value to a variable. If you are familiar with React, then you know that to do this, you would have to write code that updates the value. All of this has been stripped from Svelte.

<script lang="ts">
   let firstName: string = "";
</script>

<input type="text" bind:value={firstName} />

In the example above you should notice that the only code needed to attach a value to input and update the value, was to bind the value to the variable.

Should I switch from React to Svelte?

A war has been going on for a few years about whether you should be using the real DOM (Document object model) or a virtual DOM. Some would say that a virtual DOM is better and others will say the opposite. The difference between the two is that Svelte is a compiler and it compiles your code into ideal Javascript during build time, and React is interpreting the code during runtime instead.

Whether you should be switching to Svelte is up to you. Below here, you can see some of the advantages there is if you make the switch:

  • The time it takes to compile using rollup is very fast compared to React and even other frameworks.
  • Bundle sizes are smaller and when GZIP'ed they are very tiny compared to other frameworks. Small bundle sizes are great when trying to lower the amount of data needed to be downloaded by the user.
  • Coding in general is more simple in Svelte. You saw earlier how simple it was to bind and update a value attached to an HTML input element. Simple code allows you to write faster code.
  • CSS flexibility allows you to either scope your styling in a component or write a global CSS. Scoping automatically assigns a class to the component you are styling so that you only have to take care of the writing.
  • The learning curve is small compared to other frameworks and you don't have to spend as much time training Svelte once you understand it.
  • Handling contexts is much easier and simple when using Svelte's store API.

How do I start my Svelte training?

Getting started with your Svelte training is easy, and in no time you should be ready to write your first small project using what you have learned. At the top of this article, you will find some great sources for paid and free video courses where you can learn Svelte, and you will also find additional sources for great books and texts.

If you have a general knowledge of HTML5, CSS, and Javascript then learning Svelte shouldn't be a problem. During your training, you won't be introduced to very complex code as you would in React.

To begin your Svelte training we recommend starting with learning what Svelte is. Having a general knowledge about what you are about to learn is always a good idéa and it can also speed up your training process along the way. Next, you can choose one of the paid video courses at the top of this article. Using a paid course will cost you a little, but instead of fumbling around the documentation trying to make sense of it, you will learn everything you need to know and come out with new skills. You can also start your Svelte training by reading one of the books listed in the sources in this article. The books won't be giving you the same visual explanation, but for some that might be better. 

Once you completed your Svelte training and know your way around, it is time to start some smaller projects. Small projects are good when you try to make information stick and it will make development faster for you in the future.

Wrapping up

By now we hope that you have a general understanding of Svelte and got some of your questions answered. We also hope that you know how to start your Svelte training and soon will be ready to develop both simple and advanced web applications using what you have learned. If you have any further questions you would like answered or ideas to topics that should be added to this article, please don't hesitate to contact us through our contact form. Then we will get back to you as fast as possible.

In our database of articles, we have also written about other subjects in Svelte. If you are interested in learning more about the framework, please consider taking a look at these:

Author

Michael Andersen

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.