原文： How to Use PyScript – A Python Frontend Framework

近年来，Python 越来越受欢迎。它有广泛的应用，从最流行的人工智能到数据科学、机器人和脚本。

在 Web 开发领域，Python 主要用于后端，有 Django 和 Flask 等框架。

以前，Python 没有像 JavaScript 等其他语言那样在前端提供太多支持。但值得庆幸的是，Python 开发人员已经构建了一些库（例如 Brython）来支持他们最喜欢的语言。

而今年，在 PyCon 2022 大会期间，Anaconda 宣布了一个名为 PyScript 的框架，它允许你在使用标准 HTML 的 Web 上使用 Python。

你可以查看有关发布的这条推文：

前提

你将需要以下工具和知识来编写本文的代码：

  • 你选择的文本编辑器或 IDE
  • Python 知识
  • HTML 知识
  • 浏览器（Google Chrome 是 PyScript 推荐的浏览器）

PyScript 是什么？

Image from PyScript's website.
Source: PyScript official website

PyScript 是一个 Python 前端框架，它使用户能够在浏览器中使用 HTML 界面构建 Python 程序。

它是结合 Emscripten、Pyodide、WASM 和其他现代 Web 技术的力量开发的，以提供符合其目标的以下功能：

  • 提供一个简单而干净的 API
  • 提供可插拔和可扩展组件的系统
  • 支持和扩展标准 HTML 以读取自定义组件，以实现“为 99% 编程”的使命
An image showing what PyScript is built on.
Source: Anaconda Blog

在过去的几十年里，Python 和现代 HTML、CSS 和 JavaScript 等高级 UI 语言并没有协同工作。 Python 缺乏一种简单的机制来创建吸引人的 UI 来简单地打包和部署应用程序，而当前的 HTML、CSS 和 JavaScript 可能有一个陡峭的学习曲线。

允许 Python 使用 HTML、CSS 和 JavaScript 约定不仅解决了这两个问题，还解决了与 Web 应用程序开发、打包、分发和部署相关的问题。

不过，PyScript 并不是要在浏览器中扮演 JavaScript 的角色，而是要为 Python 开发人员尤其是数据科学家提供更大的灵活性和功能。

为什么选择 PyScript？

PyScript 通过提供以下内容，为你提供了一种具有一致样式约定、更具表现力和易于学习的编程语言：

  • 浏览器支持：PyScript 无需服务器或配置即可支持 Python 和托管。
  • 互操作性：程序可以在 Python 和 JavaScript 对象和命名空间之间进行双向通信。
  • 生态系统支持：PyScript 允许使用流行的 Python 包，例如 Pandas、NumPy 等。
  • 框架灵活性：PyScript 是一个灵活的框架，开发人员可以在此基础上轻松地直接在 Python 中创建可扩展的组件。
  • 环境管理：PyScript 允许开发人员定义要在其页面代码中运行的文件和包。
  • UI 开发：使用 PyScript，开发人员可以轻松地使用可用的 UI 组件（例如按钮和容器等）进行构建。

如何开始使用 PyScript？

PyScript 相当简单易学。要开始使用，你可以按照网站上的说明或下载 .zip 文件。

在本文中，我们将通过网站使用和学习如何使用 PyScript。你可以通过链接 HTML 文件中的组件来完成此操作。让我们用 PyScript 打印我们的第一个 “Hello World”。

创建一个 HTML 文件

首先，你需要创建一个 HTML 文件以使用你选择的文本编辑器/IDE 在浏览器上显示文本。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title: PyScript</title>
</head>
<body>

</body>
</html>

链接 PyScript

创建 HTML 文件后，我们需要在 HTML 文件中链接 PyScript 以访问 PyScript 界面。这将被放置在 <head> 标签中。

<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>

打印到浏览器

现在你已将 PyScript 链接到 HTML 文件，你可以打印 “Hello World”。

你可以使用 <py-script> 标签来执行此操作。<py-script> 标签允许你运行多行 Python 程序并将它们打印在浏览器页面上。将标签放在 <body> 标签之间。

<body> <py-script> print("Hello, World!") </py-script> </body>

HTML 文件的完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title: PyScript</title>
</head>
<body>
	<py-script> print("Hello, World!") </py-script>
</body>
</html>

在你的浏览器上，你应该会看到：

Image of the "Hello, World" on browser.

