如何看待 Python(PyScript) 可以做浏览器前端开发语言?

简介:

大家好,我是三十一[0],自上次更新 Nvidia 命令总结以来,期间🐦了一周多。因为最近在整理 Etcd[1] 相关系列,耽搁了许多时间。如果大家对 Etcd 感兴趣,可以点个关注或添加号主微信,后续会做专题输出。

本次分享的内容:主要讨论在 PyCon US 2022[2] 上,由 Anaconda 发布的 PyScript[3] 技术。据说这项技术被 Anaconda 基于为 99% 的人带来编程这么宏伟的愿景而创建,接下来号主将带着大家一起体验这项技术,阅读全文预计花费 8 分钟。

PyScript 简介

PyScript 其实是一个代码框架,允许用户使用 HTML 和 Python 混合开发,基于浏览器创建丰富的 Python 应用程序。旨在为用户提供一流且易于展示和学习的编程语言。

那 PyScript 具体是什么呢?下面是它的一些核心部件:

浏览器中的 Python:支持启用插入式内容、外部文件托管(由 Pyodide[4] 项目托管),而不依赖于服务器端配置。

Python 生态系统:支持运行许多流行的 Python 包和科学堆栈(例如:numpy、pandas、scikit-learn 等)。

Python with JavaScript: 支持 Python 和 Javascript 对象和命名空间之间的双向通信。

环境管理:允许用户自定义要运行的包和文件页面代码。

可视化应用程序开发:支持使用现成的精选 UI 组件,例如:按钮、容器、文本框等。

灵活的框架:可直接在 Python 中创建和共享新的可插拔和可扩展组件,使用方式非常灵活。

据官方意思,PyScript 框架的使用和 HTML 类似,只是功能相比后者更强大,不过经过号主测试,官方有吹逼的嫌疑(传送门->官方原文[5] )。

为 99% 的人提供编程

官方的初衷是希望提供一个可靠且可访问的框架,用于创建应用程序并将其运送到任何硬件和软件平台。

寻找后发现,想要达到为 99% 的人提供编程体验这一目标,几乎只能基于浏览器,而且浏览器本身也是一个不错的平台。浏览器可适用于任何地方(从笔记本电脑、平板电脑到手机),并且安全、强大和稳定。

因此,最后采用基于浏览器平台开发的方案,PyScript 的旨在提供以下功能:

  • 提供干净简单的 API
  • 支持标准 HTML
  • 扩展 HTML 以读取自以为是且可靠的自定义组件
  • 提供可插拔、可扩展的组件系统

很明显这是官方一个美好且远大的愿景

PyScript 开发初体验

想要进行 PyScript 开发,流程很简单,几乎和 HTML 前端开发步骤一致。

第一步:导入安装包

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

第二步:Hello World 开发

<py-script>组件里面是 Python 代码逻辑,用于输出系统时间。

<body>
    Hello world! <br>
    This is the current date and time, as computed by Python:
    <py-script>
from datetime import datetime
now = datetime.now()
now.strftime("%m/%d/%Y, %H:%M:%S")
    </py-script>
</body>

结果打印:

第三步:数据分析图表开发

<py-env>组件里面是 Python 依赖的安装包 numpy 和 matplotlib

<py-script>组件里面是具体 Python 逻辑代码,实现了一个用随机数字绘制的统计图表功能。

<head>
    <py-env>
- numpy
- matplotlib
    </py-env>
</head>

<body>
    <h1>Let's plot random numbers:</h1>
    <div id="plot"></div>
    <py-script output="plot">
import matplotlib.pyplot as plt
import numpy as np

x = np.random.randn(500)
y = np.random.randn(500)

fig, ax = plt.subplots()
ax.scatter(x, y)
fig
    </py-script>
</body>

结果打印:

第四步:加载 Python 文件开发

如果想要直接引入现有的 Python 代码也很容易,先在<py-env>里面引入文件,然后通过<py-script开发使用即可。

文件结构

├── matplotlib_2.html
└── py
    ├── __init__.py
    └── data.py

Python 代码

# -*- coding: utf-8 -*-
import numpy as np

def make_x_and_y(n):
    x = np.random.randn(n)
    y = np.random.randn(n)
    return x, y

PyScript 代码

<head>
    <py-env>
- numpy
- matplotlib
- paths:
  - ./py/data.py
    </py-env>
</head>

<body>
    <h1>Let's plot random numbers 2:</h1>
    <div id="plot"></div>
    <py-script output="plot">
import matplotlib.pyplot as plt
from data import make_x_and_y

x, y = make_x_and_y(n=500)

fig, ax = plt.subplots()
ax.scatter(x, y)
fig
    </py-script>
</body>

总结一下

