大家好，我卡颂。

这些年前端框架始终呈螺旋状倒退。

具体来说，很多支流前端框架采纳的技术实际上很早就被创造了。比方10年，细粒度更新就在Knockout中独创。

新框架的呈现个别遵循：

一个新的主见 + 现有技术的排列组合

最近2年，最受欢迎的主见便是Svelte带来的重编译时概念了。

这也让他成为StackOverflow21年开发者报告中最受欢迎的框架。

然而，开源界和工业界可能是两幅光景：

开发者嘴上说着"哎呦，这个框架不错哦"，等到写我的项目时身材却很诚恳的抉择了React。

这也不能怪开发者。毕竟，生态才是前端框架最重要的局部。

本文要讲的，就是个很可能制约Svelte生态倒退的因素。

从VUE聊起

当初VUE3在技术选型时，有个思考的点是：

要不要移除虚构DOM，拥抱重编译时

虚构DOM的作用是：找到交互造成的UI变动的局部。

然而，VUE3采纳细粒度更新，实践上只有粒度足够细，就齐全不须要虚构DOM。

通常，依赖虚构DOM的框架，虚构DOM会占据运行时一大半工作量（比方React、VUE）。

如果能移除虚构DOM能带来如下益处：

  • 打包后的框架代码体积缩小
  • 运行时交互造成UI更新的流程更短

然而，VUE3最终保留了虚构DOM，其中一个很重要的起因是：

虚构DOM能补救模版语言的局限

虚构DOM的劣势

比方，当你须要在VUE中实现布局组件：

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

冀望的成果是：嵌套在Layout中的构造有不同缩进。

输入的HTML如下：

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

这须要用到slot个性。

然而留神这部分，须要依据组件传入的level prop动静扭转：

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

比方：level = 1对应class="layout--1"。

单纯应用模版语法，曾经没方法形容这个个性了。

此时，就须要你手写render函数。

所以，为了编写简单组件，VUE为开发者凋谢了模版语法与手写render函数两条路子。

之所以能有两条路子，是因为这两条路最终都通向虚构DOM。

前端框架生态中很重要的一环，便是组件库的丰盛水平了。

为了一个好用的组件库换框架是常有的事。

所以，为了缩小开发者编写简单组件的老本，VUE保留了虚构DOM。

Svelte永远闭上的门

作为和VUE一样采纳模版语法的框架，Svelte抉择重编译时路线。

这就意味着他永远摈弃了虚构DOM，也摈弃了虚构DOM带来的灵活性。

在探讨Render functions的PR中，官网明确示意：

Svelte永远不会思考render函数

既然摈弃了render函数（以及背地的虚构DOM），那么当编写简单组件时，惟一的前途便是：

提供更多、更简单的API以应答简单场景

比方：对于slot个性，Svelte提供了4个API：

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

反观React，因为极度灵便，压根没有对应API。

咱们能够大胆的揣测，编写简单组件的老本：

React < VUE < ... < Svelte

总结

如果一个框架只是概念离奇，会失去一时的关注。

然而，只有在DX（开发者体验）、UX（用户体验）都做到均衡的框架能力在工业界短暂存在。

这一点上，Svelte任重道远。