Get more updates and further details about your project right in your mailbox.
The best time to establish protocols with your clients is when you onboard them.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
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!
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.
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:
.png)
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.
.png)
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!
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!
.webp)
.png)