未来已来|人工智能与数据库融合发展分论坛议程初探 了解详情
写点什么

Svelte 5 引入 Runes 解决反应式 Web 编程的问题

作者:Bruno Couriol

  • 2023-10-26
    北京
  • 本文字数:1760 字

    阅读完需:约 6 分钟

大小:853.08K时长:04:51
Svelte 5引入Runes解决反应式Web编程的问题

在名为“Runes简介”的博客文章中,Svelte 团队展示了在 web 应用中表述反应式依赖的新语法。这种额外的语法可以提高复杂 web 应用的可维护性,进一步推进 Svelte 的企业级就绪度。


Svelte 即将推出的 runes 能够让开发人员将反应式逻辑分解并封装为标准的 JavaScript 函数,这些函数能够在整个代码库中重复使用。


在 Svelte 3 中,反应式依赖是通过.svelte文件在组件级别描述的。组件会封装一些在组件外部不可见的反应式依赖(let var语法),或者明确声明外部的反应式依赖(export let var),客户端组件可以通过Svelte的props语法使用这些依赖。对于那些既不属于本地组件,又不方面在组件接口中公开的反应式依赖,开发人员可以导入Svelte存储


Svelte 的单文件组件强烈建议开发人员将组件的三个关注点(样式、内容和行为)放到一个文件中。当这三个关注点密切相关时(比如,一起出现、变更或消失),将它们放置在一起就是非常有意义的。因此,将组件特有的样式或行为放到组件标记定义的地方(内聚原则),会使其受益匪浅。另一方面,把松散依赖于特定组件的样式或行为放在一起可能会产生可维护性问题或缺陷(如重复/过时/已消亡/缺失的代码)。理想情况下,Svelte 存储只关注单一内聚行为。


Svelte 存储包含在一个标准 JavaScript 文件中,与 RxJS 的 observable 类似,它们至少暴露了一个.subscribe接口,调用者可以通过该接口对存储中的值做出反应。存储与应用程序的组件架构解耦之后,就可以独立演进,只需保证接口不变即可。反之,客户端的变化也不必导致存储的变化。


Svelte runes 将为 Svelte 存储提供另一种语法。Svelte 团队认为,runes 是一种更好的替代方案:


现实情况是,随着应用程序复杂性的增长,确定哪些值是反应式的,哪些值是非反应式的将会变得很棘手。[......]如果代码在.svelte文件中表现为一种方式,而在.js中又表现为另一种方式,那么代码的重构就会变得非常困难。例如,如果你需要将某些内容转化到存储中,以便于在多个地方使用它。


[......] 我们发现,当开始实现复杂的事情时,存储 API 可能会变得相当笨重。此外,团队还观察到:


[......]如果超过一定的复杂度,要理解 Svelte 选择何时更新哪些值所带来的复杂性会非常难以处理。提议的 API 依赖于新的$state$derived$effect原语:


<script>    let { width, height } = $props(); // instead of `export let`
const area = $derived(width * height);
$effect(() => { console.log(area); });</script>
复制代码


除了.svelte文件之外,这三个原语均可以在.js.ts文件中使用。让开发人员通过更加重量级的语法来明确声明反应式依赖,这样能够避免遗漏或误解这些依赖关系。它还能对编译器进行一系列优化,从而加快应用程序的运行速度。Svelte 团队认为:


Signals 能够解锁细粒度的反应性,这意味着(举例来说)在一个较大列表中,某个值的变化不需要让列表中的其他成员失效。因此,Svelte 5 的速度会超乎寻常得快。


开发人员的早期反应褒贬不一。一位持有怀疑态度的开发人员在 Reddit 上写道:


难以言表!尽管我完全明白它能解决什么问题,但是它给人的感觉并不像我之前喜欢的 Svelte。以前,Svelte 与 vanilla JS 非常接近。


constletexport这样的保留字是有意使用的。即便是像onMount这样的内容,对生命周期稍有了解的人都能轻松理解并使用。甚至在整个 Svelte 中我最喜欢的$:也会消失。我希望它能够提供可选择性,而不是成为编写 Svelte 的唯一方式。


