Python + pyscript + WebAssembly: Python Web Apps, Running Locally with pyscript

Can we build a pyscript (client-side Python) web app that loads super quick and doesn't lag during startup? Could we create one that looks like a regular web app rather than just an embedded Jupyter notebook or data science experience?

The answer is YES! And you'll learn how to build exactly that in this video. No pyscript or pyodide experience necessary. Just lovely Python apps running locally in your macOS dock or Windows taskbar.

▬ Chapters ▬▬▬▬▬▬▬▬▬▬▬▬

0:00 Introduction
0:54 What is pyscript?
1:37 What we will build
2:47 Surveying the pyscript examples
4:00 How does it load over slow networks?
6:34 Source code for the weather PWA app
6:56 Running the app locally (dev mode)
8:21 HTML to integrate py-script
12:11 Running app's Python code in the browser
14:58 DOM manipulation and driving the UI with client-side Python
17:45 Hook JavaScript events with Python functions
19:44 Web site to offline progressive web app (PWA)
20:22 How can we install the PWA app locally?
21:52 Requirements of a PWA
23:57 Registering the serviceWorker
27:20 Seeing the PWA in browser dev tools
28:35 Final thoughts

▬ Code ▬▬▬▬▬▬▬▬▬▬▬▬

Get all the code for the app you saw in this video from the GitHub repo:

▬ Learn Python ▬▬▬▬▬▬

[yash]

7:52 "Add a flask run server" configuration
30:59 _" things like vue.js & reach front ends wrapping up some python code "_

haha

[riadibadulla]

Thank you, I was looking for this video since pyscript was released

[yash]

11:40 haha, we got footer inside the body lol 😉

[jdaniele]

Great video Michael, thanks for sharing it!

[sheikhakbar]

Pyscript arrived just in time when I gave up on learning JS ... Seriously I can't think of anything I can do with JS except run my python code in the browser... I can't wait for Pyscript to become fully functional!
What I really want to build with pyscript; is a simple Quiz app It's a fill-in-the-blank quiz .. it should be case insensitive; Normal python would do that in a couple of lines; assuming .. the questions and answers are stored in a simple pandas dataframe!

[alinazang]

One big advantage of Webassembly is that it runs in its own process separate from browser's page. I can see this as a performant way to listen to DOM changes on other people's websites (thru Mutationobserver), and with python - as a convenient way to do complex logic on it or integrate some unique python libraries to enhance functionality of web pages.

[alxizr]

Hi mike, great video. Thanks very much. Can we make it work in react for example ?

My concern is the DOM interactions. If i want to add a callback to an element. Pyscript requires grabbing it from the DOM with query selector and id which is something that is a big no no in react

[yash]

22:09 this vid is over 27 months old, is there any update video to this?

[ThrillDaWill]

I’ve been trying to figure out how to install modules and add them to my website projects that can be used and referenced by pyscript but I haven’t found a solution. Is there anyway I could reference these custom modules for my web application? Any help would be much appreciated!

[sammyay-man]

I don't understand. it didn't work for at all its like html didn't recognize it ....help me.

[yash]

7:04 my question is: if my logic doesn't require fetching any data from the server, can i make it so that all the logic processing happens only client side but written in python?
14:23 it seems yes, ... i.e. it seems that here the server side is only used to fetch those data... the processing is still happening client side. which is what i am looking for :)

[MuhammadAhmad-sfhp]

What was the icon you clicked in the finder to create a virtual environment in mac os? ... There should be a way to use py-script for server-side rendering, just like the svelte kit, which takes a ton of load from the browser and instantly deliver the content.

[Lugoxc]

Thanks for the tutorial. is this possible with nicegui?

[ComputerVisionEngineer]

Hey Michael, nice tutorial, do you know if there is a way of getting frames from the webcam using pyscript? Using opencv and calling cv2.VideoCapture(0) as I usually do in Python doesn't seem to work. I am surprised I haven't been able to find any documentation on how to do it.

[maximelqt]

Very nice! Totally unrelated question sorry, could you share how you got that button in Finder to open the terminal?

[moses]

Great work! One question: why not do this without Flask?

[pranjalsrivastava]

Hi Michael,

How I can convert python file into .wasm binary?

[funguy]

Is Blazor WASM more performant than this ?

[darkModeYT]

QUESTION

First of all, thank you for your awesome tutorial! I have a question how to make at least some functions work offline. Otherwise I don't get why to download compiled Web Assebly and python wheels if I can't use them without connection to the server

[mayorca_institute]

Please do it again.... I need a clearer view