DEV Community

Tomasz Wegrzanowski
Tomasz Wegrzanowski

Posted on

PyScript: Second Impressions

PyScript lets you run Python directly in the browser.

I tried PyScript once before, but back then it didn't even run. Fortunately it got over this issue, and now it runs.

Installation

There's probably some way to get it through npm or pip, but PyScript is intended to be used with just plain JS and CSS files.
As it's still pre-1.0, and API can change anytime, let's get local copy of these two files:

Hello, World!

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Hello World</title>
  <link rel="stylesheet" href="./pyscript.css" />
  <script defer src="./pyscript.js"></script>
  <style>
    body {
      margin: 0;
    }
  </style>
</head>
<body>
  <py-script>
    print("Hello World")
  </py-script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

You can view it here.

FizzBuzz

Of course we can do a FizzBuzz:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>FizzBuzz</title>
  <link rel="stylesheet" href="./pyscript.css" />
  <script defer src="./pyscript.js"></script>
  <style>
    body {
      margin: 0;
    }
  </style>
</head>
<body>
  <py-script>
    for i in range(1, 101):
      if i % 15 == 0:
        print("FizzBuzz")
      elif i % 3 == 0:
        print("Fizz")
      elif i % 5 == 0:
        print("Buzz")
      else:
        print(i)
  </py-script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

You can view it here.

Prompt Input

So we got it running in the browser, but it did nothing exciting.

Interaction is extremely limited. For an obvious approach, we could use input function:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Prompt Input</title>
  <link rel="stylesheet" href="./pyscript.css" />
  <script defer src="./pyscript.js"></script>
  <style>
    body {
      margin: 0;
    }
  </style>
</head>
<body>
  <py-script>
    name = input("What is your name? ")
    print(f"Hello, {name}")
  </py-script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

But it will use browser prompt without showing the prompt question, and with the page being totally blank! You only see the prompt after you answered it. So that's pretty much useless.

You can view it here.

Interacting with DOM

PyScript has extremely minimal set of DOM bindings.

You can select DOM elements with pyscript.Element, and you can read and write from them, but there are no event bindings, so it's not possible to have some button that calls your Python code when clicked, or to have Python track when some form input field changes. Even worse, there's no way to create elements, either by DOM APIs or even through innerHtml. You can clone elements, so you could write a template somewhere and copy that, but that would be far more painful than even IE4 coding.

This is not even close to being minimally usable API, which would need at least .addEventListener and at least one of .innerHtml= or .createElement.

There are also no HTTP requests either.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>DOM</title>
  <link rel="stylesheet" href="./pyscript.css" />
  <script defer src="./pyscript.js"></script>
  <style>
    body {
      margin: 0;
    }
    div {
      white-space: pre-wrap;
    }
  </style>
</head>
<body>
  <div id="output"></div>
  <py-script>
    from pyscript import Element
    def fizzbuzz(i):
      if i % 15 == 0:
        return "FizzBuzz"
      elif i % 3 == 0:
        return "Fizz"
      elif i % 5 == 0:
        return "Buzz"
      else:
        return str(i)
    list = Element("output")
    list.write("\n".join([fizzbuzz(i) for i in range(1, 101)]) )
  </py-script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

You can view it here.

Should you use PyScript?

The answer changed slightly in the sense that you can at least run it, but it's not even a legitimate proof-of-concept.

It's sort of impressive that you can get Python code running in the browser, sort of, but lack of any way to interact with the page makes it unusuable even for a demo.

Still, maybe it will turn into a real thing at some point.

Code

All code for this post is available on GitHub.

πŸ‘‹ While you are here

Reinvent your career. Join DEV.

It takes one minute and is worth it for your career.

Get started

DEV (this website) is a community where over one million developers have signed up to keep up with what's new in software.

Top comments (0)

Image of Docusign

πŸ› οΈ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

πŸ‘‹ Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay