Русский
Русский
English
Статистика
Реклама

Перевод Brython заменяем JavaScript на Python на фронтенде

Привет, Хабр!

К огромному удовлетворению нашей читательской аудитории, наша работа над обновлением книг по 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, показали, что поначалу страница грузилась немного медленно.

Тогда заговорщики поступили именно в духе хороших заговорщиков: создали другой компилятор для преобразования Python в JavaScript, но на этот раз выполнять компиляцию в JavaScript при загрузке страницы (а не как Transcrypt, компилирующий код в JavaScript заранее). Так сформировалось Братство Brython. Одна змея, чтоб править ими всеми.

Hello World


Давайте напишем традиционный Hello World

А вот и десант Brython (это я о компиляторе).

<script type="text/javascript"       src="http://personeltest.ru/aways/cdn.jsdelivr.net/npm/brython@3.8.9/brython.min.js"></script>Активируем его при загрузке страницы<body onload="brython()">...</body>


В теге body, показанном выше, мы пишем код на Brython:

<script type="text/python">from browser import documentdocument <= "Hello World"</script>


Просто добавляем Hello World в элемент document. Хм. Очень легко.

В полном виде ниже.

<!doctype html><html><head>    <meta charset="utf-8">    <script type="text/javascript"        src="http://personeltest.ru/aways/cdn.jsdelivr.net/npm/brython@3.8.8/brython.min.js">    </script></head><body onload="brython()"><script type="text/python">from browser import documentdocument <= "Hello World"</script></body></html>


В таком случае на страницу будет просто выведено приветствие Hello World.

Калькулятор


Давайте напишем калькулятор на Brython. Весь его код выложен здесь.



Да, вы догадались, нам понадобится таблица. Давайте ее сделаем.

from browser import document, htmlcalc = html.TABLE()


Добавим только первый ряд. То есть отобразим поле для чисел (назовем его result) и клавишу C.

calc <= html.TR(html.TH(html.DIV("0", id="result"), colspan=3) +                html.TD("C"))


Да, я тоже не слишком уверен в этом синтаксисе с <=. Но, посудите сами, такая классная библиотека, так что я и на него согласен.

Теперь добавим клавиатуру

lines = ["789/", "456*", "123-", "0.=+"]calc <= (html.TR(html.TD(x) for x in line) for line in lines)


Наконец, добавим calc в document.

document <= calc


Итак, пока все хорошо. Как же нам добиться, чтобы все это работало? Сначала нужно захватить ссылку на элемент result, чтобы управлять им, когда будут нажиматься клавиши.

result = document["result"] # прямой доступ к элементу по его id


Далее нам потребуется обновлять result всякий раз, когда будет нажат любой элемент на клавиатуре. Для этого давайте сделаем обработчик событий. Доверимся разработчикам Brython и сочтем, что этот код работает. Обратите внимание на манипуляции с result в зависимости от того, какую кнопку вы нажали.

def action(event):    """обрабатывает событие "click" при нажатии на кнопку калькулятора."""    # Элементу, нажатому пользователем, соответствует атрибут "target"     # объекта event     element = event.target    # Текст, выводимый на кнопке, записывается в атрибуте "text" элемента    value = element.text    if value not in "=C":        # обновляем поле с результатом        if result.text in ["0", "error"]:            result.text = value        else:            result.text = result.text + value    elif value == "C":        # сброс        result.text = "0"    elif value == "=":        # выполняем формулу в поле с результатом        try:            result.text = eval(result.text)        except:            result.text = "error"


Наконец, связываем вышеописанный обработчик событий с событием click на всех кнопках.

for button in document.select("td"):    button.bind("click", action)


Видите как все было просто. Но, если серьезно, Brython кажется мне шедевром инженерной работы и, пожалуй, наилучшей иллюстрацией любви к языку Python. Пожалуйста, поддержите разработчиков и поставьте им звездочку в репозитории на Github!
Источник: habr.com
К списку статей
Опубликовано: 11.12.2020 10:08:16
0

Сейчас читают

Комментариев (0)
Имя
Электронная почта

Блог компании издательский дом «питер»

Python

Javascript

Браузеры

Brython

Front-end

Категории

Последние комментарии

  • Имя: Макс
    24.08.2022 | 11:28
    Я разраб в IT компании, работаю на арбитражную команду. Мы работаем с приламы и сайтами, при работе замечаются постоянные баны и лаги. Пацаны посоветовали сервис по анализу исходного кода,https://app Подробнее..
  • Имя: 9055410337
    20.08.2022 | 17:41
    поможем пишите в телеграм Подробнее..
  • Имя: sabbat
    17.08.2022 | 20:42
    Охренеть.. это просто шикарная статья, феноменально круто. Большое спасибо за разбор! Надеюсь как-нибудь с тобой связаться для обсуждений чего-либо) Подробнее..
  • Имя: Мария
    09.08.2022 | 14:44
    Добрый день. Если обладаете такой информацией, то подскажите, пожалуйста, где можно найти много-много материала по Yggdrasil и его уязвимостях для написания диплома? Благодарю. Подробнее..
© 2006-2024, personeltest.ru