PyScript - Python Frontend Framework

PyScript is a new front-end Python framework. Although it is undergoing the early phases of development, developers/programmers can build apps using Python and JavaScript programming languages. Developers can run Python code and projects in a web browser and use Python functions from JavaScript, and vice versa. The Python scripts are distributed, and help in reusing Python code on both the front-end and back-end is applicable while developing the software programs.

PyScript framework allows developers/programmers to use Python to create applications with JavaScript without building interactive websites and connecting them to servers. The framework leverages and utilizes Python code for front-end development and makes the code/program more accessible.

What does the PyScript web framework consist of?

PyScript web framework is compiled and made through CPython Interpreter from the following:

• Emscripten (https://emscripten.org/)

• WebAssembly https://webassembly.org/

NB: The above technologies enable Python code to run in a web browser. PyScript web framework is developed by the following technology stacks:

• TypeScript with JavaScript, which is used via the Svelte Framework

• Tailwind CSS framework which is used for styling

• Roolup.js framework which is used for program bundling.

Web components, Python scripts, and custom elements defined in PyScript, such as <py-button>, and <py-script> can be embedded directly into the HTML to display the content on the browser.

How to write and debug programs using PyScript

To write a PyScript script, the developer has to create and save code to a file, i.e index.html. The developer should use a script and PyScript CSS to trigger PyScript, such as displayed below:

1
2
3
4
5
6
#Css link
  <
  link rel = ”stylesheet” href = ”https: //pyscript.net/latest/pyscript.css” />

  #Script <
  script defer src = ”https: //pyscript.net/latest/pyscript.js”></script>

Create an index.html file, write an HTML file, and save it. Write a Python command in PyScript:

1
<py-script>print(“This is the first program”)</py-script>

Below is the script as shown in the code editor:

The presence of pyscript.css enables the HTML tags to print the correct information saved in the HTML document and only opened in the web browser, such as displayed below:

NB: The Python program runs efficiently in the web browser and the front-end framework works effectively with JavaScript. The Python print() function prints a message to the specified output device IDE. The server to go live is never activated to run the script, but the Python code runs on the browser directly. Therefore, the PyScript framework merges JavaScript, Python, WebAssembly, CSS, and HTML, which gives developers control over the Python interpreter and Pyodide.

Verifying the Pyodide and Python versions is easy using a single line of code and accordingly can be introduced into PyScript to access and execute the Pyodide JavaScript API. The Pyodide code can be executed as shown in the below elements:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#Identify the versions by the inclusion of the script in the < head > element.

#configuration
  <
  py - config >
  autoclose_loader: true
runtimes:
  -
  src: ”/pyodides.js”
name: pyodide - 0.30
lang: python <
  /py-config>

#In the < body > element of the HTML file the following should be included <
  py - script >
  import pyodide_js;
print(pyodide_js.version) < /script>

The code snippet shown below is saved in the index.html here:

The specified optional src attribute on the <py-script> element is similar to JavaScript(<script>), and Python code is used together with HTML. Immediately the page is ready, as the program runs instantly.

How to manage Python dependencies in PyScript

To manage the dependencies of the project with Pscript code, use the following: <py-env>, which helps to upload the modules and libraries of Python to be simulated.

There are different libraries being bundled into the Pyodide system without the use of the server to run Python code on the browser. For data science-involved features, there are packages that can be executed and accessed by PyScript wrapping around Pyodide compiled for WebAssembly. The packages are:

• NLTK https://realpython.com/python-nltk-sentiment-analysis/

• Pandas https://realpython.com/pandas-python-explore-dataset/

• Pillow https://realpython.com/image-processing-with-the-python-pillow-library/

• Bokeh https://realpython.com/python-data-visualization-bokeh/

• Scipy https://realpython.com/python-scipy-cluster-optimize/

• Scikit-learn https://realpython.com/train-test-split-python-data/

• Beautiful Soup https://realpython.com/beautiful-soup-web-scraper-python/

• Numpy https://realpython.com/numpy-tutorial/

To use external Python libraries, such as in data science where we can use Matplotlib and NumPy can be wrapped in <py-env>, see below:

1
2
3
4
5
6
7
import the libraries
  <
  py - env >
  matplotlib
numpy
  <
  /py-env>

The diagram below shows how the program data is visualized using the imported libraries:

Below the output displays the result of the above Pyscript program.

Visual components used in PyScript

There are visual components that PyScript uses as wrappers for HTML elements. They are used for different purposes, such as:

• PyTitle - Used to write a title (<py-title>PyScript Program</py-title>).

• PyBox - Used as a container element (<py-box><div>Container column</div></py-box>)

• PyButton - Used together with JavaScript to call the Python function in a user response action, e.g (<py-button label=”click me” style=”btn big”></py-button>)

• PyInputBox - Similar to input box element via HTML such as: <py-inputbox></py-inputbox>.

Summary

PyScript aids in the enhancement of extensible components and pluggable systems and helps build clean and simple APIs. It also extends and supports HTML to work closely with custom components to build interactive applications. PyScript is important because it has the following advantages:

• Easy environment management to run Python code.

• Ensures Python packages/libraries are supported in the PyScript ecosystem. The PyScript framework is flexible and aids in building extensible components in Python.

• It is easy to build UI components using PyScript.

• PyScript provides support in the web browser for Python code while hosting the script without the server.