Make Python scripts work in the browser for building web apps

Making Python scripts work in a web browser involves handling web application functions in a web page through the Python programming language.

Since JavaScript is the primary programming language for running a web browser and an interactive web page, Python is generally used for data science, machine learning, and artificial intelligence.

Even though we have back-end frameworks like Django and Flask, or static site builders like Jekyll, Python is usually behind JavaScript for web development.

But thanks to the latest improvements, the future of JavaScript is open for discussion. “PyScript” allows Python scripts to work easily in web components.

According to PyScript.net:

“PyScript is a framework that allows users to create rich Python applications in the browser using the HTML interface and the power of Pyodide, WASM and modern web technologies. The PyScript framework offers users of all levels of experience access to an expressive, easy-to-learn programming language with countless apps.

In this column, you will learn what PyScript is, see an example, discover alternatives, and also learn how to create a custom web application with Python and PyScript.

What is JavaScript to Python migration?

Python is a human-readable programming language.

Thus, there are many Python intermediate program languages ​​to help JavaScript and Java modules and packages to be used in the Python environment.

For example, “TensorFlow” is mostly a JS package, or Plotly and Selenium.

There are even special packages for turning JavaScript code into Python code, like Js2Py.

Why is it important to understand JavaScript behind Python?

Because using Python scripts in the web browser does not mean that the age of JavaScript is over for web development.

JavaScript still works behind Python scripts in the web browser.

What is PyScript and how can you use it to build web applications?

PyScript is a framework allowing web browsers to use Python scripts.

PyScript turns blocks of Python code into Javascript equivalents behind the scenes.

To use PyScript in a web browser, follow these steps.

Use the stylesheet and JavaScript in the area

of the HTML file.


  • Use the Python code in the web component”“.
  • Pay attention to the indentation.
  • Do not format Python code in the web component”“.
  • Use PyScript shortcuts and arguments to import Python modules and packages.
  • Use CSS classes and identifiers to insert results into the specific division of HTML documents.

An example of running Python script in a web browser

An example of running a Python script in the browser is shown below.



     
     
     
     
- numpy
- matplotlib
     

The area

of the HTML file represents the most important resources.

We used “pyscript.css” and “pyscript.js”.

We also used the web component “” to render the Python modules to import.

In this example, we imported “numpy” and “matplotlib”.

In the section “

“, we will use these modules to create a Python Line Plot in a web browser.

     

Let's plot random numbers

     
     

At the beginning of

we used a “div” with the ID “plot”.

It is needed to perform Python script output insertion.

The “” is needed to match the ID value of the specific HTML Div.

 import matplotlib.pyplot as plt

 import numpy as np
 
 x = np.random.randn(1000)

 y = np.random.randn(1000)

 fig, ax = plt.subplots()
 ax.scatter(x, y)
 fig
     

The Python script above is a simple line drawing script. And you can see the result below.

Screenshot by author, June 2022

The example above shows how to create a line graph using PyScript.

How to see terminal output from PyScript

For every Python script, there is always a working terminal that generates the compute process messages.

Python ConsoleScreenshot by author, June 2022

The browser console should be read and followed by the developer to see how the PyScript works and what happens behind the scenes.

For example, the screenshot above shows the process of running the Python script we created.

It explains how the “numpy”, or “matplotlib” and their dependencies are loaded, and used by which resource.

How to create a custom web application with Python and PyScript?

To create a custom web application with Python and PyScript, follow these steps:

  • Import the necessary JS and CSS files from PyScript.
  • Create an HTML document with the appropriate HTML tag syntax.
  • Use the “py-script” HTML tag with the “output” attribute.
  • Use an HTML Div with a specific ID to match the value of the “output” attribute.
  • Use “py-env” for Python’s non-integrated libraries.
  • Insert the Python script in the “py-script” tag without syntax and indentation errors.
  • Use “return” in a Python function or “print” to end your script.
  • Refresh the web page to see the results.

Below is an example of a custom Python web application for “random password generation” based on password length.

Creating Python Web ApplicationsScreenshot by author, June 2022

The screenshot above shows an example of PyScript in an HTML document to generate custom passwords.

The Python script I used is below.

import string
import random
characters = list(string.ascii_letters + string.digits + "!@#$%^&*()")
def generate_random_password():
    length = int(input("Enter password length: "))
    random.shuffle(characters)
    password = []
    for i in range(length):
        password.append(random.choice(characters))
    random.shuffle(password)
    print("".join(password))
generate_random_password()

And the live version of the custom Python web application is here.

Simply write a numeric value in the input box.

Entry fieldScreenshot by author, June 2022

And, it will give you a simple 45 character password.

SEJ Custom Python AppScreenshot by author, June 2022

You can use this technology for some of my other SEJ articles for auditing sitemaps or viewing hot topics from news websites.

Or, in the future, we can demonstrate more sophisticated web applications via PyScript.

What are the disadvantages of PyScript?

The main disadvantage of PyScript is the lack of support.

PyScript is announced during Pycon 2022 to Python developers.

It was a big and exciting event, but the expectations of the community were higher than the current state of PyScript.

Due to low community support, PyScript development might be slower in the future, but when you think about Python’s journey, that’s not surprising.

Python wasn’t as popular as it was five years ago because it wasn’t known.

Python Research TrendsScreenshot by author, June 2022

Above you can see how Python has removed the search request from JavaScript altogether.

The main reason for the growth in popularity of Python is the “pandas” library.

That’s why, ML and Data Science are the main goals of Python, but it doesn’t have to continue this way.

Thus, PyScript should be seriously considered for the future of web development.

Pyscript search queryScreenshot by author, June 2022

What are the alternatives to PyScript?

Alternatives to PyScript are not equivalent to PyScript since it runs directly on the browser, but there are still different methods to use Python scripts indirectly inside a website.

These included “brython”, “pyodide”, “Appwrite”, “django-readers”, “appdeamon”.

Some alternatives to PyScript are for Firebase such as Appwrite, and other work for web development such as Brython.

Bryhthon for building web apps

Brython is older than Pyscript and aims to make Python the main language for web development with “text/python” file type instead of “text/javascript”.

Can PyScript and Brython Affect Search Engines and SEO?

Yes, in the future, PyScript and Brython can increase their effect on the web development industry.

Changing web development technologies and industries affect search engine crawlers and protocols.

If a search engine starts seeing “text/python” files or “.py” scripts in the HTML source code, it should be able to get it working to see the web page as is.

At the moment, PyScript works via JavaScript, and Brython is already at the start of its journey despite its age.

Other PyScript alternatives work through Node.js like back-end programming libraries or Firebase like cloud-based systems.

So, in the future, Google, as a heavily Python-coded search engine, might need to render Python files to crawl and display web pages.

Conclusion for Python as a Web Script

For people who love to code, it doesn’t matter whether you use Python or JavaScript for a certain task.

But, Python is the easiest programming language to learn because human-readable, it offers more features with less characters.

Most data scientists and ML (machine learning) engineers are familiar with Python, and transferring their talents into web development would be like unifying two different worlds.

More resources:


Featured Image: TippaPatt/Shutterstock

Source link

About Irene S. Stroupe

Check Also

The Ultimate Beginner’s Guide to Web Application Development

Over 60% of the world’s population uses the Internet and businesses have heard of the …