Originally posted on makeuseof.
JavaScript has long dominated client-side web programming, but could a new Python framework shake things up?
PyScript is a framework, built with Pyodide, allowing you to run Python code in a browser. It’s still in its infancy, but the dev team has recently released a beta version.
Using the tool, developers can write Python directly inside HTML, without the need for a server backend like Flask or Django.
Although it’s still in beta, PyScript already comes with some impressive features worth trying out.
1. Easy to Set Up
Getting started with PyScript is as easy as linking to its CDN in your HTML head. You can also download its source code and host the project’s files on your own site. While the latter option has some small benefits, linking to the CDN is easier.
To start using PyScript, you can include its JavaScript and CSS files like so:
<head>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
2. Write Python Directly Inside HTML
Your Python code sits inside a custom py-script tag within a document’s body. The PyScript JavaScript file will then interpret its contents using Python. You can specify an HTML element, such as a div, for PyScript to write output to.
Here’s an example layout:
<body>
<div id="python-container"></div>
<py-script output="python-container">
print("Hello world")
</py-script>
</body>
Remember that indentation is significant in your Python code. You’ll need to be careful to indent correctly to avoid a Python IndentationError.
3. Import and Isolate Python Standard Modules
Another unique feature of PyScript is it lets you separate dependencies from the bulk. This means you’ll list a dependency in your HTML head before you can import it. All dependencies sit inside a py-env tag within the HTML head section:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
<py-env>
- numpy
- pandas
- openpyxl
- matplotlib
</py-env>
</head>
<body>
<py-script>
import pandas
</py-script>
</body>
</html>
4. Import and Use Your Own Local Modules and Files
You don’t need to write all your Python code directly inside your HTML files when using PyScript. You can write functions or custom Python modules inside separate files, list them in the py-env tag, and import them. This makes it easy to write cleaner and readable code.
However, you’ll have to point the py-env tag to your local module paths. Similarly, you’ll list every local file you want to use in your Python code. For instance, if you’re reading an Excel file with Pandas, you’ll need to specify its path:
<py-env>
- numpy
- paths:
- /main.py
- /path_to_excel_file.xlsx
</py-env>
5. Render Visualizations Directly to the DOM
Sharing visualizations and dashboards can be a tricky task. PyScript lets you display your Python storyboards and visualizations directly inside the browser without using server-based solutions. You can even write an Excel sheet into the DOM as HTML.
For instance, with the required dependencies in a Python virtual environment you can plot data from an Excel file:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
<py-env>
- pandas
- matplotlib
- paths:
- /path_to_excel_file.xlsx
</py-env>
</head>
<body>
<div id="python-container"></div>
<py-script output="python-container">
import pandas as pd
import matplotlib.pyplot as plt
df = pd.read_excel("excel_file_name.xlsx")
x = df["Months"]
y = df["growth_rate"]
fig, ax = plt.subplots()
ax.plot(x, y)
fig
</py-script>
</body>
</html>
You can find more information about PyScript via its README on Github or the PyScript official website.
PyScript Gives Python a Boost
One of Python’s shortcomings is its inability to work directly within the DOM. And this is one of the reasons JavaScript stays ahead of it for web development. PyScript’s introduction might change this if it can achieve JavaScript’s level of functionality. Nonetheless, PyScript is a handy tool, as it’ll help you host and share your Python projects easily. However, keep in mind that some features might break, as PyScript is still an experimental framework.
Source: makeuseof
