2016年提出的网页交付问题

2016年11月26日,里奇·哈里斯发布Svelte的介绍文章,宣布已有稳定的1.0.0版。项目面向使用HTML、CSS和JavaScript制作网页界面的开发者,试图改变组件框架交付给浏览器的方式。

哈里斯关注的成本包括网络下载,也包括浏览器解析、执行JavaScript所需的时间。框架便于开发者把界面划成组件,但若每个页面都必须带上一套通用运行程序,这些组织便利也会增加启动时的工作量,移动设备上的影响尤其值得注意。

参考:[1]

把一部分工作提前到构建时

Svelte要求开发者写出组件,再由编译器在构建阶段分析模板,生成能够直接操作页面的JavaScript模块。开发者仍以状态和界面关系组织程序,浏览器收到的则是针对这些组件生成的执行代码。

这种设计也有组件分发的考虑:一个日历等独立部件,经编译后可以放入采用其他技术的应用。哈里斯同时指出,按需生成代码能够避免把未使用功能的实现一并发给用户。

参考:[1] [2]

首版测试中的一句问候

1.0.0源码保存了一个简短的hello-world测试。组件模板写作“<h1>Hello {{name}}!</h1>”,测试数据把name设为world,对应页面内容是Hello world!。随后测试调用component.set,将name改为everybody,并检查页面变成Hello everybody!。

这个例子把三层工作分开:模板规定标题位置及数据占位,状态保存姓名,生成的组件处理页面更新。测试最后调用teardown,并断言容器内容被清空,因此组件生命周期还包括移除。示例中的双花括号和set接口,属于早期Svelte的具体写法。

参考:[2]

编译器与构建工具的分工

首版README明确说明,Svelte软件包中的编译器主要供构建工具作者集成。普通组件使用者可以采用svelte-cli命令行工具或Rollup插件。编译接口接收源文本和选项,返回生成代码及源码映射,后者帮助把输出位置对应回源文件。

同一份说明列出ES模块以及AMD、CommonJS、UMD、IIFE等输出格式,还允许指定组件名称、文件名和错误处理函数。于是同一组件源码可按宿主环境输出不同包装。版本记录显示,0.0.1阶段只占用了软件包名称,0.0.2已能构建TodoMVC示例;1.0.0又加入多种模块格式,首版公开之前已有连续的实现修订。

参考:[2]

首版公开时仍在建设

1.0.0发布文章把服务端渲染、热重载、过渡效果、更多文档以及构建工具集成列为待办工作。这份清单限定了2016年版本的阶段:它已经能编译可用组件,周边工具仍在逐步补齐。

发布文章采用TodoMVC作为演示,并报告其Svelte版本压缩后约3.6KB。这是当时该示例的交付体积。文章也把在线试验环境、使用指南与源码仓库连在一起,让开发者既能尝试组件,也能参与编译器和工具的完善。稳定版的公布因而伴随着明确的后续建设清单。

参考:[1] [2]

2018与2019年的接口调整

2018年4月18日公布的Svelte 2,把模板插值由双花括号改成单花括号,并调整取值等接口。发布说明还放弃仅生成ES5代码的限制,提醒仍需照顾旧浏览器的项目增加转换步骤。

2019年4月22日,Svelte 3稳定版发布。团队将减少组件样板代码作为重点,以普通赋值表达状态变化,由编译器补入更新所需处理,取代此前频繁调用set的方式。哈里斯在这一发布中把第一版概括为对专用组件编译器的验证;后续演进则把重心继续推进到开发者编写和维护组件的体验。

参考:[3] [4]