Running Python Script on the Web Using PyScript— The Next Big Thing? | by Yong Cui | May, 2022

Probably if it continues to evolve

Photo by Jackson So on Unsplash

During the 2022 PyCon US conference, one of the keynote speakers Peter Wang unveiled PyScript — a way to write Python script directly within HTML. If you don’t know Peter, you may have heard of Anaconda, which is one of the most popular distributions of Python and R with a special focus on data science. Peter is Anaconda’s CEO and cofounder.

In other words, PyScript is developed by a reputable tech company, which may promise its viability in the near future. It has received a great deal of attention among Python and web developers, and it has over 10k stars on GitHub. However, whether it can become a successful product relies on long-term investment of time and development to make it a competitive product, which has some known drawbacks (to be discussed towards the end).

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

We know that the most common element of most websites is HTML files. When we make a website, our job is about producing HTML files directly or indirectly through some frameworks. In a typical HTML file, you’ll see various kinds of tags. For example, <head> defines the metadata and key information about the HTML page, <title> is the title for the document, and <h1>, <h2>and so on define the different levels of headings.

As mentioned early, PyScript allows you to write Python scripts within HTML, and it uses a special tag — py-script. Within the tag, you can embed your Python script. To see how it works, you can create an HTML file, which contains the following code, and open the file using Chrome. In your Chrome, you should be able to see something like the below:

Screenshot by Author

In the above code snippet, you may notice that three things are significant.

  • The link tag defines an external style sheet. In our case, we use the css file that is provided by the PyScript.
  • We use the script tag to embed an external script hosted on the PyScript as defined by src. We use defer Such that the script is executed after it’s downloaded and the page has finished parsing — essentially a delayed execution as opposed to real-time.
  • The most interesting part is the py-script tag. As you can see, print(“Hello, World!”) is Python code. When we execute the HTML file, we see the evaluation result of the code.

This is cool, isn’t it? If you’re not familiar with web development, but you know Python, using PyScript, you can embed any valid Python code. Let’s see one more example.

Another PyScript Example (image by author)

Here, we write some code that requires calculation, and as you can see, the script gets executed correctly.

When we write more complicated code, we need to use third-party libraries. In this case, we can take advantage of the py-env tag. As you may have guessed, env is short for the environment. In the py-env tag, you list the needed Python packages to run your code.

You may know that many data scientists use pandas for their data processing jobs. Let’s see the following example.

PyScript Using Packages (Images by author)

As you can see above, we specify the dependencies (ie, pandas) within the py-env tag, which is placed within the head tag. If your page requires more dependencies, you can list them all here:

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

In the py-script tag, as you can see that we can indeed use the pandas library to create a DataFrame object. However, when we print it, it’s a single line instead of a structured data table. Without a proper structure, we can’t make sense of the data. Fortunately, we can use the write function, as discussed next.

Besides the standard print function in Python, as part of your script, PyScript has its own function write to send data into designated web elements on your page. Consider the following example:

PyScript write (Images by author)

In the above code snippet, there are two significant changes compared to the previous example.

  • We now define a division with an id of “DataFrame”such that it can be referred to later on.
  • In the py-script tag, we’re creating the same DataFrame object as we did previously. But now, instead of calling printwe now call the pyscript.write function to ask PyScript to handle displaying the DataFrame object in the “DataFrame” division. From the output, you can see that we now have a structured table.

The write function isn’t only able to write a table, but also figures. The following example shows you how we can display a plot created by Python using matplotlibanother popular Python package for data visualization.

PyScript write plots (Images by author)

As you can see, the write function displays the image in the desired way.

One of the best ways to learn Python is to use REPL: Read, Evaluate, Print, and Loop. That is, you use an interactive Python console, you type some code, Python evaluates it and prints any applicable output, and you continue the loop. A web page can provide such REPL environment, such as Jupyter Notebook.

PyScript can provide something similar to this using the py-repl tag. In this element, you can allow the users to write code themselves or you can enter code programmatically. Please see the following example:

PyScript REPL (Images by author)

As you can see, we have a cell that includes the code that we specify within the py-repl tag. Notably, the code in the cell can refer to the variables that we defined earlier in the py-script tag. Thus, everything seems to work coherently.

These are just the major highlights of what PyScript has to offer at this stage. It appears to be a promising product, as it provides a flexible framework that allows Python programmers to make web apps without too much knowledge in web development. However, there are similar successful products out there and thus the competition will be tough.

For example, if I need to make a web app for my data science projects, I’ll just use Streamlit, which has been relatively mature in terms of its functionalities. Please be noted that PyScript and Streamlit are different lines of products although both are related to web developments. PyScript is supposed to be more versatile, as its goal is you can embed any Python code on any web page, which Streamlit can’t do.

There are a few drawbacks that PyScript must address before it gets better reception. For example, the loading speed of the web page is very slow. If you try running the code following this tutorial, you’ll probably notice that there can be a significant lag before the web page can be displayed correctly.

However, I’m expecting that this product continues to grow, and my confidence mainly comes from its developer — the Anaconda team who has brought us the wonderful Anaconda tool.

Leave a Comment