新的前端框架Svelte有哪些创新? - Jannik

21-04-28 banq

Svelte是一种构建用户界面的全新方法。传统的框架(如React和Vue)在浏览器中完成大部分工作,而Svelte则将其转变为在构建应用程序时发生的编译步骤。

它类似于React或Vue,但主要区别在于它是编译器。这意味着Svelte特定的代码被编译(考虑到转换)为JavaScript,该JavaScript可被浏览器执行。Svelte可以扩展和更改JavaScript语法,因为编译器最后将其编译为JavaScript。因此,Svelte可以摆脱JavaScript语法提供的一些限制。

是一个编译器

Svelte不仅是另一个JavaScript框架,还是一个编译器,不需要将整个运行时系统加载到客户端,除了大幅度提升性能之外还有许多优点,这些就是使Svelte与众不同的原因。

原因之一是Svelte不使用虚拟DOM(vDOM):Svelte不依赖vDOM和DOM之间的差异来更新DOM。其他提到的框架,例如React,Vue和Angular (编辑:Angular使用增量DOM)确实使用vDOM。您可以在Sveltes博客文章中找到有关此问题的详细信息。虚拟DOM纯属开销

Svelte是一个编译器,在构建时就知道应用程序中的情况可能会发生什么变化,而不是在运行时等待完成工作。

 

融入微前端架构

Svelte是微前端MFE架构的绝佳选择。MFE基本的概念是,不同的团队可以分别开发前端的不同部分。团队还可以选择他们要使用的技术堆栈。因此,客户端可能最终加载了不同版本的Angular,Vue,React等:某些微型前端实现可能导致依赖关系重复,从而增加了用户必须下载的字节数。

Svelte(也使用它的不同版本)不会带来增加客户端必须加载的字节数量的不利影响。

 

很棒的REPL

Svelte有一个很棒的REPL。您可以毫不费力地开始玩耍并尝试一些事情。这太棒了!试试看

 

内建功能

Svelte内置了一些功能,无论如何,您几乎都需要在任何应用程序中(至少是较大的应用程序)。

首先,无需其他依赖项或各种选择之间的决定。

import { writable } from 'svelte/store';

export const count = writable(0);

export const increment = () => {
    count.update(n => n + 1);
}

就是这样。您可以导入count并increment遍历您的应用程序。简单的!

 

工具集合SvelteKit

SvelteKit完全采用无服务器范例,并将在所有主要无服务器提供商的支持下启动,其“适配器” API可以针对我们不正式迎合的任何平台。

在撰写本文时,该SvelteKit目前处于测试阶段。

 

猜你喜欢