报名参加CloudWeGo黑客松,奖金直推双丰收! 了解详情
写点什么

新的 Signals 提案旨在将 JavaScript 中的响应式编程原语形式化

Bruno Couriol

  • 2024-07-09
    北京
  • 本文字数:2190 字

    阅读完需:约 7 分钟

大小:970.78K时长:05:31
新的 Signals 提案旨在将 JavaScript 中的响应式编程原语形式化

JavaScript 语言最近将 Signals 提案(目前处于第一阶段)添加到了致力于改进该语言的候选特性列表中。Signals 提案旨在为框架维护人员提供通用原语,以实现响应式编程模式。该提案深度反映了 Angular、Bubble、 Ember、FAST、MobX、Preact、Qwik、RxJS、Solid、Starbeam、Svelte、Vue、Wiz 等的作者 / 维护者的意见。


响应式应用程序本质上需要:一个与外部系统交互的接口,用于接收输入事件和发送操作动作;计算对输入事件的响应;以及将相应的操作动作发送到匹配的外部系统(例如,屏幕显示、远程数据库)。对于函数式 UI 方法(例如 Elm),响应计算依赖于纯函数(称为响应式函数),例如这样(actions_n, state_n+1) = f(state_n, event_n)的函数,其中:


  • n 为响应式系统处理的第 n 个事件,

  • state_n 是处理第 n 个事件时响应式系统的状态。


许多用于实现用户界面的框架(如 Angular2、Vue、React 等)更倾向于使用回调过程或事件处理程序,它们作为事件的结果,直接执行相应的响应。决定要执行哪些操作动作(无论是输入验证、局部状态更新、错误处理还是数据获取)通常意味着需要访问和更新一些并不总是在作用域内的状态。因此,框架会包括一些状态管理、依赖注入或通信能力,以在需要时处理状态传递,并在允许和必要时更新状态。


近年来,一种越来越流行的替代方法是,在方便和可能的情况下,声明输入事件与状态块之间的关系(例如,按钮单击 ->增加°C)、状态块本身之间的关系(例如, °F=°C*9/5+32 )以及状态与响应之间的关系(例如,°C 变化 ->更新屏幕上的仪表颜色)。这些声明是一次性生成并永久生效的,从而消除了开发人员因更新变量依赖项而忘记更新变量本身的一系列缺陷。


因此,一些 UI 框架要求开发人员使用特定的原语和语法(Svelte 中的 $ ;Vue 中的 refreactivecomputed )来声明这些关系。除了不同的语法之外,这种框架还可能采用不同的方式来实现响应性,并且可能存在轻微的语义差异。诚然,该提案针对的是框架维护人员及其方法的互操作性:


与 Promises/A+ 不同的是,我们并不是在试图为面向开发人员的通用表层 API 寻找解决方案,而是在解决底层信号图的精确核心语义。[,] 这里的信号 API 更适合在框架之上构建,通过公共的信号图和自动跟踪机制提供互操作性。


该提案的计划是在进入第一阶段之前进行重要的早期原型设计,包括集成到多个框架中。只有当信号在实践中适合用于多个框架,并且相比框架自身所提供的信号,它能提供真正的好处时,我们才会对标准化信号感兴趣。该提案提供了一个实现计数器的简单示例:


const counter = new Signal.State(0);const isEven = new Signal.Computed(() => (counter.get() & 1) == 0);const parity = new Signal.Computed(() => isEven.get() ? "even" : "odd");// 基于其他信号原语,库或框架定义的 effect 函数declare function effect(cb: () => void): (() => void);effect(() => element.innerText = parity.get());// 模拟外部更新来计数......setInterval(() => counter.set(counter.get() + 1), 1000);
复制代码


这个示例展示了声明独立的状态块( Signal.state )、绑定到它们的依赖项的状态块( Signal.computed )的语法,以及库维护人员如何利用信号原语将操作动作的执行与状态的更改联系起来( effect(…) )。


该提案包含了一个具有自动依赖项跟踪、惰性计算和记忆化备忘的实现。自动依赖项跟踪为开发人员工提供了更好的工效学(与手动提供依赖项相比——参见 React 的 useMemo)。懒惰计算和记忆化备忘可以防止不必要且不合时宜的计算,从而改善了 API 的性能。


该提案在 Reddit 上引发了有趣的讨论,其中一位开发者反思道:


这里可能确实存在 https://xkcd.com/927/ 的情况。但我认为所有的大框架都应该参与标准的创建,这一点非常重要。因此,这是从一大堆能解决信号所解决问题的方法开始的,而最终只会采用一种方法(框架在此基础上构建满足其特定需求)。


