Hello, everyone. I am Karsong.

The front-end framework has been spiraling over the years.

In particular, many of the technologies used by mainstream front-end frameworks were actually invented long ago. For example, 10 years, fine-grained updates were pioneered in Knockout.

The emergence of new frameworks generally follows:

A permutation of a new idea + existing technology

The most popular idea of the last two years has been the recompile time concept introduced by Svelte.

This has made it the most popular framework in StackFlow’s 21 year developer report.

However, the open source world and the industry can be two things:

Developers say “Oh, that’s a nice framework”, but when it comes time to write the project they choose React honestly.

You can’t blame the developers. After all, ecology is the most important part of the front-end framework.

This article is about one factor that is likely to limit the ecological development of Svelte.

Since the VUE chat

When selecting the technology for VUE3, the following points were taken into consideration:

Whether to remove the virtual DOM and embrace recompile time

The virtual DOM is there to find the parts of the UI that have changed as a result of the interaction.

However, VUE3 uses fine-grained updates, which theoretically eliminates the need for the virtual DOM as long as the granularity is fine enough.

Often, frameworks that rely on the virtual DOM account for more than half of the runtime workload (e.g. React, VUE).

Removing the virtual DOM can bring the following benefits:

  • The packaged framework code is reduced in size

  • Runtime interactions result in a shorter UI update flow

However, VUE3 ultimately retains the virtual DOM for one important reason:

The virtual DOM makes up for the limitations of the template language

Advantages of the virtual DOM

For example, when you need to implement layout components in VUE:

<Layout level={1}>
  <div>1</div>
  <div>2</div>
  <Layout level={2}>
    <div>33</div>
    <div>44</div>
  </Layout>
</Layout>
Copy the code

The desired effect is that the structure nested in Layout has different indentation.

The output HTML looks like this:

<div class="layout">
  <div class="layout--1">
    <div>1</div>
    <div>2</div>
    <div class="layout">
      <div class="layout--2">
        <div>33</div>
        <div>44</div>
      </div>
    </div>
  </div>
</div>
Copy the code

This requires the slot feature.

But note this part, which needs to change dynamically based on the level prop passed in by the component:

<div class="layout--1">
  // ...
</div>
Copy the code

For example, level = 1 corresponds to class=”layout–1″.

There is no way to describe this feature using template syntax alone.

At this point, you need to write the Render function by hand.

So, to write complex components, VUE opens up both the template syntax and the handwritten render function to developers.

The reason there are two paths is because both paths ultimately lead to the virtual DOM.

An important part of the front-end framework ecosystem is the richness of the component library.

Changing frameworks for a useful component library is common.

So, to reduce the cost of writing complex components for developers, VUE retains the virtual DOM.

Svelte closed the door forever

As a framework that uses the same template syntax as VUE, Svelte chooses the recompile time path.

This means that he has thrown away the virtual DOM forever, and the flexibility it brings.

In the PR discussion of Render Functions, it was officially stated that:

Svelte never considers the render function

Now that the Render function (and the virtual DOM behind it) has been discarded, the only way out when writing complex components is:

Provide more and more complex apis for complex scenarios

For example, Svelte provides four apis for the Slot feature:

  • <slot>

  • <slot name=”name”>

  • $$slots

  • <slot key={value}>

React, on the other hand, is extremely flexible and has no corresponding API at all.

We can make a bold guess at the cost of writing complex components:

React < VUE < … < Svelte

conclusion

If a framework is merely conceptual novelty, it will get a moment’s attention.

However, only a framework that balances both DX (developer experience) and UX (user experience) will survive long in the industry.

Svelte has a long way to go.