PyScript, созданный Anaconda, — это экспериментальная, но многообещающая новая технология, которая делает среду выполнения Python доступной в качестве языка сценариев в браузерах с поддержкой WebAssembly.
Каждый современный широко используемый браузер теперь поддерживает WebAssembly, высокоскоростной стандарт среды выполнения, с которым могут компилироваться многие языки (например, C, C++ и Rust). Эталонная реализация Python написана на C, а один из более ранних проектов, Pyodide, предоставил порт среды выполнения Python на WebAssembly.
PyScript, тем не менее, стремится предоставить целую среду браузера для запуска Python в качестве языка веб-скриптов. Он основан на Pyodide, но добавляет или расширяет такие функции, как возможность импортировать модули из стандартной библиотеки, использовать сторонний импорт, настраивать двустороннее взаимодействие с объектной моделью документа (DOM) и делать много других вещей, полезных в обоих случаях. миры Python и JavaScript.
На данный момент PyScript все еще остается прототипом и экспериментальным проектом. Anaconda не рекомендует использовать его в производстве. Но любопытные пользователи могут опробовать примеры на сайте PyScript и использовать доступные компоненты для создания экспериментальных приложений Python-plus-JavaScript в браузере.
В этой статье мы познакомимся с основами PyScript и посмотрим, как он позволяет взаимодействовать Python и JavaScript.
Программирование с использованием PyScript
По своей сути PyScript состоит из одного JavaScript-компонента, который вы можете добавить на веб-страницу. Это включает в себя загрузку базовой среды выполнения PyScript и автоматическое добавление поддержки пользовательских тегов, используемых в PyScript.
Вот простой пример проекта «Привет, мир» на PyScript:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/unstable/pyscript.js"></script>
</head>
<body>
<py-script output="out">
print("Hello world")
</py-script>
<div id="out"></div>
</body>
</html>
script тег в документе head загружает основные функции PyScript. pyscript.css таблица стилей необязательна, но полезна. Помимо прочего, во время загрузки страницы он вставляет пользователю уведомления о том, что страница делает — загружает среду выполнения Python, инициализирует и т. д.
Код Python заключен в пользовательский py-script ярлык. Обратите внимание, что код должен быть отформатирован в соответствии с соглашениями Python об отступах, иначе он не будет работать должным образом. Помните об этом, если вы используете редактор, который автоматически переформатирует HTML; это может исказить содержимое py-script заблокировать и сделать его неработоспособным.
Любой код Python оценивается после завершения загрузки компонентов PyScript. Если скрипт в тегах пишет в stdout (как с print) вы можете указать, где на странице показывать вывод, указав output свойство. В этом примере stdout поскольку сценарий направляется в div с идентификатором "out".
Если вы сохраните это в файл и откроете его в веб-браузере, вы сначала увидите индикатор «загрузки» и паузу, пока браузер получает среду выполнения PyScript и настраивает ее. Среда выполнения должна оставаться в кэше при будущих загрузках, но ее активация все равно займет некоторое время. После этого, Hello world должно появиться на странице.
Импорт стандартной библиотеки
Скрипты, использующие только встроенные функции Python, полезны лишь отчасти. Стандартная библиотека Python доступна в PyScript так же, как и в обычном Python: просто import и приступайте к работе. Импорт стандартных библиотек должен работать только в PyScript.
Если вы хотите изменить приведенный выше блок сценария для отображения текущего времени, вам не нужно будет делать это иначе, чем в обычном Python:
import datetime
print ("Current date and time:",
datetime.datetime.now().strftime("%Y/%m/%d %H:%M:%S"))
Использование библиотек из PyPI
Что, если мы захотим установить пакет из PyPI и использовать его? В PyScript есть еще один тег: py-env, который указывает на необходимость установки сторонних пакетов. Давайте заменим py-script в исходном скрипте с помощью этих двух блоков:
<py-env>
- humanize
</py-env>
<py-script output="out">
from datetime import datetime
import humanize
now_int = int(datetime.timestamp(datetime.now()))
now_fmt = humanize.intcomma(now_int)
print("It has been", now_fmt, "seconds since the epoch.")
</py-script>
py-env позволяет нам перечислить пакеты для добавления точно так же, как мы могли бы перечислить их в requirements.txt файл для проекта Python. Затем мы можем импортировать и использовать их, как и любой другой пакет Python. В этом примере мы используем сторонний пакет под названием humanize чтобы облегчить чтение числового вывода.
Обратите внимание, что не все пакеты из PyPI будут установлены и работать должным образом. Например, requests требуется доступ к сетевым компонентам, которые еще не поддерживаются. (Возможным решением этой проблемы является использование pyodide.http.pyfetchкоторый поддерживается изначально.) Но пакеты чистого Python, такие как humanize, должно работать нормально. И пакеты, используемые в примерах, предоставленных Anaconda, например numpy, pandas, bokehили matplotlibтоже будет работать.
Импорт локально
В качестве другого распространенного сценария предположим, что вы хотите импортировать из других сценариев Python в том же дереве каталогов, что и ваша веб-страница. Использование импорта упрощает перемещение большей части вашей логики Python из самой веб-страницы, где она смешивается с вашей презентацией и с ней может быть сложно работать.
Обычно Python использует наличие других .py файлы в файловой системе как индикаторы того, что можно импортировать. PyScript не может работать таким образом, поэтому вам нужно будет указать, какие файлы вы хотите сделать доступными в качестве импортируемых модулей.
Допустим, у вас есть веб-страница с именем index.html в заданном каталоге вашего веб-сервера, и вы хотите разместить файл Python с именем main.py рядом с ним. Таким образом, ваш внутристраничный скрипт может быть просто import mainи вы можете ограничить большую часть логики Python фактическим .py файлы.
Укажите файлы Python, которые вы хотите сделать импортируемыми в вашем py-env блокировать:
- paths:
- ./main.py
Это позволило бы main.pyв том же каталоге веб-сервера, что и сама веб-страница, чтобы можно было импортировать с помощью import main.
Важная вещь, о которой следует помнить: вы не можете выполнить такой импорт на запущенной вами веб-странице. локально в браузере. Это связано с ограничениями доступа к файловой системе, налагаемыми средой выполнения WebAssembly и самим браузером. Вместо этого вам потребуется разместить страницы на веб-сервере для обслуживания веб-страницы и .py файл.
Тег REPL
Пользователи Python должны быть знакомы с Jupyter Notebook, средой живого программирования в браузере для Python, обычно используемой для математики и статистики. PyScript предлагает примитивный строительный блок для такой среды: py-repl ярлык.
py-repl генерирует поле ввода на веб-странице, которое функционирует как очень простая версия среды Jupyter Notebook. Вот пример из собственных демо-версий Anaconda:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
<h1><b>pyscript REPL</b></h1>
Tip: press Shift-ENTER to evaluate a cell
<br>
<div>
<py-repl id="my-repl" auto-generate="true"> </py-repl>
</div>
</body>
</html>
Запустите этот код, и вы увидите поле ввода, которое работает как Python REPL.
В настоящее время тег REPL практически не имеет документированных возможностей настройки. Например, если вы хотите программно получить доступ к содержимому ячейки или ее результатам, не существует четкой документации о том, как это сделать.
ИДГКомпонент REPL PyScript, похожий на Jupyter, позволяет интерактивно запускать Python на странице, хотя он еще не очень гибкий и настраиваемый.
Взаимодействие с прослушивателями событий JavaScript
Поскольку PyScript основан на pyodideоно использует pyodideмеханизмы взаимодействия с DOM. Например, если бы мы хотели получить значение поля ввода на веб-странице и использовать его в нашем коде Python, мы бы сделали следующее:
<input id="txt">
<py-script>
from js import document, console
from pyodide import create_proxy
def _eventlog(e):
console.log(f"Input value: {e.target.value}")
eventlog = create_proxy(_eventlog)
document.getElementById("txt").addEventListener("input", eventlog)
</py-script>
js библиотека предоставляет интерфейс Python для многих распространенных объектов JavaScript, таких как document и console объекты. В PyScript они ведут себя почти так же, как и в JavaScript. create_proxy функционировать в pyodide позволяет нам взять объект функции Python и сгенерировать для него интерфейс JavaScript, чтобы его можно было использовать в качестве прослушивателя событий для input коробка. Любые нажатия клавиш в input box регистрируются на консоли, но их также можно обрабатывать на стороне Python.
