How to Use PyScript — A Python Frontend Framework
Python’s popularity has grown a lot in the past few years. It can be used for a lot of different things, like Artificial Intelligence, Data Science, Robotics, and Scripting, which is where it is most often used.
Python is mostly used on the back end of web development, where frameworks like Django and Flask are used.
Before now, Python didn’t have as much front-end support as languages like JavaScript. But developers of Python have made libraries (like Brython) to help their favorite language work on the web.
And at the PyCon 2022 conference this year, Anaconda announced PyScript, a framework that lets you use Python on the web using HTML.
What is PyScript?
PyScript is a front-end framework for Python that lets users build Python programs in the browser using an HTML interface.
Emscripten, Pyodide, WASM, and other modern web technologies were used to make it so it can do the following things, which are in line with its goals:
- To give an API that is simple and easy to use.
- To make a system with parts that can be plugged in and added to.
- To support and extend standard HTML so that it can read custom components that have opinions and can be relied on. This is part of the “Programming for the 99 percent” mission.
As a Description of PyScript. Here are a few important parts:
Python in the browser: Make it possible to drop in content, host external files (thanks to the Pyodide project for making this possible), and host applications without relying on server-side configuration.
Run many popular Python packages and the scientific stack in the Python ecosystem (such as NumPy, pandas, scikit-learn, and more)
Python with JavaScript is the PyScript and objects and namespaces in Python and JavaScript can talk to each other in both directions. Also, it let users tell the page code what packages and files to include. Use ready-made UI components like buttons, containers, text boxes, and more when making a visual application. This is a flexible framework that can be used to make and share newly pluggable and extendable Python components.
So, to sum up… PyScript is just HTML with a bit (okay, maybe a lot) more power, thanks to the large number of Python libraries that are easy to find and use.
PyScript Sits on the Shoulder of Giants
Many things, like the improvements made with WebAssembly/WASM, Emscripten, and Pyodide, make the browser a very solid stack. Even though it isn’t usually thought of as one, the browser is a great virtual machine.
In the last few decades, it’s too bad that Python and powerful user interface languages like modern HTML, CSS, and JavaScript have not taken advantage of each other. Python didn’t have a simple way to make beautiful user interfaces that were easy to package and deploy, and HTML, CSS, and JavaScript have a steep learning curve.
By letting Python use HTML, CSS, and JavaScript conventions, not only are these two problems solved, but so are problems with building, packaging, distributing, and deploying web applications in general (a huge PITA)! Overall, we want HTML, CSS, and JavaScript to become more popular and used along with Python. This will make the web a friendlier and easier place for everyone to hack.
Where is PyScript Today?
This is just the start of PyScript, and our plans for it go far beyond what we can show you now. Even though it is still unstable and has only a few features, it does work!
Don’t believe me? You can see it for yourself at pyscript.net/example. Visit pyscript.net to learn how to start using PyScript and to see what’s new. And Highly recommend going through it after reading this article.
Why PyScript?
PyScript gives you a programming language with consistent style rules and more ways to express yourself, and that is easy to learn.
Support on the browser: PyScript makes it possible to support Python and host without having to set up servers or configure anything.
Interoperability: Programs can talk back and forth between Python objects and JavaScript namespaces.
Ecosystem support: Popular Python packages like Pandas, NumPy, and many more can be used with PyScript.
Framework flexibility: PyScript is a flexible framework that developers can use to make it easy to make components that can be added to and changed in Python.
Environment Management: Developers can choose which files and packages to include in their page code to make it run with PyScript.
UI Development: With PyScript, it’s easy for developers to build with UI elements like buttons, containers, and many more.
Get Started with PyScript
PyScript is a programming language that isn’t too hard to learn. Either follow the steps on the website or download the .zip file to get started.
In this article, I will use the website to learn how to use PyScript. This can be done by making links between the parts in your HTML file. Let’s use PyScript to print our first “Hello World.”
Create an HTML file
- To begin, you’ll need to create an HTML file to display text on your browser using the text editor/IDE of your choice.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Title: PyScript</title>
</head>
<body>
</body>
</html>Link PyScript
- After creating the HTML file, we’ll need to link PyScript to your HTML file to have access to the PyScript interface. This will be placed in the
<head>tag.
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>Print to browser
- Now that you’ve linked PyScript to the HTML file, you can print your “Hello World”.
- You can do this with the
<py-script>tag. The<py-script>the tag allows you to run multi-line Python programs and have them printed on the browser page. Place the tag in between the<body>tags.
<body> <py-script> print("Hello, World!") </py-script> </body>- On your browser, you will see this:
Tip: If you’re using the VSCode editor, you can use the Live Server add-on in VSCode to reload the page as you update the HTML file.
Finally, In this article, you learned what PyScript is and how to use it in HTML files to run Python code in the browser. You also learned about the different things that can be done with PyScript.
With PyScript, Python operations on the web are easier to run and do than they were before. This is an excellent tool for anyone who wants to use Python on the web.
PyScript is still young and is still being worked on a lot. It is still in the alpha stage, and there are known problems like the time it takes to load, which can make it hard to use (at the time this article was written, some other operations couldn’t be shown because of performance problems). So you shouldn’t use it yet in production because there will probably be a lot of changes that break things.
References
If you like this article please hit the clap button as many times as you like, as it keeps me motivated to write more articles. Have a great weekend, Happy Hacking 😉.
And Don’t forget to ping me on Linkedin.
