2天时间,聊今年最热的 Agent、上下文工程、AI 产品创新等话题。2025 年最后一场~ 了解详情
写点什么

PyScript:让 Python 脚本在 Web 中跑起来

  • 2022-05-20
  • 本文字数:2422 字

    阅读完需:约 8 分钟

PyScript:让 Python 脚本在 Web 中跑起来

这是下一个大事件吗?如果继续发展下去,有可能。

 

在 2022 年 PyCon 美国大会期间,作为主题演讲嘉宾之一的 Peter Wang 公布了 PyScript,一种在 HTML 中直接编写 Python 脚本的方法。或许你不知道 Peter,但你可能听说过 Anaconda,这是一种流行的开源的 Python 和 R 语言的发行版本,特别关注数据科学。Peter 正是 Anaconda 的 CEO 和联合创始人。

 

换言之,PyScript 是由一家著名的科技公司开发的,这可能会保证它在不久的将来成为可行的方案。它在 Python 和 Web 开发者中受到了极大的关注,GitHub 上已有超过 10k 颗 Stars。然而,它是否能成为一个成功的、有竞争力的产品,取决于长期的时间和开发投入。目前,它还有一些已知的缺陷(将在最后讨论)。

 

闲话少说,让我们快速了解一下这个令人振奋的产品吧!

py-script 标签

我们知道,HTML 文件是大多数网站最常见的元素。在创建网站时,我们的工作就是直接或间接地通过一些框架来编制 HTML 文件。在典型的 HTML 文件中,你会看到各种类型的标签。例如,<head>定义了 HTML 页面的元数据和关键信息,<title>是整个文档的标题,而<h1><h2>等定义了不同级别的内容标题。

 

如前所述,PyScript 允许你在 HTML 中编写 Python 脚本,它使用一个特殊的标签py-script。在这个标签中,你可以嵌入 Python 脚本。要了解它是如何工作的,可以创建一个 HTML 文件,其中包含以下代码,并使用 Chrome 浏览器打开该文件。在 Chrome 浏览器中,你应该能够看到类似下面这样的内容:



作者截图

 

在上面的代码片段中,你可能已经注意到以下三个关键点:

  • link标签定义了一个外部样式表。在这个例子中,我们使用了 PyScript 提供的css文件。

  • 我们使用script标签来嵌入一个由src定义、由 PyScript 托管的外部脚本。我们使用了defer,这样脚本会在下载和页面解析完成后执行——本质上是一种延迟执行,而不是实时执行。

  • 最有趣的部分是py-script标签。如你所见,print("Hello, World!")是 Python 代码。当执行 HTML 文件时,就可以看到代码求值结果。

 

这很酷,不是吗?如果你不熟悉 Web 开发,但了解 Python,就可以使用 PyScript 嵌入任何有效的 Python 代码。让我们再看一个例子。



另一个 PyScript 示例(图片由作者提供)

 

在这里,我们写了一些需要计算的代码,可以看到,脚本得到了正确的执行。

py-env 标签

在编写更复杂的代码时,就需要使用第三方库。在这种情况下,我们可以利用py-env标签。你可能已经猜到的,env 是 environment 的缩写。py-env标签中列出了运行代码所需的 Python 包。

 

你可能知道,许多数据科学家都使用 pandas 进行数据处理工作。让我们看看下面的例子。



使用包的 PyScript(图片由作者提供)

 

如你所见,我们在py-env标签中指定了依赖项(即 Pandas),该标签包含在head标签中。如果页面需要多个依赖项,可以在这里把它们全部列出:

 

<py-env>  - pandas  - matplotlib  - numpy</py-env>
复制代码

如你所见,在py-script标签中,我们确实可以使用 Pandas 库来创建一个DataFrame对象。然而,当我们把打印出来时就会发现,它是一个单行,而不是一个结构化的数据表。没有一个适当的结构,我们就无法理解这些数据。幸运的是,我们可以使用write函数(下文会讨论)。

将内容写入指定标签

除了 Python 中的标准打印函数print,作为脚本的一部分,PyScript 有自己的write函数,可以将数据发送到页面上指定的 Web 元素中。请看下面的例子:



PyScript 写函数 write(图片由作者提供)

 

与之前的例子相比,上述代码片段有两个重大变化:

  • 我们现在定义了一个 id 为"DataFrame"div,这样稍后就可以引用。

  • py-script标签中,我们创建一个与之前相同的DataFrame对象。但现在,我们不是调用print,而是调用pyscript.write函数,请求 PyScript 处理并在"DataFrame"中显示DataFrame对象。从输出可以看到,我们现在有一个结构化的表格了。

 

write函数不仅能够打印表格,还能够打印数字。下面的例子向你展示了我们如何使用matplotlib(一个流行的 Python 包,用于数据可视化)来显示由 Python 创建的图。



PyScript 打印图(图片由作者提供)

 

如你所见,write 函数以期望的方式显示了图。

py-repl 标签


Python 学习的最好方法之一是使用 REPL:读取(Read)、求值(Evaluate)、打印(Print)和循环(Loop)。也就是说,使用一个交互式的 Python 控制台,输入一些代码,Python 对其进行求值并打印适当的输出,然后重复这个过程。Web 页面也可以提供这样的 REPL 环境,比如 Jupyter Notebook。

 

PyScript 可以使用py-repl标签提供与此类似的东西。在这个元素中,你可以让用户自己编写代码,也可以以编程方式输入代码。请看下面的例子:



PyScript REPL(图片由作者提供)

 

如你所见,上图中有一个单元格,其中包括在py-repl标签中指定的代码。值得注意的是,单元格中的代码可以引用我们之前在py-script标签中定义的变量。一切看起来都很协调。

