PyScript: The Evolution of Python from Backend to Frontend Scripting Language

TABLE OF CONTENT

1. Overview

2. Introducing PyScript

3. Core Elements of PyScript

4. PyScript Architecture

5. PyScript Components

6. Conclusion

7. About CloudThat

8. FAQs

Overview

Traditionally, Python is used as a backend programming language in web development. To use Python in web applications, we need to depend on Python software which is hosted on the server but now we can directly run python code from the HTML file itself.

Do you work as a Python developer or a data scientist? Are you envious of coders that write JavaScript code and create sophisticated browser-based websites? Don’t you think it would be great if we could develop websites in Python? Surprisingly, Anaconda’s CEO Peter Wang introduced a dazzling new technology called PyScript at PyCon US 2022, allowing users to write Python and other languages in the browser.

Introducing PyScript

PyScript is a JavaScript framework for building Python applications in the browser. That is right, just like any JavaScript developer, we can now embed Python code straight in HTML files. This project allows us to execute Python in our browser.

PyScript’s concept is simple: data scientists may use their chosen language to construct websites based on their models, as long as they have a basic understanding of HTML.

We can even host HTML files containing PyScript in the AWS cloud S3 bucket, making the HTML file dynamic instead of static. This Pyscript helps render dynamic HTML pages from the AWS Lambda service, making HTML files more robust.

Core Elements of PyScript:

Python in the browser: This allows us to host drop-in content, external files, and applications without requiring server-side settings
Python Ecosystem: Use NumPy, pandas, scikit-learn, and other popular Python and scientific stack packages
Environment management: Allow users to choose which packages and files should be included in order for the page code to run

PyScript Architecture:

PyScript is written in Pyodide, which is a CPython-WebAssembly bridge.

CPython is a fast Python implementation developed in both Python and C.

WebAssembly is a low-level language that, as the name suggests, is very similar to Assembly and has incredible performance. It runs in binary format. It acts as a trans piler for the Python code you create. It comprises a human-readable.wat text format language, which is then translated to a binary.wasm format that browsers can read. We can now create code in any language, compile it to WebAssembly, and run it in a web browser.

PyScript Components:

PyScript uses three key components to allow us to write Python in HTML:

py-env is a Python environment variable specifying the Python packages required to run your Python code. This tag is placed in Html <head> tag.
Syntax:

<py-env> #To declare the packages you need </py-env>

1

<py-env> #To declare the packages you need </py-env>

Example:
We write Python code in py-script, which is then performed within the web page.

<py-script> #To insert Python logic into HTML </py-script>

1

<py-script> #To insert Python logic into HTML </py-script>

If we like to use some python code in an external file, then we can use the syntax below:

<py-script src=”/python_file.py”> </py-script>

1

<py-script src=”/python_file.py”> </py-script>
py-repl generates a REPL (Read-Eval-Print-Loop) component that evaluates and displays the code entered by the user.

<py-repl> #Creates a REPL shell, where user can execute interactive python code </py-repl>

1

<py-repl> #Creates a REPL shell, where user can execute interactive python code </py-repl>

Example 1:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading in HTML</h1>

<py-script> 
def hello():
    print('Now you can in Python!')
    a=10
    b=20
    return(a*b)
print(hello())
</py-script>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

</head>

<body>

<h1>This is a Heading in HTML</h1>

<py-script>

def hello():

print('Now you can in Python!')

a=10

b=20

return(a*b)

print(hello())

</py-script>

</body>

</html>

In the above example, we have included python related links in the head tag, and in the body, we have directly used the <py-script> tag to write code in Python. It will get executed, and the output will be displayed in UI.

Example 2:

<html>
    <head>
      <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
      <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
      <py-env>
        - numpy
        - matplotlib
      </py-env>
    </head>

  <body>
    <h1>Plotting a histogram of Standard Normal distribution</h1>
    <div id="plot"></div>
    <py-script output="plot">
import matplotlib.pyplot as plt
import numpy as np

np.random.seed(42)

rv = np.random.standard_normal(1000)

fig, ax = plt.subplots()
ax.hist(rv, bins=30)
fig

    </py-script>
  </body>
</html>

<html>

<head>

<py-env>

- numpy

- matplotlib

</py-env>

</head>

<body>

<h1>Plotting a histogram of Standard Normal distribution</h1>

<py-script output="plot">

import matplotlib.pyplot as plt

import numpy as np

np.random.seed(42)

rv = np.random.standard_normal(1000)

fig, ax = plt.subplots()

ax.hist(rv, bins=30)

fig

</py-script>

</body>

</html>

In this example, we are using numpy and matplotlib. So we need to declare them in <py-env> tag and then we can import and use them directly from our <py-script> tag. This way, we can use this to display statistical data on the screen, as shown below output.

Conclusion:

PyScript is still in the early stages of development. Several documented concerns range from usability to loading times and expect things to change frequently. We can use this to experiment with statistical data using PyScript to display charts directly in UI, but it is not suggested that utilize it for production at this time.

About CloudThat

CloudThat is the official AWS Advanced Consulting Partner, Microsoft Gold Partner, and Training partner helping people develop knowledge on the cloud and help their businesses aim for higher goals using best in industry cloud computing practices and expertise. We are on a mission to build a robust cloud computing ecosystem by disseminating knowledge on technological intricacies within the cloud space. Our blogs, webinars, case studies, and white papers enable all the stakeholders in the cloud computing sphere.

If you have any queries about PyScript, Python Language, or anything related to Javascript, feel free to drop in a comment. We will get back to you quickly. Visit our Consulting Page for more updates on our customer offerings, expertise, and cloud services.

FAQs:

Do we need to install Python in our System/hosted server?

No, we do not need Python to be installed in our application-hosted platform. We only need to include the script link in our HTML code, and that’s it.

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

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

The link will act as a CDN, and our Python code gets executed from the browser directly without installing Python software.

How to install a package to import it in Py Script?

We can mention all the packages that are required in the <py-env> tag in HTML, which loads the package in our environment so that we can directly import it into PyScript.

Can we use JavaScript besides PyScript in our HTML code?

Yes, we can use JS and PyScript code in our HTML file in their script tags.

Voiced by Amazon Polly

WRITTEN BY Imraan Pattan

Imraan is a Software Developer working with CloudThat Technologies. He has worked on Python Projects using the Flask framework. He is interested in participating in competitive programming challenges and Hackathons. He loves programming and likes to explore different functionalities for creating backend applications.

Siva Sai R

Jul 26, 2022

Reply

This blog introduced us to a new emerging technological advancement in python, good one; thank you!
Venkatesh Uppalapati

Jul 21, 2022

Reply

It is very useful and informative blog for us , Thanks for sharing.
Munwar

Jul 21, 2022

Reply

Very useful, Great work 👍
Anusha Shanbhag

Jul 21, 2022

Reply

Very informative blog.

Click to Comment

PyScript: The Evolution of Python from Backend to Frontend Scripting Language

TABLE OF CONTENT

Overview

Introducing PyScript

Core Elements of PyScript:

PyScript Architecture:

PyScript Components:

Example 1:

Example 2:

Conclusion:

About CloudThat

FAQs:

WRITTEN BY Imraan Pattan

Comments

Siva Sai R

Venkatesh Uppalapati

Munwar

Anusha Shanbhag

Leave a Reply Cancel reply

Related Resources

Get The Most Out Of Us