提示：如果你使用的是 VSCode 编辑器，则可以在更新 HTML 文件时使用 VSCode 中的 Live Server 插件重新加载页面。

PyScript 的更多操作

你可以使用 PyScript 框架执行更多操作。现在让我们来看看其中的一些。

将标签附加到标记的元素

在使用 PyScript 时，你可能希望将变量从 Python 代码传递到 HTML。你可以使用 <pyscript> 标签中 pyscript 模块中的 write 方法来执行此操作。使用 id 属性，你可以传递显示为常规文本的字符串。

write 方法接受两个变量：id 值和将提供的变量。

<html>
    <head>
      <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
      <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
    </head>

  <body>
    <b><p>Today is <u><label id='today'></label></u></p></b>
    <py-script>
import datetime as dt
pyscript.write('today', dt.date.today().strftime('%A %B %d, %Y'))
    </py-script>
  </body>
</html>

输出变为：

Image showing the output of a date.

在浏览器中运行 REPL

PyScript 提供了一个在浏览器中运行 Python 代码的接口。

为了能够做到这一点，PyScript 使用 <py-repl> 标签。<py-repl> 标签向页面添加了一个 REPL 组件，该组件充当代码编辑器并允许你内联编写可执行代码。

<html>
  <head>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <py-repl id="my-repl" auto-generate=true> </py-repl>
</html>

在浏览器（最好是 Chrome）中尝试，你应该得到这个：

Python's REPL in browser.

导入文件、模块和库

PyScript 提供的功能之一是灵活性。在 PyScript 中，你可以导入本地文件、内置模块或第三方库。此过程使用 <py-env> 标签。这个标签用于声明所需的依赖项。

对于系统上的本地 Python 文件，你可以将代码放在 .py 文件中，本地模块的路径由 <py-env> 标签中的 paths: key 提供。

让我们创建一个 Python 文件 example.py 来包含一些函数：

from random import randint

def add_two_numbers(x, y):
    return x + y

def generate_random_number():
    x = randint(0, 10)
    return x

然后 Python 文件将被导入带有 <py-env> 标签的 HTML。你应该将此标签放在 <head> 标签中，在 <body> 标签上方。

<html>
    <head>
      <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
      <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
      <py-env>
        - paths:
          - /example.py
      </py-env>
    </head>

  <body>
    <h1>Let's print random numbers</h1>
    <b>Doe's lucky number is <label id="lucky"></label></b>
    <py-script>
      from example import generate_random_number
      pyscript.write('lucky', generate_random_number())
    </py-script>
  </body>
</html>

这将返回：

Printing out random numbers with Python.

对于不属于标准库的第三方库，PyScript 支持它们。

<html>
    <head>
      <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
      <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
      <py-env>
            - numpy
            - requests
      </py-env>
    </head>

  <body>
    <py-script>
	import numpy as np
	import requests
    </py-script>
  </body>
</html>

配置元数据

你可以使用 <py config> 标签以 YAML 格式设置和配置有关 PyScript 应用程序的一般元数据。你可以按以下格式使用此标签：

<py-config>
  - autoclose_loader: false
  - runtimes:
    -
      src: "https://cdn.jsdelivr.net/pyodide/v0.20.0/full/pyodide.js"
      name: pyodide-0.20
      lang: python
</py-config>

这些是 <py-config> 标签提供的可选值：

  • autoclose_loader（布尔值）：如果设置为 false，PyScript 将不会关闭加载启动画面
  • name（字符串）：用户应用程序的名称
  • version（字符串）：用户应用程序的版本
  • runtimes（运行时列表）：运行时配置列表，其中包含以下字段：src、name 和 lang

总结

在本文中，你了解了 PyScript 的全部内容以及如何在 HTML 文件中使用它在浏览器上运行 Python 代码。你还了解了可以使用 PyScript 执行的各种操作/功能。

使用 PyScript，可以更轻松地在 Web 上运行和执行 Python 操作，这在以前并不容易。对于希望在 Web 上使用 Python 的任何人来说，这都是一个很棒的工具。

PyScript 仍处于早期阶段，开发工作在进行中。它仍处于 alpha 阶段，面临已知问题，例如可能影响可用性的加载时间（由于性能问题，在撰写本文时无法显示其他一些操作）。所以你不应该在生产中使用它，因为它可能会有很多重大变化。

参考资料