感想


本文介绍的内容是现阶段 PyScript 所能提供的主要亮点。它似乎是一个很有前途的产品,因为它提供了一个灵活的框架,让 Python 程序员可以在没有太多 Web 开发知识的情况下创建 Web 应用。然而,也有其他类似的成功的产品,因此,竞争会很激烈。

 

例如,如果我需要为自己的数据科学项目创建一个 Web 应用,我就会直接使用 Streamlit。它的功能已经相对成熟。请注意,虽然都与 Web 开发有关,但 PyScript 和 Streamlit 属于不同的产品系。PyScript 应该更通用,因为它的目标是让你可以在任何网页上嵌入任何 Python 代码,Streamlit 做不到这一点。

 

在 PyScript 为更多的人所接受之前,它有几个问题必须解决。例如,Web 页面的加载速度非常慢。如果你尝试跟随本教程运行代码,可能就会注意到,在 Web 页面的显示会有一个明显的滞后。

 

尽管如此,我还是觉得这个产品会继续发展,我的信心主要来自于它的开发者——给我们带来极好的 Anaconda 工具的 Anaconda 团队。


本文最初发布于 Better Programming。


查看英文原文:Running Python Scripts on the Web Using PyScript

2022-05-20 17:0618705

评论 1 条评论

发布
用户头像
web就是香,各路神仙都有
2022-05-24 07:03
回复
没有更多了
发现更多内容

MAMP Pro 6.8.1 Mac永久破解版 Web开发环境 兼容m1

Rose

编程开发 Mac软件 Web开发环境 MAMP PRO激活码 MAMP Pro安装教程

HTTP/3:全面剖析

Apifox

前端 后端 HTTP http3 HTTP/3

一文了解TiDB的执行计划绑定功能

TiDB 社区干货传送门

性能调优 实践案例

基于信通院混沌测试工具databench-c对TiDB数据库进行混沌测试

TiDB 社区干货传送门

实践案例 性能测评

MySQL的JOIN到底是怎么玩的

派大星

:MySQL 数据库 互联网大厂

全能解压 mac版 Dr Unarchiver for Mac中文下载

Rose

Mac软件 解压软件 Dr Unarchiver

记录一次Region is Unavailable问题的排查

TiDB 社区干货传送门

监控 性能调优 故障排查/诊断 6.x 实践

TIDB 行转列和列转行操作(附SQL实战)

TiDB 社区干货传送门

实践案例

RESP破解版下载 Redis桌面管理工具 Mac软件下载

Rose

Mac软件 RESP破解版 Redis桌面管理工具

Mac 上最好用的 Open 客户端 Viscosity永久激活版 兼容m

Rose

Viscosity mac下载 Open 客户端 Viscosity mac破解

完美兼容M芯片 Omi NTFS磁盘管理助手下载 NTFS Disk by Omi NTFS Mac

Rose

NTFS Disk by Omi NTFS NTFS 磁盘管理器 ntfs

Mac平台上的强大软件卸载工具:AppDelete中文直装版

Rose

软件卸载工具 Mac卸载软件 苹果电脑软件下载 AppDelete

国际领先!天翼云驭“数”有道!

天翼云开发者社区

云计算 大数据 云平台

TIKV 源码学习笔记--分布式事务接口 Prewrite

TiDB 社区干货传送门

开发语言 TiDB 底层架构 TiKV 源码解读 TiKV 底层架构

TIKV 源码学习笔记--分布式事务接口 CheckTxnStatus/ ResolveLock

TiDB 社区干货传送门

TiDB 底层架构

什么是数字化工厂?数字化工厂的整体架构是什么?

万界星空科技

数字化 mes 数字化工厂 万界星空科技

NOT IN子查询中出现NULL值对结果的影响你注意到了吗

GreatSQL

Matlab r2023a 破解版 安装激活教程 含Matlab许可证文件安装密钥

Rose

数学软件 MATLAB R2023a MATLAB安装秘钥

TIKV BatchSystem 概述

TiDB 社区干货传送门

TiDB 底层架构

支持M2/M3 macbook高效率工具:Alfred 5汉化包下载

Rose

mac效率工具 Alfred 5破解版 Alfred 中文 Alfred下载

DaVinci Resolve Studio 16 mac达芬奇调色剪辑软件 附注册密钥

Rose

DaVinci Resolve 破解 达芬奇调色软件 达芬奇安装秘钥

【中文无限试用版】intellij idea 2020下载 最好用的Java开发工具 兼容m1

Rose

IntelliJ IDEA激活码 intellij idea 下载 intellij idea 中文 intellij idea 2020破解版

生成式 AI 术语指南:带有配图说明,没有数学公式

Baihai IDP

程序员 AI AIGC 白海科技 GenAI

TIKV 源码学习笔记--分布式事务接口 Commit/Rollback

TiDB 社区干货传送门

TiDB 底层架构 TiKV 源码解读 TiKV 底层架构

JetBrains DataGrip 2020 编程开发软件 中文无限试用版 兼容m1

Rose

编程 软件 开发

2024年3月最新注册Chatgpt教程,国内可用,无需手机号!

蓉蓉

GPT-4 ChatGPT4

非遗之美与科技之力的碰撞,易开得谱写一首《定军山》

脑极体

TIKV 源码学习笔记--BatchSystem 创建初始化流程

TiDB 社区干货传送门

TiDB 底层架构 TiKV 源码解读 TiKV 底层架构

PyScript:让 Python 脚本在 Web 中跑起来_大前端_Yong Cui_InfoQ精选文章