Write javascript using python

How can I integrate Python and JavaScript?

Is it possible to integrate Python and JavaScript? For example, imagine you wanted to be able to define classes in JavaScript and use them from Python (or vice versa). If so, what’s the best way? I’m interested not only if this is possible but if anyone has done it within a «serious» project or product. I’m guessing it would be possible using Jython and Rhino, for one example, but I’m curious whether or not anyone’s ever actually done this, and if there are solutions for other platforms (especially CPython).

Perhaps you could compile CPython to JavaScript using Emscripten, and then run CPython in the browser. It might be possible to call Python functions from JavaScript, and vice versa. syntensity.com/static/python.html

For what it’s worth, this SO answer presents a unified approach to sharing objects between JS and Python, and is implemented in this repo which simply wraps a NodeJS module bundled via webpack and exposes it as a Python Module.

13 Answers 13

pyjs is a Rich Internet Application (RIA) Development Platform for both Web and Desktop. With pyjs you can write your JavaScript-powered web applications entirely in Python.

@AppleGrew Is it possible to run pyjamas entirely in the browser (without any server-side components)?

Here’s something, a Python wrapper around the SeaMonkey Javascript interpreter. http://pypi.python.org/pypi/python-spidermonkey

This question is not exactly young, but there have come up some alternatives:

• «Skulpt is an entirely in-browser implementation of Python.»
• Brython — «A Python 3 implementation for client-side web programming»
• RapydScript — «Python-like JavaScript without the extra overhead or quirks»
• Transcrypt — «Lean and mean Python 3.6 to JavaScript compiler with multiple inheritance, sourcemaps, static type checking and selective operator overloading.» (also on Github)

Just to add my two cents, both Skulpt and Brython are toys rather than full-blown compilers/languages. RapydScript and Transcrypt will run circles around them performance-wise. In fact, the absence of performant Python interpreter in JS was the reason RapydScript was invented to begin with. RapydScript now has an added benefit of type safety, just like TypeScript. disclaimer: I’m the RapydScript maintainer.

Transcrypt can be pip-installed, nice if you don’t wish to immerse yourself in the js ecosystem. RapydScript however seems to be the quickest transpiled option as far as I gathered so far. A nice array of options is described here. There is also Jiphy which seems unmaintained.

there are two projects that allow an «obvious» transition between python objects and javascript objects, with «obvious» translations from int or float to Number and str or unicode to String: PyV8 and, as one writer has already mentioned: python-spidermonkey.

there are actually two implementations of pyv8 — the original experiment was by sebastien louisel, and the second one (in active development) is by flier liu.

my interest in these projects has been to link them to pyjamas, a python-to-javascript compiler, to create a JIT python accelerator.

so there is plenty out there — it just depends what you want to do.

pyv8 is still well-maintained, in contrast to almost all of the other ideas presented in the answers here, unfortunately.

If your just interested in sharing complex data types between javascript and python, check out jsonpickle. It wraps the standard Python JSON libraries, but has some smarts in serializing and deserializing Python classes and other data types.

Quite a few Google App Engine projects have used this library. Joose and FirePython both incorporate jsonpickle.

Note that jsonpickle uses a non-standard «py/ref» reference type that makes it harder to use for non-python clients. There’s currently no way to turn it off. code.google.com/p/jsonpickle/issues/detail?id=9

PyExecJS is able to use each of PyV8, Node, JavaScriptCore, SpiderMonkey, JScript.

>>> import execjs >>> execjs.eval("'red yellow blue'.split(' ')") ['red', 'yellow', 'blue'] >>> execjs.get().name 'Node.js (V8)' 

Many of the examples are years out of date and involve complex setup. You can give JSPyBridge a try (full disclosure: I’m the author).

It’s a bi-directional bridge that lets you use JavaScript code from Python, and vice-versa. That means that Python code can call JS callbacks, and JS code can call Python callbacks.

Access Python from JS, numpy + matplotlib example, with the ES6 import system:

import < py, python >from 'pythonia' const np = await python('numpy') const plot = await python('matplotlib.pyplot') // Fixing random state for reproducibility await np.random.seed(19680801) const [mu, sigma] = [100, 15] // Inline expression evaluation for operator overloading const x = await py`$ + $ * $` // the histogram of the data const [n, bins, patches] = await plot.hist$(x, 50, < density: true, facecolor: 'g', alpha: 0.75 >) console.log('Distribution', await n) // Always await for all Python access await plot.show() python.exit() 

Through CommonJS (without top level await):

const < py, python >= require('pythonia') async function main() < const np = await python('numpy') const plot = await python('matplotlib.pyplot') . // the rest of the code >main().then(() => python.exit()) // If you don't call this, the process won't quit by itself. 

from javascript import require, globalThis chalk, fs = require("chalk"), require("fs") print("Hello", chalk.red("world!"), "it's", globalThis.Date().toLocaleString()) fs.writeFileSync("HelloWorld.txt", "hi!") 

Источник

Python & EEL. Делаем просто на Python’е и красиво на JS

Тема красивых интерфейсов была и будет актуальна всегда. Кто-то использует для создания графических приложений C#, кто-то использует Java, кто-то уходит в дебри C++, ну а кто-то извращается с Python, используя tkinter или PyQT. Существуют различные технологии, позволяющие совмещать красоту графических дизайнов, создаваемых на HTML, CSS и JS с гибкостью в реализации логики приложения, которую может дать другой язык. Так вот, для тех, кто пишет на самом лучшем языке программирования Python, есть возможность писать красивые интерфейсы на HTML, CSS и JS и прикручивать к ним логику на Python.

В этой статья я хочу показать на небольшом примере, как же все таки создать простое и красивое десктопное приложение на HTML, CSS, JS и Python. В качестве библиотеки для связи всех компонентов будем использовать EEL.