作为一名 Pythonistas 首次尝试 PyScript 框架后的感觉:

  • 官方的 idea 还是很强大的,以浏览器为基础,的确能大大降低入门门槛。
  • 开发的确很便捷,熟悉<py-env></py-script>即可,但运行速度太慢,helloworld 加载了约 3s,随机图表加载了约 15s,都属于生产不可接受的范围。
  • 以 pyodide 进行编译运行,稳定性且不说,额外的内存开销也是逃不掉的。

以上,就是今天的全部内容,几乎包含了 PyScript 框架的全部基础功能,想要尝试完整源码的号友,可关注公众号,发送关键词HTML即可领取。

❤️❤️❤️读者每一份热爱都是笔者前进的动力!
我是三十一,感谢各位朋友:求点赞、求评论、求转发,大家下期见!

References

往期文章

  • 深度总结,带你玩转 NVIDIA GPU
  • 还活在上个时代,Etcd 3.0 实现分布式锁竟如此简单
  • 从 0 到 1,如何徒手撸一个 Python 插件系统?
  • 一站式机器学习开业平台 MLflow 怎么样?
  • 开源项目 requests 的 stars 为啥比 python 还多 3.7k?
  • 业余不求人,30秒AI快速制作LOGO
  • 学习Protobuf,ZigZag是啥你真的知道么?
相关文章
|
2月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
149 2
|
3月前
|
前端开发 API UED
Python后端与前端交互新纪元:AJAX、Fetch API联手,打造极致用户体验!
Python后端与前端交互新纪元:AJAX、Fetch API联手,打造极致用户体验!
104 2
|
24天前
|
前端开发 JavaScript API
前端开发的秘密花园:这些技巧让你轻松应对各种浏览器兼容性问题!
【10月更文挑战第31天】前端开发是一个充满创意与挑战的领域,追求极致用户体验的同时,浏览器兼容性问题却时常阻碍我们前进。本文将介绍几种解决浏览器兼容性的最佳实践:使用CSS前缀、Autoprefixer工具、现代JavaScript特性与Babel转译、Polyfill与Feature Detection、响应式设计以及跨域问题处理。掌握这些技巧,助你轻松应对各种兼容性难题,创建更稳定、用户友好的网页应用。
28 3
|
24天前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
|
26天前
|
数据采集 Web App开发 JavaScript
爬虫策略规避:Python爬虫的浏览器自动化
爬虫策略规避:Python爬虫的浏览器自动化
|
1月前
|
缓存 前端开发 JavaScript
"面试通关秘籍:深度解析浏览器面试必考问题,从重绘回流到事件委托,让你一举拿下前端 Offer!"
【10月更文挑战第23天】在前端开发面试中,浏览器相关知识是必考内容。本文总结了四个常见问题:浏览器渲染机制、重绘与回流、性能优化及事件委托。通过具体示例和对比分析,帮助求职者更好地理解和准备面试。掌握这些知识点,有助于提升面试表现和实际工作能力。
64 1
|
2月前
|
Web App开发 SQL 数据库
使用 Python 解析火狐浏览器的 SQLite3 数据库
本文介绍如何使用 Python 解析火狐浏览器的 SQLite3 数据库,包括书签、历史记录和下载记录等。通过安装 Python 和 SQLite3,定位火狐数据库文件路径,编写 Python 脚本连接数据库并执行 SQL 查询,最终输出最近访问的网站历史记录。
34 4
|
2月前
|
Web App开发 XML JavaScript
Python 操作浏览器:让 Python 和 Web 世界合二为一
Python 操作浏览器:让 Python 和 Web 世界合二为一
38 3
|
2月前
|
机器学习/深度学习 自然语言处理 前端开发
前端大模型入门:Transformer.js 和 Xenova-引领浏览器端的机器学习变革
除了调用API接口使用Transformer技术,你是否想过在浏览器中运行大模型?Xenova团队推出的Transformer.js,基于JavaScript,让开发者能在浏览器中本地加载和执行预训练模型,无需依赖服务器。该库利用WebAssembly和WebGPU技术,大幅提升性能,尤其适合隐私保护、离线应用和低延迟交互场景。无论是NLP任务还是实时文本生成,Transformer.js都提供了强大支持,成为构建浏览器AI应用的核心工具。
508 1
|
2月前
|
NoSQL 前端开发 MongoDB
前端的全栈之路Meteor篇(三):运行在浏览器端的NoSQL数据库副本-MiniMongo介绍及其前后端数据实时同步示例
MiniMongo 是 Meteor 框架中的客户端数据库组件,模拟了 MongoDB 的核心功能,允许前端开发者使用类似 MongoDB 的 API 进行数据操作。通过 Meteor 的数据同步机制,MiniMongo 与服务器端的 MongoDB 实现实时数据同步,确保数据一致性,支持发布/订阅模型和响应式数据源,适用于实时聊天、项目管理和协作工具等应用场景。

热门文章

最新文章