[Перевод] Brython: Python в вашем браузере (ч.4)13.01.2025 10:00

Часть 1 • Часть 2 • Часть 3 • Часть 4

Распространение и упаковка проекта Brython

Метод, используемый для установки Brython, может повлиять на то, как и где вы можете развернуть свой проект Brython. В частности, для развертывания в PyPI лучшим вариантом будет сначала установить Brython из PyPI, а затем создать свой проект с помощью brython-cli. Но типичное веб-развертывание на частном сервере или облачном провайдере может использовать любой выбранный вами метод установки.

Существует несколько вариантов развертывания:

  • Ручное и автоматическое развертывание

  • Развертывание в PyPI

  • Развертывание в CDN

  • Вы изучите каждый из них в следующих разделах.

Ручное и автоматическое веб-развертывание

Ваше приложение содержит все статические зависимости, CSS, JavaScript, Python и файлы изображений, которые вам нужны для вашего веб-сайта. Brython является частью ваших файлов JavaScript. Все файлы могут быть развернуты как есть у поставщика по вашему выбору. Для получения подробной информации о развертывании ваших приложений Brython ознакомьтесь с руководствами по веб-разработке и автоматизацией развертываний Django с помощью Fabric и Ansible.

Если для предварительной компиляции кода Python вы решите использовать brython-cli make_modules, то файлы, которые вы развернете, не будут содержать исходного кода Python, а только brython.js и brython_modules.js. Также вам не надо будет включать brython_stdlib.js так как требуемые модули уже включены в brython_modules.js.

Развертывание в PyPI

При установке Brython из PyPI для создания пакета можно использовать brython-cli, который может быть развернут в PyPI. Цели создания такого пакета — расширить шаблон Brython по умолчанию в качестве основы для ваших пользовательских проектов и сделать веб-сайты Brython доступными из PyPI.

Выполнив инструкции в разделе по установке из PyPI, выполните следующую команду в каталоге web/ нового проекта: 

$ brython-cli --make_dist

Вам будет предложено ответить на несколько вопросов, предназначенных для создания brython_setup.json, которые можно изменить позже. После завершения команды у вас будет каталог с именем dist, содержащий файлы, необходимые для создания устанавливаемого пакета.

Вы можете протестировать установку этого нового пакета локально следующим образом: 

$ pip install -e __dist__

Впоследствии вы также можете подтвердить, что новая команда развернута локально вместе с пакетом web, выполнив следующую команду: 

$ python -m web --help
usage: web.py [-h] [--install]

optional arguments:
  -h, --help  show this help message and exit
  --install   Install web in an empty directory

Обратите внимание, что команда web ведет себя точно так же, как Brython после первоначальной установки. Вы только что создали пользовательский устанавливаемый пакет Brython, который можно развернуть в PyPI. Для подробного описания того, как развернуть ваш пакет в PyPI, ознакомьтесь с разделом Как опубликовать пакет Python с открытым исходным кодом в PyPI.

После развертывания в PyPI вы можете установить свой пакет Brython через pip в виртуальной среде Python. Вы сможете создать свое новое настраиваемое приложение с помощью новой созданной вами команды: 

$ python -m  --install

Подводя итог, вот шаги по развертыванию в PyPI:

  1. Установите Brython из PyPI.

  2. Создайте проект с brython-cli install.

  3. Создайте устанавливаемый пакет из вашего проекта с помощью brython-cli make_dist.

  4. Разверните этот пакет в PyPI.

Другие методы установки — CDN, GitHub и npm — не включают brython-cli и поэтому не подходят для этого.

Развертывание в CDN

Так же, как brython.js и brython_stdlibs.js доступны на серверах CDN, вы также можете развернуть свои статические ресурсы, изображения, стили и файлы JavaScript, включая файлы Python или brython_modules.js, в CDN. Примеры CDN включают:

Если ваше приложение с открытым исходным кодом, то вы можете получить бесплатную поддержку CDN. Примерами являются CDNJS и jsDelivr.

Создание расширений Google Chrome

