Will this be the biggest factor restricting the development of Svelte?

Hi everyone, I'm Kasong.

The front-end frame has been developing in a spiral shape over the years.

Specifically, the technologies adopted by many mainstream front-end frameworks were actually invented very early. For example, in 10 years, the fine-grained update was first created Knockout

The emergence of the new framework generally follows:

A new idea + permutation and combination of existing technologies

The last two years, the most popular idea is Svelte brought compiled on concept.

This also makes it the most popular framework in the StackOverflow

However, the open source world and the industrial world may be two scenes:

The developer said "Oh, this framework is good", but when writing the project, the body honestly chose React .

This cannot be blamed on the developers. After all, ecology is the most important part of the front-end framework.

What this article is about is a factor that is likely to restrict the ecological development of Svelte

Chat from VUE

When VUE3 in the technical selection, one consideration was:

Do you want to remove virtual DOM , embrace when

virtual DOM is used to find the changed part UI

However, VUE3 using fine-grained update , in theory, as long as the size is fine enough, it is completely without virtual the DOM .

In general, rely virtual the DOM framework, virtual the DOM will occupy more than half of the workload is running (for example React , VUE ).

If you can remove the virtual DOM can bring the following benefits:

• The packaged framework code volume is reduced
• The runtime interaction causes the update process of UI

However, VUE3 finally retained the virtual DOM , one of the important reasons is:

virtual DOM can make up for the limitations of template language

Advantages of virtual DOM

For example, when you need to VUE implementation layout components :

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

The desired effect is: Layout has different indentation.

The output HTML as follows:

<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>

This requires the use of slot characteristics.

But pay attention to this part, it needs to be dynamically changed level prop

<div class="layout--1">
  // ...
</div>

For example: level = 1 corresponds to class="layout--1" .

Simply using template syntax , there is no way to describe this feature.

At this point, you need to write the render function .

Therefore, in order to write complex components, VUE two ways for developers: template syntax and handwritten render function 16138203738e24.

The reason there are two paths is that both ultimately lead to the 16138203738e35 virtual DOM .

A very important part of the front-end framework ecology is the richness of the component library.

It is common to change the framework for a useful component library.

Therefore, in order to reduce the cost for developers to write complex components, VUE reserves the virtual DOM .

Svelte never closed the door

As and VUE uses the same template syntax framework, Svelte choose when recompile road.

This means that he will always abandon the virtual DOM and the flexibility brought by virtual DOM

In discussing Render functions at , the official clearly stated:

Svelte will never consider the render function

render function (and the virtual DOM behind it) is abandoned, when writing complex components, the only way out is:

Provide more and more complex API to deal with complex scenarios

For example: for the slot feature, Svelte provides 4 API :

• \<slot>
• \<slot name="name">
• $$slots
• \<slot key={value}>

In contrast, React , due to its extreme flexibility, does not correspond to API .

We can boldly speculate, the cost of writing complex components:

React < VUE < ... < Svelte

Summarize

If a framework is just a novel concept, it will get a moment's attention.

However, only DX (developer experience) and UX (user experience) can it last in the industry.

At this point, Svelte long way to go.