立即领取|华润集团、宁德核电、东风岚图等 20+ 标杆企业数字化人才培养实践案例 了解详情
写点什么

InfoQ 访谈:前端框架 Svelte 3 将反应性移入 JavaScript 语言

  • 2019-05-18
  • 本文字数:3386 字

    阅读完需:约 11 分钟

InfoQ访谈:前端框架Svelte 3将反应性移入JavaScript语言

Svelte 前端框架最近发布了Svelte 3。Svelte 3 引入了一种新的方法来声明式地表示用户界面实现中涉及的不变量连接实体。因此,开发人员可能不再需要出于性能的考虑而手动处理重新渲染,或者手动同步相关的状态片段。Svelte 3 有新的 Logo、口号和网站。Sapper(基于 Svelte 类似 Next.js 的应用程序框架) 和Svelte Native(面向移动应用程序开发)正在升级到 Svelte 3。InfoQ 采访了 Svelte 的创建者 Rich Harris,并讨论了 Svelte 3 的意义及其对开发人员的影响。


Svelte 3 是 Svelte 前端框架最新的主要迭代。Rich Harris介绍了 Svelte 3 的目标:


版本 3 是一个重大的变革。在过去的 5 到 6 个月中,我们一直致力于提供出色的开发体验。现在,你编写组件*所需的样本代码比其他框架都要少很多了


该版本的核心是一种新的语法,用于声明式地表示渲染过程中涉及的变量之间的永久关系。Svelte 3 的文档区分了三种情况:反应性赋值、反应性声明和反应性语句。


为了举例说明反应性赋值,Harris 使用 Svelte 和其他前端框架给出了一个计数器递增的简单例子:


// 使用Svelteconst { count } = this.get();this.set({  count: count + 1});
// 使用Reactconst { count } = this.state;this.setState({ count: count + 1});
// 使用Vue(...)data: () => ({count: 0}),(...)this.count += 1;
复制代码


在这些示例中,开发人员需要捕获或发出嵌入式框架状态更改的信号,以便触发相关的计算和效果。使用 Svelte 3,开发人员只需给变量赋值:


count += 1;
复制代码


Svelte 会在构建时生成相应的同步代码:


count += 1; $$invalidate('count', count);
复制代码


反应性声明处理各种变量之间的关系。使用 Svelte 3,开发人员现在可以将变量之间的关系编写为一个等式,使用 Svelte 编译器确保等式右侧变量的更改反映在左侧变量中,就像电子表格中一样。在下面的例子中:


<script>  let count = 1;
// 符号`$:`的意思是指当这些值变化时就重新运行 $: doubled = count * 2; $: quadrupled = doubled * 2;
function handleClick() { count += 1; }</script>
<button on:click={handleClick}> Count: {count}</button>
<p>{count} * 2 = {doubled}</p><p>{doubled} * 2 = {quadrupled}</p>
复制代码


语法 $:double = count * 2;引入了一个将变量 doubled 与变量 count 连接起来的等式。在这里,Svelte 编译器将生成代码,在 count 更新时更新 doubled:


  let doubled, quadrupled;  $$self.$$.update = ($$dirty = { count: 1, doubled: 1 }) => {    if ($$dirty.count) { $$invalidate('doubled', doubled = count * 2); }    if ($$dirty.doubled) { $$invalidate('quadrupled', quadrupled = doubled * 2); }  };
复制代码


反应性语句是指每次因变量发生变化时都要进行求值的语句。它们还使用 $语法:


<script>  let count = 0;
$: if (count >= 10) { alert(`count is dangerously high!`); count = 9; }
function handleClick() { count += 1; }</script>
<button on:click={handleClick}> Clicked {count} {count === 1 ? 'time' : 'times'}</button>
复制代码


框架会把它编译成如下代码:


  $$self.$$.update = ($$dirty = { count: 1 }) => {    if ($$dirty.count) { if (count >= 10) {        alert(`count is dangerously high!`);        $$invalidate('count', count = 9);      } }  };
复制代码


InfoQ 采访了 Svelte 的创建者 Rich Harris,并讨论了 Svelte 3 背后的动机及其对开发人员的影响。


InfoQ:请给我们介绍下 Svelte 的历史。您是《卫报》使用的另一个基于模板的前端框架 Ractive 的创建者,您为什么还要创建 Svelte?


