使用 Svelte 创建原生移动应用程序的快速入门

"这个世界需要的，正是另一个 JavaScript 框架..."

-- 每个前端开发人员都这么说。

话虽这么说，但当新兴框架 Svelte 几个月前发布了 v3 版本时，世界确实注意到了。

我本来不想今天发布这个消息，但消息已经泄露了，所以...

🚨🚨🚨 SVELTE 3 发布了 🚨🚨🚨https://t.co/2Z2tFhZn8U
— Rich Harris (@Rich_Harris) 2019 年 4 月 22 日

那么，这个 Svelte 到底是什么 - 为什么有人想在 React、Angular 和 Vue.js 等框架已经存在的情况下使用 Svelte？为什么要使用 Svelte 创建原生移动应用程序？

这些都是合理的问题。让我们从最简单的开始。

什么是 Svelte？

简单地说，Svelte 是一个用于构建快速应用程序的工具。

Svelte 与其他 JavaScript 框架（如 React、Vue.js 以及在某种程度上 Angular）类似。它与这些框架一样，是一个“组件框架”，但 Svelte 有一个关键区别：Svelte 实际上在构建时将你的应用程序转换为“理想 JavaScript”，而不是在运行时解释你的代码。

这在首次应用程序加载方面带来了显著的性能提升，并消除了有时在框架抽象开销中看到的性能下降。

svelte logo

Rich Harris，Svelte 的创建者，比我能做到的更好地理清了这一点。

传统框架允许你编写声明式状态驱动代码，但有一个代价：浏览器必须进行额外的工作，才能使用诸如 DOM 操作技术将这些声明式结构转换为 DOM 操作，从而占用你的帧预算并加重垃圾收集器。

使用这种方法，Svelte 在 Web 上（以及我们在后面将看到的原生移动设备上）提供了惊人的性能。

就我个人而言，我发现用 Svelte 编写的 JavaScript 非常简洁。正如 Rich Harris 也曾经说过的那样：

"最好的 API 是根本没有 API"

因此，使用 React 你可能要编写一些类似下面的代码：

const { count } = this.state;
this.setState({
  count: count + 1
});

...Svelte 可以将它压缩成：

count += 1;

如何实现？ 由于 Svelte 编译了你的 JavaScript，它可以在幕后补充你编写的代码，使其类似于以下内容：

count += 1; $$invalidate('count', count);

如果你对在 Web 应用程序中使用 Svelte 感兴趣，请务必尝试一下 Svelte 网站上提供的精彩教程。

NativeScript 的优势

有了对 Svelte 是什么以及它带来的优势的粗略了解，让我们把话题转向原生移动设备。

使用 Svelte 编写的 Web 应用程序速度非常快。虽然你可以使用 Apache Cordova 等技术创建移动应用程序，但你最好使用JavaScript-Native框架，例如 NativeScript。

为什么选择 NativeScript？ 你们中许多人已经知道，NativeScript 类似于 React Native，但适用于“我们其他人”，那些不使用 React 的人。

值得指出的是，你实际上可以使用 NativeScript 与 React 一起使用 - 这是一个名为 React NativeScript 的另一个社区项目。

NativeScript 使用 JavaScript 为原生 UI 提供动力。没有涉及 WebView，只有原生 UI 和开箱即用的原生性能。

NativeScript 还附带了对 Angular 和 Vue.js 的支持。

all nativescript frameworks

这里体现了 NativeScript 的一个关键优势：其可扩展性无与伦比。你可以在任何时候访问任何原生设备 API，不受限制。NativeScript 还为所有新发布的设备 API 提供 0 天支持。

所有这些都激励了 David Pershouse 将 NativeScript 用作其项目 Svelte Native 的核心。

Svelte Native

Svelte Native 允许你采用现有的 Svelte 框架，从一个共享的代码库构建针对 iOS 和 Android 的真正原生移动应用程序。David 提供了一些背景信息，我觉得非常有帮助（我们将在即将发布的博客文章中分享！）。

Svelte Native 不需要特殊的 Svelte 编译器构建。它是一个小的 DOM 抽象，编译后的 svelte 组件通过它进行交互，并且基于 Nativescript-Vue 中的 DOM 代码。

有趣的是，由于 Svelte 的编译器特性，在未来我们可以通过编写直接发出 Nativescript-core 代码的 svelte 自定义编译目标，来消除对 DOM 抽象的依赖。

Svelte Native 还提供了 Svelte 惊人的过渡/淡入淡出系统，该系统由 NativeScript 的原生过渡基础架构（在可能的情况下）提供支持。

Svelte Native 注意事项

请明确一点：Svelte Native 非常新。虽然它在几个方面比其他 NativeScript 扩展具有重大优势，因为它只是核心框架上的一个非常薄的层（使未来的升级、更新和修改变得容易得多），但这并不意味着它已经 100% 做好了准备（还没有）。

在我使用 Svelte Native 的过程中，我马上遇到了一些注意事项，你可能需要了解。

VS Code 的一些问题

Visual Studio Code 是，就像你们中许多人的情况一样，我的首选编辑器。当然，作为一名 Svelte 新手，我安装了 Svelte for VS Code 扩展。但是，在创建 Svelte Native 应用程序时，我的 App.svelte 文件在我的编辑器中显示了一个警告。

svelte vs code

Hmmm 🤔。

事实证明，这是 Svelte 和 VS Code 的一个已知问题。由于 VS Code 的 Svelte 扩展（还没有）无法处理预处理，因此你会看到此警告。这很烦人，但你可以安全地忽略它，希望很快就能得到解决。

驼峰式元素？

传统的 NativeScript 开发人员习惯于使用 Pascal 大小写，以一致的方式组合他们的 UI 层。

<StackLayout>
    <Label text="Hello!"></Label>
</StackLayout>

但是，Svelte Native 使用驼峰式大小写来让 Svelte 编译器知道这些是 NativeScript 视图/元素，而不是 Svelte 组件。

<stackLayout>
    <label text="Hello!"></label>
</stackLayout>

这需要一些时间来适应！😉

与“Pro” NativeScript UI 的兼容性

截至撰写本文时，Svelte Native 尚未完全兼容 "Pro" NativeScript UI 组件。但这已经被确定为该项目的一个首要任务。

立即尝试 Svelte Native

有兴趣亲自尝试 Svelte Native 吗？或者你可能已经加入了，并且想贡献力量？！！

以下是一些后续步骤。

尝试一下 Svelte 教程（适用于 Web）。它将帮助你在开始查看 Svelte Native 之前，全面了解 Svelte。
尝试一下简短的 Svelte Native 教程，使用 NativeScript 和 Svelte 创建你自己的“待办事项”应用程序。
为 GitHub 上的 Svelte Native 仓库做出贡献。帮助解答问题、改进文档，并使 Svelte 成为 NativeScript 社区的更受欢迎的成员 ❤️。

此外，请务必在官方 Svelte discord 服务器的 #nativedev 频道上与志同道合的开发人员联系！

就我个人而言，这仅仅是我自己使用 Svelte Native 的旅程的开始，因此请继续关注 NativeScript 博客，因为我将学习更多、记录更多，并让自己（比平时）更丢脸。😅