PyScript
Programming for the 99%
PyScript? Python and Javascript??
Well, yes and no.
PyScript is a framework that allows users to create interesting and interactive websites with the help of Pyodide, WASM, and modern web technologies. It helps you build web applications with Python, with or without Javascript.
One of the goals of PyScript is to make web development a friendly place for anyone wanting to learn to code, and this is achieved by not requiring any installations or configurations ( Seriously, just import the js and the css files. It’s that easy!)
The PyScript framework provides users at every experience level with access to an expressive, easy-to-learn programming language with countless applications.
-PyScript 2022
PyScript was created by Fabio Pliger and the first stone (initial commit) was made in Feb 2022 and publicly announced in April 2022. PyScript is still in experimental stage as of this article publish date, so expect to see new things in the near future!
What are Pyodide and WebAssembly?
Pyodide is a port of CPython interpreter to WebAssembly/Emscripten. It makes it possible to run Python on web browsers with micropip. Pyodide comes with a robust Javascript ⟺ Python foreign function interface which means you can freely create a mix of functions with minimal friction. When used inside a browser, Python has full access to Web APIs.
WebAssembly, or WASM in short, is a binary instruction format for stack-based virtual machines. It is designed as a portable compilation target for programming languages, enabling deployment on the web for client and server applications.
However WASM is not compatible with Python. That’s where Pyodide comes into picture. Pyodide compiled the entire CPython interpreter into WASM and let it interpret Python commands in your HTML as if it were regular Python commands.
Core Components of PyScript
- Python in the browser: Enable drop-in content, external file hosting, and application hosting without the reliance on server-side configuration
- Python ecosystem: Run many popular packages of Python and the scientific stack (such as numpy, pandas, scikit-learn, and more)
- Python with JavaScript: Bi-directional communication between Python and Javascript objects and namespaces
- Environment management: Allow users to define what packages and files to include for the page code to run
- Visual application development: Use readily available curated UI components, such as buttons, containers, text boxes, and more
- Flexible framework: A flexible framework that can be leveraged to create and share new pluggable and extensible components directly in Python
Getting started
If I’ve sold you on PyScript so far, it’s time to get our hands dirty. If you look at their examples or examples from their site, you’ll find a lot of them, and they’ve made sure that the understanding of PyScript is just as easy as developing them.
But before that, let’s start with a simple example, our ol’ reliable “Hello world!”
Create an HTML file with the below content:
And there you have it, your very own first Hello world PyScript program!
But reality is often disappointing isn’t it? It’s not always this simple, let’s take a look at one of the examples from PyScript Github and go through it.
We’re taking the “To do list maker” example.
Explanations for important lines given below the code.
Line 8 and 9: Import statements for PyScript into your html (What did I tell you? It’s that simple)
Line 10 to 13: Env files which hold your dependencies. Irrelevant in this example, so you can remove them if you wish.
Line 16: Imports your Python file. Just like how you import Javascript files. To_do.py has your functions that adds tasks into your list and displays that list whenever
Line 24: Button that calls a Python function when the button is clicked.
Line 31 to 38: This is where your tasks show up, with a checkbox preceding your task.
Now that the HTML content is provided, let’s add some tasks and see how they all show up.
The process that adds to the list and checks the task if it’s done is implemented in your Python file.
Line 5, 6 and 7: Has the DOM elements in them.
Line 8 to 37: add_task function gets called when the button is clicked, this function gets the value that’s in the input text box, adds them to a list and displays that list.
Line 29 to 34: check_task function to add strike-through class (indicating the task is completed) to a particular task if the checkbox is selected, the event handler is on Line 37.
Line 39, 40 and 41: add_task_event is an event handler that checks for key actions done when that input is focused. In our case, the only event we needed to handle was the “enter” button. Event handler for this function is declared on Line 42.
Once you have these files saved, go ahead and run your local server, and open up to_do.html from your browser and start adding those tasks!
Conclusion
If you’ve reached this far, then it’s time to start your own adventure with PyScript. There are some cool reference sites that explains a lot more about it, and also the covers the catches of using this.
Happy Coding!
About the Author:
Vishwanth is a Senior SDE in CodeStax.Ai. He admires and respects people who visualize data while coding and are creative with their approaches. He always says “if you can do the job in 2 minutes, do it now”.
About CodeStax.Ai
At CodeStax.Ai, we stand at the nexus of innovation and enterprise solutions, offering technology partnerships that empower businesses to drive efficiency, innovation, and growth, harnessing the transformative power of no-code platforms and advanced AI integrations.
But the real magic? It’s our tech tribe behind the scenes. If you’ve got a knack for innovation and a passion for redefining the norm, we’ve got the perfect tech playground for you. CodeStax.Ai offers more than a job — it’s a journey into the very heart of what’s next. Join us, and be part of the revolution that’s redefining the enterprise tech landscape.
