Four Reasons to Learn Svelte in 2022

1. Continuously Rising Interest

According to the State of JS survey, Svelte was introduced as an option in 2019, boasting an 88% satisfaction rate at the time (React 89%, Vue 87%). This year, it reached 89%, ranking #1 in front-end framework satisfaction.

Furthermore, its usage rate rose from 8% (ranked 6th) in 2019 to 15% (ranked 4th) in 2020. This indicates that more and more people are paying attention to this front-end framework.

2. Low Barrier to Entry and Easy to Learn

Svelte’s syntax is almost entirely compatible with standard HTML. Additionally, template syntax like {#if} and {#each} is very intuitive if you have ever written templates like .ejs or .pug. Svelte’s syntax is designed to reduce cognitive load, allowing beginners to get up to speed quickly once they grasp the basic concepts. A Svelte component looks like this:

<script>
  export let prop; // prop 這樣宣告
  let count = 1; // 變數這樣宣告
  onMount(() => { // 生命週期方法
    count++; // 改變變數值會觸發元件更新
  })
</script>

<style>
  p { font-size: 14px }
</style>

<!-- 變數用 {} 包起來 -->
<p>{count}</p> 

<!-- 屬性傳遞 -->
<Component count={count} />

You can easily understand what a component looks like without needing to learn concepts like hooks. For styling, Svelte scopes CSS by automatically appending a hash during compilation, eliminating concerns about CSS naming collisions. Since this is all handled internally by Svelte, you don’t need additional loaders (like css-modules).

For developers who primarily focus on back-end work and occasionally need to build front-end pages, Svelte is a tool that is exceptionally easy to pick up and jump into right away.

3. Small Bundle Size

Unlike React or Vue, Svelte compiles your code ahead of time before generating output, allowing it to perform compile-time optimizations and dependency tracking. If you are interested, check out “Virtual DOM is pure overhead” written by the creator of Svelte. It explains that in order to avoid direct DOM API manipulations while achieving a declarative approach, you inevitably trade away some performance. In React’s case, this tradeoff is the Virtual DOM and its diffing algorithm. To keep the cost of diffing small enough while remaining cross-platform, React needs a lightweight mechanism to describe the render tree—the Virtual DOM.

When performance issues arise in large applications, React provides various optimization APIs like useMemo and shouldComponentUpdate so developers can fine-tune performance themselves.

Svelte, on the other hand, has no concept of a Virtual DOM. Its crucial dependency tracking mechanism is analyzed at build time. Consequently, its runtime bundle size is much smaller than React’s or Vue’s, which means Svelte often delivers smaller bundles and superior performance in small-to-medium-sized applications.

4. Built-in Transition and Animation Mechanisms

Svelte has built-in transition capabilities that integrate seamlessly with common development scenarios. It even comes with pre-packaged transition effects out of the box. You can use the transition directive to achieve animated transitions, and Svelte will automatically handle when to trigger them (entering and exiting).

In Svelte, you can write it like this:

<script>
  import { scale } from "svelte/transition";
  import { onMount } from "svelte";

  let toggle = false;

  onMount(() => {
    setInterval(() => {
      toggle = !toggle;
    }, 2000);
  });
</script>

<main>
  {#if toggle}
    <h1 transition:scale>Hello World</h1>
  {/if}
</main>

When {#if toggle} evaluates to true, the h1 renders (enter transition); when false, it is removed (exit transition). By simply adding transition:scale, Svelte executes the transition at the appropriate moment.

In React, you typically need to use react-transition-group—otherwise, writing toggle && <Component /> unmounts the component immediately when toggle becomes false, preventing exit animations from completing—or use something like react-spring for more advanced animations.

Vue developers reading this might wonder what the big deal is, since Vue also has a built-in <transition> mechanism that handles transitions triggered by v-if. The difference is that Vue requires you to define CSS class names and transition rules manually in your stylesheets, whereas Svelte allows you to handle it declaratively without needing separate CSS class definitions.

“Under the hood, it’s probably just modifying inline styles with JavaScript—which has terrible performance!”

In fact, Svelte dynamically generates CSS @keyframes. Here is a snippet from the animation source code:

function go() {
  const {
    delay = 0,
    duration = 300,
    easing = linear,
    tick = noop,
    css
  } = config || null_transition;

  if (css) animation_name = create_rule(node, 0, 1, duration, delay, easing, css, uid++);
  ...
}

The create_rule function here is the core of the entire transition system, implemented behind the scenes using stylesheet.insertRule. Suppose I declare a transition:

function myTransition(node) {
  return {
    css: t => `
      transform: scale(${1 - t});
    `;
  }
}

It dynamically generates an animation keyframe rule (via insertRule):

@keyframes svelte_hash_animation_name {
  0% {
    transform: scale(0);
  }
  
  10% {
    transform: scale(0.1);
  }
  
  20% {
    transform: scale(0.2);
  }
  
  30% {
    transform: scale(0.3);
  }
  ...
}

This rule is then applied to the target DOM node, avoiding the unnecessary performance overhead of mutating inline styles on every single frame.

Easy Implementation of Crossfade and FLIP Effects

An example makes this much easier to understand. Try clicking the button in the embed below:

Upon clicking, the tag transitions smoothly from its current position to its destination and comes to rest at its final spot. This effect can be achieved effortlessly in Svelte. You will also notice that other tags transition to their new positions as well, making the interaction look much smoother. This technique, known as FLIP, is natively implemented in Svelte.

Drawbacks

Having discussed the strengths above, let’s explore some of the drawbacks based on my own experience.

1. Doing Too Much at Compile Time

Because Svelte handles dependency tracking at compile time, debugging the generated code to investigate unexpected behavior can sometimes be quite difficult.

Furthermore, while it might feel natural for developers proficient in HTML, beginners might find Svelte components confusing—they look just like HTML on the surface, but with subtle differences like the {} syntax and reactive variable declarations.

Svelte’s reliance on ahead-of-time compilation also means you cannot simply import a library directly in a <script> tag like you can with Vue; you must run it through a bundler like Vite or Webpack.

2. Must Conform to Svelte’s Component Format

To create a Svelte component, you must adhere strictly to Svelte’s component format. In contrast, React components are just JavaScript files, so any valid JavaScript can be used to construct a React component.

3. Fewer Resources and a Less Mature Ecosystem Compared to Other Frameworks

Although Svelte resources have been steadily growing, the majority are in English, with relatively fewer resources available in Chinese. Consequently, finding solutions to problems can be more challenging, and ready-made solutions are not as comprehensive as those for other front-end frameworks. This will take time to mature—or you can help by contributing and creating more Svelte resources!

4. Adoption Rates Remain Relatively Low

For most companies, Svelte adoption is still low, which means it might not be the most advantageous choice for job hunting.

Summary

Svelte occupies a distinct position compared to other front-end frameworks. With its clean syntax, compile-time paradigm, “write less code” philosophy, and small bundle size, Svelte has garnered increasing recognition in recent years. Personally, I love this kind of diversity. While it might not appeal to everyone, having different paradigms collide drives progress and sparks inspiration. As we head into the new year, why not set aside your familiar framework for a moment and give Svelte—2020’s highest-rated framework in satisfaction—a try?

If you are interested in Svelte, feel free to check out some of my previous articles:

• Svelte — 是什麼讓我遇見這樣的你
• Svelte 筆記（1）- 沒有銀彈
• Svelte 筆記（2）：編譯器比你聰明多惹
• Svelte Summit 2020 筆記與心得
• Vue ref 語法糖與 Svelte