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

July 20, 2022 | Comments(4) |

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

PyScript Components:

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

  1. 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: 

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

    If we like to use some python code in an external file, then we can use the syntax below:
  3. py-repl generates a REPL (Read-Eval-Print-Loop) component that evaluates and displays the code entered by the user.

Example 1: 

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.

PyScript

Example 2: 

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.

PyScript

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:

  1. 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. 

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

  1. 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.

  1. 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.


4 Responses to “PyScript: The Evolution of Python from Backend to Frontend Scripting Language”

  1. Venkatesh Uppalapati

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

    Reply
  2. Siva Sai R

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

    Reply

Leave a Reply