Запустить Python в браузере, как и зачем?
Питер Ван, генеральный директор Anaconda, во время последнего PyCon в США раскрутил все сообщество разработчиков невероятной и в то же время странной идеей, которую они реализовали: PyScript.
Что такое PyScript и для кого он нужен?
Этот проект позволяет Python работать в вашем браузере, встраивая его в HTML, как фрагмент JavaScript внутри документа HTML. Но почему это?
На этот вопрос нет четкого ответа, но, возможно, это улучшение для главного разработчика Python: специалистов по данным.
Используя PyScript, им будет разрешено напрямую внедрять диаграммы Matplotlib на свой веб-сайт без особых сложных внутренних работ или чего-то особенного.
Для меня главная сила PyScript — это возможность практически совместить функции и методы Python и JavaScript внутри ваших фрагментов кода на стороне клиента. Мы увидим пример позже.
Ах, все это тоже с открытым исходным кодом. Вы можете проверить исходный код из этого репозитория GitHub: https://github.com/pyscript/pyscript
Как это работает?
PyScript написан на Pyodide, который является мостом между CPython и WebAssembly.
CPython — это производительная реализация Python, написанная как на Python, так и на C.
WebAssembly — это низкоуровневый язык, очень похожий на ассемблер, как следует из названия, с потрясающей производительностью, работающий в двоичном формате. Он используется как своего рода транспилятор для Python, который вы пишете.
Если вам нужны более подробные сведения о том, как это работает, я предлагаю вам посетить официальный веб-сайт anaconda и страницу PyScript по следующим ссылкам:
- Анаконда: https://www.anaconda.com/blog/pyscript-python-in-the-browser
- ПиСкрипт: https://pyscript.net/
Как вы можете использовать PyScript?
Сейчас мы все еще находимся в альфа-версии PyScript, но уже можем ее использовать. Вам нужно только импортировать файл Javascript и CSS в ваш основной файл HTML. Вот код, который вам нужен для этого:
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />Теперь у вас есть следующие теги HTML:
<py-env> #To declare packages you need </py-env> <py-script> #To insert Python logic into HTML</py-script> <py-repl> #Create a REPL, where user input generates an output </py-repl>
py-env— определяет все пакеты Python, необходимые для запуска вашего кода PyScript.py-script— содержит всю встроенную логику Python.py-repl— создает компонент REPL, который отображает результат, определенный пользователем.
Примеры кода PyScript
1. Привет, мир
Что может быть первым примером, если не сценарий Hello World?
Все, что вам нужно, это импортировать два файла, указанные ранее. Затем в теге py-script напишите оператор для печати в Python. Вот простой код:
<!DOCTYPE html>
<html lang="en">
<head>
<script defer src="https://pyscript.net/alpha/pyscript.js"> </script>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<title>PyScript Hello World</title>
</head>
<body>
<py-script>
print("Hello World!")
</py-script>
</body>
</html>Через некоторое время все появится.
Выход:
2. Простейшая возможная диаграмма
Как мы уже говорили, эта реализация предназначена специально для специалистов по данным. Итак, вот пример, который может быть полезен им при разработке веб-сайта.
Помимо стандартного импорта, нам также нужна реализация Bokeh JavaScript. Для этого нам нужно импортировать все через скрипт в голову и добавить Brokeh в py-env tag .
На данный момент в теге py-script находится код, близкий к Matplotlib. Вот реализация. Обернувшись с данными, вы сможете создать свою собственную диаграмму. Вот код:
<!DOCTYPE html>
<html lang="en">
<head>
<script defer src="https://pyscript.net/alpha/pyscript.js"> </script>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-2.4.2.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-gl-2.4.2.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.2.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.4.2.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-mathjax-2.4.2.min.js"></script>
<title>Chart example</title>
<py-env>- bokeh</py-env>
</head>
<body>
<div id="chart"></div>
<py-script>
import json
import pyodide
from js import Bokeh, console, JSON
from bokeh.embed import json_item
from bokeh.plotting import figure
from bokeh.resources import CDN
students = ['Alice', 'Bob', 'Mattew', 'Sally']
counts = [6, 9, 8, 5]
p = figure(x_range=students, height=350, title="Students marks", toolbar_location=None, tools="")
p.vbar(x=students, top=counts, width=0.7)
p.xgrid.grid_line_color = None
p.y_range.start = 0
p_json = json.dumps(json_item(p, "chart"))
Bokeh.embed.embed_item(JSON.parse(p_json))
</py-script>
</body>
</html>
Выход:
Что дальше и общие мысли
Как разработчик Python, я думаю, что PyScript может вывести возможности Python на новый уровень, а также упростить веб-разработку.
Это связано с тем, что встраивание диаграмм почти изначально в HTML с помощью Python — это очень важно, но на данный момент это почти единственный реальный вариант использования.
Для манипулирования DOM основным вариантом остается JavaScript, и, возможно, так будет всегда. PyScript, на мой взгляд, никогда его не заменит.
Но я думаю, что цель PyScript не в том, чтобы заменить Javascript, а в том, чтобы улучшить его и помочь специалистам по данным, которые имеют дело с браузерами и веб-разработкой. Это можно было бы считать JavaScript на стероидах, с некоторой фантазией.
Но я также уверен, что в будущем у PyScript появятся и другие очень мощные варианты использования. Как уже было сказано, это только на Альфе, так что все возможно.
Вокруг этой технологии много шумихи, в том числе и от меня самого. Оправдано это или нет? Мы должны дождаться этого. Может быть, мы совсем забудем об этом, но я так не думаю.
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Посетите наш Community Discord и присоединитесь к нашему Коллективу талантов.
