Introduction
PyScript is a framework for building rich Python programs in the browser using the HTML interface. similar to javascript, but written in the Python programming language.
Before we start, I'm going to say in the beginning that PyScript does not replace JavaScript.
PyScript does not have a lot of features like JavaScript. If we open PyScript | Run Python in your HTML, we will see that Pyscript is very alpha and under heavy development.
But it's not fun if we finish there. We will discuss more about PyScript in this post.
PyScript Features
The following are some of the PyScript features that can be used:
- 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
To install PyScript it's very easy. You just open the PyScript | Run Python in your HTML and follow the instructions.
PyScript cracked a funny joke 😂😂😂
By the way, we don't need to install PyScript. We simply insert the following tag into our html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>PyScript Playground</title>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body></body>
</html>
After that, we can open html with a live server extension or just open it in browser by clicking the html file.
PyScript Component
To run PyScript, we need to add the <py-script> tag and specify the python code that can be executed within the web page.
for example, We want to print hello world in the web page. We can do it like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>PyScript Playground</title>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
<py-script> print('hello world') </py-script>
</body>
</html>
PyScript with Popular Library
We can also use popular library on PyScript. For example, we can use pandas to read csv files.
Because we need external Library, we need to declare them in the <py-env> tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>PyScript Playground</title>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
<py-env> - pandas </py-env>
</head>
<body>
.....
</body>
</html>
After that, we can use pandas in PyScript code like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>PyScript Playground</title>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
<py-env> - pandas </py-env>
</head>
<body>
<py-script>
import pandas as pd
from pyodide.http import open_url
data_training = pd.read_csv(open_url("https://raw.githubusercontent.com/jagadyudha/jagadyudha/main/data_training.csv"))
data_training.head()
</py-script>
</body>
</html>
Not only that, we can use the library sklearn to run machine learning.
In this case, I want to know use sklearn.naive_bayes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>PyScript Playground</title>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
<py-env>
- pandas
- scikit-learn
- numpy
</py-env>
</head>
<body>
<py-script>
import pandas as pd
from sklearn.model_selection import train_test_split
from sklearn.naive_bayes import GaussianNB
from pyodide.http import open_url
from sklearn.metrics import classification_report
import numpy as np
data_training = pd.read_csv(open_url("https://raw.githubusercontent.com/jagadyudha/jagadyudha/main/data_training.csv"))
x = data_training.drop(["Jenis Gangguan"], axis=1)
y = data_training["Jenis Gangguan"]
x_train, x_test, y_train, y_test = train_test_split(x, y, test_size=0.18, random_state=45)
modelnb = GaussianNB()
nbtrain = modelnb.fit(x_train, y_train)
y_pred = nbtrain.predict(x_test)
print("Predict :", y_pred)
print("Actual :", np.array(y_test))
print(classification_report(y_test, y_pred))
</py-script>
</body>
</html>
I'm not going to show how to read the data because it's going to take a lot of time. However, we can see that PyScript is also working to run machine learning.
PyRepl Component
<py-repl> creates a REPL component that is rendered to the page as a code editor and allows users to write executable code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>PyScript Playground</title>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
<py-repl id="repl" auto-generate="true"></py-repl>
<p style="margin-left: 30px">shift + enter to run</p>
</body>
</html>
Play Mario with PyScript
PyScript can also be used to run games like Mario Bros. You can check the source code at the following link: pyscript/examples/mario at main pyscript/pyscript (github.com)
Conclusion
It's too early for PyScript to match JavaScript. In fact, my personal opinion is that it's almost impossible to beat JavaScript.
Do you think PyScript will beat Javascript? let me know what you think in the comments.