PyScript: Run Python in your HTML

There are actually quite a few Python-in-the-browser implementations, not just those two! A couple of years ago a colleague of mine wrote up a comparison, including Brython and Pyodide:

https://anvil.works/blog/python-in-the-browser-talk

(We chose one of the Python-to-JS compilers, https://skulpt.org, for the Anvil web-app platform, because it's much lighter weight than this. It's a couple of hundred kb on the wire, and you can call to the server for any heavy lifting.)

Just 5 seconds? Sign me up. Corporate web sites take 30+ to load already.. /s

PyScript intent for using pyodide was usability with any existing library including c-extensions like numpy and other data science tools.

Transcrypt looks pretty great for my purposes, thank you!

That 5 second loading time only happends once though.

okay thought it wasn't working because it seems to take a long time for the spinner to go away. but I'm very impressed with the todo.py! This is what frontend should be and in 5 years or so I wouldn't be surprised to see python taking over. If only the initial payload for the python runner was smaller and if only browsers started supporting webassembly/python stack out of the box!!!

    from datetime import datetime as dt
    from utils import add_class, remove_class
    from js import console

    tasks = []

    # define the task template that will be use to render new templates to the page
    task_template = Element("task-template").select('.task', from_content=True)
    task_list = Element("list-tasks-container")
    new_task_content = Element("new-task-content")

    def add_task(*ags, **kws):
    # create task
    task_id = f"task-{len(tasks)}"
    task = {"id": task_id, "content": new_task_content.element.value, "done": False, "created_at": dt.now()}

    tasks.append(task)
    
    # add the task element to the page as new node in the list by cloning 
    taskHtml = task_template.clone(task_id, to=task_list)
    taskHtmlContent = taskHtml.select('p')
    taskHtmlContent.element.innerText = task['content']
    taskHtmlCheck = taskHtml.select('input')
    task_list.element.appendChild(taskHtml.element)
    
    def check_task(evt=None):
        task['done'] = not task['done']
        if task['done']:
        add_class(taskHtmlContent, "line-through")
        else:
        remove_class(taskHtmlContent, "line-through")

    new_task_content.clear()
    taskHtmlCheck.element.onclick = check_task

    def add_task_event(e):
    if (e.key == "Enter"):
        add_task()

They don't seem to be working on Android Chrome.

The js and css files should be hosted on a CDN otherwise people copying/pasting these demos might chew up pyscript.net resources.

Thank you, I was searching on the front page and didn't find those example. Would be good to add this.

If you already have a lot of domain logic in Python for your backend, that would make it easier to write a frontend living in the same codebase. (For example, imagine a framework for autogenerating forms for your Django models; this already exists server-side, but native client-side Python would give you more options. And if your framework owns both the client and server, it could autogenerate the API so you don’t even need to write one for happy-path usecases.)

If you are already using Python on the backend, not having to hire/train a completely different skill set/stack is appealing. Sure, the browser and CSS/HTML specialism is going to remain, but not having to split your team by JS vs <backend-language> would make it much easier for a team to collaborate and share work.

I think Python in the browser only has to be “almost as good” in a direct comparison for it to actually win out as the best choice organizationally for many teams.

It makes no sense to me also. One of the reasons Python so popular is due to it's interoperability with libraries written in C/C++, otherwise it's just super slow language. In the browser you can't access these fast libraries so you are left with a crap language with an even slower execution due to the interpreter VM written in JS

> Why?

This isn't good for most web use cases but there are some major new use cases that it enables.

Pyodide is in Python documentation all over the place, for instance on https://numpy.org/

Python has many libraries that JS is missing. Particularly the scientific computing ecosystem has a lot of very well supported Python packages but fewer JavaScript packages. They also can benefit a lot from connection to a UI.

Two key use cases for this stuff are Python education and scientific computing. Students have a hard time installing Python locally. Generally scientists want to share their results broadly, but they probably did their analysis in Python.

Here's another example of a good use case: https://www.socialfinance.org.uk/blogs/analysing-sensitive-d...

I think it's primarily meant as a learning tool. Here's the TL;DR from their GitHub.[1]

PyScript is a Pythonic alternative to Scratch, JSFiddle or other "easy to use" programming frameworks, making the web a friendly, hackable, place where anyone can author interesting and interactive applications.

https://github.com/pyscript/pyscript

Adding -Os to the Pyodide compilation flags has proven surprisingly hard: https://github.com/pyodide/pyodide/pull/1882

But some other low hanging fruit include unvendoring the special encodings for Asian languages (hopefully everyone uses utf8), the decimal library, and the xml library which are all quite large and only occasionally used.

https://pyscript.net/examples/

Local intranet / work tools would actually be a good use case for this as the load is small (tens, hundreds, maybe thousands of employees at absolute most) and mostly the same repeat users so browser caching would make it snappy for them on future visits.

A public marketing page where it's the random internet of totally new/anonymous users who want to instantly find out info about your product would be the worst use case for this IMHO.

For one of the examples, I saw it coming down with pyscript.js - 1.1 MB, pyodide.asm data + wasm of 16 MB, and each python package as a separate wheel download (cool!), matplotlib of 6MB :)

That was a very cool project, though I believe they aren't really related, even though they seem similar. Pyjs/Pyjamas was a more of a Python to JavaScript transpiler.

This is the actual CPython runtime with full standard library and many of the Python mathematical and plotting libraries compiled to WASM, running in the browser. It can also be included with other HTML and JavaScript on a web page just by wrapping the Python in a tag.

I made a few internal UIs with it. It was easy for that and worked well (and fun). This was 2010

wasm supports any language that compiles to wasm (or has its interpreter compiled to wasm). It's a bit like asking if "x86 assembly supports other languages"-- it supports whatever targets it!

You can just reference your separate python file, you don't actually have to put it all in one html file.

The project uses custom elements, which are required to contain a dash.

Now there's an Idea!

Isn’t the whole point of electron that people don’t want to learn a new language?

Asking these web devs turned desktop app developers to learn python is probably a bridge too far…