PyScript :- The JS Killer?

#javascript #webdev #python #programming

We all have been hopping towards different programming languages for different purposes. Most of us prefer Python for Machine Learning and Data Analytics while JavaScript for Web development.
The ability of JavaScript to run in the browser gives it an upper hand in web development. Adding ML and Data Analytics projects to a website has always been a pain for developers. We need to create and manage various APIs to get the task done.
However, this is not the case anymore. Now you can write and run Python in the browser using PyScript just like JavaScript.

PyScript: -

PyScript is developed by Anaconda. With the Help of py-script tag, you can directly write python programs in an HTML file just like you write JavaScript code under the script tag. PyScript also supports various python modules including scikit -learn, matplotlib. Modules can be installed using py-env.

Installation: -

There is absolutely no installation needed to run PyScript. Just add proper CSS and script import statement to the HTML file and you are good to go. The import statement to be added is given below

<head>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>

Note: - You need to wait for some time as it takes time to create the proper environment to run python files.

How to use Pyscript: -

1)Directly in HTML file (Embedded code).

<py-script>
        print("Hello, I am written in Python")
</py-script>

2)Use external file

<py-script src="./1.py" output="plot"></py-script>

Latter is preferred because code editors like VS code still doesn’t identify python code in HTML files. This can cause lots of indentation errors in complex codes and also you won’t be able to use features like auto-complete and suggestions.

Examples: -

Getting started

<!DOCTYPE html>
<html>

<head>
    <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, I am written in Python")
    </py-script>

</body>

</html>

Creating Linear Regression in PyScript

For this, we need to install libraries scikit-learn, matplotlib, NumPy, and pandas. It can be done by adding the library's name under the tag.

<!DOCTYPE html>
<html>
  <head>
    <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 
        - matplotlib 
        - numpy 
    </py-env>
  </head>

  <body>
    <div id="plot"></div>
    <py-script src="./1.py" output="plot"></py-script>
  </body>
</html>

import pandas as pd
import numpy as np
import matplotlib.pyplot as plt
from sklearn.model_selection import train_test_split
from sklearn.linear_model import LinearRegression
data={'Hours': [2.5, 5.1, 3.2, 8.5, 3.5, 1.5, 9.2, 5.5, 8.3, 2.7, 7.7, 5.9, 4.5, 3.3, 1.1, 8.9, 2.5, 1.9, 6.1, 7.4, 2.7, 4.8, 3.8, 6.9, 7.8], 'Scores': [21, 47, 27, 75, 30, 20, 88, 60, 81, 25, 85, 62, 41, 42, 17, 95, 30, 24, 67, 69, 30, 54, 35,76, 86]}
s=pd.DataFrame(data)
X=np.array(s['Hours']).reshape(-1,1)
Y=np.array(s['Scores']).reshape(-1,1)
X_train, X_test, y_train, y_test = train_test_split(X, Y, test_size=0.2, random_state=0)
regressor = LinearRegression()
regressor.fit(X_train, y_train)
y_pred = regressor.predict(X_test)
fig, plot = plt.subplots()
print(y_pred)
plot.scatter(X_test, y_test, color ='b')
plot.plot(X_test, y_pred, color ='k')
fig

Graph and prediction are displayed on the browser

Conclusion: -

Since PyScript is relatively new. Quite a few numbers of problems are associated with it.

a)Code editors are still not adapted to identify python code inside HTML files. So, features like auto-indent, auto-complete simply won’t work.
b)You can’t read APIs because the SSL module is still not available.
c)You can’t read CSV files from local storage.
d)It is relatively slow.

You can also create interactive experience using PyRepl which is part of PyScript project.PyScript has great potential. It would be interesting to see how things go in the future for PyScript.

For more information visit https://anaconda.cloud/pyscript-python-in-the-browser