写点什么

Svelte 使用心得:在个人项目中表现不错,但在大型企业项目中仍有待观察

作者:Ty Hopp

  • 2023-08-30
    北京
  • 本文字数:2744 字

    阅读完需:约 9 分钟

Svelte使用心得:在个人项目中表现不错,但在大型企业项目中仍有待观察

AI 大模型超全落地场景&金融应用实践,8 月 16 - 19 日 FCon x AICon 大会联诀来袭、干货翻倍!

作者用了 1 个月时间开发了一款个人 RSS 阅读器,并选择了 Svelte 和 SvelteKit 作为 Web 客户端的工具。这个选择的主要目的是为了评估这些工具是否适合在大型项目中使用。作者发文分享了对于 Svelte 的一些思考,这篇文章引起了 Hacker News 上读者的关注,并且被顶到了首页。fenomas 和 illilarian 这两位用户谈到了他们对于过渡和动画 API 的看法。如果需要在 Svelte 管理的元素进入和离开 DOM 时对其进行动画处理,那么作者“吐槽”的这些 API 就非常有用。看来作者之前的抱怨不成立了。如果是你,你会把 Svelte 用到大型公开项目中吗?

 

以下是这篇“吐槽”原文,由 InfoQ 翻译。

 


 

过去一个月来,我开发了一款个人 RSS 阅读器。

 

在 Web 客户端这边,我选的是 Svelte 和 SvelteKit,主要是为了评估这些工具适不适合在大型项目里使用。

 

下面跟大家聊聊我自己对于 Svelte 的一点思考。

 

开篇总结

 

总的来说,我挺喜欢 Svelte 的使用体验。它的亮点在组件格式、内置 store 和事件调度程度 API。

短板主要是响应式语句($)、await 块和内置的过渡与动画 API。

 

组件格式

 

Svelte 的组件格式最得我心。在编写.svelte 文件时,默认上下文跟浏览器是完全相同的,都是用 HTML。

 

以下片段来自 Svelte 文档(包括示例标记、JS 和 CSS),应该可以说明问题:

 

<script>  // logic goes here  function add(a, b) {    return a + b;  }</script><!-- markup (zero or more items) goes here --><p>1 + 2 is: {add(1, 2)}</p><style>  /* styles go here */  p {    color: blue;  }</style>
复制代码


再来跟 React 对比一下,这里的默认上下文是 JavaScript,而 HTML 要通过 JSX 进行交错:


import '../some-styles.css'; // styles are imported into JS filesexport function SomeComponent() {  // logic can go anywhere  function add(a, b) {    return a + b;  }  // markup is returned from JS functions  return <p className="some-class">{`1 + 2 is: ${add(1, 2)}`}</p>;}
复制代码


我没法斩钉截铁地告诉大家,这种方式就一定更好,比如“Svelte 的组件格式能让团队在构建组件时,比某某框架快多少倍。”这个我确实不敢说。

 

但我觉得组件格式确实是很多朋友喜爱 Svelte 的原因。这可能是因为浏览器也优先使用 HTML,所以用 Svelte 的话上下文切换较少,但我不确定是不是这样。总之,我个人非常喜欢。

 

内置 store

 

Svelte 为状态管理提供内置的 store 选项。

 

其实大家对于用户界面库/框架应该关注什么、没必要关注还有争议。而 Svelte 聪明的地方,就在于它承认状态管理可能会成为问题,而且提供了相应的解决方案。大家可以根据需要使用或者扩展。

 

更贴心的是,这个解决方案不像 React 上下文那样跟组件树紧密相关。


事件调度程序 API

 

Svelte 提供一个内置 API 可用于创建、分派和在父元素上侦听 CustomEvent。

 

在基于单向数据流概念构建的系统中,其实很难为 Web 事件建模。从本质上讲,Web 的事件模型会让数据向上流动。

 

Svelte 承认用户可能需要向树结构的上方发送数据,并提供一个使用 Web 平台原语的 API。我必须给它点个赞!


响应式语句


我发现 Svelte 的响应式语句有点让人摸不着头脑。

 

Svelte 的基本响应基于变量分配。通过文档中的以下示例,我已经弄明白了:

 

<script>  let count = 0;  function handleClick() {    // calling this function will trigger an    // update if the markup references `count`    count = count + 1;  }</script>
复制代码

 

这个很合理。

 

但接下来在引入响应式 $标签时,文档给出了以下示例:

 

<script>  export let title;  export let person;  // this will update `document.title` whenever  // the `title` prop changes  $: document.title = title;  $: {    console.log(`multiple statements can be combined`);    console.log(`the current title is ${title}`);  }  // this will update `name` when 'person' changes  $: ({ name } = person);  // don't do this. it will run before the previous line  let name2 = name;</script>
复制代码


考虑到这是文档里关于该主题的第一个示例,似乎显得太复杂了。但只要认真看下来,还是能理解其中逻辑的。

 

但 Svelte 文档又提到:


请务必注意,响应块在统计时会通过简单的静态分析进行排序,所有编译器查看的都是分配给块本身、并在块内部使用的变量,而不在它们调用的任何函数当中。这意味着以下示例中,yDependent 不会随着 x 的更新而一同更新:


<script>  let x = 0;  let y = 0;  const setY = (value) => {    y = value;  };  $: yDependent = y;  $: setY(x);</script>
复制代码

 

这种“玄学”般的设计,让我在很多情况下都想不明白为什么组件无法更新。

 

最终我发现,确实很难明确认定 $ 标签是否起效。有时候我用起来一切正常,但有时候用起来就没有效果,非常诡异。

 

所以我决定离它远点。另一个类似的问题是访问 store 值,它跟 $ 的情况差不多,时灵时不灵。

 

正是 $ 标签阻止了我在大型项目中使用 Svelte。这是 Svelte 的核心部分,不可能彻底回避,而且我觉得由此引发错误的可能性很高、而且影响范围很大。


Await 块

 

Svelte 提供{#if ...} 和 {#each ...} 语法作为标记渲染的主要控制流方法。它还提供{#await ...},可以根据 Promise 的状态来决定渲染什么。

 

我喜欢这个设计思路,但在实践中总是以重构告终。在 Promise 被解决或拒绝之后,我总得再调整一下才能开始渲染,所以我可不打算每次运行服务时都用它。

 

而且该逻辑也不属于渲染代码中的内联。那它到底是怎么工作的?

 

把{#await ...}剔出来并放进<script>逻辑当中,之后在渲染时使用局部变量。

 

我觉得 Svelte 把{#await ...} 保留在核心中倒不是坏事,只是很遗憾文档中那种优雅的用例根本就没法稳定实现。

 

过渡和动画 API

 

我对 Svelte 的过渡和动画 API 最大的不满,在于它们应该由 CSS 负责,怎么成 Svelte 的事情了呢?

 

Svelte 提供一种优雅的方式,可以在带有<style> 标签的组件中使用 CSS。那么,为什么不在 CSS 中实现过渡和动画?

 

也许我只是没有找到真正能用上这些 API 的用例,确实。但在找到合适的用例之前,我两袖清风是要质疑为什么非得把这些复杂的 API 塞进 Svelte 核心。


总结

 

好了,这就是我结合实际使用整理的 Svelte 体会!

 

我愿意在之后的个人项目里继续用它,但身为架构师,我可能不会把它用在公司的大型项目当中。

 

我对 SvelteKit 也有一些不满,但在构建了 SPA 之后也就没什么话说了,毕竟 SvelteKit 似乎主要关注服务器端渲染。

 

大家回见!

 

原文链接:

https://tyhopp.com/notes/thoughts-on-svelte

 

相关阅读:

Vue 3 不是最佳选择? 耗时两周从 Vue 2 迁移到 Svelte 后:代码执行更快、体验更佳

Svelte 框架结合 SpreadJS 实现表格协同文档

创建Svelte Web组件

用 Svelte 实现响应式、反应式的动画数据可视化

2023-08-30 08:003083

评论

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

语音平台源码搭建开发之表情功能的实现

山东布谷科技

软件开发 语音 直播 源码搭建 语音厅平台搭建

谁能真正替代你?AI辅助编码工具深度对比(chatGPT/Copilot/Cursor/New Bing)

快乐非自愿限量之名

工具 ChatGPT AI赋能 AI工具

直播预告 | 博睿学院:海量数据实时可信认证

博睿数据

智能运维 博睿数据 数据要素 博睿学院

数智化的核心在于构建底座,看这家数科公司如何与传统厂商双赢双生

用友BIP

数智底座 数科公司

7.12下午两点开启直播!《数智企业@中国》走进泰开集团

用友BIP

数智企业

2023年最具威胁的25种安全漏洞(CWE TOP 25)

华为云开发者联盟

安全 华为云 安全漏洞 华为云开发者联盟 企业号 7 月 PK 榜

用友BIP全球司库“五大管家”,助力大型企业一流司库建设

用友BIP

全球司库

【HDC.Cloud 2023】华为云区块链分论坛内容值得再读!

华为云开发者联盟

区块链 后端 华为云 华为云开发者联盟 企业号 7 月 PK 榜

北京汽车牵手火山引擎数智平台,探寻车企数字化升级新通路

字节跳动数据平台

数字化 数字化升级 车企 企业号 7 月 PK 榜

从零开始构建一个电影知识图谱,实现KBQA智能问答[上篇]:本体建模、RDF、D2RQ、SPARQL endpoint与两种交互方式详细教学

汀丶人工智能

人工智能 自然语言处理 nlp 知识图谱 本体建模

如何在 Ubuntu 22.04 下编译 StoneDB for MySQL 8.0 | StoneDB 使用教程 #1

StoneDB

数据库 StoneDB

超级应用App的概念及构建思路

Onegun

小程序 小程序容器 超级应用

人工智能的底层逻辑

博文视点Broadview

Cloud Kernel SIG月度动态:ANCK 5.10-016将落地kABI机制,5.10-015版本规划发布

OpenAnolis小助手

操作系统 内核 anck 龙蜥sig 版本规划

ChatGPT 来了,MySQL DBA 会失业吗?| StoneDB 数据库观察 #10

StoneDB

数据库 StoneDB ChatGPT

码中寻趣:低码专家与开发者的「神秘会议」 ——华为云Astro扫地僧出山

华为云PaaS服务小智

云计算 低代码 华为云 华为开发者大会2023 Astro

方言语音识别数据驱动人工智能的多元文化发展

来自四九城儿

方言语音

人工智能机器学习底层原理剖析,人造神经元,您一定能看懂,通俗解释把AI“黑话”转化为“白话文”

快乐非自愿限量之名

人工智能 机器学习

看完这篇异地多活的改造,我决定和架构师battle一下

得物技术

架构 构架师

技术领先、“忠”于业务,用友助力企业实现价值化国产替代

用友BIP

沉潜蓄势,厚积薄发:StoneDB-5.7-V1.0.4版本正式发布!特性增强,稳定性大幅提升

StoneDB

数据库 版本发布 StoneDB

春去夏来,火热发版:StoneDB-8.0-v1.0.1-beta 版本正式发布!

StoneDB

数据库 StoneDB

软件定义汽车场景中的数据流处理

EMQ映云科技

车联网 mqtt 数据流

软件测试/测试开发丨Selenium环境安装配置

测试人

Python 程序员 软件测试 selenium chromedriver

MySQL 中索引是如何实现的,有哪些类型的索引,如何进行优化索引

EquatorCoco

MySQL 数据库 索引

响应式编程:Vert.x官网学习

越长大越悲伤

响应式编程 JVM Vert.x

华为云张鹏:华为云盘古大模型及MetaStudio亮相新媒体大会,使能融媒创新

新消费日报

一文吃透CSS样式中颜色与颜色值的应用

这我可不懂

CSS

火热的低代码和无代码赛道

互联网工科生

软件开发 低代码 无代码 应用开发

三问三答:细数GaussDB迁移的核心技术

华为云开发者联盟

数据库 后端 华为云 华为云开发者联盟 企业号 7 月 PK 榜

为什么选择美国虚拟主机是你的明智之选?

一只扑棱蛾子

美国虚拟主机

Svelte使用心得:在个人项目中表现不错,但在大型企业项目中仍有待观察_工程化_InfoQ精选文章