Pyscript

My Insights On This New Awesome Technology

Vincent Le included in Insights Front-end

15-06-2022 879 words 5 minutes

Contents

Want some music while reading? 🎵📻

Introduction

Recently, the development world is “shaken” by a new and fresh piece of technology: Pyscript. Why does Pyscript catch a lot of attention? Previously, when we talk about web development, we think of Javascript and HTML. There are many other popular choices such as Java and HTML, PHP, Python and Django etc. as well.

Javascript has always been the first choice for web development because it is natively supported by HTML. For example, we can create a very basic website like this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<!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>Basic Website</title>
</head>
<body>
    <h1 id="title">Hello World!</h1>
    <button onclick="changeColor()">Change Color</button>

    <script>
        const changeColor = () => {
            const title = document.getElementById("title")
            !title.style.color || title.style.color === "black" ? title.style.color = "red" : title.style.color = "black"
        }
    </script>
</body>
</html>

The website only contains a “Hello World” title and a button to toggle the title’s color. We can inject Javascript into HTML simply using the <script> tag and this method only works for Javascript. But what if you could inject Python into HTML like this without any extra effort? Mind-blowing right? 😉

Basics

Pyscript is very new, therefore, there’s not so many features yet. It’s very simple to use it, you don’t have to install the package or anything, you could just add the <link> and <script> tags in the document’s head like this

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<!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">

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

    <title>Basic Pyscript</title>
</head>
<body>
    <py-script>
        print("Hello World")
    </py-script>
</body>
</html>

If everything is corrects, you will see that before rendering, there is a quick spinner “Loading runtime…” appears on the page. After that the “Hello World” text will show up.

By using this <pyscript> tag, you could inject python code in there and it will be rendered on the screen.

Code Editor In The Web

The <py-repl> tag creates a REPL component that is rendered to the page as a code editor, allowing you to write executable code inline. If you know Jupyter Notebook, this is quite similar.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<!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">

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

    <title>REPL</title>
</head>
<body>
    <py-repl></py-repl>
</body>
</html>

With this, you could see a a component that looks like an input on the webpage that allows you to write Python code in it. For example, you could write print("Hello World") in there then press Shift + Enter, “Hello World” will be printed on the screen.

If you want the REPL to be auto generated every time you press Shift + Enter, here is the code for that

1
<py-repl id="my-repl" auto-generate="true"></py-repl>

Separate Python File

If we want to make our code cleaner, we could separate the python code into its own file

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
# main.py

import numpy as np
import random

output_el = Element("output").element

arr = np.array([22, 55, 34, 67, 24])

output_el.innerHTML = f"{arr}"

def shuffle_arr(*args):
    shuffled = sorted(arr, key=lambda k: random.random())
    output_el.innerHTML = shuffled

This piece of code allows us to shuffle an array of numbers then display that on the webpage via the output element.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!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">

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

    <title>Shuffle Array</title>

    <py-env>
        - numpy
    </py-env>
</head>
<body>
    <main>
        <div id="output"></div>
        <button 
            id="shuffle-btn" 
            pys-onClick="shuffle_arr"
        >
            Shuffle
        </button>
    </main>

    <py-script src="./main.py"></py-script>
</body>
</html>

Since we’re using an external Python file, we declare the src path to that file in the <pyscript> tag. We have to add the <py-env> tag and declaring numpy value there because we are using numpy in our code.

For HTML, we have a div with id output for displaying the array. Then we add a button to fire the shuffle_arr function on click. It’s very important that the button has an id, if you don’t include that, Pyscript will complain about it in the console and code doesn’t work.

With only this, we have a functional webpage running by Python code!

Conclusion

Pyscript is a promising and brilliant new technology. At the moment, these are the main features it provides but I believe, there will be much more stuff coming up next.

You might have a question, will Python replace Javascript if we now can do DOM manipulation with Javascript? From my point of view, this is not going to happen because Javascript is a mature language and it’s just so powerful. Pyscript makes it easier for Python developers to work with web development but I think it can never replace Javascript.

As always, thanks for reading! I hope this gives you new ideas and happy hacking! 😉