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:
github.com/mikeckennedy/pyscr...
▬ Learn Python ▬▬▬▬▬▬
Want to learn more about Python and frameworks like pyscript? Check out all our courses over at training.talkpython.fm/course...

[@riadibadulla]

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

[@mikeckennedy]

You're most welcome! :)

[@jdaniele]

Great video Michael, thanks for sharing it!

[@mikeckennedy]

Thank you Daniel. :)

[@elev007]

Nice explanation! Thanks Michael.

[@mikeckennedy]

Glad it was helpful!

[@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

[@jairambala4276]

What a deadly combo

[@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!

[@flakeybran1447]

I’m still an amateur at programming and IT, but what about storing the modules on a server and requesting them as needed from the program? I’m assuming the request module would function just fine considering it comes with the python installation.

[@maximelqt4261]

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

[@mikeckennedy]

Thanks Maxime! That is a glorious bit of software. Get it at zipzapmac.com/Go2Shell

[@MuhammadAhmad-sf1hp]

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.

[@mikeckennedy]

Hey. I clicked my Go2Shell button (an add on) in Finder. But then just ran a virtual environment command like any other after it opened. As for running server-side, interesting yes. But AFAIK not something they are working on.

[@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.

[@mikeckennedy]

Thanks! It's likely possible. There is deep integration with JavaScript and PyScript. And JavaScript can do webcam stuff. So I'd see how to do it in JavaScript and then tie it in there.

[@aadityakotadia5280]

Hi! I was making a personal project using openCV (and mediapipe) and had the same question. Did you ever figure out what to do? Thanks!

[@Lugoxc]

Thanks for the tutorial. is this possible with nicegui?

[@pranjalsrivastava2462]

Hi Michael, How I can convert python file into .wasm binary?

[@moses5407]

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

[@mikeckennedy]

Hey Jim. Because I really wanted to show how to use pyscript with a JSON API. My experience using public free APIs is that they are fine for awhile then either go offline, change their schema in a breaking way, etc. Using Flask (or any dynamic server app) let's me ship something to people as part of the project to demo how to client/server comms without worrying about it only working for 6 months. But if you had another API already running somewhere, it's definitely not needed, right? :)

[@vcool]

@@mikeckennedy Using Flask here is missing the point altogether. If you control the server runtime, you don't need pyscript. Pyscript is for when you want to use static hosting.

[@mikeckennedy]

@@vcool What? It doesn't miss the point *at all*. Here is the point. I want to create a client-side pyscript app. I want that app to consume an API. I want that API to be stable. Hence, I shipped the app with a stable API in the form of the Flask app. In a "real" version, it would point at openweathermap.org or something like that. But this requires people playing with the app to register, create an account, enter API keys, etc. etc. That's useless, so why don't I make that simple. In a real app, you would use a real API like this. But in a demo app on a KZbin video that cannot be edited or changed even if the API changes, you might choose something simpler.

[@funguy29]

Is Blazor WASM more performant than this ?

[@kenspicer263]

Does pyscript require python3.10 . I've been trying to point to a third party app installed locally on my machine using the 'paths' directive in the html code but pyscript seems to ignore it. Do you know how this should work?

[@mikeckennedy]

No, it runs out of the browser. To use a library, you have to link to the 2heel on the internet or your static files folder.

[@mayorca_institute]

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

[@alinazang6651]

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.

[@mikeckennedy]

I don't think one tab's webassembly has access to another does it? Do you have a link with details on that?

[@dhkatz_]

You can't access other sites unless they're on the same domain and were created within the existing tab (like with window.open)

[@user-wo5lq1vx7r]

How we can use opencv in pyscript?

[@baby12173]

Hey can pyscript use the DOM. Also can develop a website with pyscript

[@mikeckennedy]

Yep! There is even a chapter in the video exactly about that: 14:58 DOM manipulation and driving the UI with client-side Python

[@sheikhakbar2067]

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!

[@mikeckennedy]

It should be pretty possible with pyscript. I do think it has some maturing before it’s ready for prime time. But this little app does show what might be possible soon.

[@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

[@mikeckennedy]

Thanks! In a more full-featured app, you would sync the remote data to local storage then process that data and show it with pyscript if you're offline and use the api when you are online. But that wasn't the point of this video so I didn't make it that complex.

[@sammyay-man2754]

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

[@RealEstate3D]

Is there any advantage to just using JavaScript? In which situation one should prefer python?

[@anangayman1509]

JS is way faster since python is an interpreted language. BUT IMO, python is way easier to learn and its more intuitive

[@slamdunklabs]

when you need python modules. I think it is data science / math domain

[@GameCrawl]

Is this full stack in a way?

[@mikeckennedy]

Ha, it is in a sense.

[@mtmow]

Can pyscript work with other browser apis?

[@mikeckennedy]

Yeah, I think it has full interop between JavaScript, so it should be able to be used at least in that style.

[@mtmow]

@@mikeckennedy Typescript already won me, but i don't see harm in trying this out for fun, thanks