[…] 在浏览器中,这意味着它可能会更高效、更具内存效率,即使只是微小的改进(在这种规模下,微小的改进也会产生显著的影响)。


对于 ECMAScript 中应该包含什么以及不应该包含什么,基本上有两种基础的观点。[一个阵营] 认为应该只添加 / 包含基本内容,开发人员应该重新发明自己的轮子(或者使用一些 JS 库)。另一个阵营则认为,JS 应该为常见问题提供 API,并欢迎这样的标准,而 Object.groupBy() 则优于 lodash……依赖关系更少,需要交付的代码更少,对于“好吧,与我熟悉的库相比,这个库是如何解决问题的?”带来的挫败感也更少。


欢迎感兴趣的读者在线阅读完整的提案。GitHub 存储库包含了大量的解释和代码示例,用于阐明提案的目标、语法和语义。


响应式编程通过提供抽象来表达时变值(time-varying values)并自动管理这些值之间的依赖关系,从而促进了事件驱动的响应式应用程序的开发。人们提出了许多跨各种语言(如 Haskell、Scheme、JavaScript、Java、.NET 等)的方法。响应式编程与 JavaScript 特别相关——JavaScript 是用于 Web 应用程序的原生浏览器语言之一。


 作者介绍


Bruno Couriol 拥有电信理学硕士、数学理学士学位。他从 30 年前写了第一个程序开始至今还一直在编写软件。主要帮助企业和非营利组织开发满足用户需求的软件。


原文链接:


https://www.infoq.com/news/2024/06/javascript-signals-proposal/


声明:本文由 InfoQ 翻译,未经许可禁止转载。

2024-07-09 10:543592

评论

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

概念有时候很坑

伯薇

抽象 思考力 沟通 概念

由丰巢快递柜引发的思考

Neco.W

创业 思考 丰巢

视达荣登ChinaBang Awards 2020智慧零售榜Top10

极客编

聊聊Serverless

kimmking

可视化 Tekton 组件 Tekton Dashboard

郭旭东

Kubernetes cicd

GrowingIO 微服务 SaaS 与私有部署运行实践

GrowingIO技术专栏

大数据 微服务 SaaS

如何推动与影响中型前端团队的成长

堂主

研发管理 大前端 团队建设

多个 SSH keys 的配置,方便 Git 对不同仓库的使用与管理

与光

git GitHub SSH

CDN百科 | 最近,你的APP崩了吗?

阿里云Edge Plus

CDN

并发编程如何才能不再头疼:iOS中的协程

超越杨超越

ios 协程 coobjc ucontext

奔向 10W+ 的第一次 update

赵新龙

InfoQ B站 Quora

用测试驱动开发学算法

escray

学习 CSD 认证实战营

抄作业

escray

学习 CSD 认证实战营

Java 编程基础

michaelliu

游戏夜读 | 如何优化缓冲加载?

game1night

谈谈控制感(2):怎么让我们更健康

史方远

个人成长 心理

《Linux就该这么学》笔记(二)

编程随想曲

Linux

CDN云课堂 |可编程CDN – EdgeScript应用场景、语言速览和实操演示

阿里云Edge Plus

Kafka系列第6篇:消息是如何在服务端存储与读取的,你真的知道吗?

z小赵

Java 大数据 kafka 实时计算

一文看懂开源工作流引擎 Flowable

八味阁

Java spring 开源 企业中台 工作流

CDN云课堂 | EdgeRoutine技术专家教你把JS代码跑到CDN边缘

阿里云Edge Plus

Java CDN edge

一杯茶的时间,上手 Git 团队协作开发

图雀社区

git GitHub

DD 测试linux性能

HU

KubeFATE:在Kubernetes上部署联邦学习平台

亨利笔记

人工智能 学习 FATE KUBEFATE

TOTO 2020再次荣获iF、红点两项国际设计大奖

极客编

想退休,可能没机会了

池建强

读书感悟

读懂才会用 : 瞅瞅Redis的epoll模型

小眼睛聊技术

redis 缓存 学习 开源 架构 后端

我站在愚蠢之巅

escray

学习 CSD 认证实战营

MySQL数据类型DECIMAL用法

Simon

MySQL

CDN百科 | 假如没有CDN,网络世界会变成什么样?

阿里云Edge Plus

用SpreadJS实现在线Excel的录入与展示,提升企业医保信息化服务水平

葡萄城技术团队

SpreadJS 医保信息化 在线excel

新的 Signals 提案旨在将 JavaScript 中的响应式编程原语形式化_后端_InfoQ精选文章