Probably if it continues to evolve
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
<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:
In the above code snippet, you may notice that three things are significant.
linktag defines an external style sheet. In our case, we use the
cssfile that is provided by the PyScript.
- We use the
scripttag to embed an external script hosted on the PyScript as defined by
src. We use
deferSuch 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-scripttag. 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.
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.
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-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
write to send data into designated web elements on your page. Consider the following example:
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
pyscript.writefunction to ask PyScript to handle displaying the
DataFrameobject in the
“DataFrame”division. From the output, you can see that we now have a structured table.
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.
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:
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.