After playing with the project for a few days I wanted to share a few learnings and gotchya's that tripped me up on my journey to master PyScript.
Prelude: A Crash Course in PyScript
1. Package Indentation Matters!
2. Local File Access
3. DOM Manipulation
<head> <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" /> <script defer src="https://pyscript.net/alpha/pyscript.js"></script> </head>
With PyScript imported in the head of our HTML file, we can now utilize the tag in the body of our HTML to write python code.
<body> <py-script> for i in ["Python", "in", "html?"]: print(i) </py-script> </body>
Yep! It really is just that simple to get started. Now, where do things get tricky?
One of the big advantages of using PyScript is the ability to import Python libraries such as NumPy or Pandas, which is first done in the Head using the tag and then inside of the tag just like you would in regular Python.
<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 </py-env> </head><body> <py-script> import pandas as pd </py-script> </body>
On the surface, this may seem straightforward but note the indentation of the packages within .
<py-env> - numpy - pandas </py-env>
Turns out that if there is any indentation you'll receive a ModuleNotFoundError: No module named 'pandas' *or*ModuleNotFoundError*: No module named 'numpy' ) *for PyScript. This error caught me off guard initially since indentation in Python is so important.
PyScript does offer a solution to file access in the tag. In addition to importing packages, you can also import files such as CSVs or XLSXs.
<py-env> - numpy - pandas - paths: - /views.csv </py-env>
Again note the indentation as in this case the CSV must be indented in relation to the paths.
With the file included in the path, you can read it within your code.
<py-script> import pandas as pd df = pd.read_csv("views.csv") </py-script>
For anyone who has worked in web development, you should be familiar with the DOM or Document Object Model. DOM Manipulation is common in most web applications as developers typically want their websites to interact with users, reading inputs and responding to button clicks. In the case of PyScript this raises an interesting question how do buttons and input fields interact with the Python code?
Again PyScript has a solution to this, however, it mightn't be what you expect. Here are a few (of many) examples where PyScript has functionality:
- For buttons, you can include pys-onClick="your_function" parameter to trigger python functions when clicked.
- For retrieving user input from within the tag *document.getElementById('input_obj_id').value *can retrieve the input value.
- And Finally pyscript.write("output_obj_id", data) *can write output to a tag from within the * tag.
We can see these three DOM manipulation techniques put together into one web application that lets users check if a CSV has been added to the PyScript path:
<body> <form onsubmit = 'return false'> <label for="fpath">filepath</label> <input type="text" id="fpath" name="filepath" placeholder="Your name.."> <input pys-onClick="onSub" type="submit" id="btn-form" value="submit"> </form><div id="outp"></div> <py-script> import pandas as pd def onSub(*args, **kwargs): file_path = document.getElementById('fpath').value df = pd.read_csv(file_path) pyscript.write("outp",df.head()) </py-script> </body>
These examples aren't comprehensive as the project also supports visual component tags.
PyScript is a wonderful step in the right direction for bringing some excellent Python packages into the web development space. With that said it still has a bit of growing to do and there are many improvements that need to be made before the project sees widespread adoption.
Show some support to the team working on this awesome project: https://github.com/pyscript
Leave a comment with any other insights or gotchya's that you might have experienced working with PyScript and I'll make a part 2.