Расширения Chrome — это компоненты, созданные с использованием веб-технологий и встроенные в Chrome для настройки вашей среды просмотра. Обычно значки этих расширений видны в верхней части окна Chrome, справа от адресной строки.

Публичные расширения доступны в Chrome Web Store. Для ознакомления вы установите расширения Google Chrome из локальных файлов:

Значки расширений браузера

Значки расширений браузера

Прежде чем приступить к реализации расширения Google Chrome на Brython, вам сначала необходимо реализовать версию JavaScript, а затем перевести ее на Brython.

Расширение Hello World на JS

Для начала необходимо реализовать расширение, которое будет выполнять следующие действия:

  • Открывать всплывающее окно при нажатии на значок расширения

  • Открывать сообщение-подсказку при нажатии на кнопку всплывающего окна

  • Добавьте введенное вами сообщение в нижнюю часть начального всплывающего окна.

Следующий снимок экрана иллюстрирует это поведение:

Расширение JS Chrome

Расширение JS Chrome

В пустой папке создайте файл manifest.json для настройки расширения: 

// manifest.json
{
    "name": "JS Hello World",
    "version": "1.0",
    "description": "Hello World Chrome Extension in JavaScript",
    "manifest_version": 2,
    "browser_action": {
        "default_popup": "popup.html"
    },
    "permissions": ["declarativeContent", "storage", "activeTab"]
}

Важным полем для этого примера является всплывающий файл по умолчанию, popup.html, который вам также придется создать. Для получения информации о других полях и многом другом вы можете обратиться к документации по формату файла Manifest.

В этой же папке создайте файл popup.html, в котором будут определяться пользовательский интерфейс расширения:

HTML-файл содержит ссылку на бизнес-логику JavaScript расширения и описывает его пользовательский интерфейс:

  • Строка 5 относится к popup.js, которая содержит логику расширения.

  • Строка 8 определяет, button, которая будет привязана к обработчику в popup.js.

  • В строке 9 объявляется поле, которое будет использоваться кодом JavaScript для отображения текста.

Также необходимо создать popup.js: 

// popup.js
'use strict';

let helloButton = document.getElementById("hello-btn");

helloButton.onclick = function (element) {
  const defaultName = "Real JavaScript";
  let name = prompt("Enter your name:", defaultName);
  if (!name) {
    name = defaultName;
  }
  document.getElementById("hello").innerHTML = `Hello, ${name}!`;
};

Основная логика кода JavaScript состоит в объявлении обработчика onclick, привязанного к полю hello-btn контейнера HTML:

  • Строка 2 вызывает режим скрипта, который включает более строгую проверку в JavaScript для выявления ошибок JavaScript.

  • Строка 4 выбирает поле, идентифицированное как hello-btn в popup.html и присваивает его переменной.

  • Строка 6 определяет обработчик, который будет обрабатывать событие нажатия пользователем на кнопку. Этот обработчик событий запрашивает у пользователя его имя, затем изменяет содержимое, идентифицированного с помощью hello, на предоставленное имя.

Перед установкой этого расширения выполните следующие действия:

  • Откройте меню Google Chrome в правой части экрана.

  • Откройте подменю Дополнительные инструменты.

  • Нажмите Расширения.

На экране будут отображены ваши установленные расширения, если таковые имеются. Это может выглядеть так:

Расширения Chrome

Расширения Chrome

Чтобы установить новое расширение, вам необходимо выполнить следующие действия:

  1. Убедитесь, что в правом верхнем углу экрана включен режим разработчика.

  2. Нажмите Загрузить распакованное.

  3. Выберите папку, содержащую все файлы, которые вы только что создали.

Если во время установки не произошло никаких ошибок, то теперь вы должны увидеть новый значок с буквой J в правой части адресной строки браузера. Чтобы протестировать расширение, щелкните значок J на ​​панели инструментов, показанной ниже:

Значок J на панели инструментов

Значок J на панели инструментов

Если во время установки или выполнения возникнут какие-либо ошибки, справа от кнопки «Удалить» карты расширения вы увидите красную кнопку ошибки:

Ошибка расширения

Ошибка расширения

Вы можете нажать на Errors, чтобы отобразить ошибку и определить ее основную причину. После исправления перезагрузите расширение, нажав на круглую стрелку в правом нижнем углу карты расширения, затем повторяйте процесс, пока оно не заработает так, как вы ожидаете.

Чтобы протестировать недавно установленное расширение, щелкните значок J, отображаемый в правой части панели инструментов браузера. Если значок не отображается, щелкните Расширения, чтобы получить список установленных расширений, и выберите кнопку-булавку, соответствующую расширению JS Hello World, которое вы только что установили.

Расширение Hello World на Python

Если вы дошли до этого момента, то вы уже выполнили самые сложные шаги, в основном для ознакомления с процессом создания расширения Chrome и его установки. Шаги будут похожи с Brython, с парой отличий, о которых вы узнаете в этом разделе.

Будут различия в содержимом файла манифеста, имени расширения и, для верности, описание расширения: 

// manifest.json
{
    "name": "Py Hello World",
    "version": "1.0",
    "description": "Hello World Chrome Extension in Python",
    "manifest_version": 2,
    "browser_action": {
        "default_popup": "popup.html"
    },
    "content_security_policy": "script-src 'self' 'unsafe-eval';object-src 'self'",
    "permissions": ["declarativeContent", "storage", "activeTab"]
}

Обратите внимание, что вам также нужно включить новое свойство, content_security_policy. Это необходимо для смягчения политики против eval () в системе расширений Chrome. Помните, что Brython использует eval ().

Это не то, что вы добавили сами и что можете контролировать в Brython. если вы хотите использовать Brython в качестве языка для вашего расширения браузера, нужно включить использование eval (). Если вы не добавите unsafe-eval в content_security_policy, вы увидите следующую ошибку: 

Uncaught EvalError: Refused to evaluate a string as JavaScript because
'unsafe-eval' is not an allowed source of script in the following Content
Security Policy directive: "script-src 'self' blob: filesystem:".

HTML-файл также будет иметь несколько обновлений, а именно:

HTML-код очень похож на тот, который вы использовали для создания расширения Chrome в JavaScript. Стоит отметить несколько деталей:

  • Строка 5 загружает brython.min.js из локального пакета. По соображениям безопасности загружаются только локальные скрипты, и вы не можете загрузить из внешнего источника, например CDN.

  • Строка 6 загружает init_brython.js, что вызывает brython ().

  • Строка 7 загружает popup.py.

  • В строке 9 объявляется body без обычного onload=«brython ()».

Другое ограничение безопасности не позволяет вам вызывать brython () в onload тега body. Обходной путь — добавить прослушиватель к документу и указать браузеру выполнить brython () после загрузки содержимого документа: 

// init_brython.js
document.addEventListener('DOMContentLoaded', function () {
    brython();
});

Наконец, основную логику этого приложения можно увидеть в следующем коде Python: 

# popup.py
from browser import document, prompt

def hello(evt):
    default = "Real Python"
    name = prompt("Enter your name:", default)
    if not name:
        name = default
    document["hello"].innerHTML = f"Hello, {name}!"

document["hello-btn"].bind("click", hello)

Теперь вы готовы приступить к установке и тестированию, как вы это делали для расширения JavaScript для Chrome.

Тестирование и отладка Brython

В настоящее время нет удобных библиотек для модульного тестирования кода Brython. По мере развития Brython вы увидите больше возможностей для тестирования и отладки кода Python в браузере. Можно воспользоваться фреймворком модульного тестирования Python для автономного модуля Python, который можно использовать вне браузера. В браузере хорошим вариантом является Selenium с драйверами браузера. Отладка также ограничена, но возможна.

Тесты модулей Python

Фреймворки модульного тестирования Python, такие как встроенные unittest и pytest, не работают в браузере. Вы можете использовать эти фреймворки для модулей Python, которые также могут быть выполнены в контексте CPython. Любые модули, специфичные для Brython, такие как browser не могут быть протестированы с помощью таких инструментов в командной строке. Для получения дополнительной информации о модульном тестировании Python ознакомьтесь с разделом Начало работы с тестированием в Python.