Установка

Оговорюсь, что я работаю на windows 10 x64.

Для начала установим саму библиотеку выполнив простую команду:
pip install eel
После установки одной лишь библиотеки можно начинать наш путь.

Наше приложение будет выглядеть таким образом:

Логика приложения очень простая: при нажатии кнопки “рассчитать” считываются значения в поле для ввода рублей, полученные данные отправляются в Python, где происходит расчет курса валют. Python возвращает нам данные и мы выводим из через JS

Раскидываем по папкам

Разобьем теперь наш проект на модули. В папку “front” будем класть всё, что связано с графической частью нашего приложения. В папку “back” будем помещать все наши исходники на python. Еще создадим папку middle, в которую будем помещать методы, вызываемые из JS (об этом чуть позже). В Главной директории создадим файл main.py, он будет запускать наше приложение.

Логика на Python

В качестве теста реализуем простое приложение конвертер валют (да-да, банально, никому не надо, на гитхабе миллион проектов). Для этого на python установим библиотеку CurrencyConverter:
pip install currencyconverter

Теперь приступим к написанию логики на python. Реализуем метод, который на вход будет принимать сумму, валюту с которой нам надо перевести и валюту, на которую нам надо перевести. Создадим “convert.py” в директории “back” и запишем в него следующий код:

from currency_converter import CurrencyConverter converter = CurrencyConverter() def convert_value(value: float, from_cur: str, to_cur: str): return converter.convert(value, from_cur, to_cur)

Теперь в директории “middle” создадим файл “mid_convert.py” и пропишем следующий код:

from back.convert import convert_value import eel @eel.expose def convert_value_py(value:float, from_cur:str, to_cur:str)->float: return convert_value(value, from_cur, to_cur)

Что здесь вообще происходит? Файл “mid_convert.py” будет служит связующим звеном между JS и Python. Декоратор @eel.expose дает нашей программе понять, что функция, описанная ниже, может быть вызвана из JS. Таким образом, любая функция, которую мы в будущем захотим вызывать из JS, должна быть обернута декоратором @eel.expose. Очевидно, что не имеет смысла делать лишних модулей, если у вас простой проект, можно было обернуть декоратором функцию “convert_value” в модуле “convert.py”. В больших проектах разбиение программы на такие слои позволит легче расширять и оптимизировать код.

Подключаем Python к JS

Теперь подключим нашу логику на Python к самому JS. Для этого примера я использую простую страничку, сверстанную чисто при помощи HTML, CSS (или вы можете использовать популярные фреймворки, которые нужны вам для работы с графикой). Первым делом необходимо подключить библиотеку eel к самому JS:

Далее реализуем функционал кнопки “рассчитать”. По нажатию кнопки первым делом необходимо считать значение рублей и пойти по каждой валюте, чтобы перевести значение.

async function create_cur_for_rub () < // получаем значение введенных рублей let value_rub = parseFloat(document.getElementById("rub-input").value); // получаем список всех input'ов, в которые надо перевести рубли let list_curs = document.getElementById("list-cur").children; for (let div_cur of list_curs) < // берем название денежной единицы let name_cur = div_cur.getElementsByTagName("span")[0].textContent; // теперь передает значение в Python для обработки let value_cur = await eel.convert_value_py(value_rub, "RUB", name_cur)(); // выводим на экран полученное значение div_cur.getElementsByTagName("input")[0].value = value_cur; >> document.getElementById("btn-sum").onclick = create_cur_for_rub;

Обратите внимание на строку “let value_cur = await eel.convert_value_py(value_rub, «RUB», name_cur)();”. Важно, что вызов функции из питона происходит в асинхронном режиме, поэтому обязательно необходимо сделать асинхронной ту функцию, в которой есть вызов Python кода. При вызове функции из eel необходимо ставить пару (), где в первые круглые скобки будут передаваться наши аргументы.

Как мы видим, все работает.

Запуск программы

Для запуска кода используем файл “main.py”. В нем импортируем библиотеку eel и всё, что мы писали в файле “min_convert.py” для того, чтобы при запуске проекта подтянуть все функции, которые мы оборачивали в eel.expose:

import eel from middle.mid_convert import *

Теперь необходимо проинициализировать через eel ту директорию, где лежит front-end нашего приложения. При помощи команды eel.init(args). Далее для запуска самого приложения вызывает метод eel.start(args):

if __name__ == '__main__': eel.init('front') eel.start('index.html', mode="chrome", size=(760, 760))

Метод eel.start принимает на вход несколько параметров (подробнее о них см. официальную документацию по eel). Самым интересным параметром является “mode”. При помощи него вы можете запустить свой проект, как в браузере, так и в виде отдельного приложения. Например, вы можете указать параметр “default”, в таком случае приложению будет запускать в браузере по умолчанию. Если у вас стоит google chrome, то указав параметр “mode=chrome” ваша программа откроется в виде отдельного приложения.

Также можно использовать chromium. Для этого скачиваем его с официального сайта. Разархивируем его в какую-нибудь папку и прописываем следующий код в нашем “main.py”:

eel.browsers.set_path("chrome", "C:/Users/admin/Documents/chrome-win/chrome.exe") eel.start('index.html', mode="chrome", size=(760, 760))

Вывод

Как мы видим, то создавать красивые десктопные приложения с использованием Python в качестве языка для реализации основной логики не так сложно. Вы можете устанавливать какие угодно библиотеки, реализовать нужный код с использованием Python, а писать красивые интерфейсы на HTML,CSS и JS.

P.S. это моя первая статья на Habr, пишите Ваши пожелания, замечания и отзывы, буду рад увидеть любой комментарий.

Источник