PyScript: Getting Python to Run on the Web

Author | Yong Cui

Translator | Hirakawa

Planning | Deng Yanqin

This article was originally published on Better Programming.

Is this the next big thing? If it continues to develop, it is possible.

During PyCon USA 2022, Peter Wang, one of the keynote speakers, announced PyScript – a way to write Python scripts directly in HTML. Maybe you don’t know Peter, but you’ve probably heard of Anaconda, one of the most popular Python and R distributions, mostly used in data science. Peter is the CEO and co-founder of Anaconda.

In other words, PyScript was developed by a well-known tech company, which may help ensure that it becomes a viable solution in the near future. It has gained a lot of attention among Python and web developers, with over 10k stars on GitHub. However, whether it can be a successful, competitive product depends on long-term time and development investment. Currently, it has some known bugs (discussed at the end).

Without further ado, let’s take a quick look at this exciting product!

py-script tag

We know that HTML files are the most common elements on most websites. When creating a website, our job is to compile HTML files directly or indirectly through some frame. In a typical HTML file, you’ll see various types of tags. For example, metadata and key information for HTML pages are defined,

As mentioned earlier, PyScript allows you to write Python scripts in HTML using a special tag py-script. In this tab, you can embed Python scripts. To see how it works, create an HTML file, add the following code to it, and open the file with the Chrome browser. In Chrome, you should be able to see something like this:

Screenshot of the author

In the code snippet above, you may have noticed the following three key points:

• The link tag defines an external style sheet. In this example, we use the css file provided by PyScript.

• We use the script tag to embed an external script defined by src and hosted by PyScript. We also use defer so that the script is executed after the download and page parsing is complete – essentially a deferred execution rather than real-time execution.

• The most interesting part is the py-script tag. As you can see, print(“Hello, World!”) is Python code. When the HTML file is executed, the result of the code evaluation can be seen.

It’s cool, isn’t it? If you are new to web development but know Python, you can use PyScript to embed any valid Python code. Let’s look at another example.

Another PyScript example (image provided by author)

Here, we wrote some code that needs to be calculated, and as you can see, the script was executed correctly.

py-env tag

When writing more complex code, you need to use third-party libraries. In this case, we can take advantage of the py-env tag. As you might have guessed, env is short for environment. The Python packages required to run the code are listed in the py-env tag.

As you probably know, many data scientists use pandas for their data processing work. Let’s look at the example below.

PyScript using the package (image courtesy of the author)

As you can see, we specified the dependencies (i.e. pandas) in the py-env tag, which is included in the head tag. If a page requires multiple dependencies, you can list them all here:

 <py-env> - pandas - matplotlib - numpy </py-env>

As you can see, inside the py-script tag, we can indeed use the pandas library to create a DataFrame object. However, when we print it out, it is a row, not a structured data table. Without a proper structure, we cannot make sense of this data. Fortunately, we can use the write function (discussed below).

Write the content to the specified tag

In addition to the standard print function print in Python, as part of the script, PyScript has its own write function that sends data to specified web elements on the page. See the example below:

PyScript write function write (image provided by the author)

The above code snippet has two major changes compared to the previous example:

• We now define a div with an id of “DataFrame” so we can reference it later.

• In the py-script tag, we create the same DataFrame object as before. But now, instead of calling print, we call the pyscript.write function, requesting PyScript to process and display the DataFrame object in a “DataFrame”. As you can see from the output, we now have a structured table.

The write function can not only print tables, but also numbers. The following example shows you how we can use matplotlib (a popular Python package for data visualization) to display plots created by Python.

PyScript print diagram (image provided by author)

As you can see, the write function displays the graph in the expected way.

py-repl tags

One of the best ways to learn Python is to use the REPL: Read, Evaluate, Print, and Loop. That is, using an interactive Python console, enter some code, Python evaluates it and prints the appropriate output, and repeats the process. Web pages can also provide such a REPL environment, such as Jupyter Notebook.

PyScript can provide something similar to this using the py-repl tag. In this element, you can let the user write the code themselves, or enter the code programmatically. See the example below:

PyScript REPL (image courtesy of the author)

As you can see, there is a cell in the image above that includes the code specified in the py-repl tag. It’s worth noting that the code in the cell can refer to the variables we defined earlier in the py-script tag. Everything looks coordinated.

Feelings

The content presented in this article is the main highlight of what PyScript can offer at this stage. It seems to be a promising product because it provides a flexible framework that allows Python programmers to create web applications without much web development knowledge. However, there are other similarly successful products, so competition will be fierce.

For example, if I needed to create a web application for my data science project, I would use Streamlit directly. Its function has been relatively mature. Note that although both are related to web development, PyScript and Streamlit belong to different product families. PyScript should be more general, as its goal is to let you embed any Python code on any web page, which Streamlit can’t do.

Before PyScript can be accepted by more people, it has several problems that must be solved. For example, web pages load very slowly. If you try to run the code following this tutorial, you may notice a noticeable lag in the display of the web page.

Nonetheless, I feel that this product will continue to evolve, and my confidence comes mainly from its developers – the Anaconda team who bring us great Anaconda tools.

The text and pictures in this article are from InfoQ