Contents
    Is PyScript going to take the place of JavaScript?

    Is PyScript going to take the place of JavaScript?

    Understanding framework for building rich Python programs in the browser using the HTML interface.

    Posted by Jagad on June 4, 2022
    -- views

    5 min read

    Introduction

    PyScript is a framework for building rich Python programs in the browser using the HTML interface. similar to javascript, but written in the Python programming language.

    Before we start, I'm going to say in the beginning that PyScript does not replace JavaScript.

    Meme about PyScript

    PyScript does not have a lot of features like JavaScript. If we open PyScript | Run Python in your HTML, we will see that Pyscript is very alpha and under heavy development.

    But it's not fun if we finish there. We will discuss more about PyScript in this post.

    PyScript Features

    The following are some of the PyScript features that can be used:

    • Python in the browser: Enable drop-in content, external file hosting, and application hosting without the reliance on server-side configuration
    • Python ecosystem: Run many popular packages of Python and the scientific stack (such as numpy, pandas, scikit-learn, and more)
    • Python with JavaScript: Bi-directional communication between Python and Javascript objects and namespaces
    • Environment management: Allow users to define what packages and files to include for the page code to run
    • Visual application development: Use readily available curated UI components, such as buttons, containers, text boxes, and more
    • Flexible framework: A flexible framework that can be leveraged to create and share new pluggable and extensible components directly in Python

    Getting Started

    To install PyScript it's very easy. You just open the PyScript | Run Python in your HTML and follow the instructions.

    Installation instructions

    PyScript cracked a funny joke 😂😂😂

    By the way, we don't need to install PyScript. We simply insert the following tag into our html.

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>PyScript Playground</title>
        <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
        <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
      </head>
      <body></body>
    </html>
    

    After that, we can open html with a live server extension or just open it in browser by clicking the html file.

    PyScript Component

    To run PyScript, we need to add the <py-script> tag and specify the python code that can be executed within the web page.

    for example, We want to print hello world in the web page. We can do it like this:

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>PyScript Playground</title>
        <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 world') </py-script>
      </body>
    </html>
    
    Print hello world

    We can also use popular library on PyScript. For example, we can use pandas to read csv files.

    Because we need external Library, we need to declare them in the <py-env> tag.

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>PyScript Playground</title>
        <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
        <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
        <py-env> - pandas </py-env>
      </head>
      <body>
        .....
      </body>
    </html>
    

    After that, we can use pandas in PyScript code like this:

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>PyScript Playground</title>
        <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
        <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
        <py-env> - pandas </py-env>
      </head>
      <body>
        <py-script>
          import pandas as pd
          from pyodide.http import open_url
    
          data_training = pd.read_csv(open_url("https://raw.githubusercontent.com/jagadyudha/jagadyudha/main/data_training.csv"))
          data_training.head()
        </py-script>
      </body>
    </html>
    
    PyScript with pandas

    Not only that, we can use the library sklearn to run machine learning.

    In this case, I want to know use sklearn.naive_bayes

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>PyScript Playground</title>
        <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
            - numpy
        </py-env>
      </head>
      <body>
        <py-script>
          import pandas as pd
          from sklearn.model_selection import train_test_split
          from sklearn.naive_bayes import GaussianNB
          from pyodide.http import open_url
          from sklearn.metrics import classification_report
          import numpy as np
    
          data_training = pd.read_csv(open_url("https://raw.githubusercontent.com/jagadyudha/jagadyudha/main/data_training.csv"))
          x = data_training.drop(["Jenis Gangguan"], axis=1)
          y = data_training["Jenis Gangguan"]
          x_train, x_test, y_train, y_test = train_test_split(x, y, test_size=0.18, random_state=45)
          modelnb = GaussianNB()
          nbtrain = modelnb.fit(x_train, y_train)
          y_pred = nbtrain.predict(x_test)
            
          print("Predict :", y_pred)
          print("Actual :", np.array(y_test))
    
          print(classification_report(y_test, y_pred))
        </py-script>
      </body>
    </html>
    
    PyScript with sklearn

    I'm not going to show how to read the data because it's going to take a lot of time. However, we can see that PyScript is also working to run machine learning.

    PyRepl Component

    <py-repl> creates a REPL component that is rendered to the page as a code editor and allows users to write executable code.

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>PyScript Playground</title>
        <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
        <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
      </head>
      <body>
        <py-repl id="repl" auto-generate="true"></py-repl>
        <p style="margin-left: 30px">shift + enter to run</p>
      </body>
    </html>
    
    PyRepl Component

    Play Mario with PyScript

    PyScript can also be used to run games like Mario Bros. You can check the source code at the following link: pyscript/examples/mario at main pyscript/pyscript (github.com)

    Conclusion

    It's too early for PyScript to match JavaScript. In fact, my personal opinion is that it's almost impossible to beat JavaScript.

    Do you think PyScript will beat Javascript? let me know what you think in the comments.


    Post Reactions
    LIKE
    LOVE
    Wow
    YAY
    Contributors

    The writing on this website may contain errors in grammar, punctuation, etc. Please make a contribution here