关于前端:这会是制约Svelte发展的最大因素么

大家好，我卡颂。

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

具体来说，很多支流前端框架采纳的技术实际上很早就被创造了。比方 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任重道远。