一位 Vue 开发人员则对新语法丝毫没有感到陌生


作为在 Svelte 网站上工作过几周的 Vue 开发人员,我对 runes 感觉很熟悉,我喜欢将反应式依赖暴露出来的想法,这样就可以在 js/ts 文件中重用组件逻辑或创建存储。


另一位开发人员总结了新语法的一些重要优点,如下所示:


这确实带来了我一直翘首以盼的两项改进(类型化的 props 以及在组件之外编写反应式代码的更佳方法)。


此外,Filip Tangen还撰写了一篇关于Svelte 5的详细评论,其中考虑到了优势和不足,并提出了一种新的方言(代号为 Pelte)。


Svelte 5 仍处于早期阶段。Svelte 团队警告说:


你还不能在生产环境中使用 Svelte 5。我们目前还处于研发阶段,无法告知何时可以在应用程序中使用它。不过,开发人员可以访问一个预览网站,上面有新功能的详细说明和互动式的练习场所。


原文链接:

Rethinking 'Rethinking Reactivity' - Svelte 5 Introduces Runes

2023-10-26 10:574431

评论

发布
暂无评论
发现更多内容

六大商用场景:云游戏赚钱方法论

青椒云云电脑

云游戏

5G时代超级玩家云游戏 技术是否为最大阻碍

青椒云云电脑

云厂商 云游戏

AITO问界新M7系列发布,全款问界车型已支持空间音频体验

最新动态

Zebec 生态 AMA 回顾:Nautilus 以及 $ZBC 的未来

BlockChain先知

ArrayList源码解析

前行

#java #源码分析

自动化办公更简单了!新版python-office,有哪些更新?

程序员晚枫

Python

iOS技术博主指南:填写苹果应用上架中的隐私政策信息

雪奈椰子

Zebec 生态 AMA 回顾:Nautilus 以及 $ZBC 的未来

股市老人

dapp技术开发团队 dapp开发

V\TG【ch3nguang】

蓝易云:Linux 修改系统时间的两种方式?

百度搜索:蓝易云

云计算 Linux 运维 Date 云服务器

与 Dave 和 Ruba 一起探讨亚马逊云科技 2023 芯片创新日

亚马逊云科技 (Amazon Web Services)

人工智能 机器学习 量子计算 亚马逊云科技

5G时代还在用传统PC?云电脑了解一下

青椒云云电脑

桌面云 云桌面 云桌面厂家

Mobpush与A/B测试:覆盖多应用场景下的精细化运营神器

MobTech袤博科技

一文读懂云公有、私有云、混合云的区别

青椒云云电脑

云桌面 云桌面厂家 云桌面方案

DAPP系统开发需要多久?DAPP系统开发功能介绍

V\TG【ch3nguang】

springboot+jxls复杂excel模板导出

源字节1号

开源 软件开发 前端开发 后端开发 小程序开发

Zebec 生态 AMA 回顾:Nautilus 以及 $ZBC 的未来

EOSdreamer111

数据通信网络之IPv6以太网二层交换

timerring

数据通信网络

自动驾驶点云标注技术的现状与未来发展

来自四九城儿

蓝易云:【Linux】磁盘分区和挂载详细教程!

百度搜索:蓝易云

云计算 Linux 运维 服务器 云服务器

自动驾驶点云标注的挑战与解决方案

来自四九城儿

基于点云标注的自动驾驶系统的安全性与可靠性

来自四九城儿

一文说清云桌面:设计师的秘密武器

青椒云云电脑

桌面云 云桌面

Zebec 生态 AMA 回顾:Nautilus 以及 $ZBC 的未来

石头财经

ARTS 打卡第 4周: BaseCamp团队是如何做产品的

前行

#ARTS #ArrayList

内外统一的边缘原生云基础设施架构——火山引擎边缘云

火山引擎边缘云

云原生 边缘计算 边缘云

Svelte 5引入Runes解决反应式Web编程的问题_架构/框架_InfoQ精选文章