3 вещи, которые нужно знать перед созданием на PyScript

Для тех, кто еще не слышал, PyScript, дебютировавший на PyCon 2022, представляет собой встраиваемую в браузер среду python, построенную поверх существующего проекта под названием Pyodide. Этот проект, к шоку давних Pythonistas и веб-разработчиков, органично сочетает (ну почти) JavaScript и Python в двунаправленной среде, позволяя разработчикам использовать в браузере такие элементы Python, как NumPy или Pandas.

Поиграв с проектом несколько дней, я хотел бы поделиться несколькими находками и ошибками, которые застали меня врасплох на пути к освоению PyScript.

Прелюдия: Краткий курс по PyScript
1. Отступы в пакетах имеют значение!
2. Доступ к локальным файлам
3. Манипуляция DOM

Краткий курс по PyScript


Чтобы начать использовать PyScript, мы сначала должны связать наш HTML-файл со сценарием PyScript, как это делается для любого обычного файла javascript. Кроме того, мы можем связать таблицу стилей PyScript для улучшения удобства использования.

<head>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
Вход в полноэкранный режим Выход из полноэкранного режима

Импортировав PyScript в голову нашего HTML-файла, мы можем теперь использовать тег в теле нашего HTML для написания кода python.

<body>
    <py-script>
        for i in ["Python", "in", "html?"]:
            print(i)
    </py-script>
</body>
Вход в полноэкранный режим Выйти из полноэкранного режима

Да! Это действительно так просто для начала работы. А теперь, где возникают сложности?

Отступы пакетов имеют значение


Одним из больших преимуществ использования PyScript является возможность импортировать библиотеки Python, такие как NumPy или Pandas, что сначала делается в заголовке с помощью тега, а затем внутри тега, как и в обычном Python.

<head>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script> <py-env>
- numpy
- pandas
    </py-env>
</head><body>
    <py-script>
        import pandas as pd
    </py-script>
</body>
Вход в полноэкранный режим Выход из полноэкранного режима

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

 <py-env>
- numpy
- pandas
    </py-env>
Вход в полноэкранный режим Выход из полноэкранного режима

Оказывается, что при наличии отступов вы получите ошибку ModuleNotFoundError: No module named ‘pandas’ *или*ModuleNotFoundError*: No module named ‘numpy’ ) *для PyScript. Эта ошибка сначала застала меня врасплох, поскольку отступы в Python очень важны.

Локальный доступ к файлам


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

PyScript предлагает решение для доступа к файлам в теге. Помимо импорта пакетов, вы также можете импортировать файлы, такие как CSV или XLSX.

 <py-env>
- numpy
- pandas
- paths:
    - /views.csv
    </py-env>
Вход в полноэкранный режим Выход из полноэкранного режима

Еще раз обратите внимание на отступы, поскольку в данном случае CSV должен быть отступ по отношению к путям.

Если файл включен в путь, вы можете прочитать его в своем коде.

<py-script>
    import pandas as pd
    df = pd.read_csv("views.csv")
</py-script>
Вход в полноэкранный режим Выход из полноэкранного режима

Манипуляция DOM


Каждый, кто работал в сфере веб-разработки, должен быть знаком с DOM или Document Object Model. Манипулирование DOM распространено в большинстве веб-приложений, поскольку разработчики обычно хотят, чтобы их веб-сайты взаимодействовали с пользователями, считывая вводимые данные и реагируя на нажатие кнопок. В случае с PyScript возникает интересный вопрос, как кнопки и поля ввода взаимодействуют с кодом Python?

И снова у PyScript есть решение для этого, однако оно может быть не таким, как вы ожидаете. Вот несколько (из многих) примеров, где PyScript обладает функциональностью:

  1. Для кнопок можно включить параметр pys-onClick=»ваша_функция», чтобы при нажатии запускались функции Python.
  2. Для получения пользовательского ввода из тега *document.getElementById(‘input_obj_id’).value * можно получить значение ввода.
  3. И, наконец, pyscript.write(«output_obj_id», data) *может записать вывод в тег изнутри *тега.

Мы видим, как эти три техники манипулирования DOM объединяются в одно веб-приложение, которое позволяет пользователям проверить, был ли CSV добавлен в путь PyScript:

<body>
   <form onsubmit = 'return false'>
   <label for="fpath">filepath</label>
   <input type="text" id="fpath" name="filepath" placeholder="Your name..">
   <input pys-onClick="onSub" type="submit" id="btn-form" value="submit">
    </form><div id="outp"></div> <py-script>
        import pandas as pd def onSub(*args, **kwargs):
            file_path = document.getElementById('fpath').value
            df = pd.read_csv(file_path)
            pyscript.write("outp",df.head())
    </py-script>
</body>
Вход в полноэкранный режим Выход из полноэкранного режима

Эти примеры не являются исчерпывающими, поскольку проект также поддерживает теги визуальных компонентов.

Заключение


PyScript — это замечательный шаг в правильном направлении для привнесения некоторых отличных пакетов Python в пространство веб-разработки. Тем не менее, ему еще есть куда расти, и есть много улучшений, которые необходимо сделать, прежде чем проект получит широкое распространение.

Поддержите команду, работающую над этим замечательным проектом: https://github.com/pyscript.

Оставьте комментарий с любыми другими мыслями или находками, с которыми вы могли столкнуться при работе с PyScript, и я сделаю вторую часть.

Оцените статью
Procodings.ru
Добавить комментарий