返回博客首页
← 所有文章

NativeScript Playground 架构

2019年3月5日 — 作者：Vasil Trifonov

在过去的一年中，NativeScript Playground 已经成为NativeScript 入门的首选工具。这主要是因为 Playground 易于使用，并且无需任何机器设置。另一个巨大的优势是项目更改能够快速传播到设备上。在这篇文章中，我们将介绍我们在创建 NativeScript Playground 时做出的技术决策，以及其所有部分如何相互通信。

以下是 NativeScript Playground 架构的基本概述

NativeScript Playground architecture

现在让我们详细了解一下不同的组件

Web 服务器

Web 服务器是用Go编写的，它具有一些基本功能，例如：

  • 提供应用程序 HTML 文件
  • 从Amazon S3存储中加载选定的模板/项目
  • 管理项目元数据（Amazon DynamoDB）
  • 当在移动设备的浏览器中打开保存的项目时，通过PubNub将项目文件发送到预览应用程序

从 Web 服务器创建 Docker 镜像，并将其托管在 AWS 上的几个 EC2 实例上，位于 ELB 后面。

资源

我们有几种类型的资源

  • 模板 – 模板是一个 NativeScript 应用程序，在打开 NativeScript Playground 的新会话时用作起点。模板的内容存储在 S3 中。
  • 教程 – 教程内容为 Markdown 格式，可以在playground-tutorials 仓库中找到。我们使用Github API 将 Markdown 转换为 HTML，之后进行了一些调整。然后将生成的 HTML 也存储在 S3 中。
  • 项目元数据 – 保存的项目的元数据存储在 DynamoDB 中
  • 已更改的文件内容 – 每个项目都引用给定模板版本，并且给定项目中所有已更改的文件的内容存储在 S3 中。
  • 静态文件 – 网站所需的静态文件也存储在 S3 中，并使用 CloudFront CDN。

SPA 应用程序

网站的前端部分使用 Angular 构建。整个应用程序的主要思想是将所有可能的内容都迁移到客户端，以便服务器保持非常轻量级，能够扩展并服务于许多用户。为了实现这一点，我们使用了Monaco 编辑器编译 TypeScript 的能力，因此，当对 TypeScript 文件进行更改时，它会创建相应的 JavaScript 文件，该文件在应用程序中使用。

消息传递

为了在浏览器和移动应用程序之间传输文件，我们使用 PubNub。我们选择它是因为它拥有我们使用的所有语言（Golang、JavaScript、Java、Objective C）的 SDK，以及速度和可靠性。到目前为止，我们还没有遇到任何重大问题，它是使 NativeScript Playground 运行如此快速的主要部分之一。

移动应用程序

为了实现预览移动设备上代码所需的必要功能，我们需要创建两个单独的应用程序

Playground 应用程序

这是一个 QR 码扫描应用程序，可以读取任何 QR 码。您也可以使用任何其他 QR 码扫描应用程序扫描 NativeScript Playground 的 QR 码，它将打开预览应用程序。某些更改无法在运行时应用，因此，每当预览应用程序检测到此类传入更改时，它都会重新启动自身。不幸的是，在 iOS 中，应用程序无法自行重新启动，因此我们使用 Playground 应用程序来执行此操作。

预览应用程序

预览应用程序是一个容器应用程序，用于执行您的应用程序代码并在设备上即时应用更改。它通过 PubNub 从浏览器获取文件，并替换应用程序文件夹中的内容。

Playground 支持的更改和应用程序有一些限制。预览应用程序附带了一个预定义的内置 NativeScript 插件列表（见下文）。这意味着使用包含原生代码和/或未包含资源的插件的应用程序不受支持，并且无法在 Playground 的预览应用程序中运行。此外，只能更改应用程序内容文件。对App_Resources或插件的原生部分的更改将不会应用。

魔法

那么魔法是如何发生的？

nativescript playground in action

  1. 当您打开 NativeScript Playground 会话时，您选择模板，并且其文件加载到 Monaco 编辑器中。
  2. 然后，您可以根据需要进行更改，如果更改位于 TypeScript 文件中，则编辑器会通过在浏览器中编译生成相应的 JavaScript 文件，该文件在应用程序中使用。
  3. 当您第一次按下“预览”按钮时，会显示一个 QR 码，其中包含用于浏览器和移动应用程序之间通信的唯一生成的通信 ID，从而创建专用 PubNub 通道。
  4. 使用 Playground 应用程序扫描 QR 码时，该信息将被读取并通过其自定义方案传递给预览应用程序。
  5. 预览应用程序启动后，它会读取通信 ID 并使用它将设备已连接消息发布到 PubNub 通道。
  6. 浏览器接收设备已连接消息，并将所有文件发送到 PubNub 通道。
  7. 预览应用程序读取文件，并将其目录中的文件替换为传入文件的内容。
  8. 如果脚本文件发生更改，则会触发重新启动。
  9. 如果在浏览器中进行了其他更改，则仅将更改的文件发送到设备。
  10. 同一通道用于将日志从设备发送到浏览器。

因此，如果您还没有尝试过NativeScript Playground，请立即尝试。我们保证这将是您开始使用 NativeScript 的最快方法！

截至今天，Playground 中内置的 NativeScript 插件列表为：

  • @progress-nativechat/nativescript-nativechat
  • kinvey-nativescript-sdk
  • nativescript-accelerometer
  • nativescript-background-http
  • nativescript-camera
  • nativescript-fresco
  • nativescript-geolocation
  • nativescript-imagepicker
  • nativescript-intl
  • nativescript-iqkeyboardmanager
  • nativescript-social-share
  • nativescript-ui-autocomplete
  • nativescript-ui-calendar
  • nativescript-ui-chart
  • nativescript-ui-dataform
  • nativescript-ui-gauge
  • nativescript-ui-listview
  • nativescript-ui-sidedrawer
  • nativescript-background-http
  • nativescript-accelerometer