JavaScript has long been the dominant language in front-end development because it runs natively in the browser and interacts with HTML and CSS via the DOM API.
Things slowly started to change with the introduction of WebAssembly. Languages such as Go, Rust, C, C++, and many others can now run in the browser at near-native speeds, and Python hasn’t been left behind.
With the advent of PyScript, front-end developers can now interface richly with Python. In addition, they can also take advantage of the Python ecosystem, which includes useful scientific modules such as NumPy, Matplotlib, and many more.
What is PyScript?
PyScript is an open-source web framework that allows us to create front-end web applications using Python.
Python has grown immensely in recent years. It has a wide range of applications and is most popular in Artificial Intelligence, Data Science, Robotics, and Scripting.
In web development, Python is mainly used in the backend with frameworks like Django and Flask.
With PyScript, we can either embed Python code in HTML, or link to a Python file and the code will execute completely in the browser — without running Python in the backend.
PyScript was created by Anaconda and was publicly announced on April 30 at PyCon US 2022 conference.
Currently, PyScript is in the alpha stage and under development. So expect major changes and new features as its stable version is not out now.
How does it work?
Remember, this is in Alpha, so it is very very new. It will simply bring some great Python packages and tasks to the browser environment.
PyScript builds on Pyodide, which carries CPython on WebAssembly.
WebAssembly is nothing but a low-level binary format that allows us to write programs in other languages, which are then executed in the browser.
With CPython in WebAssembly, we can install and run Python packages in the browser, while PyScript abstracts most of the Pyodide operations, allowing us to focus on building frontend apps with Python in the browser.
Core components
- Python in the browser: Enable drop-in content, external file hosting, and application hosting without the reliance on server-side configuration. This is just HTML at the end and then we can use the whole.
- Python ecosystem: We can run core modules. Run many popular packages of Python and the scientific stack (such as numpy, pandas, sci-kit-learn, and more). This will be very effective for building machine learning and data science websites. For example, we can use matplotlib and then combine it with javascript.
- Python with JavaScript: It opens a bi-directional communication path between Python and Javascript objects and namespaces
- Environment management: Users can decide which files and packages can be included in the code.
- Visual application development: The user can access available built-in UI components, such as containers, buttons, text boxes, etc.
- Flexible framework: A flexible framework that can be leveraged to create and share newly pluggable and extensible components directly in Python.
Will PyScript replace JavaScript?
We should say no, absolutely this will be a great technology, it will open up new doors as we are open up to new technologies.
it is going to improve the performance of the system, going to have TensorFlow, machine learning, ai pytorch all of those running on the browser natively using python and this is going to increase the performance, but still, javascript is a very powerful language and support lot of libraries, etc.
Pyscript is not born to replace JavaScript, it is making the browser run Python into the browser. Moreover, any valid js code will also work inside PyScript.
Before we get started.
We need to be familiar with the following to get started:
- IDE or any text editor.
- Knowledge of Python.
- Knowledge of HTML.
- Browser: For PyScript Google Chrome is recommended.
How to Get Started with PyScript
PyScript is fairly easy and straightforward to learn. To get started, you can either follow the instructions on the website or download the .zip file.
Here we are going to see how we can implement PyScript in browsers. You can do this by linking the components in your HTML file. Let us give a kick start to PyScript.
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> 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>
The full code for the HTML file is below:
<!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>
<py-script> print(“Hello, World!”) </py-script>
</body>
</html>
On your browser, you should see this:
Hello, World!
Conclusion
In this article, we learned what PyScript is all about and how to use it in HTML files to run Python code on the browser.
With PyScript, it’s easier to run and perform Python operations on the web, as this wasn’t easy before. This is a great tool for anyone who’s looking forward to using Python on the web.
PyScript is still in its early stages and under heavy development. It is still in its alpha stage and faces known issues like the load time which can affect usability (some other operations can’t be shown at the time of this writing due to performance issues). So you shouldn’t use it in production yet as there will likely be a lot of breaking changes.
Are you looking forward to a hire a professional Software Development Company?
If yes, then contact us. Perfomatix is one of the top software development company. We provide software development services in developing highly scalable software solutions.
To know how we helped our clients from diverse industries, then check out our success stories section.
