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.