Rich Harris:Ractive 是 2012-13 年产生的 UI 框架的一种,是那个时代的产物。它功能强大且直观,但与其他同类产品一样,它需要在运行时解释声明式组件代码,这将带来一定的损失。与直接手工编写代码来操作 DOM 相比,你需要使用更大的 JS 包,而且性能更差。

到 2016 年,一切都变了。移动设备,而不是桌面设备,突然占据了大部分流量,这使得包的大小和性能变得更加重要。多亏了 Babel 和 TypeScript 这样的项目,JS 社区重新适应了编译器和构建步骤,所以我就开始想,一个理解声明式组件的编译器能否将它们转换成高度优化的指令代码。到目前为止,我已经花了几年时间考虑 UI 框架设计,并且构建了一个模块打包器(Rollup)和一个编译器(Buble),所以我觉得自己有很好的条件来做尝试。


InfoQ:Svelte 3 引入了一个新的语法来解决一个组件内的同步问题。那么组件间的同步/通信呢?假设两个组件读写一个共享的状态片段,或者两个组件必须通信。您如何使用 Svelte 处理可能的同步问题?


Harris: Svelte 有一个名为 store 的原语,它与内置的反应系统一起工作。它是一个非常简单的契约——包中有一个引用实现,但是你也可以封装其他库,比如 Redux 或 xstate——可以任意组合。我们还对 TC39 提出的可观察性规范(由 RxJS 之类的库实现)提供了原生支持,因为它们恰好符合 Svelte store 契约。


InfoQ:是否有可能将一个 Svelte 的组件打包到一个可以在其他框架中使用的 Web 组件中?反过来,在 Svelte 中使用 Web 组件有多容易?


Harris: 编译器的一个好处是可以从相同的组件代码生成不同的输出。生成 Web 组件只需设置一个编译器选项。使用 Web 组件同样简单——Svelte 在Custom Elements Everywhere测试套件上的得分为 30/30。


InfoQ:如果 Svelte 可以编译成 Web 组件,这是否意味着开发人员可以在他们的代码库中逐步引入 Svelte?这可行吗(与现有代码可能存在任何冲突吗,如冲突标记、捆绑问题等等)?


Harris: 是的,Svelte 的设计考虑到了增量采用。自定义元素是实现这一点的一种方便的方法,只要你带来了合适的 polyfill。不过,这取决于“主”框架——例如,React 对自定义元素的支持很差,所以在迁移期间,最好使用一个 React 封装器来封装 Svelte 组件(比如react - svelte)。


InfoQ:开发人员怎么用 Svelte 处理嵌套路由?


Harris: 最简单的方法是使用 Sapper,这是一个构建在 Svelte 组件框架之上的应用程序框架。Sapper 基于应用的文件夹结构为你提供了一个完整的声明式嵌套路由系统,类似于 Next.js,但有许多重要的增强。

对于喜欢基于组件或配置路由的开发人员,有几个社区维护的项目可以供他们选择。


InfoQ:如何测试一个 Svelte 应用程序?


Harris:默认的 Sapper 模板内置了 Cypress 集成。对于单个组件测试,我经常使用 Puppeteer。我们还在研究最常用的测试故事,应该很快就可以拿出来分享了。


InfoQ:请您给出三个采用 Svelte 的理由?


Harris: 首先,你将编写更少的代码,这是加速软件构建和减少 Bug 的最可靠的方法。其次,与主流框架相比,你可以获得更好的性能保证,这意味着,随着应用的增长,或者随着你扩展到设备速度较慢和连接普遍存在的新市场,你不必停下来重写。

第三,Svelte 有许多传统框架认为超出范围的特性。这是因为——作为一个编译器——Svelte 只需要包含你实际使用的特性,而为其他人节省字节。这意味着我们可以自由地包含其他框架团队认为是浪费的东西,比如声明式转换和动画。


InfoQ:三个不使用 Svelte 的理由?


Harris:我们还没有像更成熟的框架那样丰富的编辑器集成和开发工具。我们还没有一流的 TypeScript 支持。我们不属于财大气粗的公司——我们只是一群真正的信徒。


InfoQ:Svelte 下一步有什么计划?


Harris: 呼声最高的特性是 TypeScript 支持,所以我们希望尽快在这方面取得进展。我个人对使用 Svelte 来构建 WebGL 应用程序感到很兴奋,并且我还处于早期的探索阶段。最后,还有一个名为 Svelte Native 的社区项目,它允许你使用 Svelte(由 NativeScript 提供支持)构建 Android 和 iOS 应用程序,并且正在取得一些令人难以置信的进展。


