PyScript :- The JS Killer?

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 …


This content originally appeared on DEV Community and was authored by Ritesh Shukla

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>


Hello World Output

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

Linear Regression Output
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


This content originally appeared on DEV Community and was authored by Ritesh Shukla


Print Share Comment Cite Upload Translate Updates
APA

Ritesh Shukla | Sciencx (2022-05-07T22:06:19+00:00) PyScript :- The JS Killer?. Retrieved from https://www.scien.cx/2022/05/07/pyscript-the-js-killer/

MLA
" » PyScript :- The JS Killer?." Ritesh Shukla | Sciencx - Saturday May 7, 2022, https://www.scien.cx/2022/05/07/pyscript-the-js-killer/
HARVARD
Ritesh Shukla | Sciencx Saturday May 7, 2022 » PyScript :- The JS Killer?., viewed ,<https://www.scien.cx/2022/05/07/pyscript-the-js-killer/>
VANCOUVER
Ritesh Shukla | Sciencx - » PyScript :- The JS Killer?. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/05/07/pyscript-the-js-killer/
CHICAGO
" » PyScript :- The JS Killer?." Ritesh Shukla | Sciencx - Accessed . https://www.scien.cx/2022/05/07/pyscript-the-js-killer/
IEEE
" » PyScript :- The JS Killer?." Ritesh Shukla | Sciencx [Online]. Available: https://www.scien.cx/2022/05/07/pyscript-the-js-killer/. [Accessed: ]
rf:citation
» PyScript :- The JS Killer? | Ritesh Shukla | Sciencx | https://www.scien.cx/2022/05/07/pyscript-the-js-killer/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.