Title: PyScript

Say Hello to PyScript

PyScript is a framework that allows users to create rich Python applications in the browser using HTML’s interface and the power of Pyodide, WASM, and modern web technologies. The PyScript framework provides users at every experience level with access to an expressive, easy-to-learn programming language with countless applications.

What is PyScript? Well, here are some of the core components:

• Python in the browser: Enable drop-in content, external file hosting, and application hosting without the reliance on server-side configuration
• Python ecosystem: Run many popular packages of Python and the scientific stack (such as numpy, pandas, scikit-learn, and more)
• Python with JavaScript: Bi-directional communication between Python and Javascript objects and namespaces
• Environment management: Allow users to define what packages and files to include for the page code to run
• Visual application development: Use readily available curated UI components, such as buttons, containers, text boxes, and more
• Flexible framework: A flexible framework that can be leveraged to create and share new pluggable and extensible components directly in Python

All that to say… PyScript is just HTML, only a bit (okay, maybe a lot) more powerful, thanks to the rich and accessible ecosystem of Python libraries.

In short, our mission is to bring programming for the 99%.

Источник

Как работать с PyScript — фреймворком для фронтенда на Python

В веб-разработке Python используется в основном на бэкенде с такими фреймворками, как Django и Flask. А сегодня, к старту курса по Fullstack-разработке на Python, расскажем о PyScript, который даёт возможность запускать Python прямо в HTML.

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

А на конференции PyCon 2022 анонсировали фреймворк PyScript от Anaconda для использования Python в вебе с помощью стандартного HTML. Вот твит о запуске фреймворка:

Нам понадобится

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

• любимый текстовый редактор или интегрированная среда разработки;
• знание Python;
• знание HTML;
• браузер (рекомендуется Google Chrome).

Что такое PyScript?

PyScript — это фронтенд-фреймворк для создания программ на Python в браузере с использованием HTML-интерфейса, а также мощи Emscripten, Pyodide, WASM и других современных веб-технологий. В соответствии со своими целями он призван дать такие возможности:

• упрощённый и чистый API;
• систему подключаемых и расширяемых компонентов;
• поддержку и расширение стандартного HTML для чтения и надёжных, и своенравных компонентов с миссией «Программирование для 99% [людей]».

В последние 20 лет Python и продвинутые языки пользовательского интерфейса, такие как HTML, CSS и JavaScript, не работали вместе. В Python не было простого механизма создания привлекательных пользовательских интерфейсов для подготовки и развёртывания приложений, а на освоение современных HTML, CSS и JavaScript может уйти много времени.

С возможностью применять в Python соглашения из HTML, CSS и JavaScript решаются не только эти две проблемы, но и те, что связаны с разработкой, подготовкой к развёртыванию, собственно развёртыванием и распространением веб-приложений.

Однако PyScript не заменит JavaScript в браузере, а, скорее, даст разработчикам Python, особенно дата-сайентистам, больше гибкости и мощи.

Почему PyScript?

С PyScript язык получает последовательные правила оформления кода, простоту освоения и больше выразительности за счёт:

• поддержки в браузере: с PyScript появляются поддержка Python и возможность размещения без серверов и конфигурации;
• возможности взаимодействия Python и JavaScript: в программах может осуществляться двунаправленная связь между объектами и пространствами имён Python и JavaScript;
• поддержки экосистемы: PyScript позволяет использовать популярные пакеты Python (Pandas, NumPy и др);
• гибкости фреймворка: PyScript — гибкий фреймворк, на основе которого разработчики легко могут создавать расширяемые компоненты прямо в Python;
• управления средой: PyScript позволяет разработчикам определять файлы и пакеты для запуска кода своей страницы;
• разработки пользовательского интерфейса: с PyScript разработчики могут легко работать с доступными компонентами пользовательского интерфейса (кнопками, контейнерами и др.).

Начало работы с PyScript

PyScript довольно просто освоить: следуйте инструкциям на сайте или загрузите zip-архив.

В этой статье научимся использовать PyScript через сайт, связав компоненты в HTML-файле, и выведем первый Hello World в PyScript.

Создаём HTML-файл

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

Привязываем PyScript

После создания HTML-файла в теге нужно указать в нём ссылку на PyScript, чтобы получить доступ к интерфейсу PyScript:

Выводим в браузере

Связав PyScript с HTML-файлом, выводим Hello World с помощью тега , который позволяет запускать многострочные программы на Python и выводить результат выполнения на странице браузера. Помещаем тег внутри тега :

         print("Hello, World!")  

В браузере вы должны увидеть:

Совет: в редакторе VSCode, чтобы перезагружать страницу при обновлении HTML-файла, используйте плагин Live Server.

Другие операции с PyScript

Прикрепляем метки к элементам

В PyScript переменные из кода на Python в HTML передаются с помощью метода write из модуля pyscript, в теге . Используя атрибут id, передаём строки, отображаемые в виде обычного текста.

В методе write принимаются две переменные: значение id и переменная, которая будет предоставлена:

     
Today is
  import datetime as dt pyscript.write('today', dt.date.today().strftime('%A %B %d, %Y'))  

