Cheuk Ting Ho
Developer advocate / Data Scientist - support open-source and building the community.
Get this slides at
slides.com/cheukting_ho/pyscript-django
<html>
<head>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>
<h1>Let's plot random numbers</h1>
<div id="plot"></div>
<py-config type="json">
{
"packages": ["numpy", "matplotlib"]
}
</py-config>
<py-script output="plot">
import matplotlib.pyplot as plt
import numpy as np
x = np.random.randn(1000)
y = np.random.randn(1000)
fig, ax = plt.subplots()
ax.scatter(x, y)
fig
</py-script>
</body>
</html>
<html>
<head>
<link rel="stylesheet" href="https://pyscript.net/releases/2022.12.1/pyscript.css" />
<script defer src="https://pyscript.net/releases/2022.12.1/pyscript.js"></script>
</head>
<body>
<h1>Let's plot random numbers</h1>
<div id="plot"></div>
<py-config type="json">
{
"packages": ["numpy", "matplotlib"]
}
</py-config>
<py-script output="plot">
import matplotlib.pyplot as plt
import numpy as np
x = np.random.randn(1000)
y = np.random.randn(1000)
fig, ax = plt.subplots()
ax.scatter(x, y)
fig
</py-script>
</body>
</html>
Just like other JS CDN
<py-config type="toml">
packages = ["numpy", "matplotlib"]
paths = ["./data.py"]
</py-config>
toml format
(default)
<py-config type="json">
{
"packages": ["numpy", "matplotlib"],
"paths": ["./data.py"]
}
</py-config>
json format
load in config source
<py-config type="json" src="./custom.json"></py-config>
It is useful for ...
Interactive Python interface (like jupyter notebook)
<html>
<head>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<py-repl></py-repl>
</html>
a.k.a why do it on frontend
Running Django with Pyscript - Frontend as a Backend?!
PyScript Tutorial:
<script tag="python">
<script>
is not a custom tag and it is defined by the browser which none of them is supporting Python yetBy Cheuk Ting Ho
Developer advocate / Data Scientist - support open-source and building the community.