Selenium

Selenium — это фреймворк для автоматизации браузеров. Он не зависит от языка, используемого в браузере, будь то JavaScript, Elm, Wasm или Brython, поскольку использует концепцию WebDriver, чтобы вести себя как пользователь, взаимодействующий с браузером. Для получения дополнительной информации об этом фреймворке можете ознакомиться с Modern Web Automation With Python and Selenium .

Юнит Тесты JavaScript

Существует множество фреймворков тестирования, ориентированных на JavaScript, например, Mocha, Jasmine и QUnit, которые хорошо работают в полной экосистеме JavaScript. Но они не обязательно хорошо подходят для модульного тестирования кода Python, работающего в браузере. Один из вариантов требует глобального предоставления функций Brython для JavaScript, что противоречит передовым практикам.

Чтобы проиллюстрировать возможность предоставления функции Brython для JavaScript, вы будете использовать QUnit — набор модульных тестов JavaScript, который может выполняться автономно в HTML-файле: 






  
  
  Test Suite

В одном HTML-файле вы написали код Python, код JavaScript и тесты JavaScript для проверки функций обоих языков, выполняемых в браузере:

  • Строка 11 импортирует фреймворк QUnit.

  • Строка 23 раскрывается python_add () в JavaScript.

  • Строка 28 определяет js_add_test — проверку JavaScript-функции js_add ().

  • Строка 34 определяет py_add_test — проверку Python-функции python_add ().

  • Строка 40 определяет py_add_failed_test — проверку Python-функции python_add () с ошибкой.

Запускать веб-сервер для выполнения модульного теста не потребуется. Откройте index.html в браузере, и вы должны увидеть следующее:

Набор тестов QUnit HTML

Набор тестов QUnit HTML

На странице показаны два успешных теста js_add_test (), py_add_test () и один неудачный тест py_add_failed_test ().

Представление функции Python в JavaScript показывает, как можно использовать фреймворк модульного тестирования JavaScript для выполнения Python в браузере. Хотя это возможно для тестирования, в целом это не рекомендуется, поскольку может конфликтовать с существующими именами JavaScript.

Отладка в Brython

На момент написания не существовало удобных инструментов для отладки вашего приложения Brython. Вы не могли создать файл карты исходного кода, который позволил бы вам выполнять поэтапную отладку в инструментах разработки браузера.

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

  • Используйте print () или browser.console.log () для отображения значений переменных в консоли инструментов разработчика браузера.

  • Используйте в отладке f-строки, как описано в разделе Новые интересные возможности в Python 3.8.

  • Время от времени очищайте IndexedDB браузера с помощью инструментов разработчика.

  • Отключите кэш браузера во время разработки, установив флажок Отключить кэш на вкладке «Сеть» инструментов разработчика браузера.

  • Добавьте options, чтобы включить для brython () отображение дополнительной отладочной информации в консоли JavaScript.

  • Сохраните brython.js и brython_stdlib.min.js локально, чтобы ускорить перезагрузку во время разработки.

  • Запустите локальный сервер при импорте кода на Python.

  • Откройте инспектор из расширения при устранении неполадок расширения Chrome.

Одной из прелестей Python является REPL (цикл чтение-вычисление-печать). Онлайн-консоль Brython предлагает платформу для экспериментов, тестирования и отладки поведения некоторых фрагментов кода.

Обзор альтернатив Brython

Brython — не единственный вариант для написания кода Python в браузере. Доступно несколько альтернатив:

На данный момент из этого списка активно развивается лишь Pyodide.

Каждая реализация подходит к проблеме с разных сторон. Brython пытается стать заменой JavaScript, предоставляя доступ к тем же веб-API и манипуляциям DOM, что и JavaScript, но с привлекательностью синтаксиса и идиом Python. Он упакован в виде небольшой загрузки по сравнению с некоторыми альтернативами, которые могут иметь другие цели.

