В последние годы веб-технологии открывают всё новые возможности для разработчиков, позволяя создавать мощные и удобные инструменты, работающие непосредственно в браузере без необходимости установки дополнительного ПО. Одним из таких примеров является реализация среды для выполнения Python-кода в браузере. В этой статье мы подробно рассмотрим, как создать собственную Python-песочницу, используя Pyodide — проект, который преобразует интерпретатор Python в WebAssembly, и Ace — популярный браузерный редактор кода. Всё это можно сделать примерно за 100 строк JavaScript, что наглядно демонстрирует эффективность и минимализм современного веб-разработки. Python давно занимает лидирующие позиции в программировании благодаря простоте и универсальности.
Однако запуск интерпретатора Python обычно требует установки на локальную машину, что снижает доступность кода для новичков и экспериментов. Pyodide решает эту проблему, позволяя выполнить Python-код прямо в браузере, используя сборку CPython в WebAssembly. Это открывает широкие возможности: можно создавать интерактивные учебные платформы, онлайн-песочницы, визуализации и даже полноценные приложения на Python без серверной части. Для написания кода в браузере важен удобный интерфейс. Ace — это мощный и легковесный редактор кода с богатым функционалом, поддерживающий подсветку синтаксиса для множества языков, автодополнение, отступы и многое другое.
Его легко встроить в любой веб-проект, что делает Ace прекрасным выбором для создания онлайн-среды программирования. Основная идея состоит в интеграции Pyodide и Ace. Первым шагом необходимо загрузить Pyodide в браузер. Это можно сделать с помощью динамической загрузки скрипта из CDN, что обеспечивает быстрый старт без сложной настройки. Сам Pyodide подгружает необходимый интерпретатор и пакеты на стороне клиента, позволяя запускать Python 3.
12 и выше прямо в окне браузера. После инициализации Pyodide становится доступна функция исполнения Python-кода. Далее на страницу добавляется экземпляр редактора Ace, настроенный на Python-синтаксис. Пользователь вводит код в редактор, и при нажатии клавиши запуска или комбинации Shift+Enter текст передаётся в исполнение Pyodide. Результат выполнения отображается в консоли или выводу под редактором.
Такая простая схема обеспечивает мгновенную обратную связь без необходимости отправлять запросы на сервер. Еще одной полезной функцией является возможность загрузки локальных файлов в виртуальную файловую систему Pyodide. Пользователь может добавлять свои текстовые документы или данные, которые затем открываются и читаются из Python-кода. Например, изначально загружается файл test.txt, но при помощи Drag & Drop или стандартного файлового диалога можно подгружать свои файлы и работать с ними внутри Python-окружения.
Это расширяет возможности песочницы, приближая её к полноценному рабочему пространству. Для установки дополнительных библиотек предусмотрен инструмент micropip, входящий в состав Pyodide. Это облегчает использование популярных сторонних пакетов Python, которые можно загрузить и использовать прямо в браузере. Например, можно установить orjson для работы с JSON-данными с высокой производительностью. Все зависимости загружаются и кэшируются локально, что ускоряет последующие запуски.
Разработка подобной песочницы на основе Pyodide и Ace занимает всего около 100 строк JavaScript благодаря их компактному и продуманному API. Это облегчает поддержку и расширение проекта, а также позволяет интегрировать такую среду в существующие веб-приложения или образовательные порталы с минимальными усилиями. Успешное внедрение веб-песочницы для Python открывает широкий спектр практических задач. Это отличный инструмент для обучения программированию, проведения онлайн-мастер-классов и воркшопов, проведения быстрых прототипов алгоритмов и даже демо-версий программного обеспечения без необходимости установки локального интерпретатора. Благодаря открытому коду и простоте интеграции использовать эту технологию можно бесплатно и без ограничений.
