Skip to main content

Svelte, explained.

Published 2021/06/30 11:00

Have you ever heard of Svelte? If you have, you probably heard of it as an alternative to Javascript frameworks like React or Vue. If you haven't, this article will explain what it is.

So what is Svelte and what makes it different from other frameworks?

Let's explain!

So you're a developer and you need to create a complex user interface. Like, say, a game of Snake.

Such a game is very complicated and will need lots of code to make it happen. Since it's a web game, you'll obviously use Javascript.

Now if you think using vanilla Javascript is too much code for you, you can use a framework to make things easier like React or Vue.

Both these frameworks help you build something complex with ease and once you build your project, you get some nice vanilla Javascript code you can host anywhere.

One of the nicest things about React or Vue is how simply your web page reacts to changes. Changes in lists, or any other variables get picked up and shown on your page.

However, there's a drawback to this. This mechanism (called the "Virtual DOM") that helps adapt to change, gets included in your bundled app. This means that it gets loaded whenever your user opens your app.

This can make your app super slow.

What if there was a better way? Something that more or less works like React or Vue but when the final product gets built, it gets rid of all the unnecessary stuff so that my app is faster for my users?

Enter Svelte

Svelte is a Javascript framework for creating complex user interfaces. Unlike React or Vue, it has a radical new approach to building apps. It helps you build apps that are much faster, by removing unnecessary stuff that your user doesn't need to load while still maintaining the adaptability of other frameworks.

Your user can therefore have a more pleasant experience!

In most other ways apart from speed, Svelte works exactly the same way as React or Vue, so if you're familiar with those frameworks you'll feel right at home.

  • If helps you separate your UI into components
  • It works with Node and npm
  • It helps you write plain HTML instead of complex vanilla Javascript.

Learn more

To get started with Svelte, their website has a straightforward easy to follow tutorial:

Svelte tutorial

Also check out this article which explains why Svelte is a better choice for a Javascript framework:

Frameworks without the framework: why didn't we think of this sooner?

Now let's go ahead and give our users a better experience by building faster web applications with Svelte!

Dev, Explained (43 part series)

  1. Javascript Scopes, explained.
  2. Javascript Promises, explained.
  3. Accessibility, explained.
  4. React, explained
  5. Should I use forEach() or map()?
  6. Should I use Flexbox or CSS Grid?
  7. Docker, explained.
  8. Unit testing, explained
  9. Git, explained.
  10. Typescript, explained.
  11. async/await, explained.
  12. The DOM, explained.
  13. Regular expressions, explained
  14. GraphQL, explained.
  15. Vue, explained.
  16. Svelte, explained.
  17. API, explained.
  18. Javascript Hoisting, explained.
  19. Immediately Invoked Function Expressions (IIFE), explained.
  20. ARIA roles, explained.
  21. Test-driven Development, explained.
  22. ARIA live regions, explained.
  23. aria-label in accessibility, explained.
  24. Type coercion in Javascript, explained.
  25. Variables, explained.
  26. if statements, explained.
  27. Arrays, explained.
  28. Currying in Javascript, explained.
  29. Memoization, explained.
  30. For loops, explained.
  31. Javascript Prototypes, explained.
  32. React Hooks, explained.
  33. Graph databases, explained.
  34. MongoDB, explained.
  35. Serverless, explained.
  36. Javascript Callback functions, explained.
  37. HTML, explained.
  38. CSS, explained.
  39. Responsive design, explained.
  40. Javascript, explained.
  41. The CSS Box Model, explained.
  42. CSS Flexbox, explained.
  43. CSS Grid, explained.
2022 Savvas Stephanides
Buy me a coffee
Some icons from Freepik