Примечание: На PyCon US 2022 была представлена ​​новая альтернатива: PyScript! Для ознакомления с этим новым фреймворком вы можете ознакомиться с A First Look at PyScript: Python in the Web Browser.

Как эти фреймворки соотносятся?

Skulpt

Skulpt компилирует в браузере код Python в JavaScript. Компиляция происходит после загрузки страницы, тогда как в Brython компиляция происходит во время загрузки страницы.

Хотя у Skulpt нет встроенных функций для управления DOM, в своих приложениях он очень близок к Brython. Это включает в себя образовательные применения и полноценные приложения Python, как демонстрирует Anvil.

Skulpt — это поддерживаемый проект, переходящий на Python 3. Brython в целом находится на одном уровне с CPython 3.9 по модулям, совместимым с выполнением в браузере.

Transcrypt

Transcrypt включает в себя инструмент командной строки для компиляции кода Python в код JavaScript. Компиляция называется предварительной (AOT, Ahead Of Time). Полученный код затем можно загрузить в браузер. Transcrypt занимает мало места, около 100 КБ. Он быстрый и поддерживает манипуляции с DOM.

Разница между Transcrypt и Brython заключается в том, что Transcrypt компилируется в JavaScript с помощью компилятора Transcrypt перед загрузкой и использованием в браузере. Это обеспечивает скорость и небольшой размер. Однако это не позволяет использовать Transcrypt в качестве платформы для образования, как другие платформы.

Pyodide

Pyodide — это компиляция интерпретатора CPython на WebAssembly. Он интерпретирует код Python в браузере. Фаза компиляции JavaScript отсутствует. Хотя Pyodide, как и PyPy.js, требует загрузки значительного объема данных, он поставляется с загруженными научными библиотеками, такими как NumPy, Pandas, Matplotlib и другими.

Можете рассматривать Pyodide как среду Jupyter Notebook, работающую полностью в браузере, а не обслуживаемую внутренним сервером. Вы можете поэкспериментировать с Pyodide, используя живой пример.

PyPy.js

PyPy.js использует интерпретатор Python PyPy, скомпилированный в JavaScript с помощью emscripten, что делает его совместимым для запуска в браузере.

В дополнение к текущему бездействующему статусу проекта, PyPy.js — это большой пакет, около 10 МБ, что непозволительно для типичных веб-приложений. Вы по-прежнему можете использовать PyPy.js в качестве платформы для изучения Python в браузере, открыв домашнюю страницу PyPy.js.

PyPy.js компилируется в JavaScript с помощью emscripten. Pyodide делает еще один шаг вперед, используя emscripten и Wasm в частности для компиляции расширений Python C, таких как NumPy, в WebAssembly.

На момент написания статьи PyPy.js, похоже, не поддерживался. Для чего-то в том же духе относительно процесса компиляции, рассмотрите Pyodide.

Заключение

В этом уроке вы глубоко погрузились в несколько аспектов написания кода Python в браузере. Это могло вызвать у вас интерес к использованию Python для front-end разработки.

В этом уроке вы узнали, как:

  • Установить и использовать Brython в локальной среде

  • Заменить JavaScript на Python в ваших интерфейсных веб-приложениях

  • Манипулировать DOM

  • Взаимодействовать с JavaScript

  • Создавать расширения для браузера

  • Сравнили альтернативы Brython

Помимо доступа к функциям, обычно зарезервированным для JavaScript, одно из лучших применений Brython — это инструмент обучения и преподавания. Вы можете получить доступ к редактору Python и консоли, которые работают в вашем браузере, чтобы начать изучать многочисленные применения Brython уже сегодня.

Чтобы просмотреть примеры, которые вы видели в этом уроке, вы можете загрузить исходный код по данной ссылке.

Автор — Андре Бурго. Андре — опытный инженер-программист, увлеченный технологиями и языками программирования, в частности Python.

Подробнее об Андре

Члены команды, работавшие над этим учебником:

© Habrahabr.ru