Запускаем REPL в браузере

В PyScript код Python запускается и через интерфейс. С помощью тега компонент REPL добавляется на страницу, где пишется выполняемый код:

Импортируем файлы, модули и библиотеки

Одно из преимуществ PyScript — его гибкость. Здесь можно импортировать локальные файлы, встроенные модули или сторонние библиотеки. Для объявления зависимостей понадобится тег .

Для локальных файлов Python можно поместить код в файл с расширением .py, а пути к локальным модулям указываются в строках вида пути: ключ (YAML) тега .

Создадим файл Python example.py с функциями:

from random import randint def add_two_numbers(x, y): return x + y def generate_random_number(): x = randint(0, 10) return x

Импортируем его в HTML с тегом , в :

    - paths: - /example.py  
Let's print random numbers
 Doe's lucky number is from example import generate_random_number pyscript.write('lucky', generate_random_number())  

PyScript поддерживает сторонние библиотеки:

    - numpy - requests   import numpy as np import requests  

Настраиваем метаданные

С помощью тега в формате YAML можно задать и настроить общие метаданные приложения PyScript. Использовать этот тег можно так:

 - autoclose_loader: false - runtimes: - src: "https://cdn.jsdelivr.net/pyodide/v0.20.0/full/pyodide.js" name: pyodide-0.20 lang: python 

Вот необязательные значения, которые предоставляются :

• autoclose_loader (логическое значение): если оно false, загрузочный экран-заставка в PyScript не закроется;
• name (строка): название пользовательского приложения;
• version (строка): его версия;
• runtimes (среды выполнения): список конфигураций среды выполнения с полями src, name и lang.

Заключение

Вы узнали, что такое PyScript и как его использовать в HTML-файлах для запуска кода Python в браузере, а также познакомились с различными операциями и функционалом PyScript. С помощью PyScript проще запускать и выполнять операции Python в вебе. Это отличный инструмент для всех, кому не терпится опробовать Python в Интернете.

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

А пока PyScript развивается, мы поможем прокачать ваши навыки или с самого начала освоить профессию, актуальную в любое время:

Источник

PyScript: Run Python in HTML File – Step by Step Tutorial

If you are a python developer, and thinking that how cool if I can write my python code directly into HTML as all the Javascript developers do. Well, there is good news for all the Python developers. Here is the step by step tutorial for how to run python in HTML using PyScript.

In a keynote speech at PyCon US 2022, Anaconda company’s CEO Peter Wang revealed a new project named PyScript. Which is a JavaScript framework. It allows us to create Python applications in web browsers. It will allow us to embed Python code directly into HTML files. Just like we use JavaScript code in our HTML files.

Important Things About PyScript

1. It allows us to write python code into our HTML file. So we can use Python’s libraries within our browser.
2. As we use PyScript, we don’t need to worry about deployments. Everything happens in a web browser. We can share our HTML files with anyone containing fancy dashboards or any chars data. They can directly run it in a web browser without any complex setup.
3. Run Many popular libraries of Python like pandas, numpy etc.
4. PyScript allows us to write python code with the help of 3 main components:
   1. Py-env: It defines the python packages list which needs to run your code.
   2. Py-script: In this tag, the user will write their python code.
   3. Py-repl: It will Create a REPL component. The REPL component executes the code user enters and displays the result of the code in the browser.

   1. Let’s Create Our First Program with PyScript

   You can download the alpha release of PyScript on pyScript.net. We’ll use the CDN of one stylesheet and one script in our HTML file. Add below CDNs to your HTML .

   Our Hello world program will look something like this:

            print("Hello World!")  

   When you run this HTML file into your browser, it will print Hello World. Something like this:

   

   2. Print Current Date Time

            from datetime import datetime print(f"It's now ")  

   In the above example, we are using python’s DateTime library for current DateTime.

   3. Bokeh Chart with PyScript

   Let’s create a chart to display the number of fruits sells during a month.

                 - bokeh  
   Bokeh Chart in PyScript
    import json import pyodide from js import Bokeh, console, JSON from bokeh.embed import json_item from bokeh.plotting import figure from bokeh.resources import CDN fruits = ['Apples', 'Banana', 'Mango', 'Grapes', 'Strawberries'] counts = [5, 3, 4, 4, 6] p = figure(x_range=fruits, height=350, title="Fruit Counts", toolbar_location=None, tools="") p.vbar(x=fruits, top=counts, width=0.9) p.xgrid.grid_line_color = None p.y_range.start = 0 p_json = json.dumps(json_item(p, "chart")) Bokeh.embed.embed_item(JSON.parse(p_json))  

   When you run this code, you will see a chart like;

   

   As you see how easily we can create a graph into our HTML file only. There is no need to create complex components to display a chart like this. That’s how simply you can use PyScript to run python in HTML.

   

   Conclusion

   This project is still in the alpha stage, so maybe we can see many more new things in the upcoming days. PyScript looks very promising for python developers, but there might be a lot of security issues. Also, we are running Python libraries into the browser, so execution time is also high.

   All these concerns might be resolved in upcoming releases. Comment down your thoughts about this new technology.

   Источник