PyScript: Python in the Browser

Are you a data scientist or a developer who mostly uses Python? Are you jealous of developers who write Javascript code and build fancy websites in a browser? How nice would it be if we could write websites in Python? Amazingly, at PyCon US 2022, Anaconda’s CEO Peter Wang announced a shiny new technology called PyScript that allows users to write Python and in fact many languages in the browser. 

What is PyScript? 

Developed by the team from Anaconda including Peter Wang, Fabio Pliger, and Philipp Rudiger, PyScript is, as Peter mentioned in his talk, “a system for interleaving Python in HTML (like PHP).” This means you can write and run Python code in HTML, call Javascript libraries in PyScript, and do all your web development in Python. Sounds amazing! 

What does it mean for the world and for data scientists to use PyScript?

  • The most obvious thing is that with PyScript, we can now write Python (and potentially other languages) in HTML and build web applications. PyScript makes the power of Python accessible to a far greater audience of front-end developers and creators. 
  • As Peter mentioned in the talk, “the web browser is the most ubiquitous, portable computer environment in the world.” Indeed, almost everyone has access to a web browser, whether it’s on a computer or on a phone. This means that anyone can access and start programming without any infrastructure barriers. 
  • With PyScript, we no longer need to worry about deployment. PyScript provides the “architectural shift beyond the cloud.” Everything will happen in your web browser. As data scientists, we can share our dashboards and our models in an html file, which will run code whenever others open the file in a web browser. 

Figure 1. PyScript overview. 

What is the magic behind PyScript?

PyScript is currently built on Pyodide, which is a “port of CPython to WebAssembly/Emscripten.” PyScript supports writing and running Python code in a browser, and it will provide support for other languages in the future. 

Figure 2. PyScript Tech Stack. 

What is WebAssembly?

The fundamental technology that makes it possible to write websites in Python is WebAssembly. When WebAssembly was originally developed, web browsers only supported Javascript. 

First released in 2017, WebAssembly quickly became the official World Wide Web Consortium (W3C) standard by 2019. It includes a human readable .wat text format language, which then gets converted to a binary .wasm format that browsers can run. This allows us to write code in any language, compile it to WebAssembly, and then run in a web browser. 

How to use PyScript

The alpha release of PyScript can be found on pyscript.net. The code is available at https://github.com/pyscript. Follow these instructions to give it a try. PyScript lets you write Python in html using the following three main components:

  • py-env defines the Python packages needed to run your Python code. 
  • py-script is where you write your Python code that gets executed within the web page.
  • py-repl creates a REPL (read-eval-print loop) component that evaluates the code users enter and displays the results.

py-env example

Here is an example on how we can define our Python environment in an HTML using py-env. In this example, we load the packages bokeh, numpy, pandas, and scikit-learn into our environment. 

py-script example

This example demonstrates a Panel dashboard with streaming data. As you can see in the code, we are able to write our familiar Python code in py-script like we normally do in a Python file. If you do not like to write your Python code directly under py-script, you can also use a Python file as the source code like this: 

Source: https://github.com/pyscript/pyscript/blob/main/pyscriptjs/examples/panel_stream.html

py-repl example

This example demonstrates a Panel dashboard with NYC Taxi data using DeckGL and the REPL component. As you can see, we are able to define the radius and select a subset of the dataframe (hour<3) in the REPL. How magical! 

Source: https://github.com/pyscript/pyscript/blob/main/pyscriptjs/examples/panel_deckgl.html

You can also find many other examples on the PyScript Github page, including a D3 visualization and a Mario game with computer vision. 

The future of PyScript

PyScript brings Python to the browser. I’m very excited about this new innovation and can’t wait to see how it unfolds in the community. Stay tuned for many great new features coming soon! 

References

https://github.com/anaconda/pyscript

Keynote, Peter Wang at PyCon US 2022

About the Author
Sophia Yang

Anaconda

Sophia Yang is a Senior Data Scientist at Anaconda, Inc., where she uses data science to facilitate decision making for various departments across the company. She volunteers as a Project Incubator at NumFOCUS to help Open Source Scientific projects grow. She is also the author of multiple Python open-source libraries such as condastats, cranlogs, PyPowerUp, intake-stripe, and intake-salesforce. She holds an MS in Statistics and Ph.D. in Educational Psychology from The University of Texas at Austin.