InfoQ:您能举几个使用 Svelte 的公司的例子吗?


Harris: 和其他几家新闻机构一样,我工作的《纽约时报》也将其用于许多项目。我们的网站在主页上还有很多其他的例子——也许最有趣的是,巴西的 Stone 和俄罗斯的 Mustlab 正在使用 Svelte 来驱动嵌入式设备,比如贩卖机系统和智能电视应用。越来越多的前端开发正在转向嵌入式 Web,这些公司意识到,传统的 JavaScript 优先框架不能满足这种环境的需求。


查看英文原文Svelte 3 Front-End Framework Moves Reactivity Into the JavaScript Language, Q&A With Rich Harris


2019-05-18 08:009429
用户头像

发布了 724 篇内容, 共 462.2 次阅读, 收获喜欢 1539 次。

关注

评论

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

tidb变更大小写敏感问题的总结

TiDB 社区干货传送门

集群管理 故障排查/诊断

v7.1.0 Resource Control 功能测试

TiDB 社区干货传送门

新版本/特性解读 7.x 实践

微服务高并发概念与核心类:了解Sentinel的一些概念

互联网架构师小马

Java 微服务 sentinel

Vue-<router-link>的replace属性

张三丰无极

6 月 优质更文活动

MIAOYUN“一云多芯”解决方案获评2023西部信创优秀解决方案

MIAOYUN

解决方案 信创 信创生态 MIAOYUN 一云多芯

北京云管平台采购选哪家?为什么?多少钱?

行云管家

云计算 多云管理 云管平台 云管平台厂商

如何在VMware Workstation虚拟机上快速部署AntDB社区版

亚信AntDB数据库

数据库 AntDB数据库 企业号 6 月 PK 榜

Testng和Junit5多线程并发测试对比

javalover123

Java 单元测试 JUnit testNG junit5

洋洋洒洒2000字带你了解微服务高并发知识:Sentinel的特性

互联网架构师小马

Java 微服务 sentinel

微服务高并发基础知识:Sentinel性能压测

互联网架构师小马

Java 微服务 sentinel

Vue-路由的props配置

张三丰无极

6 月 优质更文活动

分布式数据库 Join 查询设计与实现浅析 | 京东云技术团队

京东科技开发者

MySQL 数据库 elasticsearch join 企业号 6 月 PK 榜

微服务架构中的数据一致性:解决方案与实践| 得物技术

得物技术

微服务 数据一致性

图数据库在通信行业有哪些应用?

悦数图数据库

【TiDB Future App Hackathon 2023 】TiDB 首届全球黑客马拉松,开发者的狂欢夏日盛会!快来一起 Coding 吧!

TiDB 社区干货传送门

v7.1 LTS Resource Control 试用

TiDB 社区干货传送门

新版本/特性解读 7.x 实践

见“芯”知著,浅析北斗芯片关键技术

江湖老铁

2023年甘肃省等级保护测评机构新鲜出炉!

行云管家

等保 等级保护 甘肃

# 文盘Rust -- tokio绑定cpu实践

TiDB 社区干货传送门

开发语言

终极指南:Scrum中如何设置需求优先级

敏捷开发

项目管理 Scrum 敏捷开发 优先级

Vue-路由的params参数

张三丰无极

6 月 优质更文活动

为什么 Serverless 能提升资源利用率?

阿里巴巴云原生

阿里云 Serverless 云原生

专访泛境科技:如何借助3DCAT实时云渲染打造元宇宙解决方案

3DCAT实时渲染

元宇宙 元宇宙解决方案 元宇宙实时云渲染

FinClip | 来看看5月的成绩单吧

FinClip

提示工程七巧板:让ChatGPT发挥出最佳性能

博文视点Broadview

Vue-命名路由

张三丰无极

6 月 优质更文活动

MobPush 消息重弹

MobTech袤博科技

5分钟了解Kubernetes Ingress和Gateway API

俞凡

架构 云原生 网络

微服务高并发流量服务降级、限流、熔断、流量效果控制

互联网架构师小马

Java 微服务

普通Java工程师如何成长为一名优秀的架构师?

程序员小毕

程序人生 高并发 架构师 java程序员 java面试

Vue-缓存路由组件

张三丰无极

6 月 优质更文活动

InfoQ访谈:前端框架Svelte 3将反应性移入JavaScript语言_大前端_Bruno Couriol_InfoQ精选文章