Python вместо javascript в браузере
К огромному удовлетворению нашей читательской аудитории, наша работа над обновлением книг по Python не прекращается. Но не прекращается и поиск в этом направлении — и сегодня мы хотели бы упомянуть Brython — Python для браузеров. Статья короткая, немного игривая и детективная, мы постарались сохранить авторский стиль.
В этой статье дается краткое введение в работу с Brython, реализацией Python для разработки на фронтенде (в браузере).
Весь проект выложен здесь.
Введение
Завидуя успеху программистов JavaScript, питонисты-заговорщики тайно встретились, чтобы обсудить будущее Python в этом апокалиптическом мире. Повсюду JavaScript, отжирающий поляну у Python. Вооружившись Node.js, язык JavaScript вторгся на территорию Python, и тот утратил свою доминирующую роль всеми любимого серверного языка, где ранее соперничал с Ruby (помните те времена?). Тогда пришло время сделать вылазку в самое сердце территории JavaScript: в браузер.
Не забывайте вашу историю (и помните о будущем)
Эта дилемма волновала не только вышеупомянутых заговорщиков. Был еще один рыцарь плаща и кинжала, автор Transcrypt. Он решил написать компилятор для Python, компилирующий код прямо в JavaScript Как хороший отравитель, он не оставлял после себя и следа Python. Выглядело это многообещающе.
Другие предпочитали воспользоваться уроками истории. Просто иммигрировать всей семьей. По крайней мере, именно так мыслили создатели Pyodide. Они собирались создать на стороне JavaScript анклав с полноценным интерпретатором Python, который мог бы выполнять код на Python. Соответственно, там можно было гонять любой код Python, в том числе, большую часть его стека для data science, где есть привязки к языку C (например, Numpy, Pandas).
Это также выглядит очень многообещающе. Но первичные ленивые тесты, проведенные автором Pyodide, показали, что поначалу страница грузилась немного медленно.
Hello World
Давайте напишем традиционный ‘Hello World’
А вот и десант Brython (это я о компиляторе).
В теге body , показанном выше, мы пишем код на Brython:
Просто добавляем Hello World в элемент document . Хм. Очень легко.
В полном виде — ниже.
В таком случае на страницу будет просто выведено приветствие “Hello World”.
Калькулятор
Давайте напишем калькулятор на Brython. Весь его код выложен здесь.
Да, вы догадались, нам понадобится таблица. Давайте ее сделаем.
Добавим только первый ряд. То есть отобразим поле для чисел (назовем его result ) и клавишу C.
Да, я тоже не слишком уверен в этом синтаксисе с <= . Но, посудите сами, такая классная библиотека, так что я и на него согласен.
Теперь добавим клавиатуру
Наконец, добавим calc в document .
Итак, пока все хорошо. Как же нам добиться, чтобы все это работало? Сначала нужно захватить ссылку на элемент result, чтобы управлять им, когда будут нажиматься клавиши.
Далее нам потребуется обновлять result всякий раз, когда будет нажат любой элемент на клавиатуре. Для этого давайте сделаем обработчик событий. Доверимся разработчикам Brython и сочтем, что этот код работает. Обратите внимание на манипуляции с result в зависимости от того, какую кнопку вы нажали.
Наконец, связываем вышеописанный обработчик событий с событием click на всех кнопках.
Видите как все было просто. Но, если серьезно, Brython кажется мне шедевром инженерной работы и, пожалуй, наилучшей иллюстрацией любви к языку Python. Пожалуйста, поддержите разработчиков и поставьте им звездочку в репозитории на Github!
“Как так?” —думаю, примерно такой будет реакция большинства на заголовок этой статьи. Что значит “Используйте Python для браузера?”. Ведь всем известно, что в браузерах может выполняться только JavaScript.
Что ж, ниже приведён скриншот исходного кода моего личного веб-сайта. Обратите внимание на его отличия:
Всё верно, это Python!
А теперь давайте поговорим о том, как он работает, и какие другие альтернативы браузерному JS существуют.
Brython — это реализация Python 3, написанная на JavaSсript и позволяющая писать код для браузеров на Python. По сути, это JS библиотека, преобразующая код Python в JS-эквивалент и вычисляющая его при выполнении.
И пос к ольку “написание кода для браузера на Python” звучит круто, я решил эту тему осветить.
Создаём “Змейку” при помощи Brython
Вот ссылка на мой сайт, где вы можете попробовать два варианта игры “Змейка”: написанный на Brython и JavaScript. А здесь вы найдёте ссылку на Github, где размещён весь стоящий за этим код.
Чтобы испытать Brython я решил создать классическую игру “Змейка”.
Поскольку я ни специалист по HTML Canvas, ни разработчик игр, то решил использовать в качестве стартовой точки эту её реализацию на JavaScript. Я уже создавал собственную игру “Змейка” ранее, но в данном случае эта она намного симпатичней и компактней.
Итак, поверх реализации взятой “Змейки” я расширил функциональность набором очков и записью рекордного их количества, немного улучшил интерфейс, добавил кнопки паузы и инструкций. После этого я перенёс игру в Brython.
Честно говоря, я также изменил данный код так, чтобы он выполнялся в режиме strict JS, поскольку автор игры использовал такие элементы, как глобальные переменные, которые, на мой взгляд, не отражают преимущественный облик JavaScript (я нисколько его за это не критикую, так как он писал код на скорость), а я же хотел получить наглядное сравнение кода JS с кодом Brython.
В итоге JavaScript получился такой, и я не буду размещать здесь его фрагмент, потому что основная наша цель — Brython.
Несмотря на то, что некоторые части кода Brython были “прямым переводом” JS варианта, некоторые из его частей вроде функции набора очков, я создал непосредственно в Brython, а затем реализовал в JS, чтобы понять, как это всё работает. Конечный результат получился следующим:
Теперь, исходя из этого фрагмента, давайте проясним некоторые ключевые принципы Brython:
Включение brython.js
Brython не требует установки. Достаточно импортировать скрипт внутрь <head> :
Выполнение Brython
Для того, чтобы Brython преобразовал и вычислил код Python как обычный JS, нужно вызвать brython прямо при загрузке тела документа так:
Эта команда произведёт поиск тегов скриптов типа text/python и вычислит внутри них код.
Web API
По умолчанию JavaScript позволяет доступ к таким элементам, как объекты document и window , являющимся основополагающими в любом проекте JS. В связи с этим Brython также нужен способ включить их в процесс.
Для решения этой задачи его создатели могли просто позволить разработчикам по умолчанию мгновенно обращаться к document и window в своём коде Python, но тогда бы упала производительность, а отладчики Python постоянно бы выдавали undefined variable .
В итоге, чтобы иметь возможность использовать эти API, нам нужно импортировать их так же, как и любой модуль Python:
Теперь уже не нужно выполнять для них pip install . В конце концов мы пишем это в нашем HTML. Просто включите инструкции импорта и Brython будет знать, что делать.
Чтобы на деле увидеть, насколько хорошо это работает, я решил попробовать несколько разных методов из Web API ( alert , setInterval , addEventListener и т.д.). Всё сработало, как я и ожидал.
Нативные объекты и методы JavaScript
Когда в создаваемой нами игре змея съедает яблоко, нам нужно в случайном месте поля сгенерировать новое.
Как бы то ни было, я не могу использовать модуль Python random *. Как же тогда мне сгенерировать случайное число, не создавая собственную библиотеку?
На деле выяснилось, что мы можем обращаться к большей части JS, чем я думал. Смотрите:
Если использовать модуль javascript , то в случае наличия объекта, к которому можно обратиться через JS, я могу обратиться к нему через Brython.
Если я импортирую, к примеру, JS библиотеку (jQuery, Bootstrap) и захочу использовать её методы, то смогу сделать это при помощи from javascript import <library> . И, естественно, я также смогу использовать встроенные объекты JS тем же способом, что и Date или String .
*Очевидно, что Brython предоставляет некоторые стандартные библиотеки Python, реализованные непосредственно в JavaScript, и если у такой библиотеки нет JS версии, то у вас по-прежнему должна быть возможность импортировать модуль. В этом случае Brython извлечёт чистую версию Python и выполнит её наряду со своим кодом. Тем не менее random в моём случае не сработал, но я могу понять почему.
Отличительные принципы языка
В Python, если я хочу распаковать список, то могу выполнить list2 = [*list] . Кроме того, если я захочу определить значение переменной, основываясь на состоянии, то использую foo = 10 if condition else 20 .
У этих инструкций есть эквивалент в JavaScript: оператор распространения ( [. arr] ) и троичный оператор ( let foo = condition ? 10 : 20 ).
Но поддерживает ли их Brython?
Я их испробовал, и сработали они прекрасно. Вы увидите, что распаковка списков и условное присваивание Python включены в мой итоговый исходный код.
Отладка
Честно говоря, я думал, что отладка Brython будет ужасной. На деле же оказалось всё не так плохо. Я, конечно, создал маленький и весьма простой проект, но ошибки, выброшенные Brython, были точны и достаточно описательны. По меньшей мере это касается синтаксиса. Импортирование же модулей Python представляет собой совсем другую историю.
Код Brython Python (на скриншоте — версия 3.8.8)
Разработчики проекта Brython Python выпустили новый релиз, Brython 3.9. Сам проект позиционируется, как «Python для браузера». Он основан на Python 3 и выполняется на стороне браузера, причем для разработки веб-скриптов вместо JavaScript используется Python.
Код проекта написан на Python и распространяется под лицензией BSD. Новый релиз совместим с Python 3.9, плюс обновлена стандартная библиотека.
Для того, чтобы определять логику работы сайта на стороне клиента, используя Python вместо JS, веб-разработчику необходимо подключить две библиотеки, brython.js и brython_stdlib.js. Для подключения Python-кода на странице, используется тег script с mime-типом text/python.
Со стороны Brython разрешено как встраивать код на страницу, так и загружать внешние скрипты. Пример:
Из скрипта предоставляется полный доступ к элементам и событиям DOM. Кроме доступа к стандартной библиотеке Python есть и специализированные библиотеки для работы с DOM и JavaScript-библиотеками, такими как jQuery, D3, Highcharts и Raphael.
Поддерживается использование CSS-фреймворков JavaScript-библиотеками, такими как jQuery, D3, Highcharts и Raphael.
Python-блоки выполняются из блоков script через предварительную компиляцию кода, которая выполняется обработчиком Brython после загрузки страницы. Компиляция запускается при помощи вызова функции brython(), например через добавление body onload="brython()" .
На основе кода Python формируется представление на языке JS, затем оно выполняется штатным JavaScript-движком браузера.
Что касается производительности, то большинство операций во встраиваемых в web-страницы Python-сценариях близка к производительности Cpython. Единственный момент, когда возникает задержка — это этап компиляции. Но задержку можно устранить при помощи предварительно скомпилированного в JavaScript кода, которая используется для ускорения загрузки стандартной библиотеки.
Подробнее о запуске Brython
Для того, чтобы «Python для браузера» мог как транслировать, так и исполнять Python-код подобно JS-коду, требуется вызывать Brython в момент загрузки тела документа.
В этом случае тег ищет теги script с типом text/python и запускает код. Для того, чтобы использовать API для работы с вебом, разработчики Brython реализовали простое решение — импорт API, аналогичный импорту любого иного модуля на Python:
Brython справляется со всем сам, так что дополнительные команды выполнять не нужно.
Важный момент — для работы с Brython необходим опыт работы с JavaScript, хотя бы базовый уровень. Без этого разобраться будет довольно сложно.
Hello Reader, hope you and your family are in good health!
Javascript is a very powerful language, honestly, I am a baby in Js but I have always wondered, can Js integrated with Python. Recently, I was surfing the Internet and Js2Py module appeared in my Google Search.
In this Blog article, we will learn how to Run Javascript commands from inside Python script. We will make use of the Js2Py module.
Check out the Repository for Ultimate Resource in python. Drop a star if you find it useful! Got anything to add? Open a PR on the same!
You can refer to my YouTube video Tutorial for better Understanding and a step by step guide of the same.
You can translate JavaScript to Python using Js2Py. Js2Py is a Python module which can be used to translator JavaScript to Python & acts as a JavaScript interpreter written in 100% pure Python.
- It translates any valid JavaScript (ECMA Script 5.1) to Python.
- The translation is fully automatic.
- Does not have any dependencies — uses only standard python library.
It has three limitations:
- strict mode is ignored.
- with statement is not supported.
- Indirect call to eval will is treated as a direct call to eval (hence always evals in local scope)
If you wish to know more about it, you can refer to Js2Py Documentation. Use this link to navigate to the documentation.
Now that you are aware of Js2Py basics, we can move forward to the coding section. Let’s get started!
You can find all the code at my GitHub Repository. Drop a star if you find it useful.
In order to access the Python library, you need to install it into your Python environment, use the following command to install Js2Py
Now, let’s import the package in our Python script.
Let’s start with a simple Hello World! .
Let’s look at the Equivalent python code:
So here, we stored the javascript command in js1 . We will make use of eval.js method from js2py module here, pass in our js code in it and store it in res1 . Finally we are output our result.
Now, let’s look at another example! Let’s create a addition function in Javascript.
Let’s look at the Equivalent python code:
We will make use of eval.js method from js2py module here, pass in our js function in it and store it in res2 .
Finally, let’s print out our result. So, save and run the python script.
And it will output the addition of two numbers. It will vary as it depends upon the user input.
This is a basic working example of Js2Py. This is all about the Running Javascript commands from inside Python script. That’s it!
Simple, isn’t it? Hope this tutorial has helped. I would strongly recommend you to Check out the YouTube video of the same and don’t forget to subscribe to my Channel.
You can play around with the Js2Py library and even explore more features.
You can find all the code at my GitHub Repository. Drop a star if you find it useful.
Thank you for reading, I would love to connect with you at Twitter | LinkedIn.
Читайте также: